鸿蒙ZRouter动态路由框架—NavDestnation页面模板化

前言

源码：https://gitee.com/common-apps/ZRouter
OH：https://ohpm.openharmony.cn/#/cn/detail/@hzw%2Fzrouter

基本使用

在介绍基本使用的流程中，我们知道每个子页面都需要通过NavDestination来包裹，这样会造成代码的冗余，因此我们可通过ZRouter的模板化能力将NavDestination层去除。

在ZRouter和编译插件1.2.0版本开始支持NavDestination页面模板化，是一个可选项非强制性要求的功能，由开发者自由选择。

在Route或ZRoute注解中设置useTemplate属性为true，代码示例如下：

@ZRoute({ name: RouterConstants.CUSTOM_COMPONENT_CHILD_VIEW, useTemplate: true, title: "NavDest模板化案例" })
@Component
export struct ChildView {build(){Column({ space: 15 }) {...}}
}

这样就完成页面的跳转。

ZRouter.getInstance().navigation(RouterConstants.CUSTOM_COMPONENT_CHILD_VIEW)

生命周期函数管理

提供了两种方式来监听NavDestination页面的生命周期函数。

继承于ZLifecycleObserver类实现生命周期函数，@ZLifecycle注解声明；
通过ZRouter的addLifecycleObserver()静态方法设置监听。

第一种方式，新建一个类继承ZLifecycleObserver，并用@ZLifecycle注解声明，其name属性是路由名称 ，代码示例：

@ZLifecycle({ name: RouterConstants.CUSTOM_COMPONENT_CHILD_VIEW })
@Observed
export class CustomCompLifecycleObserver extends ZLifecycleObserver {counter = 0onReady(context: NavDestinationContext): void {}onBackPress(): boolean {return false}onShown(info: RouterInfo): void {}onHidden(info: RouterInfo): void {}
}

在NavDestination页面的内容ChildView子组件中，可以通过@Consume来获取其实例，代码如下：

@Route({ name: RouterConstants.CUSTOM_COMPONENT_CHILD_VIEW, useTemplate: true, title: "NavDest模板化案例" })
@Component
export struct ChildView {// 通过@Consume获取生命周期观察者实例@Consume lifecycleObserver: CustomCompLifecycleObserverbuild(){Column({ space: 15 }) {...}}    }

第二种方式，在ChildView子组件的aboutToAppear()方法中通过ZRouter的addLifecycleObserver()静态方法设置监听 代码示例：

  aboutToAppear(): void {// 设置NavDest模板页面的生命周期监听ZRouter.addLifecycleObserver((state, router) => {console.log("ChildView CustomComponentView  ", state, router?.navDestinationId)if (state === LifecycleState.ON_BACK_PRESS) {// 拦截返回事件，与可以在lifecycleObserver做拦截处理if (Date.now() - this.lastBackTime < 2000 || this.lastBackTime === 0) {if (Date.now() - this.lastBackTime < 2000 ) {return false}this.lastBackTime = Date.now()ToastUtils.show("再按一次退出")return true}return false}return false})}

如果你监听返回事件时需要返回布尔值，其他状态则不需要设置返回值。

自定义NavDestination属性

新建一个类继承于ZAttributeModifier，并且用 @ZAttribute 注解声明属于哪个页面的。代码示例：

@ZAttribute({ name: RouterConstants.CUSTOM_COMPONENT_CHILD_VIEW })
export class CustomAttributeModifier extends ZAttributeModifier {initModifier(instance: NavDestinationModifier): void {instance.hideTitleBar(false)instance.mode(NavDestinationMode.STANDARD)}}

到此就完成了NavDestination页面模板化的能力，其中生命周期函数监听和自定义NavDestination属性是可选的，当前NavDestination页面模板化暂时不支持设置转场动画，后续会接入集成进去。