网站制作需要学多久,js网站模板免费下载,湖北企业网站建设公司,wordpress主题google生命周期#xff08;Lifecycle#xff09; 使用HMRouter的页面跳转时#xff0c;想实现和Navigation一样的生命周期时#xff0c;需要通过新建生命周期类来实现对页面对某一个生命周期的监控。
新建Lifecycle类 通过继承IHMLifecycle接口实现生命周期接口的方法重写。 通过…生命周期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/PageModelHMRouter({ 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%)}
}实现效果
在生命周期方法中实现内容打印截图如下 可以看到生命周期的调用顺序
