为鸿蒙应用 Navigation 组件自动生成系统路由表

为鸿蒙应用 Navigation 组件自动生成系统路由表

从 API 12开始,Navigation 支持使用系统路由表的方式进行动态路由。通过配置在工程 resources/base/profile 中创建 router_map.json 文件就可以实现跳转。

但是,仍然需要手动为路由的目标页面编写配置文件和 Build 函数,较为繁琐。使用该插件,仅用一个注解即可帮你完成上述的配置操作。

项目地址:github.com/Star1128/Au...

实现原理

该插件在编译时会扫描指定目录下的所有 ets 文件中的 @AppRouter 组件,并为组件生成对应的系统路由表配置文件和 Build 函数。

使用方式

  1. 从最新的 Release 中下载插件 AutoGenRouterMap.tgz,放置到项目的 plugin 目录下

  2. 修改项目的 hvigor/hvigor-config.json 文件,导入插件

json 复制代码
{
  "dependencies": {
    "@app/ets-generator" : "file:../plugin/AutoGenRouterMap"
  }
}
  1. 在各个模块的 hvigorfile.ts 文件中配置 扫描范围
typescript 复制代码
import { hspTasks } from '@ohos/hvigor-ohos-plugin';
import { PluginConfig, etsGeneratorPlugin } from '@app/ets-generator';


// 配置路由信息
const config: PluginConfig = {
    // 扫描文件的路径
    scanDir: "src"
}

export default {
    system: hspTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
    plugins: [etsGeneratorPlugin(config)]         /* Custom plugin to extend the functionality of Hvigor. */
}
  1. 在各模块的 module.json5 中配置系统路由表路径
json 复制代码
{
  "module": {
    "routerMap": "$profile:router_map"
  }
}
  1. 在你项目的最底层的模块中(需要放置路由 NavDestination 的模块必须都已经依赖了该模块),创建并导出 AppRouter 装饰器的声明
typescript 复制代码
// 自定义装饰器
export function AppRouter(param: AppRouterParam) {
  return Object;
}

// 装饰器参数
export interface AppRouterParam {
  // 跳转的路由名
  name: string;
}
typescript 复制代码
export { AppRouter } from './src/main/ets/annotation/AppRouter'
  1. 使用时,只需要给组件添加 @AppRouter({ name: '[PAGE_NAME]' }) 即可

注意,路由名称结尾必须和组件名称匹配。如下面的例子中,路由名可以是 NavigationPage,也可以是 /common/NavigationPage,即必须以 NavigationPage 结尾

typescript 复制代码
import { AppRouter } from 'common/Index';

export const GLOBAL_PAGE_STACK = 'pageStack'

@AppRouter({ name: 'NavigationPage' })
@Component
export struct NavigationPage {
  // 创建一个页面栈对象并传入Navigation
  pageStack: NavPathStack = AppStorage.get(GLOBAL_PAGE_STACK) as NavPathStack

  build() {
    NavDestination() {
      Text('Page')
      Button('Return')
        .onClick(() => {
          this.pageStack.pop()
        })
    }
    .hideTitleBar(true)
  }
}

生成产物

执行编译后,会在项目目录中自动生成 generated 目录,其中的 RouterBuilder.ets 文件中就包含了 Navigation 所需的页面 Builder 函数。

typescript 复制代码
import { NavigationPage } from '../pages/navigation/NavigationPage'

@Builder
export function navigationPageBuilder() {
  NavigationPage();
}

src/main/resources/base/profile/router_map.json 中生成对应的页面配置。

json 复制代码
{
  "routerMap": [
    {
      "name": "NavigationPage",
      "pageSourceFile": "src/main/ets/generated/RouterBuilder.ets",
      "buildFunction": "navigationPageBuilder",
      "data": {
        "description": ""
      }
    }
  ]
}

常见问题

  1. 跨模块路由时,如果出现了组件名称重复的情况,建议声明 @AppRouter 时指定前缀,如 @AppRouter({ name: 'NavigationPage' }) 可以改为 @AppRouter({ name: '/common/NavigationPage' })

编译方式

shell 复制代码
cd node_modules/.bin
tsc

打 tgz 包

shell 复制代码
tar -czvf AutoGenRouterMap.tgz --exclude='AutoGenRouterMap/.git' --exclude='AutoGenRouterMap/node_modules' --exclude='AutoGenRouterMap/src' AutoGenRouterMap

参考

在原自定义路由表方案的基础上

  • 剥离了自动生成路由表文件和 Builder 文件的部分
  • 生成规则和系统路由表进行对齐
  • 优化了扫描路径配置,支持传入文件夹进行递归扫描
相关推荐
周胡杰10 分钟前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
迷曳10 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
迷曳14 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
平谷一勺21 小时前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
Georgewu2 天前
【HarmonyOS组件/模板集成创新活动-如何高效开发鸿蒙应用 (鸿社圈子)】
harmonyos
前端世界2 天前
跨平台 App 如何无痛迁移到鸿蒙系统?全流程实战+Demo 教程
华为·harmonyos
龙儿筝2 天前
鸿蒙和Android知识点
android·harmonyos
迷曳2 天前
17、鸿蒙Harmony Next开发:状态管理(组件拥有的状态和应用拥有的状态)
前端·harmonyos·鸿蒙
zhanshuo2 天前
不同品牌的设备也能“心有灵犀”?带你玩转鸿蒙分布式跨端协同
harmonyos
万少3 天前
云测试提前定位和解决问题 萤火故事屋 上架流程
前端·harmonyos·客户端