HarmonyOS Next 商品详情页开发实践（一）

HarmonyOS Next 商品详情页开发实践

概述

在 HarmonyOS Next 应用开发里，商品详情页是电商类应用的重要组成部分。下面将介绍如何构建一个具备商品展示、规格选择、用户评价展示、加入购物车和立即购买等功能的商品详情页面。

核心代码功能及对应代码段

1. 页面初始化与数据获取

在页面即将显示时，获取商品信息和用户当前位置。

aboutToAppear() {
  this.info = this.localDataManager.queryCommodityListById(this.commodityId);
  if (this.info.specifications !== undefined) {
    this.info.specifications.forEach((item: Specification) => {
      if (this.selectKeys !== undefined) {
        let specificationData:ProductSpecification = new ProductSpecification()
        specificationData.name = item.title;
        specificationData.value = item.data[0].key;
        this.selectKeys.push(specificationData)
      }
    });
  }
  getCurrentLocation(getContext(this) as common.UIAbilityContext, (location: geoLocationManager.Location) => {
    if (location) {
      const req:geoLocationManager.ReverseGeoCodeRequest = {"latitude": location.latitude, "longitude": location.longitude, "maxItems": 1};
      geoLocationManager.getAddressesFromLocation(req).then((data) => {
        this.location = data[0].placeName || ''
      })
    }
  })
}

此代码段通过 localDataManager 获取商品信息，并初始化商品规格选择。同时，调用 getCurrentLocation 和 getAddressesFromLocation 获取用户当前位置。

2. 规格选择对话框

提供一个对话框让用户选择商品规格。

dialogController: CustomDialogController = new CustomDialogController({
  builder: SpecificationDialog({
    onFinish: (type: FinishType, count: number, selectKeys: ProductSpecification[]): void =>
      this.onSpecificationFinish(type, count, selectKeys),
    data: $info,
    count: $count,
    selectTags: $selectKeys,
    productOptions:$productOptions
  }),
  autoCancel: true,
  alignment: DialogAlignment.Bottom,
  customStyle: true
})

当用户完成规格选择后，调用 onSpecificationFinish 方法处理结果。