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

背景：

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

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

效果图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@Componentstruct 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 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      }    });  }}

AddressExchangeViewComponent代码

import curves from '@ohos.curves';import { promptAction } from '@kit.ArkUI';@Preview@ComponentV2export 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.swap          animateTo({ 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'))  }  //消息相关  @Builder  msgRelated(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} 日`  }}

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

HarmonyOS NEXT实战：元服务与应用 APP 发布应用市场的详细步骤与流程

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

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

背景：

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

效果图1完整代码案例如下：

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

有兴趣的同学可以点击查看源码

推荐阅读更多精彩内容

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

背景：

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

效果图1完整代码案例如下：

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

有兴趣的同学可以点击查看源码

推荐阅读更多精彩内容

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