HarmonyOS应用开发-多模块开发

原创

沈页dd 2024-07-25 11:27:38 ©著作权

文章标签 harmonyos 华为多模块 ipad Web 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者沈页dd的原创作品，请联系作者获取转载授权，否则将追究法律责任

HarmonyOS应用开发是目前是最火、最有前景的方向，现在入门鸿蒙开发还来得及。

鸿蒙开发官网：developer.huawei.com/consumer/cn

多模块划分与创建

什么是多模块呢？？

通常我们的app分发会有多个场景，如手机(phone)、手表(watch)、平板(ipad)、电脑(computer)等等，我们希望的是可复用的代码直接使用，而不是写多次，既不统一，也不方便维护和开发，在不同的场景下面可以进行不同的处理，但是会有一些公有的逻辑可以抽离为公共模块，鸿蒙开发此次提供了多模块的开发模块，使得我们在开发应用的时候，可以选择性的使用多个模块的组合，打包为一个app。

多模块的创建

在工程下面直接右键就可以新建module。

HarmonyOS应用开发-多模块开发_华为

选择module后，会弹出一个弹窗选择新建哪种module。截图如下：

HarmonyOS应用开发-多模块开发_harmonyos_02

我们通常会使用到两种module，

对于主入口，我们需要选择的是Empty Ability ，这里是我们的主入口，每个应用在正常情况下只需要一个ability即可，作用就是我们的app运行时的入口，对应的就是上面的某种场景，如手机(phone)、手表(watch)、平板(ipad)、电脑(computer)等等。
其他情况下我我们需要选择的是Shared Ability ，这里会创建我们各种共用的模块，也就是此文中所要说明的多模块，如工具库(utils)、网络层（network）、服务层（service）、公共组件（uiComponent）等等。这些属于比较基础的，所有的app都会用到的基础能力，当然最好是再建设一个model层，存储一些类型文件、常量配置、枚举等等。这样用起来可能会更加舒服哦~

实战案例，多模块划分

上面我们了解完什么事多模块和模块的创建后，我们来看下实战的demo，项目截图如下：

HarmonyOS应用开发-多模块开发_Web_03

commons：我们把基础的，所有模块都会用到的放到了commons下面，这里面包括了数据存储、类型声明、网络请求、公共组件、工具库等。
features：我们把一些功能性一致的页面(单个页面和多个页面)的模块放到了features下面，这里面也属于公用的模块，但是这不是基建，而是业务逻辑。
products：我们把ability的两个场景放到了products下面，ipad和phone都属于入口ability，里面依赖不同的多个feature，通过组合的方式产出了两个app，一个是手机端phone，一个是平板端ipad。

使用多模块

上面说完了多模块的创建和划分，下面我们看下如何使用多模块。

引用

做过前端的，就会看着比较简单了，因为每个模块下面都有一个package.json5的文件，这里面配置了对应的dependence.

{
  "license": "",
  "devDependencies": {},
  "author": "",
  "name": "phone",
  "description": "Please describe the basic information.",
  "main": "",
  "version": "1.0.0",
  "dependencies": {
    "@ohos/activity": "file:../../features/activity",
    "@ohos/utils": "file:../../commons/utils",
    "@ohos/discover": "file:../../features/discover",
    "@ohos/mine": "file:../../features/mine",
    "@ohos/datastore": "file:../../commons/datastore",
    "@ohos/uicomponents": "file:../../commons/uicomponents"
  }
}

使用的时候，可以直接import即可。

import { formatShowDate } from '@ohos/utils';

路由跳转

因为使用到了多模块，就不是简单的路由跳转了，简单的路由跳转如下：

router.pushUrl({ url: 'pages/SafePage' });

多模块的路由跳转：

// com.draven.demo
const bundleName = getBoundName();
 // topic为ThemeSettingPage所在页面的module
const page = '/topic/ets/pages/ThemeSettingPage';

router.pushUrl({ url: `@bundle:${bundleName}${page}` });