微信小程序page函數相關

原文地址：微信小程序·註冊頁面

一、說明

Page() 函數用來註冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命週期函數、事件處理函數等。

---

二、object 參數

屬性	類型	描述
data	Object	頁面的初始數據
onLoad	Function	生命週期函數–監聽頁面加載
onReady	Function	生命週期函數–監聽頁面初次渲染完成
onShow	Function	生命週期函數–監聽頁面顯示
onHide	Function	生命週期函數–監聽頁面隱藏
onUnload	Function	生命週期函數–監聽頁面卸載
onPullDownRefresh	Function	頁面相關事件處理函數–監聽用戶下拉動作
onReachBottom	Function	頁面上拉觸底事件的處理函數
onShareAppMessage	Function	用戶點擊右上角轉發
onPageScroll	Function	頁面滾動觸發事件的處理函數
onTabItemTap	Function	當前是 tab 頁時，點擊 tab 時觸發
其他	Any	開發者可以添加任意的函數或數據到 object 參數中，在頁面的函數中用 this 可以訪問

object 內容在頁面加載時會進行一次深拷貝，需考慮數據大小對頁面加載的開銷

2.1 初始化數據

初始化數據（data）將作爲頁面的第一次渲染。data 將會以 JSON 的形式由邏輯層傳至渲染層，所以其數據必須是可以轉成 JSON 的格式：字符串，數字，布爾值，對象，數組。

渲染層可以通過 WXML 對數據進行綁定。

2.2 生命週期函數

• onLoad: 頁面加載
  一個頁面只會調用一次，可以在 onLoad 中獲取打開當前頁面所調用的 query 參數。
• onShow: 頁面顯示
  每次打開頁面都會調用一次。
• onReady: 頁面初次渲染完成
  一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。
  對界面的設置如wx.setNavigationBarTitle請在onReady之後設置。
• onHide: 頁面隱藏
  當navigateTo或底部tab切換時調用。
• onUnload: 頁面卸載
  當redirectTo或navigateBack的時候調用。

2.3 頁面相關事件處理函數

• onPullDownRefresh: 下拉刷新
  監聽用戶下拉刷新事件。
  需要在app.json的window選項中或頁面配置中開啓enablePullDownRefresh。
  當處理完數據刷新後，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。
• onReachBottom: 上拉觸底
  監聽用戶上拉觸底事件。
  可以在app.json的window選項中或頁面配置中設置觸發距離onReachBottomDistance。
  在觸發距離內滑動期間，本事件只會被觸發一次。
• onPageScroll: 頁面滾動
  監聽用戶滑動頁面事件。
  參數爲 Object，包含字段scrollTop，類型爲Number，表示頁面在垂直方向已滾動的距離（單位px）

• onShareAppMessage: 用戶轉發
  只有定義了此事件處理函數，右上角菜單纔會顯示“轉發”按鈕
  用戶點擊轉發按鈕的時候會調用
  此事件需要 return 一個 Object，用於自定義轉發內容
  自定義轉發字段

  字段	說明	默認值
  title	轉發標題	當前小程序名稱
  path	轉發路徑	當前頁面 path ，必須是以 / 開頭的完整路徑

  示例代碼:

  Page({
      onShareAppMessage: function () {
          return {
              title: '自定義轉發標題',
              path: '/page/user?id=123'
          }
      }
  })

2.4 事件處理函數

除了初始化數據和生命週期函數，Page 中還可以定義一些特殊的函數：事件處理函數。在渲染層可以在組件中加入事件綁定，當達到觸發事件時，就會執行 Page 中定義的事件處理函數。

示例代碼：

<view bindtap="viewTap"> click me </view>

Page({
  viewTap: function() {
    console.log('view tap')
  }
})

2.5 Page.prototype.route

route 字段可以獲取到當前頁面的路徑。

2.6 Page.prototype.setData()

setData 函數用於將數據從邏輯層發送到視圖層（異步），同時改變對應的 this.data 的值（同步）。

setData() 參數格式:

字段	類型	必填	描述
data	Object	是	這次要改變的數據
callback	Function	否	回調函數

object 以 key，value 的形式表示將 this.data 中的 key 對應的值改變成 value。 callback 是一個回調函數，在這次setData對界面渲染完畢後調用。

其中 key 可以非常靈活，以數據路徑的形式給出，如 array[2].message，a.b.c.d，並且不需要在 this.data 中預先定義。

注意：

• 直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的，還會造成數據不一致。
• 單次設置的數據不能超過1024kB，請儘量避免一次設置過多的數據。
• 請不要把 data 中任何一項的 value 設爲 undefined ，否則這一項將不被設置並可能遺留一些潛在問題。

---

三、page生命週期