HarmonyOS应用开发：三方库HMRouter的研究和使用
前言在现代软件开发中，模块化、组件化的架构计划越来越受到重视。随着应用程序的复杂度增加，路由管理成为了应用架构中的一个关键组成部分。它不但决定了应用内部页面之间的导航逻辑，还影响到应用的性能、可维护性和用户体验。为了更好地管理和优化路由逻辑，许多开发者会选择使用第三方库来辅助实现。HMRouter作为此中的一个选择，旨在为开发者提供一种高效、灵活且易于使用的路由管明白决方案。
关于HMRouter
HMRouter作为HarmonyOS的页面跳转场景解决方案，聚焦应用内原生页面的跳转逻辑。 HMRouter底层对系统Navigation进行封装，集成了Navigation、NavDestination、NavPathStack的系统能力，提供了可复用的路由拦截、页面生命周期、自定义转场动画，并且在传参、额外的生命周期、服务型路由方面临系统能力进行了扩展。 帮助开发者更好的进行模块间解耦。
HMRouter的重要功能及使用案例
一、安装配置
库地址：(https://gitee.com/hadss/hmrouter)
首先，要在项目中使用HMRouter，你必要根据项目安装相应的版本。
1、选择Terminal，使用ohpm安装
ohpm install @hadss/hmrouter https://i-blog.csdnimg.cn/direct/7d1b72f6a1804d2d901a9e8c3b6dae28.png
2、插件配置，hvigor文件夹下的hvigor-config.json5下添加依靠
"dependencies": {
"@hadss/hmrouter-plugin":"^1.0.0-rc.10"
} https://i-blog.csdnimg.cn/direct/a3d5eea591d245cebe7e524bbb010ba3.png
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: /* Custom plugin to extend the functionality of Hvigor. */
} https://i-blog.csdnimg.cn/direct/034387d32d3d49769bf1bc4bf1bcf0ed.png
4、设置扫描路径，在根目录下，创建hmrouter_config.json文件，对应目录下创建components文件夹。
{
"scanDir": ["src/main/ets/components", "src/main/ets/interceptors"],
"saveGeneratedFile": false
} https://i-blog.csdnimg.cn/direct/0fdab4cb493444dea714ebf817a32389.png
ps: 开发阶段"saveGeneratedFile": ture，运行以后"saveGeneratedFile": false
https://i-blog.csdnimg.cn/direct/5afa5c2a9aef4b8995c5e3c3018a0c98.png
5、工程配置build-profile.json5 （自动生成了）
"buildOption": {
"strictMode": {
"caseSensitiveCheck": true,
"useNormalizedOHMUrl": true
}
} https://i-blog.csdnimg.cn/direct/247aa78c42974154ba63b2dd24c66012.png
二、代码实现
1. HMRouterMgr初始化
HMRouterMgr.init({
context:this.context
}) https://i-blog.csdnimg.cn/direct/1a2887a20cf34b0c8689bc12a1511493.png
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. 运行实现
https://i-blog.csdnimg.cn/direct/7ee7559aa5ae499189bf7053d60f12c9.pnghttps://i-blog.csdnimg.cn/direct/1beacc4a1a6b49379fd8778d92d425ef.png
Demo
结束语
综上所述，HMRouter为现代移动应用开发提供了一套强盛而灵活的路由管理系统。通过对它的深入相识和合理运用，我们可以显着改善项目标结构清晰度、代码复用性以及整体用户体验。固然，每个项目都有其独特的需求，因此在选择是否采用HMRouter时，应当思量自身的实际环境和技术栈特点。渴望本文能为你评估和引入HMRouter提供有价值的参考信息。随着技术的发展，我们期待看到更多像HMRouter这样优秀的工具出现，不断推动着前端开发领域的进步。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]