微信小程序的生命周期函数有哪些?

面试官:说说微信小程序的生命周期函数有哪些?

一、是什么

vuereact框架一样,微信小程序框架也存在生命周期,实质也是一堆会在特定时期执行的函数

小程序中,生命周期主要分成了三部分:

  • 应用的生命周期
  • 页面的生命周期
  • 组件的生命周期

应用的生命周期

小程序的生命周期函数是在app.js里面调用的,通过App(Object)函数用来注册一个小程序,指定其小程序的生命周期回调

页面的生命周期

页面生命周期函数就是当你每进入/切换到一个新的页面的时候,就会调用的生命周期函数,同样通过App(Object)函数用来注册一个页面

组件的生命周期

组件的生命周期,指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发,通过Component(Object)进行注册组件

二、有哪些

应用的生命周期

生命周期说明
onLaunch小程序初始化完成时触发,全局只触发一次
onShow小程序启动,或从后台进入前台显示时触发
onHide小程序从前台进入后台时触发
onError小程序发生脚本错误或 API 调用报错时触发
onPageNotFound小程序要打开的页面不存在时触发
onUnhandledRejection()小程序有未处理的 Promise 拒绝时触发
onThemeChange系统切换主题时触发

页面的生命周期

生命周期说明作用
onLoad生命周期回调—监听页面加载发送请求获取数据
onShow生命周期回调—监听页面显示请求数据
onReady生命周期回调—监听页面初次渲染完成获取页面元素(少用)
onHide生命周期回调—监听页面隐藏终止任务,如定时器或者播放音乐
onUnload生命周期回调—监听页面卸载终止任务

组件的生命周期

生命周期说明
created生命周期回调—监听页面加载
attached生命周期回调—监听页面显示
ready生命周期回调—监听页面初次渲染完成
moved生命周期回调—监听页面隐藏
detached生命周期回调—监听页面卸载
error每当组件方法抛出错误时执行

注意的是:

  • 组件实例刚刚被创建好时, created 生命周期被触发,此时,组件数据 this.data 就是在 Component 构造器中定义的数据 data , 此时不能调用 setData
  • 在组件完全初始化完毕、进入页面节点树后, attached 生命周期被触发。此时, this.data 已被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个时机进行
  • 在组件离开页面节点树后, detached 生命周期被触发。退出一个页面时,如果组件还在页面节点树中,则 detached 会被触发

还有一些特殊的生命周期,它们并非与组件有很强的关联,但有时组件需要获知,以便组件内部处理,这样的生命周期称为“组件所在页面的生命周期”,在 pageLifetimes 定义段中定义,如下:

生命周期说明
show组件所在的页面被展示时执行
hide组件所在的页面被隐藏时执行

代码如下:

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
  }
})

三、执行过程

应⽤的⽣命周期执行过程:

  • ⽤户⾸次打开⼩程序,触发 onLaunch(全局只触发⼀次)

  • ⼩程序初始化完成后,触发onShow⽅法,监听⼩程序显示

  • ⼩程序从前台进⼊后台,触发 onHide⽅法

  • ⼩程序从后台进⼊前台显示,触发 onShow⽅法

  • ⼩程序后台运⾏⼀定时间,或系统资源占⽤过⾼,会被销毁

⻚⾯⽣命周期的执行过程:

  • ⼩程序注册完成后,加载⻚⾯,触发onLoad⽅法
  • ⻚⾯载⼊后触发onShow⽅法,显示⻚⾯
  • ⾸次显示⻚⾯,会触发onReady⽅法,渲染⻚⾯元素和样式,⼀个⻚⾯只会调⽤⼀次
  • 当⼩程序后台运⾏或跳转到其他⻚⾯时,触发onHide⽅法
  • 当⼩程序有后台进⼊到前台运⾏或重新进⼊⻚⾯时,触发onShow⽅法
  • 当使⽤重定向⽅法 wx.redirectTo() 或关闭当前⻚返回上⼀⻚wx.navigateBack(),触发onUnload

当存在也应用生命周期和页面周期的时候,相关的执行顺序如下:

  • 打开小程序:(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onRead

  • 进入下一个页面:(Pages)onHide --> (Next)onLoad --> (Next)onShow --> (Next)onReady

  • 返回上一个页面:(curr)onUnload --> (pre)onShow

  • 离开小程序:(App)onHide

  • 再次进入:小程序未销毁 --> (App)onShow(执行上面的顺序),小程序被销毁,(App)onLaunch重新开始执行.

参考文献

  • https://github.com/ytanck/ytanck.github.io/issues/79
  • https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onLaunch-Object-object
  • https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onLoad-Object-query
  • https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html#onLaunch-Object-object

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/310421.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何在IntelliJ IDEA中配置SSH服务器开发环境并实现固定地址远程连接

文章目录 1. 检查Linux SSH服务2. 本地连接测试3. Linux 安装Cpolar4. 创建远程连接公网地址5. 公网远程连接测试6. 固定连接公网地址7. 固定地址连接测试 本文主要介绍如何在IDEA中设置远程连接服务器开发环境,并结合Cpolar内网穿透工具实现无公网远程连接&#xf…

C++_vector类

目录 一、vector的模拟实现 1、vector的组成结构 2、vector尾插数据 2.1 析构函数 3、迭代器实现 4、resize 5、删除数据 5.1 迭代器失效 6、指定位置插入数据 6.1 迭代器失效 7、迭代器构造和resize构造 8、深浅拷贝 结语: 前言: vect…

计算机二级WPS Office考试须知、如何备考、备考建议

本文从计算机二级考试须知、如何备考、备考建议以及考试的注意事项等方面进行讲述,认认真真看,对你受益匪浅。 一、计算机二级考试须知 2021年3月27日至29日将举办第60次全国计算机等级考试(NCRE),从今年起&#xff0…

加速你的数据库:公司中SQL优化的八大绝招

前言 SQL优化这个问题也是老生常谈了,很多都还是在八股文中了解到,那么公司里的SQL都是咋优化的呢?和八股文一样吗?下面,我将与大家分享我在公司里学到的SQL优化知识。SQL优化是提高数据库性能和减少资源消耗的重要一环…

设计模式之空对象模式

目录 1.简介 2.结构图 3.实例 4.优缺点 1.简介 空对象模式也是我们平时编程用的比较多的一种行为型设计模式,它的宗旨在解决空对象引起的异常报错问题;在空对象模式(Null Object Pattern)中,一个空对象取代 NULL 对…

【一文详解】知识分享:(MySQL关系型数据库快速入门)

mysql基础 数据类型 整型 类型名称取值范围大小TINYINT-128〜1271个字节SMALLINT-32768〜327672个宇节MEDIUMINT-8388608〜83886073个字节INT (INTEGHR)-2147483648〜21474836474个字节BIGINT-9223372036854775808〜92233720368547758078个字节 注: 无符号在数据类型后加 un…

免费申请SSL证书

首先,让我们了解一下SSL证书的作用。SSL(Secure Sockets Layer)证书是一种数字证书,它可以加密网站与用户之间的通信数据,防止信息在传输过程中被窃取或篡改,同时也可以验证网站的真实身份,避免…

electron+vue编辑Office Word?

Electron 桌面应用是基于 Chromium 内核的,而谷歌Chrome取消了对PPAPI插件支持后,在线Office方案纷纷失效,只能更换国产浏览器在低版本浏览器苟延残喘,不能用于electronvue项目。 经过小编不断的寻找,终于找到一款至今…

对git中tag, branch的重新理解

1. 问题背景 项目中之前一个tag(v1.0)打错了,想删除它,但我们从此tag v1.0中迁出新建分支Branch_v1.0,在此分支下修复了bug,想重新打一个tag v1.0,原来的tag v1.0可以删除掉吗? 错误的理解&am…

Starrocks监控方案

下载安装包 Download | Prometheus Download Grafana | Grafana Labs 部署prometheus 配置文件 global: scrape_interval: 15s evaluation_interval: 15s scrape_configs: - job_name: StarRocks_Cluster metrics_path: /metrics static_configs: - targets: [192.168.110…

【BetterBench】2024年都有哪些数学建模竞赛和大数据竞赛?

2024年每个月有哪些竞赛? 2024年32个数学建模和数据挖掘竞赛重磅来袭!!! 2024年数学建模和数学挖掘竞赛时间目录汇总 一月 (1)2024年第二届“华数杯”国际大学生数学建模竞赛 报名时间:即日起…

同城短视频矩阵怎么做?小魔推助力实体行业高效视频分发

在如今的互联网时代,各个行业的实体老板都在考虑转型的方向,希望能有更多的发展,特别是抖音短视频做作为日活8亿用户的超大平台,吸引了无数的实体老板入场做宣传,来做自己门店、品牌的曝光获客动作,但引流并…

C++力扣题目104--二叉树的最大深度

给定一个二叉树,找出其最大深度。 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。 说明: 叶子节点是指没有子节点的节点。 示例: 给定二叉树 [3,9,20,null,null,15,7], 返回它的最大深度 3 。 思路 看完本篇可以一起做了如下…

Apache Doris (六十三): Spark Doris Connector - (3)-配置型及列映射关系

🏡 个人主页:IT贫道-CSDN博客 🚩 私聊博主:私聊博主加WX好友,获取更多资料哦~ 🔔 博主个人B栈地址:豹哥教你学编程的个人空间-豹哥教你学编程个人主页-哔哩哔哩视频 目录 1. Spark 操作Doris配置项

CentOS中静态HTTP服务的最佳实践和优化技巧

在CentOS中提供静态HTTP服务是常见的需求,尤其是在构建Web应用程序、托管网站或提供文件下载时。为了确保高效、安全且可靠的传输,这里提供了一些最佳实践和优化技巧。 1. 选择合适的HTTP服务器软件 Nginx: 轻量级、高效,支持HTTP/2&#x…

【安卓模拟器】雷电模拟器9 v9.0.64 绿色版(免安装版,一键绿化)

下载地址 极核GetShell 简介 雷电模拟器9是一款安卓模拟器,支持安卓9版本。安卓模拟器除了能够运行游戏娱乐,对于渗透测试&移动安全测试也有举足轻重的作用。 软件截图 绿化教程 视频教程 下载地址提供了视频绿化教程,有需要的可以…

工单系统:助力传统服务行业实现数字化转型的关键要素

数字化转型的浪潮冲击着传统服务业,对其造成了巨大的影响。其中,工单系统以其多样和强大的功能性,成为传统服务行业必备的数字工具。今天,小编就来大家来聊聊工单系统对传统服务行业有哪些影响?希望对于还未投入使用的…

视频壁纸制作Dynamic Wallpaper中文

Dynamic Wallpaper是一款专门为macOS用户设计的动态壁纸软件。它可以将视频、图片、音乐等多种元素融合在一起,为用户的桌面带来生动、个性化的视觉效果。Dynamic Wallpaper内置了大量动态壁纸,包括自然风景、城市风貌、抽象艺术等多种主题。用户可以根据…

【大数据OLAP引擎】StarRocks为什么快?

StarRocks的优势 StarRocks最初主要的优势是性能,当时在单表查询方面与性能标杆ClickHouse不相上下,而join优化特性使其在多表关联查询场景下的性能表现要远远优于ClickHouse,替换ClickHouse自然也就成了StarRocks的第一个目标。 而StarRoc…

2024年口碑好的外贸CRM软件推荐

外贸CRM软件是指专门为外贸行业设计开发的客户关系管理软件。它通过集成各种功能模块,帮助外贸企业管理客户信息、销售机会、订单跟踪、市场活动等重要业务流程。外贸CRM软件可以提高外贸企业的销售效率和客户满意度,帮助企业建立良好的客户关系&#xf…