背景：

前幾篇學習了元服務，后面幾期就讓我們開發簡單的元服務吧，里面豐富的內容大家自己加，本期案例 僅供參考

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

效果圖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.Center)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
@Component
export struct AddressExchangeViewComponent {@State rotateAngle: number = 0;@State translateX: number = 0;@State 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: '點了'});})}.width(this.JWidth).borderWidth(1).borderRadius(8).padding(8).height(60)Row({ space: 15 }) {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: '點了'});})Button($r('app.string.address_exchange_search_ticket')).fontColor(Color.White).height(40).backgroundColor('#6486FF').width(this.JWidth).onClick(() => {promptAction.showToast({message: '今日機器出現故障，請找工作室人員解決'});})Row({ space: 10 }) {Row() {Text('出差 返現').fontSize(13).fontColor('#222222')Toggle({ type: ToggleType.Checkbox, isOn: false })}Row() {Row() {Text('帶兒童/嬰兒').fontSize(13).fontColor('#222222')Toggle({ type: ToggleType.Checkbox, isOn: true })}Row() {Text('學生票').fontSize(13).fontColor('#222222')Toggle({ type: ToggleType.Checkbox, isOn: false })}}}.width('100%').justifyContent(FlexAlign.SpaceBetween)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(10).fontColor('#CAC8C9')Text('￥600').fontSize(15).fontColor(Color.Red).fontWeight(FontWeight.Bold).margin({ left: 8 })}.width('100%').justifyContent(FlexAlign.SpaceBetween)Text() {Span('原價  ').fontColor('#222222').fontSize(15)Span('￥1000').fontColor(Color.Red).fontSize(15)}.fontWeight(FontWeight.Bold).margin({ left: 8 })}.width('100%').borderRadius(4).backgroundColor('#F5F9F8').padding(8).alignItems(HorizontalAlign.Start)}Row({ space: 20 }) {Column({ space: 10 }) {Text('北京   ->   天津').fontWeight(FontWeight.Bold).fontSize(13).fontColor('#5A5A5A')Row() {Text('12月5日 | 周四').fontSize(10).fontColor('#CAC8C9')Text('￥300').fontSize(15).fontColor(Color.Red).fontWeight(FontWeight.Bold).margin({ left: 8 })}.width('100%').justifyContent(FlexAlign.SpaceBetween)Text() {Span('原價  ').fontColor('#222222').fontSize(15)Span('￥400').fontColor(Color.Red).fontSize(15)}.fontWeight(FontWeight.Bold).margin({ left: 8 })}.width('100%').borderRadius(4).backgroundColor('#F5F9F8').padding(8).alignItems(HorizontalAlign.Start)}}.width($r('app.string.address_exchange_content_size')).height(178).margin($r('app.string.ohos_id_card_margin_start'))}private getDate() {const now = new Date();const year = now.getFullYear();const month = now.getMonth() + 1; // 注意：月份是從0開始計數的const day = now.getDate();const hours = now.getHours();const minutes = now.getMinutes();const seconds = now.getSeconds();return `${year} 年 ${month} 月 ${day} 日`}
}

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

HarmonyOS NEXT實戰：元服務與應用 APP 發布應用市場的詳細步驟與流程

若本文對您稍有幫助，誠望您不吝點贊，多謝。

有興趣的同學可以點擊查看源碼

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