小程序（三）[生命周期-页面]

三类生命周期

• 应用生命周期
• 页面生命周期
• 组件生命周期

页面生命周期

Page(Object object)

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

属性	类型	默认值	必填	说明
data	Object			页面的初始数据
onLoad	function			生命周期回调—监听页面加载
onShow	function			生命周期回调—监听页面显示
onReady	function			生命周期回调—监听页面初次渲染完成
onHide	function			生命周期回调—监听页面隐藏
onUnload	function			生命周期回调—监听页面卸载

onLoad:

在页面刚进入的时候初始化加载一次，一般用于获取数据和参数。

onShow：

切换前后台就是使用路由跳转别页面或者切换应用和到桌面，再次回到这个页面就是回到前台触发onShow。

onReady：

初始化完成后，会渲染页面这个函数会在页面渲染完成后触发。

onHide：

会在页面隐藏和切换后台时触发，如 navigateTo 跳转到别的页面时和回到桌面时都可触发。
我们设置一个按钮绑定函数使index页面使用navigateTo 跳转到log页面
html：

<!--pages/index/index.wxml-->
<view class="container">
	<text>页面生命周期</text>
	<button bindtap="tapA">点击跳转</button>
</view>

JS：

onHide: function () {
    console.log("onHide,在页面隐藏和切换到后台会触发")
  },
  tapA: function() {
    wx.navigateTo({
      url: '/pages/log/log'
    })
 }

效果如下：

onUnload:

会在页面卸载时也就是关闭当前页面时触发，如wx.redirectTo或wx.navigateBack跳转到其他页面时会关闭当前页面或所有页面这时就会触发，还有小程序关闭时会优先触发还在栈中的页面生命函数。
我们使index页使用wx.redirectTo跳转到log页面这时会关闭index页来触发 onUnload 函数。
JS：

tapA: function() {
    wx.reLaunch({
      url: '/pages/log/log'
    })
  },
  onUnload() {
    console.log("onUnload,在页面卸载时触发会触发")
  }

效果：

应用生命周期和页面生命周期的执行顺序

这里我们说的是整个小程序的生命周期即应用生命周期，我们开发中会有很多页面，而每个页面也都有自己的生命周期，我们在启动小程序的时候先执行应用生命周期来加载整个小程序，在执行每个页面的生命周期，但是退出的时候会先执行页面生命周期后执行应用生命周期。