小程序生命周期

news2025/2/27 20:43:48

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

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

(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://www.coloradmin.cn/o/405158.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Threejs入门教程

一、本地搭建Threejs官方文档网站 1.官网地址:https://github.com/mrdoob/three.js 下载压缩包并解压或使用git clone 若github过慢,则使用gitee对应网址:three.js: mrdoob/three.js 同步库 2.目录解析 3.启动方式 在three.js项目根目录下…

Vue中created和mounted详解

目录 一、生命周期概念 二、浏览器渲染过程 三、生命周期中的浏览器渲染 beforeCreate阶段 created阶段 beforeMount阶段 mounted阶段 四、使用场景 五、常见相关问题 一些页面跳转后, 一些基础数据接口没有重新请求 一、生命周期概念 通俗地讲,生命周期即Vue实例或…

vite.config.js详细配置。

Vue3vite vite和webpack区别? 1.vite服务器启动速度比webpack快,由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。当浏览器请求需要的模块时,再对模块进行编译,这种按需动态…

Vue-cli(vue脚手架)上万字总结,超详细教程

1、创建Vue脚手架 1.1、首先系统需要全局安装Vue脚手架 npm install -g vue/cli 1.2、创建Vue脚手架工程 进入你想创建vue脚手架的目录,然后输入命令 vue create xxx项目名 需要注意的是工程名字不能大写,这里我们选择选择Vue2,敲下回车&am…

Java实现Token登录验证(基于JWT的token认证实现)

文章目录 一、JWT是什么?二、使用步骤 1.项目结构2.相关依赖3.数据库4.相关代码 三、测试结果 一、JWT是什么? 在介绍JWT之前,我们先来回顾一下利用token进行用户身份验证的流程: 1、客户端使用用户名和密码请求登录 2、服务端…

【微信小程序】view和scroll-view组件的基本使用

✅作者简介:CSDN内容合伙人、阿里云专家博主、51CTO专家博主🏆 📃个人主页:hacker707的csdn博客 🔥系列专栏:微信小程序 💬个人格言:但行好事,莫问前程 view和scroll-vie…

移动端适配详解 , 给你解决适配烦恼

试想一下,如果我们只能开发web端,那么移动端的网友由谁来做!那也太悲惨了 所以,这里说的就是如何开发页面到移动端,适配各个手机型号,让页面在手机上跑起来~ 目录 理解些许概念 1. 开发的种…

Vue3新特性——Composition API详解

文章目录一、 Vue3快速入门1. Vue3 带来了什么2. Vue3工程的创建2.1 使用vue-cli创建2.2 使用vite创建2.2.1 是什么2.2.2 vite的优势2.2.3 使用步骤3. vue3项目结构的分析3.1 vue-cli 项目结构4. vue3中的开发者工具4.1 在线安装4.2 离线安装二、常用Composition API1. setup2.…

Vue3获取DOM、操作组件

文章目录🌟 写在前面🌟 Vue2 ref 的使用🌟 Vue3获取DOM🌟 Vue3操作组件🌟 写在最后🌟 写在前面 专栏介绍: 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue…

若依框架前端Vue项目分析实战

说明 前面讲解了vue2的单点知识,下面用若依提供的vue项目,实战分析一下,拿到一个vue项目,如何进行分析并进行二次开发。 一、public/index.html与main.js和App.vue三者的关系 vue项目是单界面应用,所有的界面将在pu…

VSCode 入门操作大全 + 实用插件推荐【零基础专属详细教程】

📀 前言: 🎫 选择一个好的开发工具很重要,很多刚学编程的小伙伴在 webstorm 和 vscode 上很难抉择,我个人更喜欢使用 vscode,因为其有着简洁的操作风格和丰富的人性化的各种功能,这篇文章带给大…

2022年前端Vue常见面试题大全(三万长文)持续更新...

目录 1.Vue和React有什么不同?使用场景分别是什么? 2.axios是什么?怎么使用它,怎么解决跨域? 3.说说Vue,React,angularjs,jquery的区别 4.什么阶段(生命周期&#xff…

2022最新版40个前端练手项目【附视频+源码】

不管学习哪门语言都希望能做出实际的东西来,这个实际的东西当然就是项目啦, 不用多 说,大家都知道学编程语言一定要做项目才行。 本次给到大家的是40个前端实战练手项目(附源码和视频讲解),希望对大家有一定的帮助,激…

企微获取用户敏感数据

1、企微配置可信域名 2、企微获取成员userID 3、企微获取用户敏感数据 文章目录一、简介1、企微数据安全更新2、身份验证方式2.1 网页授权登录(企微内部)2.2 扫描授权登录(浏览器)二、企微应用配置1、企微配置可信域名2、企微授权登录3、企微可信IP三、网页授权登录方式(企微)1…

Vue2 大型项目升级 Vue3 详细经验总结

前言 前段时间,公司准备在现有的 Vue2 项目中做一个聊天系统,但考虑开发聊天系统的周期并不短,客户又急需。于是准备对接腾讯的 IM 组件,来实现。 不知道的这里贴个官网: IM TUIKit 官方文档 对于 TUIKit&#xff0…

【axios】axios的基本使用

axios是一个专注于网络请求的库。 不同于jquery,功能复杂,既可以操作dom,又可以做动画,还可以发ajax请求。axios是一个专注于网络请求的库。 一、基本使用 1.导入库文件 在js中导入axios的库文件后,会直接在全局挂载…

[vue 进阶] 关于dicts字典的用法

最近在学习若依系统的框架,其中发现一个很奇怪的事情,网上查询很多地方,也是一知半解。 网上搜索的结果如下,大家可以先看看: [vue 进阶] 关于dicts字典的用法_小钿钿不忘初心_的博客-CSDN博客前言在使用若依框架开发…

CSS3如何调整背景图片大小

系列文章目录 CSS3实现半透明边框(1) CSS3实现多重边框(2) CSS3如何改变背景图片大小系列文章目录一、background-size语法格式二、参数详解1.length2.percentage3.cover4.contain总结在CSS3中,如果想要调整背景图片的…

适合普通大学生的前端开发学习路线

大家好,我是帅地。 假如你没有明确的目标,或许可以按照我说的学习路线来学习一波,我写的每一份学习路线,不会很全面,因为我认为,东西列的太多,反而不利于新手的学习,所以我列举的&a…

Vue中的路由

目录 目录 一,路由理解 二,基本配置 第一步: 在main.js文件中引入并使用插件 第二步: 在src文件夹下创建一个router文件夹然后在文件夹下创建index.js ​编辑 第三步: 回到main.js中引入创建的 router 并在vue实例对象中使用 三,路由的…