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自带顶部的返回按钮

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

相关推荐
晓oi4 小时前
基于华为设备的 OSPF+MSTP+DHCP+NAT 综合网络架构实现
网络·华为
ICT系统集成阿祥4 小时前
华为CloudEngine系列交换机堆叠如何配置,附视频
开发语言·华为·php
博睿谷IT99_4 小时前
华为 USG 防火墙 NAT 配置
网络·华为·acl·nat·nat 环路
七夜zippoe6 小时前
仓颉语言核心特性深度解析——现代编程范式的集大成者
开发语言·后端·鸿蒙·鸿蒙系统·仓颉
猫林老师6 小时前
HarmonyOS语音交互与媒体会话开发实战
交互·harmonyos·媒体
白鹿第一帅6 小时前
【成长纪实】HarmonyOS 场景技术共建实践|轻备份技术在《社区之星》应用中的深度应用
harmonyos·白鹿第一帅·csdn成都站·鸿蒙开放能力·鸿蒙学习之路·harmonyos创新赛·轻备份技术
繁依Fanyi9 小时前
【参赛心得】我的 HarmonyOS 开发入门与参赛之路
ide·人工智能·华为·word·harmonyos·aiide·codebuddyide
小白学鸿蒙10 小时前
鸿蒙数据库表中的数据如何导出为Excel存到系统下载目录
数据库·excel·harmonyos
爱笑的眼睛1110 小时前
HarmonyOS WindowExtension深度解析:构建跨窗口交互的创新体验
华为·harmonyos