HarmonyOS鸿蒙Next线上Codelabs挑战赛【第一期】网络书城

HarmonyOS鸿蒙Next线上Codelabs挑战赛【第一期】网络书城 应用简介
本文章是参加“HarmonyOS线上Codelabs挑战赛开启，火速加入秀出你的超级「码」力”活动写的一个应用介绍，活动地址：
https://developer.huawei.com/consumer/cn/forum/topic/0204102597850175203?fid=0101587866109860105

活动要求构建一款属于自己的HarmonyOS购物应用，我选择了网上书店。应用开发基于ArkUI中的声明式编程语言ETS。
整个作品功能分为以下部分：

1. 浏览全部书籍，并可以分类查看；
2. 点击书籍条目会进入详细界面，里面详细介绍了书籍主要内容、出版信息和预览图等信息，点击加入购物车，会在购物车中显示；
3. 购物车功能，里面列出了用户加入购物车的所有书籍，选择书籍后，会提示用户总价格；
4. 我的信息页面，列出了用户头像、昵称、账号信息，以及订单信息和常用工具等；

效果预览

功能简介

应用打开，首先是logo页面，1秒后自动进入主界面，似乎大部分网上商城都有这一步。

然后是主界面，

主页顶部是图书分类，点击不同分类会列出不同的书籍，书籍图片展示区加了“双十一优惠”提示，为了迎合目前的双十一活动，右侧是书名和价格，以及用户的评价数。

点击书籍条目，会进入对应书籍详细信息页面，如下

详情页展示了书籍简介、出版信息和书籍详情。点击“加入购物车”，会提示“加入购物车成功”，并自动返回上一级。

购物车页面，列出了用户加入购物车的全部书籍，选择不同的书籍，合计一栏会计算出总价。

我的页面列出了一些用户信息和常用功能。

代码解析

从LOGO页面切换到主页面，使用了一个动画加超时方法。

animateTo({
  duration: 100,
  curve: curves.cubicBezier(0.4, 0, 1, 1),
  delay: 100,
  onFinish: () => {
    setTimeout(() => {
      router.replace({ url: 'pages/HomePage' })
    }, 1000)
  }
}, () => {
})

主页底部导航栏，在布局组件的时候，用了一个@Builder修饰器，这就像是一个构建子函数，抽象好后别的地方可以多次调用。

@Component
struct HomeBottom {
  @Consume currentPage: number

  [@Builder](/user/Builder) RowItem(name: string, iconPath: string, selectIconPath: string, selected: boolean) {
    Column() {
      Image($rawfile(selected ? selectIconPath : iconPath))
        .objectFit(ImageFit.Cover)
        .height(30)
        .width(30)
        .renderMode(ImageRenderMode.Original)
      Text(name)
        .fontSize(15)
        .fontWeight(FontWeight.Bold)
        .padding(5)
        .fontColor(selected ? Color.Red : Color.Black)
    }
    .justifyContent(FlexAlign.Start)
    .height(60)
    .onClick(()=> {
      if (name == '主页') {
        this.currentPage = 1
      } else if (name == '购物车') {
        this.currentPage = 2
//        console.log('chart was selected.')
      } else if (name == '我的') {
        this.currentPage = 3
      }
    })
  }

  build() {
    Row(){
      this.RowItem('主页', 'nav/icon-home.png', 'nav/icon-buy.png', this.currentPage == 1)
      this.RowItem('购物车', 'nav/icon-shopping-cart.png', 'nav/icon-shopping-cart-select.png', this.currentPage == 2)
      this.RowItem('我的', 'nav/icon-my.png', 'nav/icon-my-select.png', this.currentPage == 3)
    }
    .alignItems(VerticalAlign.Bottom)
    .height(60)
    .width('100%')
    .margin({top:5 ,bottom:5})
    .justifyContent(FlexAlign.SpaceAround)
  }
}

“加入购物车”功能的实现，是通过AppStorage功能达到应用级存储的，这样别的地方就可以直接调用了。

  Text('加入购物车')
    .height(25)
    .fontSize(20)
    .fontColor(Color.White)
    .onClick(()=> {

      AppStorage.Set<GoodsData[]>('cart', addToCart(this.bookData['isbn']))
      prompt.showToast({
        message: '商品添加成功！',
        duration: 1000,
      });

      setTimeout(() => {
        router.back()
      }, 500)
    })
}
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.backgroundColor(Color.Red)
.width('100%')
.height(40)

项目总结

通过这次实践，对ArkUI的布局技巧有了更深一步的了解，同时也熟悉了应用级AppStorage的用法。