HarmonyOS鸿蒙Next第一课“营”在暑期：Codelabs挑战赛我的商城

应用简介

本文是参加“【Codelabs挑战赛】<HarmonyOS第一课>秀出你的创意，赢取惊喜好礼！”活动写的一个应用介绍，活动地址：

https://developer.huawei.com/consumer/cn/forum/topic/0202126442505871313?fid=0101562279236410779

现在这个活动改为“音乐列表”了，但之前活动是购物商城类应用，所以这篇文章是当时写的”我的商城”应用，简单运用一些HarmonyOS应用开发的基础知识构建的一个购物类应用，以商品列表DEMO为基础，完善了活动要求的各项功能。

效果预览

简要介绍

以下简单说明一下活动要求实现的各个功能。

1.点击列表项跳转到对应详情Page页

2.详情Page页可以上下滑动

3.点击左上角返回按钮，返回到列表页

4.Swiper显示4张图片

5.商品价格、描述等和点击的列表项一致

6.用户评价通过List+懒加载的方式展示

7.完成ArkTS卡片

代码分析

1.页面跳转

页面间跳转是通过startAbility实现的，同时还可以传递一个want参数，便于携带一些变量的值。

const want = {
  bundleName: getContext(context).applicationInfo.name,
  abilityName: DETAILS_ABILITY_NAME,
  parameters: {
    position: index
  }
};
try {
  context.startAbility(want);
} catch (error) {
  hilog.error(HOME_PAGE_DOMAIN, TAG, '%s', error);
}

此处的context实际是getContext(this) as AppContext.Context;

2.组件间参数传递

参数传递通过在父组件中设置@State装饰器修饰变量，在子组件中设置@prop装饰的变量，然后调用子组件时通过参数传递。

父组件

@Entry
@Component
struct DetailsPage {
  private goodsDetails: GoodsListItemType;
  [@State](/user/State) commentCount: string = "";
  [@State](/user/State) commentPercent: string = "";

  aboutToAppear() {
    this.goodsDetails = viewModel.loadDetails(position);

    this.commentCount = this.goodsDetails.comment_count;
    this.commentPercent = this.goodsDetails.comment_percent;
  }
}

子组件

@Component
export default struct CommentsHeaderComponent {
  @Prop commentCount: string;
  @Prop commentPercent: string;
}

组件调用

CardComponent() {
  CommentsHeaderComponent({ commentCount: this.commentCount, commentPercent: this.commentPercent })
  CommentsComponent().margin({ top: DetailsPageStyle.COMMENT_LIST_MARGIN_TOP })
}

3.扩展样式的选择，@Extend还是@Style？

针对组件属性反复设置，系统给了解决方案，可以通过扩展样式写到一个函数里，实现多次复用，避免了大量代码重复设置。但@Style只支持通用属性的扩展，而@Extend可以扩展原生组件的样式。

例如，以下的扩展只能用Extend，因为里面的样式只是针对Text组件的，和其他组件没有通用性。

[@Extend](/user/Extend)(Text) function commentText () {
  .lineHeight(CommentHeader.LINE_HEIGHT)
  .textOverflow({ overflow: TextOverflow.Ellipsis })
  .textCase(TextCase.UpperCase)
  .fontSize(AppFontSize.MIDDLE)
  .fontColor($r('app.color.text'))
  .fontWeight(AppFontWeight.BOLDER)
  .textAlign(TextAlign.Start)
}

又比如，这里的Extend实际也可以用Style代替。

[@Extend](/user/Extend)(Image) function setTopImageStyle() {
  .width(DetailsPageStyle.TOP_IMAGE_SIZE)
  .height(DetailsPageStyle.TOP_IMAGE_SIZE)
}

@Styles function setTopImageStyle() {
  .width(DetailsPageStyle.TOP_IMAGE_SIZE)
  .height(DetailsPageStyle.TOP_IMAGE_SIZE)
}

总结

通过这次操作实践，不仅复习了常用组件的基本用法，而且还对一些新技能有了深入的了解，例如，页面间携带参数跳转，懒加载方式的实现以及应用全局的状态管理方法等。