程序员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) } } }
2.5 HMRouter页面跳转的方式
HMRouter实现页面跳转有3种方式，分别如下所示：
push ：目标页面不会替换当前页，而是插入页面栈。可以使用pop实现页面的返回操作
replace：目标页面会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页
pop：返回页面栈的上一个页面，skipedLayerNumber页面返回的层级数量，默认为0，表示返回上一级，1表示跳过一级页面返回
好了，本篇就到这里啦，希望能对你有所帮助，关注我，带你起飞鸿蒙开发！
