HarmonyOS应用开发：三方库HMRouter的研究和使用

前言

在现代软件开发中，模块化、组件化的架构计划越来越受到重视。随着应用程序的复杂度增加，路由管理成为了应用架构中的一个关键组成部分。它不但决定了应用内部页面之间的导航逻辑，还影响到应用的性能、可维护性和用户体验。为了更好地管理和优化路由逻辑，许多开发者会选择使用第三方库来辅助实现。HMRouter作为此中的一个选择，旨在为开发者提供一种高效、灵活且易于使用的路由管明白决方案。
关于HMRouter

HMRouter作为HarmonyOS的页面跳转场景解决方案，聚焦应用内原生页面的跳转逻辑。 HMRouter底层对系统Navigation进行封装，集成了Navigation、NavDestination、NavPathStack的系统能力，提供了可复用的路由拦截、页面生命周期、自定义转场动画，并且在传参、额外的生命周期、服务型路由方面临系统能力进行了扩展。 帮助开发者更好的进行模块间解耦。
HMRouter的重要功能及使用案例

一、安装配置

库地址：[HMRouter](https://gitee.com/hadss/hmrouter)
首先，要在项目中使用HMRouter，你必要根据项目安装相应的版本。
1、选择Terminal，使用ohpm安装

1. ohpm install @hadss/hmrouter

复制代码

 
2、插件配置，hvigor文件夹下的hvigor-config.json5下添加依靠

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

复制代码

3、模块目录下hvigorfile.ts

 

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. }

复制代码

4、设置扫描路径，在根目录下，创建hmrouter_config.json文件，对应目录下创建components文件夹。

1. {
2.   "scanDir": ["src/main/ets/components", "src/main/ets/interceptors"],
3.   "saveGeneratedFile": false
4. }

复制代码

ps: 开发阶段"saveGeneratedFile": ture，运行以后"saveGeneratedFile": false

5、工程配置build-profile.json5 （自动生成了）

1.  "buildOption": {
2.           "strictMode": {
3.             "caseSensitiveCheck": true,
4.             "useNormalizedOHMUrl": true
5.           }
6.         }

复制代码

二、代码实现

1. HMRouterMgr初始化

1.    HMRouterMgr.init({
2.       context:this.context
3.     })

复制代码

2. HMNavigation组件的使用
使用HMNavigation组件设置navigationId和homePageUrl参数

1.    HMNavigation({
2.       navigationId:'nav1',
3.       :'PageA'
4.     }){
5.       //当没有首页的时候显示界面
6.       Text('这是默认首页')
7.         .fontSize(30)
8.         .fontColor(Color.Red)
9.     }

复制代码

3. 设置options参数，设置属性

1. ...
2.   navModifier:NavModifier = new NavModifier()
3. ...
4.    HMNavigation({
5.       navigationId:'nav1',
6.       homePageUrl:'PageA',
7.       :{
8.         modifier:this.navModifier
9.     }
10.     })
11. ...
12. /*
13.  * 修饰符对象，作用：用于对Navigation做界面上的属性设置
14.  * */
15. class NavModifier extends  AttributeUpdater<NavigationAttribute>{
16.   initializeModifier(instance: NavigationAttribute): void {
17.     instance.mode(NavigationMode.Stack);
18.     instance.navBarWidth('100%');
19.     instance.hideTitleBar(false);
20.     instance.hideToolBar(true);
21.   }

复制代码

4. 跳转（带参）
 

1.         //1、跳转(地址，参数)
2.         HMRouterMgr.push({pageUrl:'PageB',param:'hello'})
3.         //2、接收参数
4.         let ret =  HMRouterMgr.getCurrentParam()

复制代码

5. 返回（带参）

1.     1、返回（参数）
2.      HMRouterMgr.pop({param:'yingwu'})
3.     2、接收参数
4.     HMRouterMgr.push(...,{
5.           onResult(popInfo:HMPopInfo){
6.            let ret = popInfo.result
7.             console.log('jinggang',JSON.stringify(ret))
8.           }
9.         })

复制代码

6. 完整代码
* Index.ets

1. import { HMNavigation } from '@hadss/hmrouter';
2. import { AttributeUpdater } from '@kit.ArkUI';
4. @Entry
5. @Component
6. struct Index {
7.   @State message: string = 'Hello World';
8.   navModifier:NavModifier = new NavModifier()
9.   build() {
10.   Column(){
11.     HMNavigation({
12.       navigationId:'nav1',
13.       homePageUrl:'PageA',
14.       options:{
15.         modifier:this.navModifier
16.     }
17.     }){
18.       //当没有首页的时候显示界面
19.       Text('这是默认首页')
20.         .fontSize(30)
21.         .fontColor(Color.Red)
22.     }
23.   }
24.   .width('100%')
25.   .height('100%')
26.   }
27. }
29. /*
30.  * 修饰符对象，作用：用于对Navigation做界面上的属性设置
31.  * */
32. class NavModifier extends  AttributeUpdater<NavigationAttribute>{
33.   initializeModifier(instance: NavigationAttribute): void {
34.     instance.mode(NavigationMode.Stack);
35.     instance.navBarWidth('100%');
36.     instance.hideTitleBar(false);
37.     instance.hideToolBar(true);
38.   }
39. }

复制代码

* 创建PageA.ets添加HMRouter注解
 

1. import { HMPopInfo, HMRouter, HMRouterMgr } from "@hadss/hmrouter";
3. @HMRouter({pageUrl:'PageA'})//添加HMRouter注解
4. @Component
5. export  struct pageA{
6.   build() {
7.     Column(){
8.       Text('这是PageA').fontSize(30).fontColor(Color.Red)
9.       Button('跳转到B').onClick(()=>{
10.         HMRouterMgr.push({pageUrl:'PageB',param:'hello'},{
11.           onResult(popInfo:HMPopInfo){
12.            let ret = popInfo.result
13.             console.log('jinggang',JSON.stringify(ret))
14.           }
15.         })
16.       })
17.     }
18.     .width('100%')
19.     .height('100%')
20.   }
21. }

复制代码

* PageB.ets添加HMRouter注解
 

1. import { HMRouter, HMRouterMgr } from '@hadss/hmrouter'
3. @HMRouter({pageUrl:'PageB'})//添加HMRouter注解
4. @Component
5. export  struct PageB{
6.   aboutToAppear(): void {
7.    let ret =  HMRouterMgr.getCurrentParam()
8.     if (ret != null) {
9.       console.log('jingang',ret)
10.     }
11.   }
13.   build() {
14.    Column(){
15.     Text('这是一个B')
16.      Button('返回').onClick(()=>{
17.        HMRouterMgr.pop({param:'yingwu'})
18.      })
19.    }
20.   }
21. }

复制代码

7. 运行实现

Demo
结束语

综上所述，HMRouter为现代移动应用开发提供了一套强盛而灵活的路由管理系统。通过对它的深入相识和合理运用，我们可以显着改善项目标结构清晰度、代码复用性以及整体用户体验。固然，每个项目都有其独特的需求，因此在选择是否采用HMRouter时，应当思量自身的实际环境和技术栈特点。渴望本文能为你评估和引入HMRouter提供有价值的参考信息。随着技术的发展，我们期待看到更多像HMRouter这样优秀的工具出现，不断推动着前端开发领域的进步。

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