【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%")
  }
}

实现效果

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

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

相关推荐
herogus丶7 分钟前
【Chrome】‘Good助手‘ 扩展程序使用介绍
前端·chrome
独立开阀者_FwtCoder11 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者13 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder14 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder14 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
weixin_3993806929 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说1 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
洛小豆2 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js