HarmonyOS page生命周期函数讲解-编程知识

HarmonyOS page生命周期函数讲解

下面我们又要看一个比较重要的点了
页面生命周期

页面组件有三个生命周期
onPageShow 页面显示时触发
onPageHide 页面隐藏时触发
onBackPress 页面返回时触发

这里我们准备两个组件
首先是 index.ets 参考代码如下

import router from '@ohos.router'
@Entry
@Component
struct Index {build() {Row() {Column() {Button("跳转").onClick(()=>{router.pushUrl({url: "pages/AppView"})})}.width('100%')}.height('100%')}//页面显示时触发onPageShow() {console.log("index onPageShow触发");}//页面隐藏时触发onPageHide() {console.log("index onPageHide触发");}//页面返回时触发onBackPress() {console.log("index onBackPress触发");}
}

我们引入了 router 路由模块然后定义了三个生命周期
然后设置了一个button按钮点击跳转向 pages/AppView页面

然后 AppView.ets 参考代码如下

import router from '@ohos.router'
@Entry
@Component
struct AppView {build() {Column(){Button("返回").onClick(()=>{router.back();})}.width('100%').height('100%')}//页面显示时触发onPageShow() {console.log("AppView onPageShow触发");}//页面隐藏时触发onPageHide() {console.log("AppView onPageHide触发");}//页面返回时触发onBackPress() {console.log("AppView onBackPress触发");}
}

这里我们也是先引入router
button按钮点击调用 router.back 返回上一个界面
然后也定义了三个生命周期

然后我们打开预览器运行index组件然后 index 组件被显示 onPageShow生命周期随之触发
在这里插入图片描述
这里需要注意控制台下面有选择我们要选log 才能看到 console.log打印的内容
默认启动的是 PreviewerLog 预览控制台

然后我们点击跳转它就会跳转到 AppView 界面
因为已经跳转 index 组件隐藏 onPageHide 触发然后 AppView 页面显示 onPageShow触发
在这里插入图片描述
我们点击返回