微信小程序的页面对象(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
现在点击微信模拟器右上角的关闭按钮,模拟用户退出小程序的操作,可以看到输出了
选中”发现栏小程序入口”,界面切换回 index 界面,可以看到输出了
现在我们改造以下 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
|