微信小程序生命周期:应用级、页面级与组件的全面解析

2024-06-01
来源:网络整理

目录 前言 生命周期概念 微信小程序生命周期 1.应用级别生命周期 2.页面级别生命周期 3.组件生命周期 4.总结 最后

前言在微信小程序开发中,微信小程序API的使用是必备技能,但是微信小程序的生命周期也是必须首先了解和掌握的知识点。尤其在目前的前端开发领域,必须掌握各种前端框架和技术,而微信小程序的语法就是JS的翻版,掌握更是小菜一碟。所以这篇博文专门来分享一下微信小程序的生命周期,因为虽然大家平时在开发中都会涉及到微信小程序的使用,但是除了几个常用的钩子函数以外,其他没用到的不了解就是错误的。为了方便以后查阅和使用,特地总结记录下来。

在说微信小程序的生命周期之前,我们先来了解一下生命周期的概念。生命周期其实就是指一个对象从创建到销毁的过程,也就是指一个程序从创建、启动、暂停、调用、停止、销毁、卸载的过程。

微信小程序生命周期

严格来说,微信小程序的生命周期分为三个部分:应用级生命周期、页面级生命周期、组件生命周期。

1. 应用程序级生命周期

微信小程序应用级生命周期其实就是整个微信小程序应用(App)的生命周期。App()函数用于注册一个小程序,接收一个参数,必须在app.js中调用。App()必须调用,并且只能调用一次。app.js中定义了几个应用级生命周期函数,如下所示:

:小程序初始化完成时触发,全局只触发一次; :小程序初始化(启动)或者从后台切换到前台时触发; :小程序从前台切换到后台(比如切换到其他APP)时触发; :小程序出现脚本错误或者API调用失败时,会触发并返回错误信息; :小程序要打开的页面不存在时触发; :小程序有未处理的拒绝时触发; :系统切换主题时触发。我们来看几个常用的应用级生命周期函数的具体例子:

//app.js 文件 App({ onLaunch:function(){ // 监听小程序的初始化 console.log("onLaunch"); }, onShow:function(){ // 监听小程序的显示 console.log("onShow"); }, onHide:function(){ // 监听小程序的隐藏 console.log("onHide"); }, onError:function(message){ // 错误监听的函数 console.log("onError"+ message); }, globalData: { userInfo:null } })

注意:当用户点击微信小程序左上角的关闭按钮,或者按手机home键离开微信时,微信小程序并不会被直接销毁;当用户再次打开小程序或者再次进入微信时,小程序会从后台移到前台进行唤醒。

2. 页面级生命周期

微信小程序的页面级生命周期其实都是以微信小程序页面的生命周期为基础的,在每个页面注册函数Page()的参数中,定义了几个页面生命周期函数,如下所示:

:页面加载时触发,仅执行一次; :页面显示时即加载完成后、后端切换到前台时、或者重新进入页面时触发,可执行多次; :页面首次渲染时触发,仅执行一次; :页面从前台切换到后台或者进入其他页面时触发; :页面卸载时触发; 我们来看几个常用的页面级生命周期函数的具体例子:

//监听页面加载 onLoad:function (){ console.log('onLoad") }, //监听页面初次渲染完成 onReady:function() { console.log('onReady') }, //监听页面显示 onShow:function () { console.log('onShow') }, //监听页面隐藏 onHide: function () { console.log('onHide') }, //监听页面卸载 onUnload:function () { console.log('onUnload') },

软件开发微信小程序_微信小程序开发群应用_应用群微信开发程序小程序下载

注意:当切换页面需要多次渲染数据改变时,可以在 中使用;当只需初始化一次时,可以在 或 中使用;当需要清除定时器时,可以在 中使用。

页面生命周期执行的顺序是:--> --> --> 。

3. 组件生命周期微信小程序组件的生命周期其实就是基于微信小程序封装的组件()的生命周期,在使用组件封装的时候,定义了几个组件生命周期函数,如下所示:

:组件实例刚刚创建时触发; :组件完全初始化并进入页面节点树时触发; :组件在视图层布局时触发; :组件实例移动到节点树中其他位置时触发; :组件离开页面节点树后触发; :组件方法中每当抛出错误时触发。注意:生命周期方法可以直接在构造函数的一级参数中定义。

4.总结通过以上对微信小程序生命周期的介绍,我们可以总结出以下几个流程,按照程序生命周期的执行顺序来概括,如下图:

1.开启微信小程序生命周期执行顺序

(应用程序)-->(应用程序)-->(页面)-->(页面)-->(页面)。

2.进入下一个页面时生命周期的执行顺序

(当前页)-->(下一页)-->(下一页)-->(下一页)。

3. 返回上一页时的生命周期执行顺序

(当前页面)-->(上一页)。

4. 离开小程序时生命周期的执行顺序

(应用程序)。

5. 再次进入小程序生命周期时,执行顺序

微信小程序未销毁-->(App)-->(Page)-->(Page)-->(Page);小程序销毁-->(App)-->(App)-->(Page)-->(Page)-->(Page)。

最后,通过本文对前端开发中微信小程序生命周期的详细介绍,无论是实际的前端开发工作还是前端工作面试中,它都是一个十分关键的知识点。因此,作为一名前端开发人员,必须掌握其相关内容,特别是对于刚从事前端开发时间不长的开发人员来说。是一篇值得一读的文章,其重要性就不再赘述了。欢迎关注,一起交流,共同进步。

这篇关于微信小程序开发中生命周期的详细介绍就到此结束了,更多小程序生命周期相关的内容请搜索往期文章或者继续浏览后面的相关文章,希望大家以后多多支持我!

分享