HarmonyOS实战开发之HMRouter实现跳转

程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java相关开发、鸿蒙开发、人工智能等,专注于程序员搞钱那点儿事,希望在搞钱的路上有你相伴！君志所向,一往无前！

0.前言

不知道大家在日常进行Harmony OS 的App开发的时候，对于页面跳转使用的都咋样，官方是提供了2种方式，分别是组件导航（Navigation）和页面路由（@ohos.router）

两者都是支持应用内的页面跳转，但组件导航支持在组件内部进行跳转，使用更灵活。组件导航具备更强的一次开发多端部署能力，可以进行更加灵活的页面栈操作，同时支持更丰富的动效和生命周期。

因此，推荐使用组件导航（Navigation）来实现页面跳转以及组件内的跳转，以获得更佳的使用体验。

但是我发现在使用组件导航的时候，的确有点麻烦，特别对于普通的项目而言，的确不是很好用，所以又找到了：HMRouter

1.HMRouter是什么呢

HMRouter是HarmonyOS上页面跳转的场景解决方案，主要解决应用内原生页面间相互跳转的问题。

HMRouter路由框架的功能特性，如下所示：

使用自定义注解实现路由跳转
支持HAR/HSP
支持路由拦截、路由生命周期
简化自定义动画配置：配置全局动画，单独指定某个页面的切换动画
支持不同的页面类型：单例页面、Dialog页面

当然了HMRouter主要可以实现以下功能：

1.实现页面跳转，主要包括：页面跳转与返回、多次页面跳转，返回指定页面、应用未登录，点击跳转登录页的校验、实现单例页面的跳转等效果。

2.弹窗提示，主要包括：实现弹窗类型的页面、返回时弹窗，提示用户是否确认返回、返回时弹窗，提示用户是否确认返回等功能的实现。

3.转场动效，主要包括：全局自定义转场动效、特定页面设置自定义转场、根据条件呈现不同转场动效、交互式转场等。

4.数据加载，主要是以下几点：数据请求预加载，与页面跳转并行化、页面重开数据恢复等。

5.维测场景，主要包括：页面埋点开发的实现。

2.HMRouter使用步骤

2.1 下载依赖

打开终端，执行下面的命令，进行下载：

ohpm install @hadss/hmrouter

2.2 配置路由编译插件

在项目的 hvigor/hvigor-config.json 文件中添加依赖 @hadss/hmrouter-plugin 内容如下所示：

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

ps:版本号请看上一步显示的版本号哈，一致哟！

2.3 在模块中引入路由编译插件

修改hvigorfile.ts

内容如下所示：

import { hapTasks } from '@ohos/hvigor-ohos-plugin';
import { hapPlugin } from '@hadss/hmrouter-plugin'; //引入HMRouter的插件
export default {system: hapTasks, plugins:[hapPlugin()]   //配置插件
}

ps：注意如果项目使用的hap就用 hapPlugin，那么如果使用的 har就需要使用 harPlugin插件，你记住了吗？

2.4 HMRouter实现跳转

接下来就可以开开心心的使用HMRouter进行页面的跳转啦。那么详细的步骤如下所示：

0.准备2个页面，分别是Test1和Test2

1.在EntryAbility中实现初始化

一般都是在onCreate中实现初始化

具体代码如下所示：

import { HMRouterMgr } from '@hadss/hmrouter'; //导入export default class EntryAbility extends UIAbility {onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);//HMRouter的初始化HMRouterMgr.init({context: this.context})hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');}……}

2.在首页中定义入口 首页是Index页面，实现如下的配置，主要是四步：

第一步：导入

第二步：自定义导航属性

第三步：实现HMNavigation容器配置

第四步：实现页面跳转

完整代码如下所示：

//1.导入
import { HMDefaultGlobalAnimator,HMNavigation,HMRouterMgr  } from '@hadss/hmrouter';
import { AttributeUpdater } from '@kit.ArkUI'
import { hilog } from '@kit.PerformanceAnalysisKit';@Entry
@Component
struct Index {@State message: string = '程序员Feri，首页';//导航modifier: NavModifier = new NavModifier();build() {Column(){// 3.实现HMNavigation容器配置HMNavigation({navigationId: 'main', options: {standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR,dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR,modifier: this.modifier}}){Column() {Text(this.message).fontSize(30).fontWeight(FontWeight.Bold).margin(20)//4.页面跳转Button("跳转测试页面").onClick(()=>{hilog.info(1000,"rmr","点击跳转了")HMRouterMgr.push({navigationId:"main",pageUrl:"test1"})})}}}}
}/* 2.实现自定义导航属性*/
class NavModifier extends AttributeUpdater<NavigationAttribute> {initializeModifier(instance: NavigationAttribute): void {instance.mode(NavigationMode.Stack);instance.navBarWidth('100%');instance.hideTitleBar(true);instance.hideToolBar(true);}
}

3.页面中导入

在Index和Test1和Test2页面中分别导入

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

4.页面中声明路径

为需要跳转的页面添加@HMRouter注解，并配置其中的pageUrl参数在Test1和Test2都需要完成声明

@HMRouter({ pageUrl: 'test1' }) //定义本页路径

5.实现跳转

 Button("跳转第二个页面").onClick(()=>{HMRouterMgr.push({pageUrl: "test2"})}).margin(20)

6.效果展示

首页：

第一个页面：

第二个页面：

点击跳转，可以看到第二个页面：

第一个页面的完整代码如下所示：

import { HMRouter,HMRouterMgr  } from '@hadss/hmrouter'; //导入@HMRouter({ pageUrl: 'test1' }) //定义本页路径
@Entry
@Component
export struct Test1{build() {Column(){Text("程序员Feri,第一个页面").margin(10)Button("回到上一页").onClick(()=>{//回到上一页HMRouterMgr.pop({navigationId:"main"})}).margin(10)Button("跳转第二个页面").onClick(()=>{HMRouterMgr.push({pageUrl: "test2"})}).margin(20)}}
}

第二个页面的完整代码如下所示：

import { HMRouter,HMRouterMgr  } from '@hadss/hmrouter'; //导入@HMRouter({ pageUrl: 'test2' }) //定义本页路径
@Entry
@Component
export struct Test2{build() {Column(){Text("程序员Feri,第二个页面").margin(10)Button("跳转到第一个页面").onClick(()=>{//跳转HMRouterMgr.push({pageUrl: "test1"})//回到上一页// HMRouterMgr.pop({navigationId:"main"})}).margin(20)}}
}