##鸿蒙开发能力 ##HarmonyOS SDK 应用服务 ##鸿蒙金融类应用 （金融理财 #
一、前言
经过 router 到 navigation，直到 HMRouter 的横空出世。鸿蒙应用内最强的路由管理终于出现了。被疯狂吐槽的 router 因为各种路由需求无法满足，使用僵化，已经被官方放弃，不推荐使用。更新出 navigation 被 TOP200 应用疯狂适配后，爆出一堆 bug 和新需求。现在 HMRouter 的出现，终于可以让大家在路由管理上，丝滑操作了。
比如在 Android 和 IOS 上最常见的回退需求。router 和 navigation 都无法做到。A-B-C-D 三级页面。D 页面返回到 A，可以直接使用 pop 指定跳转的 url 进行实现。
本章讲解 HMRouter 是什么，能力是什么，如何快速集成。后续章节对其扩展特性功能进行详细讲解。
二、HMRouter
1.知其然才能知其所以然。我们要先搞清楚 HMRouter 是什么。HMRouter 作为路由管理，框架底层对 Navigation 相关能力进行了封装，让我们无需关心繁琐的 navigation 逻辑。
2.HMRouter 都能做什么？能力如何？具备页面跳转、弹窗提示、转场动效、数据加载、维测场景。总的来说，它是 HarmonyOS 上页面跳转的场景解决方案，主要解决应用内原生页面间相互跳转的问题。
3.HMRouter 是什么形态？作为插件集成到项目中进行使用，目前代码开源在 Gitee 上，也可以直接拿源码模块使用，或者自己魔改（不过要注意在商业项目中使用，开源协议的问题）。
三、快速使用
（1）集成 HMRouter 插件 1.首先需要下载依赖
"dependencies": { "@hadss/hmrouter": "^1.0.0-rc.5" }
复制代码
2.编译插件配置
"dependencies": { "@hadss/hmrouter-plugin": "^1.0.0-rc.4" // 使用npm仓版本号},
复制代码
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. */}
复制代码
（2）初始化工具在 EntryAbility，你的启动模块中配置初始化工具。
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); HMRouterMgr.init({ context: this.context });}
复制代码
（3）初始化首页与 Navigation 相同，页面 build 中需要包裹容器进行页面的显示。与 Navigation 不同的是，该容器需要在,Column 或者 Stack 之内套着使用。
代码文本参见下方的 DEMO 代码示例。
（4）配置跳转页跳转到的目标页面，通过 HMRouter 路由注解标签的形式，进行页面信息的配置。设置瞄点，使上级页面可跳转过来。
代码文本参见下方的 DEMO 代码示例。
（5）完成（实现基础的页面跳转和返回）
DEMO 代码示例：Index.ets 首页
import { AttributeUpdater } from '@kit.ArkUI';import { HMDefaultGlobalAnimator, HMNavigation, HMRouterMgr } from '@hadss/hmrouter';
/** * 界面样式公用函数 */class NavModifier extends AttributeUpdater<NavigationAttribute> { initializeModifier(instance: NavigationAttribute): void { instance.mode(NavigationMode.Stack); instance.navBarWidth('100%'); instance.hideTitleBar(true); instance.hideToolBar(true); }}
@Entry@Componentstruct Index { modifier: NavModifier = new NavModifier();
aboutToAppear(): void {
}
build() { // @Entry中需要再套一层容器组件,Column或者Stack Column(){ // 使用HMNavigation容器 HMNavigation({ navigationId: 'mainNavigation', options: { // 设置动画样式 standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR, // 设置弹框动画样式 dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR, // 设置页面navigation的参数，标题栏，工具栏，bar那些 modifier: this.modifier } }) { Row() { Text("点击跳转") .fontSize(50) .onClick(()=>{ HMRouterMgr.push({pageUrl: 'pageB'}) }) } .width('100%') .height('100%') .backgroundColor(Color.Yellow) .justifyContent(FlexAlign.Center) } } .height('100%') .width('100%') }}
复制代码
PageB.ets 跳转页
import { HMRouter, HMRouterMgr } from "@hadss/hmrouter"
// HMRouter 路由标签使用在自定义组件struct上，且该自定义组件需要添加export关键字@HMRouter({ pageUrl: 'pageB' })@Componentexport struct PageB {
build() { Row(){ Text("点击返回") .fontSize(50) .onClick(()=>{ HMRouterMgr.pop(); }) }.width("100%").height("100%").backgroundColor(Color.Red).justifyContent(FlexAlign.Center) }}
复制代码
评论