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.维测场景，主要包括：页面埋点开发的实现。
3.HMRouter使用步骤
3.1 下载依赖
打开终端，执行下面的命令，进行下载：
ohpm install @hadss/hmrouter
3.2 配置路由编译插件
在项目的 hvigor/hvigor-config.json 文件中添加依赖 @hadss/hmrouter-plugin 内容如下所示：
"dependencies": {
"@hadss/hmrouter-plugin": "^1.0.0-rc.10"
},
ps:版本号请看上一步显示的版本号哈，一致哟！
3.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插件，你记住了吗？
3.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)
}
}
}
3.5 HMRouter页面跳转的方式
HMRouter实现页面跳转有3种方式，分别如下所示：
push ：目标页面不会替换当前页，而是插入页面栈。可以使用pop实现页面的返回操作
replace：目标页面会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页
pop：返回页面栈的上一个页面，skipedLayerNumber页面返回的层级数量，默认为0，表示返回上一级，1表示跳过一级页面返回
好了，本篇就到这里啦，希望能对你有所帮助，关注我，带你起飞鸿蒙开发！