HarmonyOS 鸿蒙Next 线上Codelabs挑战赛第一期——AtomLabShopping

一、简介

HarmonyOS线上Codelabs挑战赛开启，本期主题：构建一款属于你的 HarmonyOS 购物应用，参考官方提供的HarmonyOS Codelabs样例，和之前做的一款《邮印象》App（HarmonyOS ArkUI入门训练营—健康生活实战#邮印象ArkUI版）进行功能整合，使用Stage模型的设计，重新开发了一款Stage模型的购物应用Demo。

二、功能

2. 分类

![分类]

3. 购物车

![购物车]

4. 我的

![我的]

三、开发

核心代码

• 导航栏

Navigation() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        ForEach(this.toolBarConfigs, (item: ToolBarData, index) => {
          TabContent() {
            if (index === HOME) {
              HomePage()
            } else if (index === NEW) {
              NewPage()
            } else if (index === CAR) {
              ShoppingCart()
            } else if (index === USER) {
              UserPage()
            } else{
              this.HolderPage(item?.text)
            }
          }
        }, item => item.toString())
      }.setTabStyle()
    }
    .toolBar(this.ToolBarBuilder())
    .setNavStyle()

• 列表

Scroll() {
      Grid() {
        LazyForEach(new MyDataSource(this.productItems), (item: ProductData, index) => {
          GridItem() {
            ProductGridItem({ productItem: item })
          }
//          .key('productGridItem' + (index + 1))
        }, (item: ProductData) => item.id.toString())
      }
      .rowsTemplate(this.gridRowTemplate)
      .columnsTemplate('1fr 1fr')
      .columnsGap(8)
      .rowsGap(8)
      .height(this.heightValue)
    }
    .scrollBar(BarState.Off)
    .padding({ left: 16, right: 16 })

• 页面跳转

  public startDetailsAbility(context, index: number): void {
    const want = {
      bundleName: 'com.atomlab.atomlabshopping',
      abilityName: 'DetailsAbility',
      parameters: {
        position: index
      }
    };
    try {
      context.startAbility(want);
    } catch (error) {
      hilog.error(HOME_PAGE_DOMAIN, TAG, '%{public}s', error);
    }
  }

• 参数传输

    onCreate(want, launchParam) {
        let index: number = want?.parameters?.position;
        AppStorage.SetOrCreate(KEY, index);
        hilog.info(DETAIL_ABILITY_DOMAIN, TAG, '%{public}s', 'Ability onCreate');
    }

###1、开发环境 因为要使用Stage模型的设计，所以之前DevEco Studio的版本不能用了，需要升级到3.1.0.100。Ability框架在API 8及更早版本使用FA模型，如需在FA模型开发应用，请使用HarmonyOS 3.0 Release版本。 ![开发环境]

###2、Stage模型

• HAP：即HarmonyAbilityPackage，HarmonyOS应用编译、分发、加载的基本单位，也称为module，每个HAP都有一个应用内唯一的名称，称为moduleName；
• Bundle：通过appid标识的HarmonyOS应用，Bundle可以包含多个HAP，每个应用都有一个bundleName，但是bundleName并不能唯一标识一个应用，appid中包含bundleName以及其他的更多信息，能够唯一标识一个应用；
• AbilityStage：对应HAP的运行期类，在HAP首次加载到进程中时创建，运行期开发者可见；
• Application：对应Bundle的运行期类，运行期开发者不可见；
• Context：提供运行期开发者可以调用的各种能力，Ability组件和各种ExtensionAbility都有各自不同的context类，他们都继承自基类Context，基类提供包名、moduleName、路径等信息；
• Ability：提供生命周期回调，持有AbilityContext，支持组件迁移/协同;
• ExtensionAbility：基于场景的服务扩展能力统称，系统定义了多种基于场景的ExtensionAbility类，它们持有各自的ExtensionContext;
• WindowStage：本地窗口管理器；
• Window：窗口 管理器管理的基本单元，持有一个ArkUI引擎实例；
• ArkUI Page：方舟开发框架页面。

Stage模型是区别于FA模型的一种应用开发模型，需要在module.json5和app.json5配置文件中对应用的包结构进行声明。

###3、工程目录 API version 8的eTS工程目录结构如下图所示：

![工程目录 API 8]

API version 7的eTS工程目录结构如下图所示：

![工程目录 API 7] 明显可以看到，从API 8开始，删除了java，也不支持java了。

###4、页面跳转 从API8开始，使用Stage模型的设计,页面的跳转不再使用router，而是由Want模块提供系统的基本通信组件的能力。

  public startDetailsAbility(context, index: number): void {
    const want = {
      bundleName: 'com.atomlab.atomlabshopping',
      abilityName: 'NewAbility',
      parameters: {
        position: index
      }
    };
    try {
      context.startAbility(want);
    } catch (error) {
      hilog.error(NEW_PAGE_DOMAIN, TAG, '%{public}s', error);
    }
  }

###5、运行调试 因为使用使用Stage模型的设计需要用到API9，目前DevEco提供的本地模拟器只有API6的，远程真机只有API8或以下的，只有远程模拟器有API9的。可是远程模拟器太卡，而且画质一言难尽@@,自己的手机是华为Mate40pro刚刚更新到最新也只是3.0.0.163,不支持。 ![运行调试]

##四、小结 因为要使用Stage模型的设计，本次开发是一次全新的学习和尝试，许多HarmonyOS 3.1之前的开发方式和用法都要重新适应。经过大概一周左右的开发，开始慢慢了解到其结构和模式，但是还有许多疑惑和需要继续学习的地方。后面会跟着一期、二期、三期，继续学习下去……

gitee地址上已提交，欢迎来指导