页面和组件生命周期

一 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 添加或移除的时候也会执行这里
相关推荐
kyriewen1 天前
别再 console.log 了:5 个 Chrome DevTools 调试技巧,用过就回不去了
前端·javascript·面试
IT_陈寒1 天前
Python搞不定字符串编码?这破玩意坑我两小时!
前端·人工智能·后端
DigitalOcean1 天前
Laravel 开发者已在 DigitalOcean 上开通超过 10 万台服务器
前端·laravel
星始流年1 天前
从 Tool 到 Skill——基于 LangChain 的服务端Skill实现
前端·langchain·agent
李惟1 天前
开源本地通信库,纯客户端 RPC,像聊天一样通信
前端
YAwu111 天前
深入解析 React 炫彩鼠标跟随标题组件:从坐标定位到动画性能
前端·react.js
GuWenyue1 天前
排序效率低?5分钟吃透快速排序,性能飙升至O(nlogn)
前端·javascript·面试
OpenTiny社区1 天前
🎨 看完 GenUI SDK 源码我悟了!
前端·vue.js·github
叁两1 天前
前端转型AI Agent该如何学习?(前置篇)
前端·人工智能·node.js
何时梦醒1 天前
深入理解递归与快速排序 —— 从基础入门到手写实现
前端·javascript