小程序生命周期

article/2025/10/8 10:40:33

小程序的生命周期说白了就是指程序从创建、到开始、暂停、唤起、停止、卸载的过程。

我们大概从三个角度看一下小程序的生命周期。

(1):应用生命周期

(2):页面生命周期

(3):组件生命周期

应用生命周期

  1. 用户首次打开小程序,触发 onLaunch(全局只触发一次)。

  2. 小程序初始化完成后,触发onShow方法,监听小程序显示。

  3. 小程序从前台进入后台,触发 onHide方法。

  4. 小程序从后台进入前台显示,触发 onShow方法。

  5. 小程序后台运行一定时间,或系统资源占用过高,会被销毁。

前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。

在整理本文资料的时候,有点不解,为什么不把小程序监听『销毁』方法开放给开发者,我猜测是因为IOS系统限制『按下Home键时,app从活动状态转入后台,会被挂起』;微信也不例外,只要运行一段时间或把微信客户端进程杀掉,就无法通知小程序应用被销毁。

页面生命周期

  1. 小程序注册完成后,加载页面,触发onLoad方法。

  2. 页面载入后触发onShow方法,显示页面。

  3. 首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次。

  4. 当小程序后台运行或跳转到其他页面时,触发onHide方法。

  5. 当小程序有后台进入到前台运行或重新进入页面时,触发onShow方法。

  6. 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack(),触发onUnload

组件生命周期

组件生命周期,官网介绍的原话是:指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。大概意思就是,我们知道生命周期指的是从加载到销毁这个过程,在这个过程中可以分为好多阶段,比如,创建阶段,挂载阶段,销毁阶段等等,在每个阶段程序内部都会向外抛出一个 回调函数,这个回调函数,就是生命周期;
组件生命周期在官网的介绍地址如下:组件生命周期

  1. created:在组件实例刚刚被创建时执行,在这个阶段由于组件刚刚被创建,this.setData这些函数是不会生效的,在这个生命周期内,我们只可以获取一些基本的值以及数据上的做处理,跟页面渲染相关的内容不能在这个生命周期实现

  2. attached:组件初始化完毕并且挂载到页面上之后触发,如果熟悉vue的话,和vue的mounted比较像,这个阶段才是我们一般做初始化的阶段,并且在这个阶段data也被初始化为组件的值;

  3. detached:在组件实例被从页面节点树移除时执行,简单的说,就是这个 **组件被销毁 **的时候会被执行,这个使用的还是非常频繁的

  4. ready:在组件在视图层布局完成后执行,简单的说,就是组件被挂载到页面上,并且页面渲染完毕后触发;这个生命周期我们一般处理一些跟视图操作相关的内容;

  5. moved:在组件实例被移动到节点树另一个位置时执行

整体周期

(1)打开页面的情况

首先,前一个页面隐藏,在加载下一个页面之前,需要先初始化新页面的组件。页面首次渲染之后,会触发组件的ready,最后触发的是页面的onReady,如下图:

从PageA打开pageB时的生命周期顺序
在这里插入图片描述

(2)离开页面的情况

离开当前页面时,首先触发当前页面的卸载onUnload,接着是组件离开节点树的detached。最后显示之前的页面,触发onShow。如下图:

从PageB返回到PageA的生命周期顺序
在这里插入图片描述

 

(3)打开App的情况

App、Page与Component生命周期运行顺序,先从App加载然后再加载Page,在加载Page之前会先初始化该页面所用的所有组件,之后才触发页面的onLoad生命周期,如下图:

打开App时的生命周期顺序
在这里插入图片描述

(4)切换到后台

切换到后台时,小程序和页面并没有卸载,只会触发隐藏。先触发页面的onHide,接着是App的onHide。如下图:

切换到后台时的生命周期顺序
在这里插入图片描述

(5)切换到前台

切换到后台时,小程序会先触发onShow,之后才是页面的onShow。如下图:

切换到前台时的生命周期顺序
在这里插入图片描述

 

总结

1. 打开小程序:

(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onReady

2. 进入下一个页面:

(Pages)onHide --> (Next)onLoad --> (Next)onShow --> (Next)onReady

3. 返回上一个页面:

(curr)onUnload --> (pre)onShow

4. 离开小程序:

(App)onHide

5. 再次进入:

小程序未销毁 --> (App)onShow(执行上面的顺序),小程序被销毁,(App)onLaunch重新开始执行.
整体周期来源:微信小程序生命周期


http://chatgpt.dhexx.cn/article/IsTZ1CNB.shtml

相关文章

如何注册微信小程序

1、浏览器搜索: 微信公众平台 2、点击小程序 3、滑至底部,前往注册 4、按照注册流程依次填写信息 5、注册好后,来到微信公众平台,用微信扫码登录小程序 6、完成小程序信息的填写 7、找到开发者工具 8、前往下载开发工具 选择稳定…

简述微信小程序原理

一、本质 首先,小程序的逻辑层和渲染层是分开的,逻辑层运行在 JSCore 中,并没有一个完整浏览器对象。 所以就没有相关的DOM API和BOM API,这一区别导致了前端开发非常熟悉的一些库,例如 jQuery、 Zepto 等&#xff0c…

微信小程序--点餐系统(本地服务器+源码分享)

案例说明 案例来源于《微信小程序开发实战》黑马程序员著相比于原案例略有修改,代码也不全一样,有些地方的呈现效果体验更好,本人是看着效果图进行复现和练习的,最终达到了一样的效果。复现的过程中注重知识的练习,在…

微信小程序实现收藏功能

微信小程序收藏 前言 这篇文章主要介绍了微信小程序收藏功能的实现代码,基本功能是点击收藏后显示已收藏&#xff0c;在另一个页面出现目前点击收藏的项目。需要的朋友可以参考下。 1.首先在wxml文件中添加点击事件// 收藏 <view bindtap"haveSave"><image …

如何下载小程序图片?

如何下载小程序图片&#xff1f; 我们平时下载网页中的图片一般操作都是F12调试&#xff0c;或者用一些脚本插件一键下载&#xff0c;作为开发人员&#xff0c;平常用的比较多的就是Fiddler了&#xff0c;当然也用过其他的抓包工具。 但是如果要抓取小程序的图片&#xff0c;又…

微信小程序部署

1. 配置服务器域名 小程序要求程序中使用到所有外部链接(HTTPS)必须将域名提前配置到微信平台。 2. 小程序api路径替换 3. 上传小程序代码 如果想让小程序被所有人在微信中使用&#xff0c;需要将小程序代码进行上传&审核&#xff0c;审核通过之后才能在微信中找到该小程…

微信小程序的测试方案总结

提纲/目标 通过对微信小程序特性和测试点进行总结&#xff0c;储备测试知识&#xff0c;提高测试效率。 小程序特性介绍小程序测试工作过程监控与管理常见问题&技巧 现状分析 接触小程序的项目相对较少缺少小程序测试实战经验对小程序的特性不了解小程序测试测试沉淀较…

一、微信小程序开发详解

目录 1、什么是小程序&#xff1f; 2、小程序可以干什么&#xff1f; 3、相关资料 第一个小程序 一、申请帐号 二、测试号申请 三、安装开发工具 四、你的第一个小程序 五、编译预览 六、目录结构 七、JSON 配置 八、小程序配置 app.json 九、工具配置 project.conf…

小程序 跳转到腾讯文档小程序

1、需求 在小程序内打开腾讯文档 2、要打开的文档 先把需要跳转的文档准备好, 然后分享出去, 方便复制链接 3、获取腾讯文档小程序的AppID&#xff1a;wxd45c635d754dbf59 4、获取小程序页面链接 在你对应的小程序后台操作&#xff1a;登录小程序 在右上角 工具 -> 生成…

小程序跳转公众号

即用即走——这个是从微信小程序上线就开始打的概念。即用即走使得小程序可以代替许多APP&#xff0c;或是做APP的整体嫁接&#xff0c;或是作为阉割版功能的承载体。 对用户使用上来说&#xff0c;确实方便&#xff0c;要用的时候打开&#xff0c;不用的时候关掉&#xff0c;…

微信小程序——开篇

开篇 前言锻造兵器开发者账号微信开发者工具 写在最后 前言 如今微信小程序已经成为我们日常生活中不可或缺的‘介质’&#xff0c;如我们的出行、购物、餐饮、社交、娱乐等活动的小程序已经因有尽有&#xff0c;相比于去安装一个app人们自然更加倾向于在微信中去直接访问某个…

WebStrom开发微信小程序

文章目录 WebStrom配置微信小程序一、安装微信开发者工具1、安装2、新建小程序项目3、如何查看APPID4、进入小程序开发 二、WebStrom配置小程序1、选择file->settings2、配置CSS3、配置html4、代码提示插件5、配置完成 WebStrom配置微信小程序 一、安装微信开发者工具 1、…

微信小程序生态4-扫普通二维码进入小程序、打开短链接进入小程序

文章导航 微信小程序生态1-初识小程序 微信小程序生态2-创建一个微信小程序 微信小程序生态3-微信小程序登录流程设计 微信小程序生态4-扫普通二维码进入小程序、打开短链接进入小程序 微信小程序生态5-微信公众号扫码登录PC端网页 微信小程序生态6-微信公众号授权登录(适用于…

C语言程序设计(上)

C语言程序设计&#xff08;第二版&#xff09;知识点总结 一、简单C程序设计变量整数类型格式化输出格式化输入浮点类型浮点数据的输出浮点数据的输入常量类型转换 二、分支结构if...else语句条件表达式常见运算符优先级switch语句 三、循环结构break语句continue语句goto语句多…

C语言程序设计基础

C语言程序设计基础 大纲第一章 C语言程序设计概述第一节 C语言程序设计基础知识1.1 C程序设计语言简介1.2 C程序设计语言&#xff08;高级语言&#xff09;1.3 C语言程序结构1.4 C语言程序的运行过程与运行环境1.5 C语言程序设计过程 第二节 C语言基础语法概念2.1 数据类型2.2 …

在Linux系统中运行C语言程序

正式学习c语言的第一天 2022/1/10 在之前的学习中已经在Windows系统中用Microsoft VC上实现了C语言程序的运行&#xff0c;现在将在Linux系统上运行C语言程序。 首先明确C语言程序开发的4个步骤&#xff1a;编辑、编译、链接、运行 在Microsoft VC中编译和运行都可以直接用…

【C语言】初识C语言——认识第一个C语言程序

目录 一、第一个C语言程序剖析1、观察下面第一个C语言程序2、剖析第一个C语言程序 二、几种不常见但正确的写法三、几种常见的错误 一、第一个C语言程序剖析 1、观察下面第一个C语言程序 2、剖析第一个C语言程序 a.我们可以先观察此函数的主体&#xff0c;其主体的框架是 b.…

C语言程序设计知识点总结归纳(全书)

C知识点总结归纳目录 第一章 程序设计和C语言一、C的入门小概念二、程序设计的问题三、首先要搞清楚编译器、编辑器和IDE的区别 第二章 算法——程序的灵魂一、程序算法数据结构二、算法的特性三、怎样表示一个算法四、结构化程序的设计方法 第三章 C程序设计——顺序程序设计一…

运行一个C语言程序的步骤

在Visual C 6.0集成开发环境中&#xff0c;运行一个C语言程序的步骤如下。 (1) 新建源程序文件单击“文件”→“新建”命令&#xff0c;打开“新建"对话框&#xff0c;选择“工程”选项卡&#xff0c;显示新建对话框如图所示。 [在右侧输入工程名称&#xff0c;如pro&…

C语言程序设计----C语言基础知识

学习了《C语言程序设计》一书的第二章——C语言基础知识&#xff0c;现将本章小结如下&#xff1a; 一、简单的C语言程序 我们将通过若干个简单的C语言程序&#xff0c;初步认识到C语言程序的结构&#xff0c;了解C语言的基本语法元素&#xff0c;并且学习编写简单的C语言程序…