【HarmonyOS】HMRouter使用详解（一）情况设置

背景

---

在项目中使用官方保举的Navigation时，必要在全部的页面上都添加一层NavDestination，在代码阅读上会增加多个层级，而且还要在主页面设置对应名字的跳转等问题，设置起来比力繁琐。看到大佬开发的HMRouter使用起来方便简洁，因此，写下这篇文章记录HMRouter的使用。
插件设置

---

1.HMRouter安装

在终端中运行下面命令举行第三方库的安装。

1. ohpm install @hadss/hmrouter

复制代码

2.添加路由编译插件

修改项目的hvigor/hvigor-config.json文件中的dependencies数组。

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

复制代码

3.使用路由编译插件

在项目的entry/hvigorfile.ts文件中添加插件的使用。如果模块是Har则使用harPlugin(),模块是Hsp则使用hspPlugin()
4.工程设置

由于拦截器、生命周期和自界说转场动画会在运行时动态创建实例，因此必要举行如下设置，使得HMRouter路由框架可以动态导入项目中的模块。
在工程目次下的build-profile.json5中，设置useNormalizedOHMUrl属性为true。

HMRouter使用

---

在UIAbility中初始化路由框架

在OnCreate中初始化路由框架。

1. import { HMRouterMgr } from '@hadss/hmrouter';
3. onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
4.     HMRouterMgr.init({
5.       context: this.context
6.     })
7.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
8.   }

复制代码

在首页中界说路由入口

自界说一个NavModifier类，继承AttributeUpdater

1. class NavModifier extends AttributeUpdater<NavigationAttribute> {
2.   initializeModifier(instance: NavigationAttribute): void {
3.     instance.mode(NavigationMode.Stack);
4.     instance.navBarWidth('100%');
5.     instance.hideTitleBar(true);
6.     instance.hideToolBar(true);
7.   }
8. }

复制代码

然后编写页面代码

1. import { HMDefaultGlobalAnimator, HMNavigation, HMRouter, HMRouterMgr } from '@hadss/hmrouter';
2. import { AttributeUpdater } from '@kit.ArkUI';
3. import {PageModel} from '../../Models/PageModel'
5. @Entry
6. @Component
7. struct HomePage {
8.   modifier: NavModifier = new NavModifier();
10.   build() {
11.     Column() {
12.       // 使用HMNavigation容器
13.       HMNavigation({
14.         navigationId: 'mainNavigation', options: {
15.           standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR,
16.           dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR,
17.           modifier: this.modifier
18.         }
19.       }) {
20.         Column({space:20}) {
21.           Button("TwoPage")
22.             .width("80%")
23.             .onClick(() => {
24.               HMRouterMgr.push({
25.                 navigationId: "mainNavigation",
26.                 pageUrl: "TwoPage"
27.               })
28.             })
29.         }
30.         .width('100%')
31.         .height('100%')
32.       }
33.     }
34.     .height('100%')
35.     .width('100%')
36.   }
37. }

复制代码

HMNavigation 参数解析

• navigationId :容器ID而且全局同一
  
• homePageUrl：指定默认加载的页面
  
• navigationOption：全局参数设置。
  
  
  
  • modifier：Navigation动态属性设置
    
  • standardAnimator：页面全局动画设置
    
  • dialogAnimator：弹窗全局动画设置
    
  • title：navigation的Title设置
    
  • menus：navigation的menus设置
    
  • toolbar：navigation的toolbar设置
    
  • systemBarStyle：navigation的systemBarStyle设置
    
  
  

页面设置

新建跳转的页面TwoPage，里面按钮使用HMRouterMgr.pop方法实现返回上个页面的操纵。
必须加上@HMRouter装饰器，pageUrl方法来界说页面的名称

1. import { HMRouter, HMRouterMgr } from '@hadss/hmrouter'
3. @HMRouter({ pageUrl: "TwoPage" })
4. @Component
5. export struct TwoPage {
6.   build() {
7.     Column({ space: 20 }) {
8.       Button("HomePage")
9.         .width("80%")
10.         .onClick(() => {
11.           HMRouterMgr.pop({
12.             navigationId: "mainNavigation"
13.           })
14.         })
15.     }
16.     .height("100%")
17.     .width("100%")
18.   }
19. }

复制代码

总结

---

这篇帖子重要关注在HMRouter的情况摆设和简单的页面跳转

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