HarmonyOS NEXT应用开发之动态路由

介绍

本示例将介绍如何使用动态路由跳转到模块中的页面，以及如何使用动态import的方式加载模块

使用说明

1. 通过动态import的方式，在需要进入页面时加载对应的模块。
2. 配置动态路由，通过WrapBuilder接口，动态创建页面并跳转。
3. 动态import变量表达式，需要DevEco Studio NEXT Developer Preview1 （4.1.3.500）版本IDE，配合hvigor 4.0.2版本使用。
4. 支持自定义路由栈管理，相关内容请参考路由来源页的相关说明

实现思路

动态路由的实现

1. 注册路由

public static createNavPathStack(router: NavPathStack): void {
  DynamicsRouter.navPathStack = router;
}

2. 获取路由

private static getNavPathStack(): NavPathStack {
  return DynamicsRouter.navPathStack;
}

3. 通过builderName，注册WrappedBuilder对象，用于动态创建页面

private static registerBuilder(builderName: string, builder: WrappedBuilder<[object]>): void {
  DynamicsRouter.builderMap.set(builderName, builder);
}

4. 通过builderName，获取注册的WrappedBuilder对象

public static getBuilder(builderName: string): WrappedBuilder<[object]> {
  let builder = DynamicsRouter.builderMap.get(builderName);
  if (!builder) {
    let msg = "not found builder";
    console.info(msg + builderName);
  }
  return builder as WrappedBuilder<[object]>;
}

5. 通过页面栈跳转到指定页面

public static async push(routerInfo: RouterInfo, param?: string): Promise<void> {
  const pageName: string = routerInfo.pageName;
  const moduleName: string = routerInfo.moduleName;
  let isImportSucceed: boolean = false;
  await import(moduleName).then((result: ESObject) => {
    result.harInit(pageName);
    isImportSucceed = true;
  }, (error: ESObject) => {
    logger.error(LOGGER_TAG, error);
  });
  if (isImportSucceed) {
    const builderName: string = moduleName + "/" + pageName;
    DynamicsRouter.getNavPathStack().pushPath({ name: builderName, param: param });
  }
}

6. 注册动态路由跳转的页面信息

public static registerRouterPage(routerInfo: RouterInfo, wrapBuilder: WrappedBuilder<[object]>) {
  let builderName: string = routerInfo.moduleName + "/" + routerInfo.pageName;
  if (!DynamicsRouter.getBuilder(builderName)) {
    DynamicsRouter.registerBuilder(builderName, wrapBuilder);
  }
}

动态路由的使用

下面以eventpropagation模块举例说明如何使用动态路由加载子模块页面。

1. 在工程的根目录的build-profile.json5中添加动态路由模块和需要加载的子模块的依赖，详细代码参考build-profile.json5。

{
  "app":{
    ...
  }
  "modules":{
    ...
    {
      "name": "eventpropagation",
      "srcPath": "./feature/eventpropagation"
    },
    {
      "name": "routermodule",
      "srcPath": "./feature/routermodule"
    }
    ...
  }
}

2. 在主模块中添加动态路由和需要加载的子模块的依赖，详细代码请参考oh-package.json。

"dependencies": {
  "@ohos/dynamicsrouter": "file:../../feature/routermodule",    
  "@ohos/event-propagation": "file:../../feature/eventpropagation",
  ...
}

3. 在主模块中添加动态import变量表达式需要的参数，此处在packages中配置的模块名必须和oh-package.json中配置的名称相同，详细代码请参考build-profile.json5。

...
"buildOption": {
  "arkOptions": {
    "runtimeOnly": {
      "packages": [
        "@ohos/event-propagation",
        ...
      ]
    }
  }
}

4. 在routermodule模块中添加动态路由跳转的moduleName（模块名）和pageName（页面名），RouterInfo中配置的moduleName必须和oh-package.json中配置的名称相同，RouterInfo中添加的pageName是子模块中需要加载的页面，详细代码请参考RouterInfo.ets。

export class RouterInfo {
  moduleName: string = '';
  pageName: string = '';

  constructor(moduleName: string, pageName: string) {
    this.moduleName = moduleName;
    this.pageName = pageName;
  }
  ...
  static readonly EVENT_TRANSMISSION_SOLUTION: RouterInfo = new RouterInfo('@ohos/event-propagation', 'EventPropagation');
  ...
}

5. 在主模块中注册路由，并添加页面信息，详细代码请参考EntryView.ets。

...
@Provide('pageStack') pageStack: NavPathStack = new NavPathStack();
@State listData: SceneModuleInfo[] = waterFlowData;
...
aboutToAppear(): void {
  DynamicsRouter.createNavPathStack(this.pageStack);
  ...
}
...

6. 在主模块的WaterFlowData.ets中，将子模块要加载的页面，添加到列表中，详细代码请参考WaterFlowData.ets。

export const waterFlowData: SceneModuleInfo[] = [
  ...
  new SceneModuleInfo($r("app.media.event_propagation"), '阻塞事件冒泡', RouterInfo.EVENT_TRANSMISSION_SOLUTION, '其他', 1),
  ...
}

7. 在需要加载时将页面放入路由栈，详细代码请参考FunctionalScenes.ets。

@Builder
methodPoints(listData: ListData) {
  Column() {
  ...
    .onClick(() => {
      DynamicsRouter.push(listData.routerInfo, listData.param);
    })
}

8. 在子模块中添加动态路由的依赖，详细代码可参考oh-package.json。

...
"dependencies": {
  ...
  "@ohos/dynamicsrouter": "file:../../feature/routermodule"
}

9. 在子模块中添加动态加载页面组件的接口harInit，其中pageName和RouterInfo中配置的pageName相同，import()接口中传入的参数，是页面的相对路径。详细代码可参考Index.ets。 如果模块中有多个页面需要跳转，则需要配置多个pageName和页面路径，并且pageName和页面路径需要一一对应，否则无法跳转到预期中的页面，可参考barchart模块中的Index.ets文件。

export function harInit(pageName: string) {
  switch (pageName) {
    case RouterInfo.EVENT_TRANSMISSION_SOLUTION.pageName:
      import('./src/main/ets/view/EventPropagation');
      break;
  }
}

10. 在子模块中添加动态创建组件的方法，并注册到动态路由中，详细代码可参考EventPropagation.ets。

...
@Builder
export function getEventPropagation(): void {
  EventPropagation();
}

DynamicsRouter.registerRouterPage(RouterInfo.EVENT_TRANSMISSION_SOLUTION, wrapBuilder(getEventPropagation));

11. 如果7中设置的router.param是非空的，需要给10中的@Buidler接口添加参数，否则会报错，详细代码请参考NavigationParameterTransferView。

...
@Builder
export function getNavigationParameterTransferView(param: ESObject): void {
  NavigationParameterTransferView();
}
...

12. 子模块中的两个页面需要使用动态路由进行跳转时，则不需要执行6，即不需要将页面添加到首页数据中。

高性能知识点

本示例使用动态import的方式加载模块，只有需要进入页面时才加载对应的模块，减少主页面启动时间和初始化效率，减少内存的占用。

工程结构&模块类型

routermodule                                  // har类型
|---constants
|   |---RouterInfo.ets                        // 路由信息类，用于配置动态路由跳转页面的名称和模块名
|---router
|   |---DynamicsRouter.ets                    // 动态路由实现类

模块依赖

不涉及

参考资料

动态路由Sample

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：

如何快速入门：https://qr21.cn/FV7h05

1. 基本概念
2. 构建第一个ArkTS应用
3. ……

开发基础知识：https://qr21.cn/FV7h05

1. 应用基础知识
2. 配置文件
3. 应用数据管理
4. 应用安全管理
5. 应用隐私保护
6. 三方应用调用管控机制
7. 资源分类与访问
8. 学习ArkTS语言
9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

1. Ability开发
2. UI开发
3. 公共事件与通知
4. 窗口管理
5. 媒体
6. 安全
7. 网络与链接
8. 电话服务
9. 数据管理
10. 后台任务(Background Task)管理
11. 设备管理
12. 设备使用信息统计
13. DFX
14. 国际化开发
15. 折叠屏系列
16. ……

鸿蒙开发面试真题（含参考答案）：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

腾讯T10级高工技术，安卓全套VIP课程全网免费送：https://qr21.cn/D2k9D5