页面和组件生命周期

一 UIAbility

UIAbility组件是一种包含UI的应用组件,主要用于和用户交互,一半是一个UIAbility

  • 任务视图中看到一个任务,则建议使用一个UIAbility,多个页面的方式
  • 任务视图中看到多个任务,或者需要同时开启多个窗口,则建议使用多个UIAbility开发不同的模块功能

配置

在main下面的module.json5中,

  • name :UIAbility组件的名称
  • srcEntry:UIAbility组件的代码路径
  • description:组件的描述信息
  • icon 桌面上的icon
  • startWindowIcon 启动页面中间的icon
  • startWindowBackground 启动页面的背景颜色
ts 复制代码
"abilities": [
      {
        "name": "EntryAbility", // UIAbility组件的名称
        "srcEntry": "./ets/entryability/EntryAbility.ets", // UIAbility组件的代码路径
        "description": "$string:EntryAbility_desc", // UIAbility组件的描述信息
        "icon": "$media:icon", // UIAbility组件的图标
        "label": "$string:EntryAbility_label", // UIAbility组件的标签
        "startWindowIcon": "$media:icon", // UIAbility组件启动页面图标资源文件的索引
        "startWindowBackground": "$color:start_window_background", // UIAbility组件启动页面背景颜色资源文件的索引
      }
  ]

生命周期

下面是一个UIAbility的例子场景

  • onCreate 应用创建,UIAbility实例创建完成时触发
  • onWindowStageCreate 主Window创建完成 windowStage.loadContent 加载第一个组件
  • onForeground 在前台
  • onBackground 应用退到后台
  • onWindowStageWillDestroy 即将被销毁
  • onWindowStageDestroy window销毁,释放UI资源,例如在onWindowStageDestroy()中注销获焦/失焦等WindowStage事件
  • onDestroy 应用销毁

其他的先不考虑了,其他都是关于多 UIAbility

二 Entry装饰的组件生命周期,提供以下生命周期接口:

  • onPageShow 页面每次显示时触发一次,包括路由过程、应用进入前台等场景。相当于onReusme
  • onPageHide 页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景。相当于onPause
  • onBackPress 当用户点击返回按钮时触发。

Component装饰的自定义组件的生命周期,提供以下生命周期接口:

  • aboutToAppear组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。
  • onDidBuild 组件build()函数执行完成之后回调该接口,不建议在onDidBuild函数中更改状态变量、使用animateTo等功能,这可能会导致不稳定的UI表现。
  • aboutToDisappear aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定,当if else 添加或移除的时候也会执行这里
相关推荐
Mike_jia1 天前
DumbAssets:开源资产管理神器,家庭与企业的高效管家
前端
Southern Wind1 天前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
HuangYongbiao1 天前
Rspack 原理:webpack,我为什么不要你
前端
yinuo1 天前
前端项目开发阶段崩溃?试试这招“Node 内存扩容术”,立马复活!
前端
前端鳄鱼崽1 天前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户98402276679181 天前
【React.js】渐变环形进度条
前端·react.js·svg
90后的晨仔1 天前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js
Holin_浩霖1 天前
JavaScript 语言革命:ES6+ 现代编程范式深度解析与工程实践
前端
前端拿破轮1 天前
从0到1搭一个monorepo项目(一)
前端·javascript·git
m0_741412241 天前
大文件上传与文件下载
前端