实现应用导航框架鸿蒙示例代码原创

鸿蒙场景化示例代码技术工程师

发布于 2025-4-15 10:14

2548浏览

0收藏

本文原创发布在华为开发者社区。

介绍

本示例介绍Navigation系统路由表+动态import+Tabs 搭建的应用导航框架，通过系统路由表解决分包多团队开发耦合问题，彼此仅关注本团队负责Har包开发内容，将页面注册到系统路由表中，解决PageMap会导致代码产生大量的If/else分支问题，介绍了如何跳转同HAP包页面，har包页面跳转。
通过动态Import解决页面动态渲染的诉求，常用场景：首页多种样式，通过主题字段确定样式的加载。
TabBar作为底部导航栏，屏蔽Navigation导航栏。

实现应用导航框架源码链接

效果预览

实现应用导航框架鸿蒙示例代码-鸿蒙开发者社区

使用说明

点击底部TabBar可以切换展示页面，我的页面介绍了动态Import的使用，首页介绍了路由跳转的使用，包含跳转、pop等用法。

实现思路

动态import需要在build-profile.json5文中完成配置

"buildOption": {
  "arkOptions": {
    "runtimeOnly": {
      "sources": [
        "./src/main/ets/pages/TabStyleA.ets",
        "./src/main/ets/pages/TabStyleB.ets"
      ]
    }
  }
  ......
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

使用import和相对路径进行动态加载

loadTabBar() {
  import('./' + this.styleName).then((result: ESObject) => {
    this.globalBuilder = result.getBuilder();
    hilog.info(0xFF00, 'info', '%{public}s', 'load success');
  }).catch((err: Error) => {
    hilog.error(0xFFFF, "error", "%{public}s", "not found")
    this.globalBuilder = wrapBuilder(defaultBuilder);
  });
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

页面跳转目标模块module.json5文件中声明路由表

"routerMap": "$profile:route_map"
1.

并在src/main/resources/base/profile/路径下完成路由表route_map.json配置

{
  "routerMap": [
    {
      "name": "pageText",
      "pageSourceFile": "src/main/ets/pages/TextExample.ets",
      "buildFunction": "pageTextBuilder"
    }
  ]
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

目标页面声明Builder函数

{
@Builder
function pageTextBuilder() {
  TextExample()
}
1.
2.
3.
4.
5.

定义NavPathStack进行跳转操

private stack: NavPathStack = new NavPathStack();
......
this.stack.pushPath({
  name: 'pageText', param: 'tabStyleA', onPop: (popInfo) => {
    hilog.info(0xFF00, 'info', '%{public}s', '返回页面成功 ' + JSON.stringify(popInfo.result));
  }
})
1.
2.
3.
4.
5.
6.
7.

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签