Harmonyos5应用开发实战——应用入口组件搭建与功能实现（part1）

Harmonyos5应用开发实战——应用入口组件搭建与功能实现

文章内容概要

本文聚焦于HarmonyOS 5应用开发中入口组件的搭建与核心功能实现。详细介绍了入口组件如何进行华为账号登录、用户信息查询、店铺信息获取、页面导航等功能，以及如何处理权限和状态管理。

核心功能介绍

1. 组件状态与属性定义

在组件中定义了多个状态变量和属性，用于存储应用运行过程中的各种信息，如窗口高度、店铺ID、用户信息等，并使用@Provide和@StorageProp等装饰器进行数据的传递和存储。

@Entry
@Component
struct Index {
  @State windowTopHeight: number = AppStorage.get('windowTopHeight') as number || 38.77;
  @StorageProp('storeId') @Watch('initQuery') storeId: string = '';
  @StorageProp('storeType') storeType: number = 1;
  @StorageLink('userId') userId: string = '';
  @StorageLink('authCode') authCode: string = '';
  @StorageLink('tableId') tableId: string = '';
  @StorageLink('userTel') userTel: string = '';
  @StorageLink('userName') userName: string = '';
  @StorageLink('totalScore') totalScore: string = '';
  @StorageLink('wallet') wallet: string = '';
  @StorageProp('qrCodeFlag') qrCodeFlag: boolean = false;
  @StorageLink('isRest') isRest: boolean = false;
  @StorageProp('tableList') @Watch('initTableTitle') tableList: Array<TableTitle> = [];
  @Provide('storeInfo') storeInfo: StoreInfo = new StoreInfo();
  @Provide('storeSet') storeSet: StoreSet = new StoreSet();
  @Provide('reductionList') reductionList: Array<Reduction> = [];
  @Provide('pageStack') pageStack: NavPathStack = new NavPathStack();
  @Provide('tableInfo') tableInfo?: GetTableInfoResp = undefined;
  @Provide('mustGoodsCtrl') mustGoodsCtrl: MustGoodsController = new MustGoodsController();
  @Provide('orderId') orderId?: string = undefined;
  @Provide('couponList') couponList?: Array<CouponResp> = [];
  @State openId: string = '';
  @State unionId: string = '';
  businessController: CustomDialogController = new CustomDialogController({
    builder: BusinessTimeDialog(),
    width: 296,
    height: 348,
  });
}

2. 华为账号登录

在组件即将显示时，调用loginWithHuaweiID方法进行华为账号的静默登录。若登录成功，获取用户的openId、unionId和authCode，并根据storeId的情况调用initQuery方法进行后续操作。

aboutToAppear() {
  this.loginWithHuaweiID().then(res => {
    this.openId = res.openId;
    this.unionId = res.unionId;
    this.authCode = res.authCode;
    if (this.storeId) {
      this.initQuery();
    } else {
      console.info(`initQuery is from watch.`);
    }
  });
}

private loginWithHuaweiID(): Promise<HuaweiIDResp> {
  return new Promise((resolve, reject) => {
    let loginRequest = new authentication.HuaweiIDProvider().createLoginWithHuaweiIDRequest();
    loginRequest.forceLogin = false;
    let controller = new authentication.AuthenticationController();
    controller.executeRequest(loginRequest).then((data) => {
      let loginWithHuaweiIDResponse = data as authentication.LoginWithHuaweiIDResponse;
      let authCode = loginWithHuaweiIDResponse.data?.authorizationCode;
      let openId = loginWithHuaweiIDResponse.data?.openID;
      let unionId = loginWithHuaweiIDResponse.data?.unionID;
      resolve({ openId, unionId, authCode } as HuaweiIDResp);
    }).catch((error: BusinessError) => {
      hilog.error(0x0000, 'testTag', 'error: %{public}s', JSON.stringify(error));
      if (error.code === authentication.AuthenticationErrorCode.ACCOUNT_NOT_LOGGED_IN) {
        promptAction.showToast({ message: $r('app.string.login_account') })
      }
      reject(error);
    });
  });
}