页面和组件生命周期

一 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 添加或移除的时候也会执行这里
相关推荐
前端Hardy3 分钟前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼14 分钟前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
我是天龙_绍15 分钟前
🔹🔹🔹 vue 通信方式 eventBus
前端
一个不爱写代码的瘦子1 小时前
迭代器和生成器
前端·javascript
拳打南山敬老院1 小时前
漫谈 MCP 构建之概念篇
前端·后端·aigc
前端老鹰1 小时前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
OpenTiny社区1 小时前
OpenTiny NEXT 内核新生:生成式UI × MCP,重塑前端交互新范式!
前端·开源·agent
耶耶耶1111 小时前
web服务代理用它,还不够吗?
前端
Liamhuo2 小时前
2.1.7 network-浏览器-前端浏览器数据存储
前端·浏览器
洋葱头_2 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js