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'
}

到此我们基本的导航框架已经搭建完成，下一步我们来实现首页的列表展示。

---

本文的技术设计和实现都是基于作者工作中的经验总结，如有错误，请留言指正，谢谢。