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

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

介绍

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

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

效果预览

使用说明

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

实现思路

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

   "buildOption": {
     "arkOptions": {
    "runtimeOnly": {
      "sources": [
        "./src/main/ets/pages/TabStyleA.ets",
        "./src/main/ets/pages/TabStyleB.ets"
      ]
    }
     }
     ......
   } 

2. 使用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);
     });
   }

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

   "routerMap": "$profile:route_map"

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

   {
     "routerMap": [
    {
      "name": "pageText",
      "pageSourceFile": "src/main/ets/pages/TextExample.ets",
      "buildFunction": "pageTextBuilder"
    }
     ]
   }

5. 目标页面声明Builder函数

   {
   @Builder
   function pageTextBuilder() {
     TextExample()
   }

6. 定义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));
     }
   })