【HarmonyOS】HMRouter使用详解（三）生命周期

生命周期（Lifecycle）

使用HMRouter的页面跳转时，想实现和Navigation一样的生命周期时，需要通过新建生命周期类来实现对页面对某一个生命周期的监控。

新建Lifecycle类

通过继承IHMLifecycle接口实现生命周期接口的方法重写。通过添加@HMLifecycle装饰器，来定义生命周期类的名称，然后在页面中使用

IHMLifecycle

javascript 复制代码

export interface IHMLifecycle {
    onPrepare?(ctx: HMLifecycleContext): void;
    onAppear?(ctx: HMLifecycleContext): void;
    onDisAppear?(ctx: HMLifecycleContext): void;
    onShown?(ctx: HMLifecycleContext): void;
    onHidden?(ctx: HMLifecycleContext): void;
    onWillAppear?(ctx: HMLifecycleContext): void;
    onWillDisappear?(ctx: HMLifecycleContext): void;
    onWillShow?(ctx: HMLifecycleContext): void;
    onWillHide?(ctx: HMLifecycleContext): void;
    onReady?(ctx: HMLifecycleContext): void;
    onBackPressed?(ctx: HMLifecycleContext): boolean;
}

onPrepare：在拦截器执行后，路由栈真正push前触发。
onWillAppear：在路由组件创建后，挂载到组件树之前执行。
onAppear：通用生命周期事件，路由组件挂载到组件树时执行。
onWillShow：路由组件布局显示之前执行，此时页面不可见（应用切换到前台不会触发）。
onShown：路由组件布局显示之后执行，此时页面已完成布局。
onWillHide：路由组件触发隐藏之前执行（应用切换到后台不会触发）。
onHidden：路由组件触发隐藏后执行（非栈顶页面push进栈，栈顶页面pop出栈或应用切换到后台）。
onWillDisappear：路由组件即将销毁之前执行，如果有转场动画，会在动画前触发（栈顶页面pop出栈）。
onDisappear：通用生命周期事件，路由组件从组件树上卸载销毁时执行。
onReady：在即将构件子组件时触发此回调。
onBackPressed：在路由组件绑定的页面栈中存在内容时，此回调生效。当点击返回键时，触发该回调。返回值为true时，表示重写返回键逻辑，false时，表示回退到上一个页面。

下面插入Navigation的生命周期流程图，HMRouter的生命周期流程类似，在此基础上增加了额外的生命周期流程。

@HMLifecycle装饰器

javascript 复制代码

export declare function HMLifecycle(param: HMLifecycleParam): ObjectConstructor;
export interface HMLifecycleParam {
    lifecycleName: string;
    priority?: number;
    global?: boolean;
}

标记在实现了IHMLifecycle的对象上，声明此对象为一个自定义生命周期处理器。

lifecycleName：自定义生命周期处理器名称，必填。
priority:生命周期优先等级。按照优先等级顺序触发，不区分自定义或者全局生命周期，优先级相同时先执行@HMRouter中定义的自定义生命周期。
global：是否为全局生命周期，true时，所有页面生命周期事件为当前设定的生命周期处理器，默认为false。

实现代码

在之前文章的基础上进行修改。添加一个Lifecycles文件夹，并新建一个TwoPageLifecycle，来实现TwoPage页面的生命周期。

TwoPageLifecycle

javascript 复制代码

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

@HMLifecycle({ lifecycleName: 'TwoPageLifecycle' })
export class TwoPageLifecycle implements IHMLifecycle {
  /**
   * 在拦截器执行后，路由栈真正push前触发
   * @param ctx
   */
  onPrepare(ctx: HMLifecycleContext): void {
    console.debug("router", 'onPrepare');
  }

  onWillAppear(ctx: HMLifecycleContext): void {
    console.debug("router", 'onWillAppear');
  }

  onAppear(ctx: HMLifecycleContext): void {
    console.debug("router", 'onAppear');
  }

  onWillShow(ctx: HMLifecycleContext): void {
    console.debug("router", 'onWillShow');
  }

  onShown(ctx: HMLifecycleContext): void {
    console.debug("router", 'onShown');
  }

  onWillHide(ctx: HMLifecycleContext): void {
    console.debug("router", 'onWillHide');
  }

  onHidden(ctx: HMLifecycleContext): void {
    console.debug("router", 'onHidden');
  }

  onWillDisappear(ctx: HMLifecycleContext): void {
    console.debug("router", 'onWillDisappear');
  }

  onDisAppear(ctx: HMLifecycleContext): void {
    console.debug("router", 'onDisAppear');
  }

  onReady(ctx: HMLifecycleContext): void {
    console.debug("router", 'onReady');
  }

  onBackPressed(ctx: HMLifecycleContext): boolean {
    console.debug("router", 'onBackPressed');
    return true;
  }
}

TwoPage

javascript 复制代码

import { HMPopInfo, HMRouter, HMRouterMgr } from '@hadss/hmrouter'
import { PageModel } from '../../Models/PageModel'

@HMRouter({ pageUrl: "TwoPage", lifecycle: "TwoPageLifecycle" })
@Component
export struct TwoPage {
  aboutToAppear(): void {
    let currentParam: PageModel = HMRouterMgr.getCurrentParam() as PageModel;
    if (currentParam == undefined) {
      return;
    }
    console.debug("router", 'name:' + currentParam.Name);
    console.debug("router", 'age:' + currentParam.Age);
  }

  build() {
    Column({ space: 20 }) {
      Button("ThreePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.push({
            navigationId: "mainNavigation",
            pageUrl: "ThreePage"
          }, {
            onResult: (popInfo: HMPopInfo) => {
              let popResult: PageModel = popInfo.result as PageModel;
              if (popResult == null || popResult == undefined) {
                return;
              }
              console.debug("router", 'name:' + popResult.Name);
              console.debug("router", 'age:' + popResult.Age);
            }
          })
        })
      Button("ThreeReplacePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.replace({
            navigationId: "mainNavigation",
            pageUrl: "ThreePage"
          }, {
            onResult: (popInfo: HMPopInfo) => {
              let popResult: PageModel = popInfo.result as PageModel;
              if (popResult == null || popResult == undefined) {
                return;
              }
              console.debug("router", 'name:' + popResult.Name);
              console.debug("router", 'age:' + popResult.Age);
            }
          })
        })
      Button("HomePage")
        .width("80%")
        .onClick(() => {
          HMRouterMgr.pop({
            navigationId: "mainNavigation"
          })
        })
    }
    .height("100%")
    .width("100%")
  }
}

实现效果

在生命周期方法中实现内容打印，截图如下：

可以看到生命周期的调用顺序