2024年鸿蒙最全HarmonyOS NEXT动态路由，2024年最新2024年网易HarmonyOS鸿蒙岗面试必问_鸿蒙dynamicrouter

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

实现思路

动态路由的实现

1. 注册路由

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

2. 获取路由

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

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

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

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]>;
}
1
2
3
4
5
6
7
8

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 });
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

动态路由的使用

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

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

{
  "app":{
    ...
  }
  "modules":{
    ...
    {
      "name": "eventpropagation",
      "srcPath": "./feature/eventpropagation"
    },
    {
      "name": "routermodule",
      "srcPath": "./feature/routermodule"
    }
    ...
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

"dependencies": {
  "@ohos/dynamicsrouter": "file:../../feature/routermodule",    
  "@ohos/event-propagation": "file:../../feature/eventpropagation",
  ...
}
1
2
3
4
5

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

...
"buildOption": {
  "arkOptions": {
    "runtimeOnly": {
      "packages": [
        "@ohos/event-propagation",
        ...
      ]
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11

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');
  ...
}
1
2
3
4
5
6
7
8
9
10
11
12

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

...
@Provide('pageStack') pageStack: NavPathStack = new NavPathStack();
@State listData: SceneModuleInfo[] = waterFlowData;
...
aboutToAppear(): void {
  DynamicsRouter.createNavPathStack(this.pageStack);
  ...
}
...
1
2
3
4
5
6
7
8
9

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

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

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

@Builder
methodPoints(listData: ListData) {
  Column() {
  ...
    .onClick(() => {
      DynamicsRouter.push(listData.routerInfo, listData.param);
    })
}
1
2
3
4
5
6
7
8

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

...
"dependencies": {
  ...
  "@ohos/dynamicsrouter": "file:../../feature/routermodule"
}
1
2
3
4
5

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;
  }
}
1
2
3
4
5
6
7

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

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

DynamicsRouter.registerRouterPage(RouterInfo.EVENT_TRANSMISSION_SOLUTION, wrapBuilder(getEventPropagation));
1
2
3
4
5
6
7

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

...
@Builder
export function getNavigationParameterTransferView(param: ESObject): void {
  NavigationParameterTransferView();
}
...
1
2
3
4
5
6

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

高性能知识点

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

工程结构&模块类型

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

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

…(img-IUWrpI0o-1715725137226)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！