微信小程序中页面的生命周期

微信小程序的页面对象(Page)作为应用的可视化组件,有其自己的生命周期。我们可以连用对应的生命周期函数来完成特定的操作。

页面生命周期函数

在微信小程序中,每一个页面对象包括以下的生命周期函数:

onLoad - 小程序注册完成后,加载页面触发。

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

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

onHide - 当小程序后台运行或跳转到其他页面时触发。

onShow - 当小程序有后台进入到前台运行或重新进入页面时触发。

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

实例研究

新建一个微信小程序项目,在 index 页面的 index.js 的代码修改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const app = getApp()
const pageName = 'INDEX '
Page({
data: {
motto: 'Hello World',
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log(pageName + 'onLoad')
},
onReady: function () {
console.log(pageName + 'onReady')
},
onShow: function () {
console.log(pageName + 'onShow')
},
onHide: function () {
console.log(pageName + 'onHide')
},
onUnload: function () {
console.log(pageName + 'onUnload')
}
})

对应的 index.wxml 改为:

1
2
3
4
5
6
7
8
<view class="container">
<view class="userinfo">
<button bindtap='bindViewTap'>切换到logs页面</button>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>

这样我们就可以观察页面生命周期的执行顺序了。

保存修改后,可以看到在Console中输出了以下信息:

1
2
3
INDEX onLoad
INDEX onShow
INDEX onReady

通过这些信息可以判断,页面生命周期函数的执行顺序是: onLoad -> onShow -> onReady

现在点击微信模拟器右上角的关闭按钮,模拟用户退出小程序的操作,可以看到输出了

1
INDEX onHide

选中”发现栏小程序入口”,界面切换回 index 界面,可以看到输出了

1
INDEX onShow

现在我们改造以下 logs 界面,将 logs.js 改为以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const util = require('../../utils/util.js')
const pageName = 'LOGS '

Page({
data: {
logs: []
},
bindViewTap: function () {
wx.navigateBack({

})
},
onLoad: function () {
console.log(pageName + 'onLoad')
},
onReady: function () {
util.formatTime(new Date())
console.log(pageName + 'onReady')
},
onShow: function () {
console.log(pageName + 'onShow')
},
onHide: function () {
console.log(pageName + 'onHide')
},
onUnload: function () {
console.log(pageName + 'onUnload')
}
})

对应的 logs.wxml 改为以下代码:

1
2
3
4
5
<view class="container">
<view class="userinfo">
<button bindtap='bindViewTap'>切换到index页面</button>
</view>
</view>

然后我们在微信模拟器中点击 index 界面上的 “切换到logs页面” 按钮,可以看到Console中输出了:

1
2
3
4
INDEX onHide
LOGS onLoad
LOGS onShow
LOGS onReady

接着按下 “切换到index页面” 按钮, 可以看到输出:

1
2
LOGS onUnload
INDEX onShow

本文标题:微信小程序中页面的生命周期

文章作者:梅老师

发布时间:2019年08月28日 - 09:08

最后更新:2020年05月28日 - 16:05

原始链接:https://www.mls-tech.info/weapp/weapp-page-liftcycle/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。