介绍
本示例将介绍如何使用动态路由跳转到模块中的页面,以及如何使用动态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 // 动态路由实现类
模块依赖
不涉及
参考资料
写在最后
如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
- 想要获取更多完整鸿蒙最新学习知识点,请移步前往小编:
https://gitee.com/MNxiaona/733GH