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

鸿蒙场景化示例代码技术工程师
发布于 2025-4-15 10:14
浏览
0收藏

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

介绍

  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"
      ]
    }
  }
  ......
} 
  1. 使用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. 页面跳转目标模块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. 目标页面声明Builder函数
{
@Builder
function pageTextBuilder() {
  TextExample()
}
  1. 定义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));
  }
})

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
收藏
回复
举报
回复
    相关推荐