HarmonyOS 实战开发 —— 基于HMRouter的路由跳转方案

📚往期笔录记录🔖：

🔖鸿蒙（HarmonyOS）北向开发知识点记录~
🔖鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
🔖记录一场鸿蒙开发岗位面试经历~
🔖持续更新中……

HMRouter简介

HMRouter作为HarmonyOS的页面跳转场景解决方案，聚焦解决应用内原生页面的跳转逻辑。

HMRouter底层对系统Navigation进行封装，集成了Navigation、NavDestination、NavPathStack的系统能力，提供了可复用的路由拦截、页面生命周期、自定义转场动画，并且在跳转传参、额外的生命周期、服务型路由方面对系统能力进行了扩展。

目的是让开发者在开发过程中无需关注Navigation、NavDestination容器组件的相关细节及模板代码，屏蔽跳转时的判断逻辑，降低拦截器、自定义转场动画实现复杂度，更好的进行模块间解耦。

特性

基于注解声明路由信息
注解中页面路径支持使用字符串常量定义
支持Har、Hsp、Hap
支持Navigation路由栈嵌套
支持服务型路由
支持路由拦截器（包含全局拦截、单页面拦截、跳转时一次性拦截）
支持生命周期回调（包含全局生命周期、单页面生命周期、跳转时一次性生命周期、NavBar生命周期）
内置转场动画（页面、Dialog），可配置方向、透明度、缩放，支持交互式转场动画，同时支持配置某个页面的转场动画、跳转时的一次性动画
支持Dialog类型页面、支持单例页面

依赖版本

HarmonyOS NEXT Developer Beta5及以上

手机版本：NEXT.0.0.60及以上

下载安装

使用ohpm安装依赖

ohpm install @hadss/hmrouter

或者按需在模块中配置运行时依赖，修改oh-package.json5

{
  "dependencies": {
    "@hadss/hmrouter": "^1.0.0-rc.6"
  }
}

使用配置

编译插件配置

1.修改项目的hvigor/hvigor-config.json文件，加入路由编译插件

{
  "dependencies": {
    "@hadss/hmrouter-plugin": "^1.0.0-rc.6"
    // 使用npm仓版本号
  },
  // ...其他配置
}

2.在模块中引入路由编译插件，修改hvigorfile.ts

import { hapTasks } from '@ohos/hvigor-ohos-plugin';
import { hapPlugin } from '@hadss/hmrouter-plugin';

export default {
  system: hapTasks,
  plugins: [hapPlugin()] // 使用HMRouter标签的模块均需要配置，与模块类型保持一致
}

如果模块是Har则使用harPlugin(), 模块是Hsp则使用hspPlugin()

3.在项目根目录创建路由编译插件配置文件hmrouter_config.json（可选）

{
  // 如果不配置则扫描src/main/ets目录，对代码进行全量扫描，如果配置则数组不能为空，建议配置指定目录可缩短编译耗时
  "scanDir": [
    "src/main/ets/components",
    "src/main/ets/interceptors"
  ],
  "saveGeneratedFile": false,