当前位置：首页 > news >正文

HarmonyOS：基于hmrouter实现Page的生命周期监听

news 来源：原创 2025/6/16 13:10:28

前言：在使用ArkTs语言写鸿蒙的App中，我们发现Page的生命周期函数，如下：

页面的生命周期(3+2)

onPageShow:页面显示触发(页面特有)

onPageHide：页面隐藏触发(页面特有)

onBackPress：当用户点击返回按钮时触发(页面特有)

aboutToAppear：组件即将出现时触发

aboutToDisappear：组件即将析构销毁时触发

组件的生命周期(2)

aboutToAppear：组件即将出现时触发

aboutToDisappear：组件即将析构销毁时触发

UIAbility组件生命周期函数

onCreate: UIAbility实例创建完成时触发

onForeground: 在UIAbility的UI可见之前

onBackground: 在UIAbility的UI完全不可见之后

onDestroy: 在UIAbility实例销毁时触发

WindowStage窗口生命周期函数

onWindowStageCreate 窗口才能构建

onWindowStageDestroy 窗口销毁

而我们的页面生命周期函数，aboutToAppear只会触发一次，如果我们的页面视图需要每次出现的时候都要刷新或者请求，就会发现没法触发生命周期函数，在ios的项目中有viewwillappare这个函数，这样就很好处理，但是鸿蒙中没有这样的生命周期函数。
我们的项目路由采用的是hmrouter框架，hmrouter的框架中的生命周期方法就比鸿蒙系统的方法就多了很多。hmrouter的具体用法，我就不在此详细介绍了，需要学习的可以去官网学习下用法。生命周期如下：

export abstract class AbstractLifecycle implements IHMLifecycle {
  observerMap: Map<HMLifecycleState, Array<(ctx: HMLifecycleContext) => HMLifecycleAction>> = new Map()

  onPrepare(ctx: HMLifecycleContext): HMLifecycleAction {
    return HMLifecycleAction.DO_NEXT()
  }

  onAppear(ctx: HMLifecycleContext): HMLifecycleAction {
    return HMLifecycleAction.DO_NEXT()
  }

  onDisAppear(ctx: HMLifecycleContext): HMLifecycleAction {
    return this.runObserver(HMLifecycleState.onDisAppear, ctx)
  }

  onShown(ctx: HMLifecycleContext): HMLifecycleAction {
    return this.runObserver(HMLifecycleState.onShown, ctx)
  }

  onHidden(ctx: HMLifecycleContext): HMLifecycleAction {
    return this.runObserver(HMLifecycleState.onHidden, ctx)
  }

  onWillAppear(ctx: HMLifecycleContext): HMLifecycleAction {
    return HMLifecycleAction.DO_NEXT()
  }

  onWillDisappear(ctx: HMLifecycleContext): HMLifecycleAction {
    return this.runObserver(HMLifecycleState.onWillDisappear, ctx)
  }

  onWillShow(ctx: HMLifecycleContext): HMLifecycleAction {
    return this.runObserver(HMLifecycleState.onWillShow, ctx)
	}

  onWillHide(ctx: HMLifecycleContext): HMLifecycleAction {
    return this.runObserver(HMLifecycleState.onWillHide, ctx)
  }

  onReady(ctx: HMLifecycleContext): HMLifecycleAction {
    return HMLifecycleAction.DO_NEXT()
  }

  onBackPressed(ctx: HMLifecycleContext): boolean {
    return this.runObserver(HMLifecycleState.onBackPressed, ctx).value
  }

hmrouter的生命周期监听方法太多了，完全够用了。具体用法如下：

export class PageDurationLifecycle extends AbstractLifecycle {
  private timeMap: Map<string, number> = new Map();
  onShown(ctx: HMLifecycleContext): HMLifecycleAction {
    const pageName = ctx.navContext?.pathInfo.name;
    let param =  ctx.navContext?.pathInfo.param as object;
    WinLog.info('PageDurationLifecycle onShown pageName：' + pageName)
    if (pageName) {
      this.timeMap.set(pageName, new Date().getTime())
      if (pageName=="LoginPage"){
        AppStorage.set<boolean>('loginOnPageShow', true);
      }
     
    }
    return HMLifecycleAction.DO_NEXT();
  }
   onHidden(ctx: HMLifecycleContext): HMLifecycleAction {
    const pageName = ctx.navContext?.pathInfo.name
    WinLog.info('PageDurationLifecycle onHidden pageName：' + pageName)
    if (pageName && this.timeMap.has(pageName)) {
      const duration = new Date().getTime() - (this.timeMap.get(pageName) as number);
      this.timeMap.delete(pageName);
      WinLog.info(`Page ${pageName} stay ${duration} ms`);
      if (pageName=="LoginPage"){
        AppStorage.set<boolean>('loginOnPageShow', false);
      }
    }
    return HMLifecycleAction.DO_NEXT();
  }
 }

你通过日志观察就会发现，每当LoginPage出现的时候就会调用onShown方法，消失的时候就会调用onHidden方法，那我采用的是AppStorage存储页面的状态，通过监听loginOnPageShow的值来判断页面的生命周期

在LoginPage页面：

@StorageProp('loginOnPageShow') @Watch('onChangeVisibility') pageVisible: boolean = false;
  onChangeVisibility(){
    WinLog.debug("MVListAcvtPage 是否展示--->"+this.curPageVisibility)
    if (this.curPageVisibility) {
      this.getSubFuncBeanVisitAction()
    }
  }
```hmrouter
这样就通过hmrouter框架实现了Page的生命周期的监听，当然hmrouter框架还有很多生命周期方法，你都可以试试。