微信小程序生命周期

已于 2024-11-20 00:37:07 修改
阅读量362 收藏 1
点赞数 11
文章标签： 微信小程序 小程序
于 2024-11-12 01:02:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/SlingDam/article/details/143698782
版权

整个小程序的生命周期，主要在app.js中定义

onLaunch：小程序初始化完成时触发，整个小程序生命周期中只触发一次。

onShow：当小程序启动，或从后台进入前台显示时触发。

onHide：当小程序从前台进入后台时触发。

onError：当小程序发生脚本错误或API调用失败时触发。

onPageNotFound：当小程序要打开的页面不存在时触发。

onUnhandledRejection：在小程序运行过程中，promise被reject且未被catch时触发

onThemeChange：当系统切换主题时触发。

页面级生命周期
一个页面的生命周期，定义在每个页面的.js文件中

onLoad：页面加载时触发，此时页面并未进行任何渲染，你可以在这里进行数据初始化。

onShow：页面显示/切入前台时触发，每次打开页面都会调用一次。

onReady：页面初次渲染完成时触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层交互。

onHide：页面隐藏/切入后台时触发，例如navigateTo或底部tab切换时调用。

onUnload：页面卸载时触发，例如redirectTo或navigateBack时调用。

组件级生命周期
小程序封装的组件的生命周期，定义在组件的.js文件中

created：组件实例刚刚被创建时执行。

attached：组件实例进入页面节点树时执行。

ready：组件在视图层布局完成后执行。

moved：组件实例被移动到节点树另一个位置时执行。

detached：组件实例被从页面节点树移除时执行。

error：组件方法抛出错误时执行。

组件所在页面生命周期
show：组件所在页面被展示时执行。

hide：组件爱你所在页面被隐藏时执行。

resize：组件所在页面尺寸变化时执行。

routeDone：组件所在页面路由动画完成时执行。

作用：生命周期函数可在不同阶段执行特定逻辑，以更好控制小程序的行为
【转载自个人博客https://www.edaylogy.com/】

SlingDam
关注
前端性能：微信小程序生命周期详解
全沾软贱开发攻城狮
07-29 1万+
在微信小程序开发中微信小程序API的使用是必备技能，但是关于微信小程序的生命周期也是首先要了解和掌握的知识点，尤其是现在的前端开发领域，关于前端的各种框架和技术都要会，而且微信小程序的语法就是JS的翻版，掌握它不在话下。了解微信小程序生命周期，对在小程序开发中的性能提升也是很有帮助的。
微信小程序开发：微信小程序生命周期总结
热门推荐
全沾软贱开发攻城狮
03-29 1万+
通过本文关于前端开发中的微信小程序生命周期的详细介绍，不管是在实际的前端开发工作中还是在前端求职面试中都是非常关键的知识点，所以作为前端开发者来说必须要掌握它相关的内容，尤其是从事前端开发不久的开发者来说尤为重要，是一篇值得阅读的文章，重要性就不在赘述。欢迎关注，一起交流，共同进步。
小程序生命周期(onLaunch、onShow、onHide、onReady、onLoad、onUnloa)
叶落无痕的博客
01-08 4039
（4）onReady: 首次显示页面，页面初次渲染完成，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。小程序注册完成后，加载页面，触发onLoad方法。一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数（页面js）。每次打开页面都会调用一次（比如当小程序有后台进入到前台运行或重新进入页面时）。（1）onlaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）（app.js）；
关于微信小程序的生命周期
T3165919332的博客
09-01 1635
当用户从来没有打开过小程序，或者小程序被完全关闭后再次打开，都会触发onLaunch。当第一次打开小程序时，会触发onLaunch生命周期函数。但需要注意,onLaunch只会在小程序启动时执行一次，如果小程序被切换到后台再切回前台，不会再次触发onLaunch，而是触发onShow生命周期函数。我现在有个小程序 取名为a 有个用户b 从来没有打开过小程序 那么他第一次打开小程序的时候会触发onLaunch 然后用户b退出了小程序 那么用户 b重新打开小程序的时候会触发 onLaunch吗。
微信小程序生命周期笔记
yheartbeats的博客
04-01 3383
微信小程序的三种生命周期： 应用生命周期 页面生命周期 组件生命周期 一、应用生命周期 onLaunch Function 否 监听小程序初始化 onShow Function 否 监听小程序启动或切前台 onHide Function 否 监听小程序切后台 onError Function 否 错误监听函数 onPageNotFound Function 否 页面不存在监听函数 | 属性 |类型 |必填| 描述| |–|--| | | | 用户首次打开小程序，触发 onLaunch（全局
常用的微信小程序生命周期函数
m0_73352624的博客
01-22 916
微信小程序生命周期
微信小程序——生命周期
TianXuab的博客
09-10 2063
在微信小程序中，可以通过生命周期函数来执行相应的代码操作。通过在不同的生命周期函数中编写相应的代码操作，可以实现对小程序的控制和逻辑处理。
微信小程序 生命周期详解
11-23
微信小程序的生命周期是开发者在构建和管理小程序时必须掌握的核心概念。它涵盖了小程序从启动到关闭的全过程，包括应用生命周期和页面生命周期两个主要部分，并且这两个生命周期之间存在相互影响。 **应用生命周期...
浅析微信小程序生命周期之应用生命周期
01-08
浅谈微信小程序生命周期之应用生命周期 参考：微信小程序官方文档 微信小程序生命周期可分为应用生命周期、页面生命周期和组件生命周期，本文结合微信官方文档浅析微信小程序的应用生命周期。从注册一个小程序生命...
微信小程序生命周期函数介绍
我的博客
02-20 587
作用域生命周期函数适用场景小程序（App 级）onLaunch()小程序初始化（只执行一次）onShow()进入前台（恢复操作）onHide()进入后台（存储数据）onError()捕获 JS 错误处理 404 页面页面（Page 级）onLoad()页面加载（接收参数）onShow()页面显示（刷新数据）onReady()页面渲染完成（适合 DOM 操作）onHide()页面隐藏（存储状态）onUnload()页面关闭（释放资源）
微信小程序中页面显示时触发子组件的重新渲染
温暖前端的博客
05-23 1487
生命周期函数中，调用子组件的方法或者改变子组件的数据，从而触发子组件的重新渲染。触发子组件中的这个事件，子组件监听到事件后进行相应的处理，从而实现重新渲染。监听数据变化，当页面显示时，通过改变子组件的数据来触发。如果子组件的数据依赖于父组件的数据，可以在父组件的。改变父组件的数据，从而间接触发子组件的重新渲染。在子组件中定义一个事件，当页面显示时，父组件通过。生命周期函数中，通过。，从而实现重新渲染。
微信小程序 事件系统
weixin_51705943的博客
12-14 1289
事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如 id , dataset , touches。
微信小程序的生命周期
浮生离梦的博客
01-13 242
一、全局配置文件的生命周期 onLaunch() 生命周期回调—监听小程序初始化，小程序初始化完成时触发，全局只触发一次 onShow() 生命周期回调-监听小程序启动或切前台，小程序启动，或从后台进入前台显示时触发 onHide() 生命周期回调—监听小程序切后台，小程序从前台进入后台时触发 二、 页面配置文件的生命周期 onLoad() 生命周期回调—监听页面加载，页面加载时触发，一个页...
微信小程序 --- 事件处理
每天都要努力学习哦~~
02-26 1790
在小程序中，可以通过事件传参的方式，将数据传递给事件处理函数。常见的事件包括点击事件、输入事件等。在组件节点中可以通过data-的方式传递一些自定义数据，传递的数据可以通过事件对象的方式进行获取📌注意事项​ 使用data-方法传递参数的时候，多个单词由连字符连接​ 连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符​ 例如：​，最终会呈现为​，最终会呈现为在 wxml 文件中，使用data-*属性将数据传递给事件处理函数。
微信小程序：生命周期
qq_43248623的博客
06-24 653
下面从三个方面来介绍小程序的生命周期： （1）应用生命周期 （2）页面生命周期 （3）应用及页面生命周期的触发顺序 1.应用生命周期 App() 必须在 app.js 中调用，必须调用且只能调用一次，app.js中定义了一些应用的生命周期函数 （1）onLaunch: 初始化小程序时触发，全局只触发一次 （2）onShow: 小程序初始化完成或用户从后台切换到前台显示时触发 （3）onHide: 用户从前台切换到后台隐藏时触发 （4）onError: 小程序发生脚本错误，或者 api 调用失败时，会触发 o
小程序onLaunch,onLoad 执行生命周期
weixin_34055787的博客
03-11 1001
本来按照事件顺序，小程序初始化时触发App里的onLaunch，后面再执行页面Page里的onLoad，但是在onLaunch里请求获取是否有权限，等待返回值的时候Page里的onLoad事件就已经执行了。 //app.js App({ onLaunch: function () { console.log('onLaunch...
微信小程序onLaunch、onLoad执行生命周期
weixin_34252686的博客
03-27 1459
原文转载自：微信小程序onLaunch、onLoad执行生命周期 1、需求：先执行App的onLaunch添加验证权限等，再执行Page里的onLoad。 2、问题：还没有等onLaunch执行完成，onLoad就已经开始执行了。 3、解决办法：定义回调函数。 4、具体实现：Page页面判断一下当前app.globalData.employld是否有值，如果没有(第一次)定义一个app方法...
微信小程序开发(八) - 事件 - wxml 的触发
lendq的Blog
03-08 5459
事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息，如id, dataset, touches。 事件的使用方式 在组件中绑定一个事件处理函数。 如 :bindtap 当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。 ...
微信小程序生命周期和vue的生命周期
最新发布
03-08
### 微信小程序生命周期与Vue.js生命周期对比分析 #### 1. 应用/实例初始化阶段 在微信小程序中，当应用启动时会触发`App()`函数中的`onLaunch`事件处理函数。这标志着整个应用程序的创建过程，在此期间可以执行全局性的初始化操作[^1]。 对于Vue.js而言，则是在组件挂载之前调用了`beforeCreate`钩子函数；紧接着进入`created`状态，此时已经完成了数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而在这个时候还没有开始DOM编译渲染工作[^3]。 ```javascript // 微信小程序 App() 中的应用初始化 App({ onLaunch: function () { console.log('小程序已启动'); } }); ``` ```javascript // Vue 实例化对象内的 created 钩子 new Vue({ data(){ return {}; }, beforeCreate(){ console.log('Vue实例正在被创建...'); }, created(){ console.log('Vue实例已被成功创建！'); } }) ``` #### 2. 页面加载与显示阶段 每当用户打开一个新的页面或重新回到某个已有页面时，微信小程序都会依次触发该页面对应的Page构造器里的`onLoad`、`onShow`两个生命期函数。前者用于接收传递过来的数据参数并做相应处理；后者则表示当前页面即将展示给用户查看。 而在单文件组件形式下的Vue项目里，随着模板解析完成以及虚拟 DOM 节点树构建完毕之后，便会先后经历`beforeMount` 和 `mounted` 这两步重要的环节。其中`beforeMount`发生在真实dom更新前一刻而`mounted`意味着此刻视图已经被完全呈现出来并且能够正常交互了。 ```javascript // 微信小程序 Page 构造器内定义的方法 Page({ onLoad(options){ console.log(`页面接收到传入参数：${JSON.stringify(options)}`); }, onShow(){ console.log('页面即将展现'); } }); ``` ```javascript <template> <div id="app"></div> </template> <script> export default{ name:'MyComponent', beforeMount(){ console.log('组件即将挂载到DOM上'); }, mounted(){ console.log('组件已完成首次渲染'); } } </script> ``` #### 3. 数据变化响应机制 无论是微信小程序还是基于MVVM模式设计思想实现出来的Vue框架都具备良好的双向绑定特性——即模型层(Model Layer)发生改变后能自动同步反映至视图(View Layer),反之亦然。不过两者具体表现方式略有差异： - **微信小程序**: 主要依赖于setData接口来手动通知界面刷新特定区域的内容； - **Vue.js**: 则依靠其内部维护的一套完整的观察者(Observer Pattern)体系结构来自动追踪所有可变的状态变量，并据此驱动UI重绘流程。 #### 4. 销毁清理阶段 最后当一个页面不再需要继续存在下去的时候（比如关闭窗口），微信小程序提供了`onUnload`这样的销毁周期供开发者释放资源、断开连接等收尾动作；同样地，在Vue的世界观里面也有着类似的逻辑存在于`destroyed`这个钩子里边等待被执行[^3]。 ```javascript // 微信小程序 page 的卸载 Page({ onUnload(){ console.log('页面即将消失'); } }); ``` ```javascript <script> export default{ destroyed(){ console.log('组件即将被移除'); } } </script> ``` 综上所述，虽然二者同属前端技术栈范畴之内，但在实际应用场景下它们各自有着独特的工作流特点与发展路径。了解这些异同有助于更好地选择合适的技术方案解决业务需求问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值