HarmonyOs @hadss/hmrouter路由接入

参考文档：官方文档

在根目录oh-package.json5配置

{
  "dependencies": {
    "@hadss/hmrouter": "^1.0.0-rc.11"
  }
}

加入路由编译插件

1. hvigor/hvigor-config.json文件

{
  "dependencies": {
    "@hadss/hmrouter-plugin": "^1.0.0-rc.11"
    // 使用npm仓版本号
  },
  // ...其余配置
}

2. 工程根目录的hvigorfile.ts

import { appTasks } from '@ohos/hvigor-ohos-plugin';
export default {
  system: appTasks,
  plugins:[]
}

3. entry模块的hvigorfile.ts

import { hapTasks } from '@ohos/hvigor-ohos-plugin';
import { hapPlugin } from '@hadss/hmrouter-plugin';

export default {
  system: hapTasks,
  plugins: [hapPlugin()] // 使用HMRouter标签的模块均需要配置，与模块类型保持一致
}

工程配置

build-profile.json5

{
  "app": {
    "products": [
      {
        "name": "default",
        "signingConfig": "default",
        "compatibleSdkVersion": "5.0.0(12)",
        "runtimeOS": "HarmonyOS",
        "buildOption": {
          "strictMode": {
            "useNormalizedOHMUrl": true  // 重点这个设置为true
          }
        }
      }
    ],
    // ...其余配置
  }
}

初始化路由框架

大致位置可通过windowStage.loadContent来查找，具体怎么找启动页面可参考上篇文章

// PhoneAbility.ets
export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    HMRouterMgr.init({
      context: this.context
    })
  }
}

定义路由入口

// Index.ets
import { HMDefaultGlobalAnimator, HMNavigation } from "@hadss/hmrouter";
import { AttributeUpdater } from "@kit.ArkUI";

@Entry
@Component
struct Index {
  modifier: MyNavModifier = new MyNavModifier();

  build() {
    // @Entry中需要再套一层容器组件,Column或者Stack
    Column(){
      // 使用HMNavigation容器
      HMNavigation({
        navigationId: 'mainNavigation', homePageUrl: 'YDMainPage',
        options: {
          standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR,
          dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR,
          modifier: this.modifier
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}

class MyNavModifier extends AttributeUpdater<NavigationAttribute> {
  initializeModifier(instance: NavigationAttribute): void {
    instance.hideNavBar(true);
  }
}

路由定义

import { HMRouter } from "@hadss/hmrouter"
// 通过@HMRouter来定义路由，无需在main_pages.json中定义
@HMRouter({
  pageUrl: "MainPage"
})
@Component
export struct MainPage {
  build() {
    Column(){
      Text("首页").fontSize(30).fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
    .backgroundColor("#f4f5f9")
    .justifyContent(FlexAlign.Center)
  }
}

这里插件就引入完成了，可正常使用了，其余使用可参考官网文档
注意⚠️：因为这个插件，预览器则无法正常使用，需在模拟器查看

这个表示预览器不兼容