HarmonyOS Next 入门实战 - 导航框架：HMRouter
基础知识
目前官方推荐的最佳解决方案，是官方对于Navigation导航组件的封装，使用更简单便捷。如果熟悉Navigation的话，使用起来很快上手。
首先先集成HMRouter模块
使用命令行安装依赖：
ohpm install @hadss/hmrouter
或在模块的 oh-package.json5 文件中添加依赖
{
"dependencies": {
"@hadss/hmrouter": "^1.0.0-rc.6",
}
}
插件配置
在项目级的 hvigor/hvigor-config.json5 中添加插件依赖
{
"dependencies": {
"@hadss/hmrouter-plugin": "^1.0.0-rc.7"
},
}
在模块的 hvigorfile.ts 文件中应用插件
import { hapTasks } from '@ohos/hvigor-ohos-plugin';
import { hapPlugin } from '@hadss/hmrouter-plugin'; //导入插件
export default {
system: hapTasks,
plugins:[hapPlugin()] //应用插件，
}
//还有harPlugin(),hspPlugin(),模块是什么类型，就用对应的方法
在项目的build-profile.json5中，配置useNormalizedOHMUrl属性为true
{
"app": {
"products": [
{
"name": "default",
"signingConfig": "debug",
"compatibleSdkVersion": "5.0.0(12)",
"runtimeOS": "HarmonyOS",
"buildOption": {
"strictMode": {
"useNormalizedOHMUrl": true
}
}
}
],
}
}
HMRouter的配置就完成了。
初始化HMRouter
在入口的 UIAbility 类中（通常名字为EntryAbility ）的 onCreate() 方法中调用HMRouter初始化方法，
export default class EntryAbility extends UIAbility {
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
//初始化HMRouterMgr
HMRouterMgr.init({
context: this.context
})
}
}
定义首页
HMNavigation 用来包裹首页内容：
其中 homePageUrl 为加载时显示的页面地址，options中可以设置框架的属性（NavModifier）和首页的元素，设置内容基本与Navigation相同。
class NavModifier extends AttributeUpdater<NavigationAttribute> {
initializeModifier(instance: NavigationAttribute): void {
instance.mode(NavigationMode.Stack);
instance.navBarWidth('100%');
instance.titleMode(NavigationTitleMode.Mini)
instance.hideBackButton(true)
// instance.hideNavBar(true)
}
}
@Entry
@Component
struct HMRouterPage {
static readonly TAG = 'HMRouterPage'
modifier: NavModifier = new NavModifier()
aboutToAppear(): void {
HMRouterMgr.registerPageBuilder({
builder: wrapBuilder(PageOneBuilder),
pageUrl: "pageOne",
})
}
build() {
Column() {
HMNavigation({
homePageUrl: '',
navigationId: 'mainNavigation', options: {
// standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR,
// dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR,
modifier: this.modifier,
title: { titleValue: "首页" },
menus: [{
value: "menu1",
icon: "resources/base/media/menu1.png",
action: () => {
}
}, {
value: "menu2",
icon: "resources/base/media/menu2.png",
action: () => {
}
}]
}
}) {
PageMain()
}
}.width('100%').height('100%')
}
}
定义子页
使用@HMRouter定义子页面路由
使用HMRouterMgr的 push()，replace()，pop()等方法进行页面之间的导航
使用HMRouterMgr.getCurrentParam()获取当页面的参数
//PageA
@HMRouter({ pageUrl: 'pageA' })
@Component
export struct PageA {
build() {
Column() {
Text("Page A")
Button("Page B").onClick(() => {
HMRouterMgr.push({ pageUrl: 'pageB', param: "param" })
})
Button("Back").onClick(() => {
HMRouterMgr.pop({ param: "pageA backParam" })
})
}
}
}
//PageB
@HMRouter({ pageUrl: 'pageB'})
@Component
export struct PageB {
@State params: string | undefined = HMRouterMgr.getCurrentParam()?.toString()
build() {
Column(){
Text("Page B")
Text("params:" + this.params)
Button("Page B").onClick(()=>{
HMRouterMgr.pop({ param: "pageB backParam" })
})
}
}
}
另一种方法HMRouterMgr.registerPageBuilder
使用HMRouterMgr.registerPageBuilder()动态注册子页面路由，子页面内容使用NavDestination组件包括，无缝将Navigation框架迁移到HMRouterMgr
//定义子页面builder
@Builder
export function PageOneBuilder() {
PageOne()
}
@Component
export struct PageOne {
@State params: string | undefined = HMRouterMgr.getCurrentParam()?.toString()
build() {
NavDestination() {
Column() {
Text("page1")
.padding(10)
.fontSize(20)
.fontWeight(500)
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
}
.title("page1")
.menus([{
value: "menu1",
icon: "resources/base/media/menu1.png",
action: () => {
}
}, {
value: "menu2",
icon: "resources/base/media/menu2.png",
action: () => {
}
}])
}
}
//动态注册路由
HMRouterMgr.registerPageBuilder({
builder: wrapBuilder(PageOneBuilder),
pageUrl: "page1",
})
HMRouter还有拦截器，生命周期，转场动画，服务路由等功能，限于篇幅不在细说，可以查看官方文档：
HMRouter官方文档
下面我们就开始搭建练习项目的路由框架
项目实践
注意：原本项目实战中打算使用HMRouter组件，实际发现使用HMRouter时菜单icon无法动态更新，因此替换成Navigation组件。
我们的demo中涉及三个页面，首页，详情页，作者页。首页作为路由主页面，详情页及作者页作为路由子页面。因此我们只需要注册后2个页面路由即可。
首页
@Builder
function PageMap(name: string) {
if (name == PageURls.PoetryDetailPage) {
PoetryDetailPage()
} else if (name == PageURls.AuthorPage) {
AuthorPage()
}
}
//首页
@Entry
@Component
struct Index {
@Provide('navPathStack') navPathStack: NavPathStack = new NavPathStack()
build() {
Stack() {
Navigation(this.navPathStack) {
Column() {
Button(PageURls.PoetryDetailPage)
.onClick(() => {
this.navPathStack.pushPath({ name: PageURls.PoetryDetailPage })
})
}
}
.navDestination(PageMap)
.titleMode(NavigationTitleMode.Mini)
.title("首页")
.hideBackButton(true)
}.width('100%').height('100%')
}
}
详情页
//详情页
@Component
export struct PoetryDetailPage {
@Consume('navPathStack') navPathStack: NavPathStack
build() {
NavDestination() {
Text("详情页")
}.title({
main: this.poetry!!.title,
sub: `[${this.poetry!!.dynasty}]${this.poetry!!.author}`
}).menus([{
value: "作者",
icon: "resources/base/media/ic_person_24px.svg",
action: () => {
this.navPathStack.pushPath({ name: PageURls.AuthorPage })
}
}])
}
}
作者页
//作者页
@Component
export struct AuthorPage {
@Consume('navPathStack') navPathStack: NavPathStack
build() {
NavDestination() {
Column() {
Text("AuthorPage")
}
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
}.title(this.name)
}
}
//PageUrl
export class PageUrls{
public static PoetryDetailPage = 'PoetryDetailPage'
public static AuthorPage = 'AuthorPage'
}
到此我们基本的导航框架已经搭建完成，下一步我们来实现首页的列表展示。
本文的技术设计和实现都是基于作者工作中的经验总结，如有错误，请留言指正，谢谢。
