鸿蒙中的页面路由和生命周期

125 阅读2分钟

页面路由:它是在应用程序中实现不同页面之间的跳转,以及数据传递

我们先明确自定义组件和页面的关系:

  • 自定义组件:@Component 装饰的UI单元,
  • 页面:即应用的UI页面。可以由一个或者多个自定义组件组成。

步骤:1. 创建页面 -> 页面与组件不同的地方是有且只有一个入口组件( @Entry修饰),并且在src/main/resources/base/profile/main_pages.json有配置好了页面路径

2.ruter来控制页面的跳转

image.png

3.带参数跳转并获取

①:路由跳转并且带上参数

②:在组件生命周期aboutToAppear(){ 写里面的逻辑 const routeParams = router.getParams() as 你定义的那个类型

这里的 getParams() 是用来获取数据的

}

组件生命周期,即一般用@Component装饰的自定义组件的生命周期,提供以下生命周期接口:

  • aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行,通常在这里发送网络请求获取数据
  • onDidBuild:组件build()函数执行完成之后回调该接口,开发者可以在这个阶段进行埋点数据上报等不影响实际UI的功能。不建议在onDidBuild函数中更改状态变量、这可能会导致不稳定的UI表现。
  • aboutToDisappear:aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量

受页面栈影响 (页面栈是用来存储程序运行时页面的一种数据结构,遵循先进后出的原则)

页面栈的最大容量为32个页面

如果是pushUrl标准模式(standard)(无论之前是否添加过,一直添加到页面栈)和单例模式(single)(如果之前加过页面,会使用之前添加的页面)则不会触发aboutToDisappear函数,因为页面没有被销毁,还缓存在页面栈中。

如果是replaceUrl,则会触发,因为replaceUrl跳转之后页面就自动销毁

back()也会触发

注意:

  1. @Entry修饰的页面入口组件有:aboutToAppearonDidBuildaboutToDisappearonPageShowonPageHideonBackPress
  2. @component修饰的组件有:aboutToAppearonDidBuildaboutToDisappear

执行时机

image.png