背景：

前幾篇學(xué)習(xí)了元服務(wù)，后面幾期就讓我們開發(fā)簡單的元服務(wù)吧，里面豐富的內(nèi)容大家自己加，本期案例 僅供參考

先上本期效果圖 ，里面圖片自行替換

效果圖1完整代碼案例如下：

• Index代碼

import { authentication } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { AddressExchangeViewComponent } from './AddressExchangeViewComponent';export const DATA_CONFIG: Record<string, number> = {'NUMBER_LEN': 7,'DURATION_TIME': 200,'MILLENNIAL_LEN': 3
}export const STYLE_CONFIG: Record<string, number> = {'ITEM_GUTTER': 12,'ITEM_HEIGHT': 26,'TEXT_MARGIN': 2,'PADDING_TOP': 32
}
@Entry
@Component
struct Index {build() {Column({ space: STYLE_CONFIG.ITEM_GUTTER }) {Text($r('app.string.EntryAbility_label')).fontColor(Color.White).fontSize($r('sys.float.ohos_id_text_size_headline8')).width($r('app.string.digital_scroll_animation_max_size')).textAlign(TextAlign.Start).margin({left:30})AddressExchangeViewComponent()}.padding({top: STYLE_CONFIG.PADDING_TOP}).margin({ top: 60 }).width($r('app.string.digital_scroll_animation_max_size')).height($r('app.string.digital_scroll_animation_max_size')).linearGradient({colors: [[$r('app.color.digital_scroll_animation_background_color'), 0.0],[$r('sys.color.ohos_id_color_background'), 0.3]]})}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}});}
}

• AddressExchangeViewComponent代碼

import curves from '@ohos.curves';
import { promptAction } from '@kit.ArkUI';@Preview
@ComponentV2
export struct AddressExchangeViewComponent {@Local rotateAngle: number = 0;@Local translateX: number = 0;@Local swap: boolean = false;private JWidth: number = 300;build() {Column({ space: 15 }) {Row() {Text($r('app.string.address_exchange_address_left')).translate({ x: this.translateX }).width("40%").textAlign(this.swap ? TextAlign.End : TextAlign.Start).onClick(() => {promptAction.showToast({message: '北京',});})Stack() {Image($r('app.media.address_exchange_airplane')).size({height: 16,width: 16})Image($r('app.media.address_exchange_recycle')).size({height: 38,width: 38}).rotate({ angle: this.rotateAngle }).animation({curve: Curve.EaseOut,playMode: PlayMode.Normal,})}.width("20%").onClick(() => {this.swap = !this.swapanimateTo({ curve: curves.springMotion() }, () => {if (this.swap) {this.translateX = this.JWidth * 0.5;} else {this.translateX = 0}})this.rotateAngle += 180;})Text('深圳').translate({ x: -this.translateX }).width("40%").textAlign(this.swap ? TextAlign.Start : TextAlign.End).onClick(() => {promptAction.showToast({message: '點(diǎn)了'});})}.width(this.JWidth).padding(8).height(60)Row({ space: 16 }) {Text(this.getDate()).fontSize($r('app.string.ohos_id_text_size_headline')).fontWeight(FontWeight.Medium).height(30)Text($r('app.string.address_exchange_week')).height(30)}.width(this.JWidth).onClick(() => {promptAction.showToast({message:'點(diǎn)了',});})Button($r('app.string.address_exchange_search_ticket')).fontColor(Color.White).height(40).backgroundColor('#00B780').width(this.JWidth).onClick(() => {promptAction.showToast({message: '今日機(jī)器出現(xiàn)故障，請(qǐng)找工作室人員解決',});})Row({ space: 10 }) {Row() {Row() {Text('帶兒童/嬰兒').fontSize(13).fontColor('#222222')Toggle({ type: ToggleType.Checkbox, isOn: true })}Row() {Text('學(xué)生票').fontSize(13).fontColor('#222222')Toggle({ type: ToggleType.Checkbox, isOn: false })}}}.width('100%').justifyContent(FlexAlign.SpaceBetween)Row() {Text('VIP專享服務(wù)').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'), '天天領(lǐng)劵', () => {})this.msgRelated($r('app.media.j2'), '低價(jià)監(jiān)控', () => {})this.msgRelated($r('app.media.j3'), '空鐵聯(lián)訂', () => {})}.width('95%').height(80).margin({bottom: 4,left: 12,right: 12}).backgroundColor(Color.White).justifyContent(FlexAlign.SpaceAround)}.width('95%').height(80).margin({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(() => {})Row({ space: 20 }) {Column({ space: 10 }) {Text('上海   ->   美國').fontWeight(FontWeight.Bold).fontSize(13).fontColor('#5A5A5A')Row() {Text('12月3日 | 周一').fontSize(12).fontColor('#CAC8C9')Text('￥1600') {Span('折扣價(jià)  ').fontColor('#222222').fontSize(15)Span('￥1600').fontColor(Color.Red).fontSize(15).fontWeight(FontWeight.Regular)}.fontSize(15).fontColor(Color.Red).fontWeight(FontWeight.Bold).margin({ left: 8 })}.width('100%').justifyContent(FlexAlign.SpaceBetween)Text() {Span('原價(jià)  ').fontColor('#222222').fontSize(15)Span('￥2000').fontColor(Color.Red).fontSize(15).fontStyle(FontStyle.Italic)}.fontWeight(FontWeight.Bold).margin({ left: 8 })}.width('100%').borderRadius(18).backgroundColor('#F5F9F8').padding(8).borderWidth(2).borderColor('#00B780').alignItems(HorizontalAlign.Start)}}.width($r('app.string.address_exchange_content_size')).height(178).margin($r('app.string.ohos_id_card_margin_start'))}//消息相關(guān)@BuildermsgRelated(src: Resource, title: string, onClick?: () => void) {Column() {Image(src).width(24)Text(title).fontSize(11).fontColor('#222222').margin({ top: 8 })}.onClick(() => {onClick?.()})}private getDate() {const now = new Date();const year = now.getFullYear();const month = now.getMonth() + 1; // 注意：月份是從0開始計(jì)數(shù)的const day = now.getDate();return `${year} 年 ${month} 月 ${day} 日`}
}

最近文章>>>>>>>>>>>

HarmonyOS NEXT實(shí)戰(zhàn)：元服務(wù)與應(yīng)用 APP 發(fā)布應(yīng)用市場(chǎng)的詳細(xì)步驟與流程

若本文對(duì)您稍有幫助，誠望您不吝點(diǎn)贊，多謝。

有興趣的同學(xué)可以點(diǎn)擊查看源碼

• gitee：https://gitee.com/jiaojiaoone/explore-harmony-next/tree/case%2Fwanandroid/
• github：https://github.com/JasonYinH/ExploreHarmonyNext.git