HarmonyOS page生命周期函数讲解

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

页面生命周期

页面组件有三个生命周期

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

这里 需要注意 控制台下面有选择 我们要选log 才能看到 console.log打印的内容

默认启动的是 PreviewerLog 预览控制台

然后 我们点击跳转 它就会跳转到 AppView 界面

因为已经跳转 index 组件隐藏 onPageHide 触发 然后 AppView 页面显示 onPageShow触发

我们点击返回

调回 index界面 AppView被隐藏 触发onPageHide

index 显示触发 onPageShow

那么问题来了 onBackPress好像一直没触发呀

这个函数是页面返回时 触发 这里所说的返回不是说 router.back

而是手机App自带顶部的返回按钮

如下图指向的这种退出按钮 才会触发

相关推荐
高心星14 小时前
鸿蒙5.0应用开发——V2装饰器@Provider和@Consumer的使用
harmonyos
ChinaDragon18 小时前
HarmonyOS:ArkTS卡片页面刷新
harmonyos
HMSCore18 小时前
通知语音播报功能,解锁全新体验
harmonyos
HarmonyOS_SDK18 小时前
通知语音播报功能,解锁全新体验
harmonyos
高心星19 小时前
鸿蒙5.0应用开发——V2装饰器@ObservedV2和@Trace的使用
harmonyos
城中的雾20 小时前
HarmonyOS应用拉起系列(三):如何直接拉起腾讯/百度/高德地图进行导航
前端·javascript·harmonyos
程序员潘Sir21 小时前
鸿蒙应用开发从入门到实战(七):ArkTS组件声明语法
harmonyos·鸿蒙
高心星2 天前
鸿蒙5.0项目开发——V2装饰器@Event的使用
harmonyos
ChinaDragon2 天前
HarmonyOS:创建ArkTS卡片
harmonyos