ToB企服应用市场:ToB评测及商务社交产业平台

标题: HarmonyOS应用开发：三方库HMRouter的研究和使用 [打印本页]
作者: 罪恶克星    时间: 昨天 23:55
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4