当前位置: 首页 > news >正文

微信 小程序应用,页面,组件的生命周期

组件生命周期

组件的生命周期:指的是组件自身的一些钩子函数,这些函数在特定的时间节点时被自动触发

组件的生命周期函数需要在 lifetimes 字段内进行声明

最重要的生命周期是 created attached detached 包含一个组件生命周期流程的最主要时间点

定义段描述
created在组件实例刚刚被创建时执行,注意此时不能调用 setData (还没有对模板解析)
attached在组件实例进入页面节点树时执行 (模板已经解析完毕,并且挂载到页面上)
ready在组件布局完成后执行
moved在组件实例被移动到节点树另一个位置时执行
detached在组件实例被从页面节点树移除时执行 (组件被销毁了)

在这里插入图片描述

  1. 【组件实例刚刚被创建好时】, created 生命周期被触发。此时,组件数据 this.data 就是在 Component 构造器中定义的数据 data此时还不能调用 setData 通常情况下,这个生命周期只应该用于给组件 this 添加一些自定义属性字段。

  2. 【在组件完全初始化完毕】、进入页面节点树后, attached 生命周期被触发。此时, this.data 已被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个时机进行。

  3. 【在组件离开页面节点树后】, detached 生命周期被触发。退出一个页面时,如果组件还在页面节点树中,则 detached 会被触发。

Component({lifetimes: {created: function () {// 在组件实例刚刚被创建时执行,注意此时不能调用 setData // 一般用来为组件添加一些自定义属性字段。},attached: function() {// attached 在组件完全初始化完毕、进入页面节点树后执行// 模板已经解析完毕,并且挂载到页面上// 一般都是在这里写对应的交互},detached: function() {// 在组件实例被从页面节点树移除时执行},// coding...}// coding...
})

组件所在页面的生命周期

组件还有一些特殊的生命周期,这类生命周期和组件没有很强的关联

主要用于组件内部监听父组件的展示、隐藏状态,从而方便组件内部执行一些业务逻辑的处理

组件所在页面的生命周期有 4 个: show、 hide、 resize、 routeDone,需要在 pageLifetimes 字段内进行声明

// components/custom06/custom06.js
Component({// coding...// 组件所在页面的生命周期pageLifetimes: {// 监听组件所在的页面展示(后台切前台)状态show () {console.log('组件所在的页面被展示')},// 监听组件所在的页面隐藏(前台切后台、点击 tabBar)状态hide () {console.log('组件所在的页面被隐藏')}}})

小程序生命周期总结

小程序冷启动,钩子函数执行的顺序

保留当前页面(navigate) 以及 关闭当前页面(redirect)

在这里插入图片描述

切后台 以及 切前台(热启动)

在这里插入图片描述

http://www.lryc.cn/news/374901.html

相关文章:

  • 代码随想录算法训练营Day41|背包问题、分割等和子集
  • oracle SCHEDULER
  • 实现虚拟机的难点
  • JAVA-线程
  • 代码随想录——电话号码的字母组合(Leetcode17)
  • 多款可观测产品全面升级丨阿里云云原生 5 月产品月报
  • python实践笔记(三): 异常处理和文件操作
  • Excel VLOOKUP 使用记录
  • Spring Cloud Stream 消息驱动基础入门与实践总结
  • 你好rust
  • STM32 printf 重定向到CAN
  • jmeter性能优化之mysql监控sql慢查询语句分析
  • 海南聚广众达电子商务咨询有限公司引领行业变革
  • Unity API学习之资源的动态加载
  • C++算法——回溯
  • java的深拷贝和浅拷贝
  • AI产品经理,应掌握哪些技术?
  • 同三维T80004EHL-W-4K30 4K HDMI编码器,支持WEBRTC协议
  • Hi3861 OpenHarmony嵌入式应用入门--点灯
  • SaaS案例分享:成功构建销售渠道的实战经验
  • 密钥管理简介
  • 2024中国应急(消防)品牌巡展成都站成功召开!
  • ansible-Role角色批量按照node_export节点,并追加信息到Prometheus文件中
  • 求最小公倍数 、小球走过路程计算 题目
  • 【Android面试八股文】你能说一说为什么IO是耗时操作?
  • 怎样增强 CLike 游戏的社交功能,促进玩家之间的互动和交流?
  • 12_YouOnlyLookOnce(YOLOv3)新一代实时目标检测技术
  • 安装 Nuxt.js 的步骤和注意事项
  • 【perl】环境搭建
  • 【车载音视频AI电脑】全国产海事船载视频监控系统解决方案