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

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

页面生命周期函数

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

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

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

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

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

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

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

实例研究

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

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 改为:

<view class="container">
  <view class="userinfo">
    <button bindtap='bindViewTap'>切换到logs页面</button>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

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

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

INDEX onLoad
INDEX onShow
INDEX onReady

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

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

INDEX onHide

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

INDEX onShow

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

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 改为以下代码:

<view class="container">
  <view class="userinfo">
    <button bindtap='bindViewTap'>切换到index页面</button>
  </view>
</view>

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

INDEX onHide
LOGS onLoad
LOGS onShow
LOGS onReady

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

LOGS onUnload
INDEX onShow