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

3. 用户信息查询与初始化

initQuery方法用于查询用户信息，并根据qrCodeFlag的状态清空购物车或获取购物车信息。同时，调用initTableTitle方法获取店铺信息，并将页面导航到HomePage。

initQuery() {
  this.getUserInfo(this.openId, this.unionId).then((resp) => {
    this.userId = resp.id;
    this.wallet = resp.wallet;
    this.totalScore = resp.totalScore;
    this.userTel = resp.userTel ?? '';
    this.userName = resp.name;
    if (this.qrCodeFlag) {
      clearCarUtil();
    } else {
      getMyCarUtil().then((res) => {
        res.res?.forEach(item => {
          if (item.isMust === Constants.GOODS_MUST) {
            this.mustGoodsCtrl.addIsMust(Number(item.num));
          }
        });
      });
    }
    getCouponListUtil().then((resp: Array<CouponResp>) => {
      this.couponList = resp;
    });
  });
  this.initTableTitle();
  this.pageStack.replacePath({ name: 'HomePage' });
}

private getUserInfo(openid: string, unionId: string): Promise<GetUserInfoResp> {
  return new Promise((resolve, reject) => {
    HttpRequestApi.getUserInfo(this.storeId, openid, unionId)
      .then((resp: GetUserInfoResp) => {
        if (resp.id) {
          console.info(`getUserInfo resp:${JSON.stringify(resp)}.`);
          resolve(resp);
        } else {
          console.error(`getUserInfo error: ${JSON.stringify(resp)}.`);
          reject(resp.msg);
        }
      })
      .catch((e: BusinessError) => {
        console.error(`getUserInfo error: ${JSON.stringify(e)}.`);
        reject(e);
      });
  });
}

4. 店铺信息获取与处理

initTableTitle方法根据tableList的情况获取店铺信息，并更新表单卡片。同时，判断店铺是否处于休息状态，若处于休息状态则弹出营业时间对话框。

initTableTitle() {
  if (!this.tableList.length) {
    return;
  }
  getStoreInfoUtil(this.storeId).then(res => {
    this.storeInfo = res.store;
    AppStorage.setOrCreate('storeInfo', res.store);
    this.updateFormCard();
    this.storeSet = res.storeSet;
    this.reductionList = res.reduction;
    if (this.storeInfo.isRest === Constants.STORE_REST ||
      new Date().getTime() < this.getTimeByHour(this.storeInfo.time) ||
      new Date().getTime() > this.getTimeByHour(this.storeInfo.time4)) {
      if (!this.isRest) {
        this.businessController?.open();
      }
      this.isRest = true;
    } else {
      this.isRest = false;
    }
  });
  if (this.storeType === StoreType.SCAN_TYPE && this.tableId) {
    getTableInfoUtil(this.tableId).then((res) => {
      this.tableInfo = res;
    });
  }
}

updateFormCard() {
  dataPreferences.removePreferencesFromCacheSync(getContext(this), { name: CardManager.KEY_CARD_ID })
  let pref = dataPreferences.getPreferencesSync(getContext(this), { name: CardManager.KEY_CARD_INFO });
  let dataClass = new FormDataClass();
  dataClass.storeName = this.storeInfo.name || '';
  pref.putSync(CardManager.KEY_CARD_INFO, dataClass);
  pref.flush();
  CardManager.get().updateCard(getContext(this), '', dataClass);
}

getTimeByHour(time: string = '') {
  let date = new Date(`${new Date().toLocaleDateString()} ${time}`)
  return date.getTime()
}

5. 页面导航与路由映射

通过PageMap方法实现页面的路由映射，根据不同的页面名称渲染对应的组件。在build方法中使用Navigation组件进行页面导航。

@Builder
PageMap(name: string) {
  if (name === 'HomePage') {
    HomePage();
  } else if (name === 'OrderPage') {
    OrderPage();
  } else if (name === 'MerchantDetailPage') {
    MerchantDetailPage();
  } else if (name === 'GoodDetailPage') {
    GoodDetailPage();
  } else if (name === 'ConfirmOrderPage') {
    ConfirmOrderPage();
  } else if (name === 'FrequentQuestionPage') {
    FrequentQuestionPage();
  } else if (name === 'OrderDetailPage') {
    OrderDetailPage();
  } else if (name === 'HwMap') {
    HwMap();
  } else if (name === 'AnswerPage') {
    AnswerPage();
  } else if (name === 'SelectCouponPage') {
    SelectCouponPage();
  } else if (name === 'MyCouponsPage') {
    MyCouponsPage();
  } else if (name === 'RemarksPage') {
    RemarksPage();
  } else if (name === 'PreviewImagePage') {
    PreviewImagePage();
  }
}

build() {
  Column() {
    Navigation(this.pageStack) {
    }
    .hideTitleBar(true)
    .hideNavBar(true)
    .navDestination(this.PageMap)
    .mode(NavigationMode.Stack)
    .height(Constants.FULL_SIZE)
    .width(Constants.FULL_SIZE);
  }
  .height(Constants.FULL_SIZE)
  .width(Constants.FULL_SIZE);
}

通过以上步骤，在HarmonyOS 5应用中成功搭建了入口组件，并实现了华为账号登录、用户信息查询、店铺信息获取和页面导航等核心功能。