鸿蒙Next-集成HmRouter的路由模式

第一步：全局安装hmrouter依赖

ohpm install @hadss/hmrouter

第二步：修改全局的hvigor-config.json5(加入hm-router插件)

hvigor/hvigor-config.json5

{
  "modelVersion": "5.0.1",
  "dependencies": {
    "@hadss/hmrouter-plugin": "^1.0.0-rc.10"
  },
  "execution": {
    // "analyze": "normal",                     /* Define the build analyze mode. Value: [ "normal" | "advanced" | false ]. Default: "normal" */
    // "daemon": true,                          /* Enable daemon compilation. Value: [ true | false ]. Default: true */
    // "incremental": true,                     /* Enable incremental compilation. Value: [ true | false ]. Default: true */
    // "parallel": true,                        /* Enable parallel compilation. Value: [ true | false ]. Default: true */
    // "typeCheck": false,                      /* Enable typeCheck. Value: [ true | false ]. Default: false */
  },
  "logging": {
    // "level": "info"                          /* Define the log level. Value: [ "debug" | "info" | "warn" | "error" ]. Default: "info" */
  },
  "debugging": {
    // "stacktrace": false                      /* Disable stacktrace compilation. Value: [ true | false ]. Default: false */
  },
  "nodeOptions": {
    // "maxOldSpaceSize": 8192                  /* Enable nodeOptions maxOldSpaceSize compilation. Unit M. Used for the daemon process. Default: 8192*/
    // "exposeGC": true                         /* Enable to trigger garbage collection explicitly. Default: true*/
  }
}

第三步：在products成加入hap编译插件

需要注意hap/hsp/har对应的编译插件不同

products/entry/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: [hapPlugin()] // 使用HM Custom plugin to extend the functionality of Hvigor. */
}

第四步：在features的四个包中加入hsp的编译插件-四个hsp包的hvigorfile.ts插件均一致

features/cart/hvigorfile.ts

import { hspTasks } from '@ohos/hvigor-ohos-plugin';
import { hspPlugin } from "@hadss/hmrouter-plugin";

export default {
  system: hspTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
  plugins: [hspPlugin()]         /* Custom plugin to extend the functionality of Hvigor. */
}

补充：为了防止底层basic也有可能做一些公共页面，也加入同样的配置

commons/basic/hvigorfile.ts

import { hspTasks } from '@ohos/hvigor-ohos-plugin';
import { hspPlugin } from "@hadss/hmrouter-plugin";

export default {
  system: hspTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
  plugins: [hspPlugin()]         /* Custom plugin to extend the functionality of Hvigor. */
}

第五步：在入口Ability中加入HmRouter的初始化上下文

products/entry/src/main/ets/entryability/EntryAbility.ets

import { HMRouterMgr } from '@hadss/hmrouter';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    
    // 初始化HmRouter
    HMRouterMgr.init({
      context: this.context,
    });
   
    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

最后一步：

定义路由入口

将整个页面的初始化页面作为路由的入口

要求：

●使用HmNavigation作为根容器，包裹所有子页面

●HmNavigaiton外层必须再包裹一个容器组件

●实现一个继承类并且实例化，绑定HmNavigaiton的modifer属性

●使用HmNavigation包裹入口组件

import { HomeView } from 'home/Index';
import { CategoryView } from 'category/Index';
import { CartView } from 'cart/Index';
import { MyView } from 'my/Index';
import { BreakpointConstants, BreakPointType, MeiKouConstants } from 'basic';
import { AttributeUpdater } from '@kit.ArkUI';
import { HMDefaultGlobalAnimator, HMNavigation } from '@hadss/hmrouter';

interface TabItem {
  text: string
  normal: ResourceStr
  active: ResourceStr
}


class MyNavModifier extends AttributeUpdater<NavigationAttribute> {
  initializeModifier(instance: NavigationAttribute): void {
    instance.titleMode(NavigationTitleMode.Mini)
    instance.hideTitleBar(true)
  }
}

@Entry
@Component
struct Index {
  @State activeIndex: number = 0
  // 断点值
  @StorageProp(BreakpointConstants.BREAK_POINT_KEY)
  currentBreakpoint: string = BreakpointConstants.SM

  // 获取底部安全高度
  @StorageProp(MeiKouConstants.SafeBottom) safeBottom: number = 0

  modifier: MyNavModifier = new MyNavModifier();

  list: TabItem[] = [
    { text: '首页', normal: $r('app.media.ic_public_home_normal'), active: $r('app.media.ic_public_home_active') },
    { text: '分类', normal: $r('app.media.ic_public_pro_normal'), active: $r('app.media.ic_public_pro_active') },
    { text: '购物袋', normal: $r('app.media.ic_public_cart_normal'), active: $r('app.media.ic_public_cart_active') },
    { text: '我的', normal: $r('app.media.ic_public_my_normal'), active: $r('app.media.ic_public_my_active') },
  ]

  build() {
    Column() {
      HMNavigation({
        navigationId: 'mainNavigation', homePageUrl: 'MainPage',
        options: {
          standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR,
          dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR,
          modifier: this.modifier
        },
      }) {
        Tabs({ barPosition: BarPosition.End }) {
          ForEach(this.list, (item: TabItem, index: number) => {
            TabContent() {
              if (index == 0) {
                HomeView()
              } else if (index == 1) {
                CategoryView()
              } else if (index == 2) {
                CartView()
              } else {
                MyView()
              }
            }
            .tabBar(this.TabItemBuilder(item, index))
          })
        }
        .barPosition(
          new BreakPointType({
            sm: BarPosition.End,
            md: BarPosition.End,
            lg: BarPosition.Start
          }).getValue(this.currentBreakpoint)
        )
        .vertical(this.currentBreakpoint === 'lg' ? true : false)
        .scrollable(false)
        .padding({bottom: this.safeBottom})
        .onTabBarClick(index => {
          this.activeIndex = index
        })
      }
    }
  }

  @Builder
  TabItemBuilder(item: TabItem, index: number) {
    Column() {
      Image(this.activeIndex === index ? item.active : item.normal)
        .width(24)
        .aspectRatio(1)
      Text(item.text)
        .fontSize(12)
        .fontColor($r('[basic].color.black'))
    }
    .justifyContent(FlexAlign.SpaceEvenly)
    .height(50)
  }
}