当前位置：首页 > news >正文

HarmonyOS NEXT 实战之元服务：静态案例效果---查看国际航班服务

news 2025/7/8 3:30:15

背景：

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

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

在这里插入图片描述

效果图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: '点了'});})}.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:'点了',});})Button($r('app.string.address_exchange_search_ticket')).fontColor(Color.White).height(40).backgroundColor('#00B780').width(this.JWidth).onClick(() => {promptAction.showToast({message: '今日机器出现故障，请找工作室人员解决',});})Row({ space: 10 }) {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('VIP专享服务').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'), '天天领劵', () => {})this.msgRelated($r('app.media.j2'), '低价监控', () => {})this.msgRelated($r('app.media.j3'), '空铁联订', () => {})}.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('折扣价  ').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('原价  ').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'))}//消息相关@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开始计数的const day = now.getDate();return `${year} 年 ${month} 月 ${day} 日`}
}