微信小程序生命周期函数,微信小程序生命周期怎么设置

对于微信小程序的生命周期，本文从以下几个方面介绍微信小程序的生命周期：

目录 应用生命周期页面生命周期A页面wx.navigateTo跳转到B页面时，两个页面生命周期的逻辑 应用生命周期影响页面声明周期组件生命周期

应用生命周期

                                                                              应用生命周期

用户首次打开小程序，触发onLaunch(全局只触发一次)小程序初始化完成后，触发onshow方法，监听小程序显示小程序从前台进入后台，触发onHide方法小程序从后台进入前台显示，触发onshow方法小程序后台运行一定时间，或系统资源占用过高，会被销毁。

前台、后台定义：当用户点击左上角关闭，或者按了设备home键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统占用过高，才会被真正的销毁。

App(Object object)
注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

App({ onLaunch (options) { // Do something initial when launch. }, onShow (options) { // Do something when show. }, onHide () { // Do something when hide. }, onError (msg) { console.log(msg) }, globalData: 'I am global data'})

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。

// xxx.jsconst appInstance = getApp()console.log(appInstance.globalData) // I am global data 页面生命周期

Page(Object object)
注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等

                                                                              页面生命周期

小程序注册完成后，加载页面，触发onLoad方法，一个页面只会调用一次页面载入后会触发onShow方法，显示页面，每次打开页面都会调用一次首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次当小程序后台运行或跳转到其他页面时，会触发onHide方法当小程序从后台进入到前台运行或重新进入页面时，触发onshow方法当使用重定向wx.redirectTo()或者关闭当前页返回上一页wx.navigateBack(),触发onUnload A页面wx.navigateTo跳转到B页面时，两个页面生命周期的逻辑 进入A页面：A执行onLoad()–>onShow()—>onReady()A页面navigateTo B页面：A执行onHide(),B执行onLoad()–>onShow()—>onReady()B页面wx.navigateBack() A页面：B执行onUnload(),A执行onShow()退出A页面：A执行onUnload //index.jsPage({ data: { text: "This is page data." }, onLoad: function(options) { // Do some initialize when page load. }, onShow: function() { // Do something when page show. }, onReady: function() { // Do something when page ready. }, onHide: function() { // Do something when page hide. }, onUnload: function() { // Do something when page close. }, onPullDownRefresh: function() { // Do something when pull down. }, onReachBottom: function() { // Do something when page reach bottom. }, onShareAppMessage: function () { // return custom share data when user share. }, onPageScroll: function() { // Do something when page scroll }, onResize: function() { // Do something when page resize }, onTabItemTap(item) { console.log(item.index) console.log(item.pagePath) console.log(item.text) }, // Event handler. viewTap: function() { this.setData({ text: 'Set some data for updating view.' }, function() { // this is setData callback }) }, customData: { hi: 'MINA' }})

data
data 是页面第一次渲染使用的初始数据。
页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。
渲染层可以通过 WXML 对数据进行绑定。

应用生命周期影响页面声明周期

                                                                            应用生命周期影响页面声明周期

小程序初始化完成后，页面首次加载触发onLoad，只会触发一次当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法
组件生命周期 组件生命周期

        组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
其中，最重要的生命周期是，created attached detached包含一个组件实例生命流程的最主要时间点。

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

定义生命周期方法
生命周期方法可以直接定义在 Component 构造器的第一级参数中。

自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。

Component({ lifetimes: { attached: function() { // 在组件实例进入页面节点树时执行 }, detached: function() { // 在组件实例被从页面节点树移除时执行 }, }, // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容 attached: function() { // 在组件实例进入页面节点树时执行 }, detached: function() { // 在组件实例被从页面节点树移除时执行 }, // ...})

在 behaviors 中也可以编写生命周期方法，同时不会与其他 behaviors 中的同名生命周期相互覆盖。但要注意，如果一个组件多次直接或间接引用同一个 behavior ，这个 behavior 中的生命周期函数在一个执行时机内只会执行一次。

可用的全部生命周期如下表所示。

生命周期参数描述最低版本created无在组件实例刚刚被创建时执行1.6.3attached无在组件实例进入页面节点树时执行1.6.3ready无在组件在视图层布局完成后执行1.6.3moved无在组件实例被移动到节点树另一个位置时执行1.6.3detached无在组件实例被从页面节点树移除时执行1.6.3errorObject Error每当组件方法抛出错误时执行2.4.1导管$1$1600$1600

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

生命周期参数描述最低版本show无组件所在的页面被展示时执行2.2.3hide无组件所在的页面被隐藏时执行2.2.3resizeObject Size组件所在的页面尺寸变化时执行2.4.0

代码示例：

Component({ pageLifetimes: { show: function() { // 页面被展示 }, hide: function() { // 页面被隐藏 }, resize: function(size) { // 页面尺寸变化 } }})

借鉴文章：https://www.jianshu.com/p/0078507e14d3
微信开放文档