纯血鸿蒙APP实战开发——主页动态路由

最新推荐文章于 2024-06-08 13:00:00 发布

程序猿会指北

最新推荐文章于 2024-06-08 13:00:00 发布

阅读量774

点赞数 28

分类专栏：鸿蒙开发 HarmonyOS OpenHarmony 文章标签： harmonyos OpenHarmony 鸿蒙开发移动开发 App实战开发

本文链接：https://blog.csdn.net/m0_71524094/article/details/138252054

版权

鸿蒙开发同时被 3 个专栏收录

144 篇文章 3 订阅

订阅专栏

HarmonyOS

144 篇文章 3 订阅

订阅专栏

OpenHarmony

110 篇文章 0 订阅

订阅专栏

介绍

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

使用说明

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

实现思路

动态路由的实现

注册路由

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

获取路由

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

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

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

通过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]>;
}

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

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 });
  }
}

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

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

动态路由的使用

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

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

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

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

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

在主模块中添加动态import变量表达式需要的参数，此处在packages中配置的模块名必须和oh-package.json中配置的名称相同，详细代码请参考build-profile.json5。
```
...
"buildOption": {
  "arkOptions": {
    "runtimeOnly": {
      "packages": [
        "@ohos/event-propagation",
        ...
      ]
    }
  }
}
```

在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');
  ...
}

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

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

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

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

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

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

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

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

在子模块中添加动态加载页面组件的接口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;
  }
}
```

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

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

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

如果7中设置的router.param是非空的，需要给10中的@Buidler接口添加参数，否则会报错，详细代码请参考NavigationParameterTransferView。
```
...
@Builder
export function getNavigationParameterTransferView(param: ESObject): void {
  NavigationParameterTransferView();
}
...
```
子模块中的两个页面需要使用动态路由进行跳转时，则不需要执行6，即不需要将页面添加到首页数据中。

高性能知识点

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

工程结构&模块类型

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

模块依赖

不涉及

参考资料

动态路由Sample

鸿蒙全栈开发全新学习指南

也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线【包含了大APP实战项目开发】。

本路线共分为四个阶段：

第一阶段：鸿蒙初中级开发必备技能

第二阶段：鸿蒙南北双向高工技能基础：`gitee.com/MNxiaona/733GH`

第三阶段：应用开发中高级就业技术

第四阶段：全网首发-工业级南向设备开发就业技术：`https://gitee.com/MNxiaona/733GH`

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）

如何快速入门？

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

开发基础知识:`gitee.com/MNxiaona/733GH`

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

基于ArkTS 开发

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

鸿蒙开发面试真题（含参考答案）:`gitee.com/MNxiaona/733GH`

鸿蒙入门教学视频：

美团APP实战开发教学：`gitee.com/MNxiaona/733GH`

写在最后

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
点赞，转发，有你们的『点赞和评论』，才是我创造的动力。
关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
想要获取更多完整鸿蒙最新学习资源，请移步前往小编：gitee.com/MNxiaona/733GH

程序猿会指北

关注

28
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
纯血鸿蒙APP实战开发——主页动态路由

本示例将介绍如何使用动态路由跳转到模块中的页面，以及如何使用动态import的方式加载模块使用说明通过动态import的方式，在需要进入页面时加载对应的模块。配置动态路由，通过WrapBuilder接口，动态创建页面并跳转。动态import变量表达式，需要DevEco Studio NEXT Developer Preview1 （4.1.3.500）版本IDE，配合hvigor 4.0.2版本使用。支持自定义路由栈管理，相关内容请参考路由来源页的相关说明。
复制链接

扫一扫