HarmonyOS NEXT 实战之元服务：静态多案例效果（一）

背景：

前几篇学习了元服务，后面几期就让我们开发简单的元服务吧，里面丰富的内容大家自己加，本期案例仅供参考

先上本期效果图，里面图片自行替换

在这里插入图片描述

效果图1代码案例如下：

import { authentication } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { promptAction } from '@kit.ArkUI';@Entry
@ComponentV2
struct Index {build() {Column() {Column() {//用户信息this.userInfo()}.backgroundColor('#4487EF').borderRadius(4)Row() {Text($r('app.string.EntryAbility_label')).fontSize(18).fontColor(Color.Black)Text('查看更多>').fontSize(15).fontColor(Color.Black)}.justifyContent(FlexAlign.SpaceBetween).width('100%').padding(10).onClick(() => {})Column() {Row() {this.msgRelated($r('app.media.1'), '新能源导航', () => {promptAction.showToast({ message: '新能源导航' })})this.msgRelated($r('app.media.j2'), '货车', () => {})this.msgRelated($r('app.media.j3'), '摩托车', () => {})this.msgRelated($r('app.media.j4'), '骑行', () => {})}.width('95%').height(80).margin({top: 10,left: 12,right: 12}).backgroundColor(Color.White).justifyContent(FlexAlign.SpaceAround)Row() {this.msgRelated($r('app.media.j5'), '卫星求救', () => {})this.msgRelated($r('app.media.j7'), '打车', () => {})this.msgRelated($r('app.media.j6'), '实时公交', () => {})}.width('95%').height(80).margin({bottom: 4,left: 12,right: 12}).backgroundColor(Color.White).justifyContent(FlexAlign.SpaceAround)}.width('95%').height(200).margin({top: 10,bottom: 4,left: 12,right: 12}).borderRadius(10).borderWidth(1).borderColor("#F0F0F0").backgroundColor(Color.White).justifyContent(FlexAlign.SpaceAround)}.margin({ top: 48 })}//消息相关@BuildermsgRelated(src: Resource, title: string, onClick?: () => void) {Column() {Image(src).width(24)Text(title).fontSize(11).fontColor('#222222').margin({ top: 8 })}.onClick(() => {onClick?.()})}@BuilderuserInfo() {Row() {Image($r('app.media.ic_my_avatar')).width(44)Column() {Text('张三').fontSize(18).fontColor(Color.White)Text('VIP标识').fontSize(10).margin({ top: 5 }).fontColor(Color.Yellow)}.alignItems(HorizontalAlign.Start).layoutWeight(1).margin({ left: 8 })Text() {Span('会员剩余')Span(' 9 ').fontSize(18).fontColor("#FEDB9B")Span('天')}.height(32).fontColor("#FEDB9B").fontSize(10).padding({ left: 16, right: 12 }).borderRadius({ topLeft: 20, bottomLeft: 20 })//渐变色.linearGradient({angle: 135,colors: [["#1D2432", 0.2], ['#3E4A61', 0.8]]})}.padding({ bottom: 10 }).width('100%').margin({ top: 46, left: 12 }).onClick(() => {})}aboutToAppear() {hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');this.loginWithHuaweiID();}/*** Sample code for using HUAWEI ID to log in to atomic service.* According to the Atomic Service Review Guide, when a atomic service has an account system,* the option to log in with a HUAWEI ID must be provided.* The following presets the atomic service to use the HUAWEI ID silent login function.* To enable the atomic service to log in successfully using the HUAWEI ID, please refer* to the HarmonyOS HUAWEI ID Access Guide to configure the client ID and fingerprint certificate.*/private loginWithHuaweiID() {// Create a login request and set parameterslet loginRequest = new authentication.HuaweiIDProvider().createLoginWithHuaweiIDRequest();// Whether to forcibly launch the HUAWEI ID login page when the user is not logged in with the HUAWEI IDloginRequest.forceLogin = false;// Execute login requestlet controller = new authentication.AuthenticationController();controller.executeRequest(loginRequest).then((data) => {let loginWithHuaweiIDResponse = data as authentication.LoginWithHuaweiIDResponse;let authCode = loginWithHuaweiIDResponse.data?.authorizationCode;// Send authCode to the backend in exchange for unionID, session}).catch((error: BusinessError) => {hilog.error(0x0000, 'testTag', 'error: %{public}s', JSON.stringify(error));if (error.code == authentication.AuthenticationErrorCode.ACCOUNT_NOT_LOGGED_IN) {// HUAWEI ID is not logged in, it is recommended to jump to the login guide page}});}
}

效果图2代码案例如下：

import { authentication } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { promptAction } from '@kit.ArkUI';@Entry
@ComponentV2
struct Index {build() {Column() {Column() {Text($r('app.string.EntryAbility_label')).margin({ left: 12 }).fontSize(18).fontColor(Color.White)//用户信息this.userInfo()}.backgroundColor('#35B6BD').borderRadius(4).alignItems(HorizontalAlign.Start).padding({ top: 8 })Row() {Text('机动车出行').fontSize(18).fontColor(Color.Black)Text('查看更多 >').fontSize(15).fontColor(Color.Black)}.justifyContent(FlexAlign.SpaceBetween).width('100%').padding(10).onClick(() => {})Column() {Row() {this.msgRelated($r('app.media.j1'), '城市道路', () => {promptAction.showToast({ message: '城市道路' })})this.msgRelated($r('app.media.j2'), '高速公路', () => {})this.msgRelated($r('app.media.j3'), '乡村道路', () => {})this.msgRelated($r('app.media.j4'), '山区道路', () => {})}.width('95%').height(80).margin({top: 10,left: 12,right: 12}).backgroundColor(Color.White).justifyContent(FlexAlign.SpaceAround)}.width('95%').height(80).margin({top: 10,bottom: 4,left: 12,right: 12}).borderRadius(10).borderWidth(1).borderColor('#35B6BD').backgroundColor(Color.White).justifyContent(FlexAlign.SpaceAround)Row() {Text('非机动车出行').fontSize(18).fontColor(Color.Black)Text('查看更多 >').fontSize(15).fontColor(Color.Black)}.justifyContent(FlexAlign.SpaceBetween).width('100%').padding(10).onClick(() => {})Column() {Row() {this.msgRelated($r('app.media.j5'), '自行车道', () => {})this.msgRelated($r('app.media.j6'), '电动自行车道', () => {})this.msgRelated($r('app.media.j7'), '人行车道', () => {})}.width('95%').height(80).margin({bottom: 4,left: 12,right: 12}).backgroundColor(Color.White).justifyContent(FlexAlign.SpaceAround)}.width('95%').height(80).margin({top: 10,bottom: 4,left: 12,right: 12}).borderRadius(10).borderWidth(1).borderColor('#AEEA00').backgroundColor(Color.White).justifyContent(FlexAlign.SpaceAround)Row() {Text('特种车辆出行').fontSize(18).fontColor(Color.Black)Text('查看更多 >').fontSize(15).fontColor(Color.Black)}.justifyContent(FlexAlign.SpaceBetween).width('100%').padding(10).onClick(() => {})Column() {Row() {this.msgRelated($r('app.media.j8'), '应急救援车辆', () => {})this.msgRelated($r('app.media.j9'), '工程作业车辆', () => {})}.width('95%').height(80).margin({bottom: 4,left: 12,right: 12}).backgroundColor(Color.White).justifyContent(FlexAlign.SpaceAround)}.width('95%').height(80).margin({top: 10,bottom: 4,left: 12,right: 12}).borderRadius(10).borderWidth(1).borderColor('RGB(255, 255, 0)').backgroundColor(Color.White).justifyContent(FlexAlign.SpaceAround)}.margin({ top: 48 })}//消息相关@BuildermsgRelated(src: Resource, title: string, onClick?: () => void) {Column() {Image(src).width(24)Text(title).fontSize(11).fontColor('#222222').margin({ top: 8 })}.onClick(() => {onClick?.()})}@BuilderuserInfo() {Row() {Image($r('app.media.ic_my_avatar')).width(44)Column() {Text('小明').fontSize(18).fontColor(Color.White)Text('150****1178').fontSize(10).margin({ top: 5 }).fontColor(Color.Yellow)}.alignItems(HorizontalAlign.Start).layoutWeight(1).margin({ left: 8 })}.padding({ bottom: 10 }).width('100%').margin({ top: 46, left: 12 }).onClick(() => {})}aboutToAppear() {hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');this.loginWithHuaweiID();}/*** Sample code for using HUAWEI ID to log in to atomic service.* According to the Atomic Service Review Guide, when a atomic service has an account system,* the option to log in with a HUAWEI ID must be provided.* The following presets the atomic service to use the HUAWEI ID silent login function.* To enable the atomic service to log in successfully using the HUAWEI ID, please refer* to the HarmonyOS HUAWEI ID Access Guide to configure the client ID and fingerprint certificate.*/private loginWithHuaweiID() {// Create a login request and set parameterslet loginRequest = new authentication.HuaweiIDProvider().createLoginWithHuaweiIDRequest();// Whether to forcibly launch the HUAWEI ID login page when the user is not logged in with the HUAWEI IDloginRequest.forceLogin = false;// Execute login requestlet controller = new authentication.AuthenticationController();controller.executeRequest(loginRequest).then((data) => {let loginWithHuaweiIDResponse = data as authentication.LoginWithHuaweiIDResponse;let authCode = loginWithHuaweiIDResponse.data?.authorizationCode;// Send authCode to the backend in exchange for unionID, session}).catch((error: BusinessError) => {hilog.error(0x0000, 'testTag', 'error: %{public}s', JSON.stringify(error));if (error.code == authentication.AuthenticationErrorCode.ACCOUNT_NOT_LOGGED_IN) {// HUAWEI ID is not logged in, it is recommended to jump to the login guide page}});}
}