HarmonyOS 鸿蒙Next线上Codelabs挑战赛第一期 ShoppingApp应用开发经验分享

HarmonyOS 鸿蒙Next线上Codelabs挑战赛第一期 ShoppingApp应用开发经验分享

项目介绍

众所周知，先上一个链接 ShoppingApp应用 。

在HarmonyOS线上Codelabs挑战赛举办的第一期，我在期内根据比赛要求开发了一款购物应用，本应用使用的是ArkUI框架，在API9和stage模型下开发完成的。这个比赛很贴心地给大伙准备了好多开发小提示。（本应用所用素材皆为学习所用，大伙不要用于商业途径~）

在本购物应用中，基本实现了商品分类、商品列表展示、商品详情、商品加购与移除购物车，以及简单搭建我的页面。在代码上使用的是基于TS扩展的声明式开发范式，因为ts有强类型语言的特征，基于万物皆对象的思想去设计和架构，对于写项目来说挺好的。就是代码提示有点烦，没有js这么爽，不过写习惯了就很容易写了，大家可以多学习一下这个框架~

所用工具的版本

demo展示

核心代码介绍

首页部分

首先底部是通过Tab组件实现的一个导航栏功能，通过一个page实现多界面切换

商品列表的展示

是使用了Grid组件，一个网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。其中，只要通过columnsTemplate属性使商品显示2列，然后使用默认的rowsTemplate字段，可以让容器里实现滚动效果。

上方需要根据商品分类显示对应的商品内容，那么这时候需要封装一下，提供一个currentGoodsType属性双向绑定，并且在组件里监听其变化，然后实现点击不同的分类tab，可以通知到该组件的字段发生变化，然后执行build渲染。最后给每一个GridItem绑定一个点击事件，通过事件调用router方法实现切换到商品详情页面。

商品详情

从图中可知布局比较简单，整体是通过Column组件实现每一部分横向排列的。下面的小卡片形式的组件看上去都比较类似，有一点区别比如背景色，padding属性等，这时候可以封装在一起，对外提供可填写的参数去修改样式。里面很多内容都可以封装成组件来使用的。而要让商品详情能够根据数据动态显示，这个是通过router传递的参数id过来，然后在详情页上访问详情数据从而得到的。

商品加购与移除

商品加购这块比较复杂，因为要把加购的goodId存储起来，我是用AppStorage#Get、AppStorage#Set方法来实现的，但是中间遇到一些问题，比如不能存[]结构的数据，这个还没找到答案，如果有大神知道可以告诉我~应该文档有的，还没有空去查。除此之外，加购的商品种类总数需要实时更新到icom的小红点上以及要同步更新到购物车界面，这个除了是通过AppStorage实现以外，还需要在相应的组件通过@consume以及@watch监听加购的id列表，从而通过双向绑定，算出来并且刷新子组件里的build方法。

我的界面

因为这个界面不是很重点，所以就不花太多时间打磨了。结构上也比较简单，常用Column和Row实现行列组合，然后每个item封装成一个组件使用。

操作步骤

主页即本应用的首屏打开界面，运行后就可以看到各个分类的商品简略信息了。

然后点击商品即可进入详情界面，目前可以使用的是加购、购买功能，底部的按钮可以跳转到购物车。

在购物车中，可以对加购的商品进行数量的调整，也可以删除商品，最终会对选择的商品进行金额结算。

个人感想

笔者刚接触HarmonyOS开发时间很短，第一次参加这种挑战赛，同期有问题很快就有主办方大佬或者其他大佬帮忙解决了，真心感觉很棒！ArkUI框架给我的感觉就是和常规编写的html/css不大一样，开发习惯和其他差很远；编写css感觉有点累，虽然链式调用看着很爽，但感觉行数好多显得臃肿，或许这就是声明式UI开发的不一样吧。开发工具目前体验也有点差，比如模拟器调试问题；希望可以继续完善好。值得点赞的就是附带了API的小窗口，这个太方便了。可能习惯了就好很多。