【HarmonyOS】HMRouter使用详解(三)生命周期

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

生命周期(Lifecycle)


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

新建Lifecycle类


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

IHMLifecycle

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装饰器

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

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

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

实现效果

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

转存失败,建议直接上传图片文件

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

相关文章
|
7月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之XComponent组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之XComponent组件
382 2
|
7月前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
164 0
|
7月前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之ColumnSplit容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之ColumnSplit容器组件
98 0
|
7月前
|
IDE 开发工具 数据安全/隐私保护
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之PatternLock组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之PatternLock组件
145 0
|
7月前
|
IDE API 开发工具
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Span组件
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Span组件
179 3
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Span组件
|
7月前
|
IDE 开发工具 Windows
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavDestination组件
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavDestination组件
296 3
|
7月前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之MenuItemGroup组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之MenuItemGroup组件
63 1
|
7月前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之AlphabetIndexer组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之AlphabetIndexer组件
129 1
|
1月前
|
缓存 JavaScript API
Flutter&鸿蒙next 状态管理框架对比分析
在 Flutter 开发中,状态管理至关重要,直接影响应用的性能和可维护性。本文对比分析了常见的状态管理框架,包括 setState()、InheritedWidget、Provider、Riverpod、Bloc 和 GetX,详细介绍了它们的优缺点及适用场景,并提供了 Provider 的示例代码。选择合适的状态管理框架需考虑应用复杂度、团队熟悉程度和性能要求。
111 0
|
4月前
|
存储 JavaScript 前端开发
HarmonyOS 3.1/4.0应用升级到HarmonyOS NEXT改动点
在 “2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”(<https://coding.imooc.com/class/843.html>)视频课程中,因为讲师在该课程授课时是使用的HarmonyOS 3.1/4.0应用(API 9),如果部分学员采用了最新的HarmonyOS NEXT API,此时就会遇到API兼容性的问题。
215 0
HarmonyOS 3.1/4.0应用升级到HarmonyOS NEXT改动点