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触发
在这里插入图片描述
我们点击返回