HarmonyOS page生命周期函数讲解

-耿瑞-2023-12-30 8:04

下面我们又要看一个比较重要的点了

页面生命周期

页面组件有三个生命周期

onPageShow 页面显示时触发

onPageHide 页面隐藏时触发

onBackPress 页面返回时触发

这里我们准备两个组件

首先是 index.ets 参考代码如下

typescript 复制代码

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 参考代码如下

typescript 复制代码

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生命周期随之触发