Page(Object) 构造器

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

例如

Page({
  /**
   * 页面的初始数据
   */
  data: {
    
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  },
  /**
   * 页面滚动触发事件的处理函数
   */
  onPageScroll: function () {

  },
  /**
   * 页面尺寸改变时触发，详见 响应显示区域变化
   */
  onResize: function () {

  },
  /**
   * 当前是 tab 页时，点击 tab 时触发
   */
  onTabItemTap: function () {

  }
})

注：
除了 Page ，作为高级用法，页面可以像自定义组件一样使用 Component 来创建，这样就可以使用自定义组件的特性，如 behaviors 等。

下面我们一一介绍

1. 小程序注册完成后，加载页面，触发onLoad方法。
2. 页面载入后触发onShow方法，显示页面。
3. 首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。
4. 当小程序后台运行或跳转到其他页面时，触发onHide方法。
5. 当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
6. 当使用重定向方法wx.redirectTo()或关闭当前页返回上一页wx.navigateBack()，触发onUnload

初始数据

data

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

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

.js

Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

生命周期回调函数

onLoad(Object query)

页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

onShow()

页面显示/切入前台时触发。

onReady()

页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行。

onHide()

页面隐藏/切入后台时触发。 如 navigateTo 、底部 tab 切换到其他页面、小程序切入后台等。

onUnload()

页面卸载时触发。如redirectTo或navigateBack到其他页面时。

###页面事件处理函数

onPullDownRefresh()

监听用户下拉刷新事件。
需要在app.json的window选项中或页面配置.js中开启"enablePullDownRefresh": true,
可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachBottom()

监听用户上拉触底事件。
可以在app.json的window选项中或页面配置.js中设置触发距离"onReachBottomDistance": 50,
在触发距离内滑动期间，本事件只会被触发一次。

onShareAppMessage(Object)

监听用户点击页面内转发按钮（ 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。
注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

此事件需要 return 一个 Object，用于自定义转发内容，返回内容如下：自定义转发内容

例如

onShareAppMessage(res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/index/index'
    }
  },

此时转发后的转发消息

onPageScroll(Object)

监听用户滑动页面事件。

注意：请只在需要的时候才在 page 中定义此方法，不要定义空方法。以减少不必要的事件派发对渲染层-逻辑层通信的影响。 注意：请避免在 onPageScroll 中过于频繁的执行 setData 等引起逻辑层-渲染层通信的操作。尤其是每次传输大量数据，会影响通信耗时。

onResize(object)

小程序屏幕旋转时触发。页面尺寸改变时触发，详见 响应显示区域变化

onTabItemTap(Object)

点击 tabar 时触发

例如

onTabItemTap: function (item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
}

当切换底部导航栏时触发

附：Page 实例的生命周期。

##小程序应用生命周期对页面生命周期的影响

1. 小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。
2. 当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。
3. 当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法。