母婴产品网站模板如何制作短视频

前言：在使用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.nameWinLog.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框架还有很多生命周期方法，你都可以试试。