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方法。