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

前言：在利用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的详细用法，我就不在此详细先容了，需要学习的可以去官网学习下用法。生命周期如下：

1. export abstract class AbstractLifecycle implements IHMLifecycle {
2.   observerMap: Map<HMLifecycleState, Array<(ctx: HMLifecycleContext) => HMLifecycleAction>> = new Map()
4.   onPrepare(ctx: HMLifecycleContext): HMLifecycleAction {
5.     return HMLifecycleAction.DO_NEXT()
6.   }
8.   onAppear(ctx: HMLifecycleContext): HMLifecycleAction {
9.     return HMLifecycleAction.DO_NEXT()
10.   }
12.   onDisAppear(ctx: HMLifecycleContext): HMLifecycleAction {
13.     return this.runObserver(HMLifecycleState.onDisAppear, ctx)
14.   }
16.   onShown(ctx: HMLifecycleContext): HMLifecycleAction {
17.     return this.runObserver(HMLifecycleState.onShown, ctx)
18.   }
20.   onHidden(ctx: HMLifecycleContext): HMLifecycleAction {
21.     return this.runObserver(HMLifecycleState.onHidden, ctx)
22.   }
24.   onWillAppear(ctx: HMLifecycleContext): HMLifecycleAction {
25.     return HMLifecycleAction.DO_NEXT()
26.   }
28.   onWillDisappear(ctx: HMLifecycleContext): HMLifecycleAction {
29.     return this.runObserver(HMLifecycleState.onWillDisappear, ctx)
30.   }
32.   onWillShow(ctx: HMLifecycleContext): HMLifecycleAction {
33.     return this.runObserver(HMLifecycleState.onWillShow, ctx)
34.         }
36.   onWillHide(ctx: HMLifecycleContext): HMLifecycleAction {
37.     return this.runObserver(HMLifecycleState.onWillHide, ctx)
38.   }
40.   onReady(ctx: HMLifecycleContext): HMLifecycleAction {
41.     return HMLifecycleAction.DO_NEXT()
42.   }
44.   onBackPressed(ctx: HMLifecycleContext): boolean {
45.     return this.runObserver(HMLifecycleState.onBackPressed, ctx).value
46.   }

复制代码

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

1. export class PageDurationLifecycle extends AbstractLifecycle {
2.   private timeMap: Map<string, number> = new Map();
3.   onShown(ctx: HMLifecycleContext): HMLifecycleAction {
4.     const pageName = ctx.navContext?.pathInfo.name;
5.     let param =  ctx.navContext?.pathInfo.param as object;
6.     WinLog.info('PageDurationLifecycle onShown pageName：' + pageName)
7.     if (pageName) {
8.       this.timeMap.set(pageName, new Date().getTime())
9.       if (pageName=="LoginPage"){
10.         AppStorage.set<boolean>('loginOnPageShow', true);
11.       }
12.      
13.     }
14.     return HMLifecycleAction.DO_NEXT();
15.   }
16.    onHidden(ctx: HMLifecycleContext): HMLifecycleAction {
17.     const pageName = ctx.navContext?.pathInfo.name
18.     WinLog.info('PageDurationLifecycle onHidden pageName：' + pageName)
19.     if (pageName && this.timeMap.has(pageName)) {
20.       const duration = new Date().getTime() - (this.timeMap.get(pageName) as number);
21.       this.timeMap.delete(pageName);
22.       WinLog.info(`Page ${pageName} stay ${duration} ms`);
23.       if (pageName=="LoginPage"){
24.         AppStorage.set<boolean>('loginOnPageShow', false);
25.       }
26.     }
27.     return HMLifecycleAction.DO_NEXT();
28.   }
29. }

复制代码

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

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。