背景：
前几篇学习了元服务，后面几期就让我们开发简单的元服务吧，里面丰富的内容大家自己加，本期案例 仅供参考
先上本期效果图 ，里面图片自行替换
效果图1代码案例如下：
import { authentication } from '@kit.AccountKit';import { BusinessError } from '@kit.BasicServicesKit';import { hilog } from '@kit.PerformanceAnalysisKit';import { promptAction } from '@kit.ArkUI';@Entry@ComponentV2struct 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 }) } //消息相关 @Builder msgRelated(src: Resource, title: string, onClick?: () => void) { Column() { Image(src).width(24) Text(title).fontSize(11).fontColor('#222222').margin({ top: 8 }) }.onClick(() => { onClick?.() }) } @Builder userInfo() { 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 parameters let loginRequest = new authentication.HuaweiIDProvider().createLoginWithHuaweiIDRequest(); // Whether to forcibly launch the HUAWEI ID login page when the user is not logged in with the HUAWEI ID loginRequest.forceLogin = false; // Execute login request let 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@ComponentV2struct 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 }) } //消息相关 @Builder msgRelated(src: Resource, title: string, onClick?: () => void) { Column() { Image(src).width(24) Text(title).fontSize(11).fontColor('#222222').margin({ top: 8 }) }.onClick(() => { onClick?.() }) } @Builder userInfo() { 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 parameters let loginRequest = new authentication.HuaweiIDProvider().createLoginWithHuaweiIDRequest(); // Whether to forcibly launch the HUAWEI ID login page when the user is not logged in with the HUAWEI ID loginRequest.forceLogin = false; // Execute login request let 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 } }); }}最近文章>>>>>>>>>>>
HarmonyOS NEXT实战：元服务与应用 APP 发布应用市场的详细步骤与流程
若本文对您稍有帮助，诚望您不吝点赞，多谢。
