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

目录

前言
关于HMRouter
HMRouter的主要功能及使用案例
代码实现
结束语

前言

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

关于HMRouter

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

HMRouter的主要功能及使用案例

一、安装配置

库地址：HMRouter
首先，要在项目中使用HMRouter，你需要根据项目安装相应的版本。

1、选择Terminal，使用ohpm安装

ohpm install @hadss/hmrouter

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

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

3、模块目录下hvigorfile.ts

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

export default {
    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
    plugins:[hapPlugin()]         /* Custom plugin to extend the functionality of Hvigor. */
}

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

{
  "scanDir": ["src/main/ets/components", "src/main/ets/interceptors"],
  "saveGeneratedFile": false
}

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

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

      "strictMode": {
        "caseSensitiveCheck": true,
        "useNormalizedOHMUrl": true
      }
    }

二、代码实现

1. HMRouterMgr初始化

   HMRouterMgr.init({
      context:this.context
    })

2. HMNavigation组件的使用

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

   HMNavigation({
      navigationId:'nav1',
      :'PageA'
    }){
      //当没有首页的时候显示界面
      Text('这是默认首页')
        .fontSize(30)
        .fontColor(Color.Red)
    }

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

...
  navModifier:NavModifier = new NavModifier()
...
   HMNavigation({
      navigationId:'nav1',
      homePageUrl:'PageA',
      :{
        modifier:this.navModifier
    }
    })
...
/*
 * 修饰符对象，作用：用于对Navigation做界面上的属性设置
 * */
class NavModifier extends  AttributeUpdater<NavigationAttribute>{
  initializeModifier(instance: NavigationAttribute): void {
    instance.mode(NavigationMode.Stack);
    instance.navBarWidth('100%');
    instance.hideTitleBar(false);
    instance.hideToolBar(true);
  }

4. 跳转（带参）

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

5. 返回（带参）

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

6. 完整代码

• Index.ets

import { HMNavigation } from '@hadss/hmrouter';
import { AttributeUpdater } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  navModifier:NavModifier = new NavModifier()
  build() {
  Column(){
    HMNavigation({
      navigationId:'nav1',
      homePageUrl:'PageA',
      options:{
        modifier:this.navModifier
    }
    }){
      //当没有首页的时候显示界面
      Text('这是默认首页')
        .fontSize(30)
        .fontColor(Color.Red)
    }
  }
  .width('100%')
  .height('100%')
  }
}

/*
 * 修饰符对象，作用：用于对Navigation做界面上的属性设置
 * */
class NavModifier extends  AttributeUpdater<NavigationAttribute>{
  initializeModifier(instance: NavigationAttribute): void {
    instance.mode(NavigationMode.Stack);
    instance.navBarWidth('100%');
    instance.hideTitleBar(false);
    instance.hideToolBar(true);
  }
}

• 创建PageA.ets添加HMRouter注解

import { HMPopInfo, HMRouter, HMRouterMgr } from "@hadss/hmrouter";

@HMRouter({pageUrl:'PageA'})//添加HMRouter注解
@Component
export  struct pageA{
  build() {
    Column(){
      Text('这是PageA').fontSize(30).fontColor(Color.Red)
      Button('跳转到B').onClick(()=>{
        HMRouterMgr.push({pageUrl:'PageB',param:'hello'},{
          onResult(popInfo:HMPopInfo){
           let ret = popInfo.result
            console.log('jinggang',JSON.stringify(ret))
          }
        })
      })
    }
    .width('100%')
    .height('100%')
  }
}

• PageB.ets添加HMRouter注解

import { HMRouter, HMRouterMgr } from '@hadss/hmrouter'

@HMRouter({pageUrl:'PageB'})//添加HMRouter注解
@Component
export  struct PageB{
  aboutToAppear(): void {
   let ret =  HMRouterMgr.getCurrentParam()
    if (ret != null) {
      console.log('jingang',ret)
    }
  }

  build() {
   Column(){
    Text('这是一个B')
     Button('返回').onClick(()=>{
       HMRouterMgr.pop({param:'yingwu'})
     })
   }
  }
}

7. 运行实现
   
   

Demo

结束语

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