页面和组件生命周期

一 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 添加或移除的时候也会执行这里
相关推荐
Hi~晴天大圣1 小时前
npm使用介绍
前端·npm·node.js
888CC++2 小时前
如何在 C 语言中进行程序调试?
前端·javascript·算法
喵个咪2 小时前
基于 Taro 的 Headless CMS 多端前端架构:技术解析与二次开发导引
前端·react.js·taro
狂炫冰美式3 小时前
你还在古法PPT吗,试试HTML呢?免费编辑导出工具给 xdm 放这了
前端·后端·github
万少3 小时前
未来组织的分水岭不是员工数量,而是人才密度
前端·后端·面试
任磊abc3 小时前
nextjs16配置eslint+prettier
前端·eslint·nextjs·prettier
x***r1513 小时前
Another-Redis-Desktop-Manager.1.3.7安装步骤详解(附Redis可视化连接与Key管理教程)
前端·bootstrap·html
Captaincc3 小时前
你真的知道自己把 AI 用在了哪里吗?这是 Vibe Usage 想回答的问题
前端·vibecoding
道友可好4 小时前
OpenSpec:轻到起飞的 AI 编程规范层
前端·人工智能·后端
kyriewen4 小时前
我招了一个“Prompt工程师”来写前端,结果项目差点崩了
前端·javascript·面试