【HarmonyOS】鸿蒙目前最好用的路由管理 HMRouter （一）

【HarmonyOS】鸿蒙目前最好用的路由管理 HMRouter （一）

一、前言

经过router到navigation，直到HMRouter的横空出世。鸿蒙应用内最强的路由管理终于出现了。被疯狂吐槽的router因为各种路由需求无法满足，使用僵化，已经被官方放弃，不保举使用。更新出navigation被TOP200应用疯狂适配后，爆出一堆bug和新需求。如今HMRouter的出现，终于可以让各人在路由管理上，丝滑操作了。
比如在Android和IOS上最常见的回退需求。router和navigation都无法做到。A-B-C-D三级页面。D页面返回到A，可以直接使用pop指定跳转的url举行实现。
本章讲授HMRouter是什么，能力是什么，怎样快速集成。后续章节对其扩展特性功能举行详细讲授。
二、HMRouter

1.知其然才气知其所以然。我们要先搞清晰HMRouter是什么。
HMRouter作为路由管理，框架底层对Navigation相关能力举行了封装，让我们无需关心繁琐的navigation逻辑。
2.HMRouter都能做什么？
能力怎样？具备页面跳转、弹窗提示、转场动效、数据加载、维测场景。总的来说，它是HarmonyOS上页面跳转的场景办理方案，重要办理应用内原生页面间相互跳转的题目。
3.HMRouter是什么形态？
作为插件集成到项目中举行使用，目前代码开源在Gitee上，也可以直接拿源码模块使用，或者自己魔改（不过要注意在商业项目中使用，开源协议的题目）。
三、快速使用

（1）集成HMRouter插件
1.首先需要下载依赖

1. "dependencies": {
2.     "@hadss/hmrouter": "^1.0.0-rc.5"
3.   }

复制代码

2.编译插件配置

1.   "dependencies": {
2.     "@hadss/hmrouter-plugin": "^1.0.0-rc.4" // 使用npm仓版本号
3.   },

复制代码

1. import { hapTasks } from '@ohos/hvigor-ohos-plugin';
2. import { hapPlugin } from "@hadss/hmrouter-plugin";
4. export default {
5.     system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
6.     plugins: [hapPlugin()]         /* Custom plugin to extend the functionality of Hvigor. */
7. }

复制代码

（2）初始化工具
在EntryAbility，你的启动模块中配置初始化工具。

1.   onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
2.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
3.     HMRouterMgr.init({
4.       context: this.context
5.     });
6.   }

复制代码

（3）初始化首页
与Navigation雷同，页面build中需要包裹容器举行页面的表现。
与Navigation不同的是，该容器需要在,Column或者Stack之内套着使用。

代码文本参见下方的DEMO代码示例。
（4）配置跳转页
跳转到的目标页面，通过HMRouter路由注解标签的情势，举行页面信息的配置。设置瞄点，使上级页面可跳转过来。

代码文本参见下方的DEMO代码示例。
（5）完成（实现底子的页面跳转和返回）

DEMO代码示例：
Index.ets 首页

1. import { AttributeUpdater } from '@kit.ArkUI';
2. import { HMDefaultGlobalAnimator, HMNavigation, HMRouterMgr } from '@hadss/hmrouter';
4. /**
5. * 界面样式公用函数
6. */
7. class NavModifier extends AttributeUpdater<NavigationAttribute> {
8.   initializeModifier(instance: NavigationAttribute): void {
9.     instance.mode(NavigationMode.Stack);
10.     instance.navBarWidth('100%');
11.     instance.hideTitleBar(true);
12.     instance.hideToolBar(true);
13.   }
14. }
16. @Entry
17. @Component
18. struct Index {
19.   modifier: NavModifier = new NavModifier();
21.   aboutToAppear(): void {
23.   }
25.   build() {
26.     // @Entry中需要再套一层容器组件,Column或者Stack
27.     Column(){
28.       // 使用HMNavigation容器
29.       HMNavigation({
30.         navigationId: 'mainNavigation', options: {
31.           // 设置动画样式
32.           standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR,
33.           // 设置弹框动画样式
34.           dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR,
35.           // 设置页面navigation的参数，标题栏，工具栏，bar那些
36.           modifier: this.modifier
37.         }
38.       }) {
39.         Row() {
40.           Text("点击跳转")
41.             .fontSize(50)
42.             .onClick(()=>{
43.               HMRouterMgr.push({pageUrl: 'pageB'})
44.             })
45.         }
46.         .width('100%')
47.         .height('100%')
48.         .backgroundColor(Color.Yellow)
49.         .justifyContent(FlexAlign.Center)
50.       }
51.     }
52.     .height('100%')
53.     .width('100%')
54.   }
55. }

复制代码

PageB.ets 跳转页

1. import { HMRouter, HMRouterMgr } from "@hadss/hmrouter"
3. // HMRouter 路由标签使用在自定义组件struct上，且该自定义组件需要添加export关键字
4. @HMRouter({ pageUrl: 'pageB' })
5. @Component
6. export struct PageB {
8.   build() {
9.     Row(){
10.       Text("点击返回")
11.         .fontSize(50)
12.         .onClick(()=>{
13.           HMRouterMgr.pop();
14.         })
15.     }.width("100%").height("100%").backgroundColor(Color.Red).justifyContent(FlexAlign.Center)
16.   }
17. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。