学习笔记（四十一）：HMRouter基本使用

一、初始化路由框架

在UIAbility(src/main/ets/entryability/EntryAbility.ets)中初始化路由框架

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    // 初始化路由框架
    HMRouterMgr.init({
      context: this.context
    });
    // 打开info和debug日志
    HMRouterMgr.openLog('DEBUG');
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }
}

 

二、定义路由入口

import { HMDefaultGlobalAnimator, HMNavigation, HMRouter, HMRouterMgr } from '@hadss/hmrouter';
import { AttributeUpdater } from '@kit.ArkUI';


@HMRouter({ pageUrl: 'Index', animator: 'pageAnimator' })
@Entry
@Component
export struct Index {
  @State message: string = 'Hello';
  modifier: MyNavModifier = new MyNavModifier();
  // 初始化定时器
  private timer: number = 0

  // 周期函数aboutToAppear里添加一个2秒的定时任务跳转到登录页
  aboutToAppear() {
    this.timer = setTimeout(()=>{
      HMRouterMgr.replace({pageUrl: 'Main' })
    },2000)
  }
  // 销毁定时器
  aboutToDisappear() {
    clearTimeout(this.timer)
  }
  build() {
    Column(){
      HMNavigation({
        navigationId: 'mainNavigation', options: {
          standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR,
          dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR,
          modifier: this.modifier
        }
      }) {
        Button(this.message)
          .id('HelloWorld')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
    }
    .height('100%')
    .width('100%')
  }
}

class MyNavModifier extends AttributeUpdater<NavigationAttribute> {
  initializeModifier(instance: NavigationAttribute): void {
    instance.hideNavBar(true);
    instance.mode(NavigationMode.Auto);
    instance.navBarWidth('100%');
    instance.hideToolBar(true);
  }
}

 

 

3、定义生命周期

import { HMLifecycle, HMLifecycleContext, IHMLifecycle } from '@hadss/hmrouter';

@HMLifecycle({lifecycleName: 'ExitAppLifecycle'})
export class ExitAppLifecycle implements IHMLifecycle {
  private lastTime: number = 0; // 上一次后退操作时间
  // 后退按钮事件
  onBackPressed(ctx: HMLifecycleContext): boolean {
    let time = new Date().getTime();
    if(time - this.lastTime > 2000) {
      this.lastTime = time;
      ctx.uiContext.getPromptAction().showToast({
        message: '再按一次返回键回到桌面',
        duration: 2000
      });
      return true;
    } else {
      return false;
    }
  }
}

 

 

4、自定义转场动画

import {
  HMAnimator,
  HMAnimatorHandle,
  IHMAnimator,
  OpacityOption,
  ScaleOption,
  TranslateOption
} from '@hadss/hmrouter';

@HMAnimator({animatorName: 'pageAnimator'})
export class CustomePageAnimator implements IHMAnimator {
  effect(enterHandle: HMAnimatorHandle, exitHandle: HMAnimatorHandle): void {
    // 入场动画
    enterHandle.start((translateOption: TranslateOption, scaleOption: ScaleOption,
      opacityOption: OpacityOption) => {
      translateOption.y = '100%'
    })
    enterHandle.finish((translateOption: TranslateOption, scaleOption: ScaleOption,
      opacityOption: OpacityOption) => {
      translateOption.y = '0'
    })
    enterHandle.duration = 500

    // 出场动画
    exitHandle.start((translateOption: TranslateOption, scaleOption: ScaleOption,
      opacityOption: OpacityOption) => {
      translateOption.y = '0'
    })
    exitHandle.finish((translateOption: TranslateOption, scaleOption: ScaleOption,
      opacityOption: OpacityOption) => {
      translateOption.y = '100%'
    })
    exitHandle.duration = 500
  }
}

 

 

5、页面跳转 ，定义第二个页面Main

import { HMRouter } from "@hadss/hmrouter";

@HMRouter({ pageUrl: 'Main', singleton:true,lifecycle: 'ExitAppLifecycle', animator: 'pageAnimator' })
@Component
export struct Main{
  build() {
    Column(){
      Text('首页')
    }.height('100%').width('100%')
  }
}

 

其他页面跳转该页面操作：

HMRouterMgr.replace({pageUrl: 'Main' })
HMRouterMgr.push({pageUrl: 'Main' })