頁面 Page

Page(Object) 構造器 Page(Object) 函數(shù)用來注冊一個頁面。接受一個 Object 類型參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。 Object 參數(shù)說明：

// index.js
Page({
  data: {
    text: 'This is page data.'
  },
  onLoad(options) {
    // Do some initialize when page load.
  },
  onReady() {
    // Do something when page ready.
  },
  onShow() {
    // Do something when page show.
  },
  onHide() {
    // Do something when page hide.
  },
  onUnload() {
    // Do something when page close.
  },
  onPullDownRefresh() {
    // Do something when pull down.
  },
  onReachBottom() {
    // Do something when page reach bottom.
  },
  onShareAppMessage() {
    // return custom share data when user share.
  },
  onPageScroll() {
    // Do something when page scroll
  },
  onResize() {
    // Do something when page resize
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function () {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

除了 Page ，作為高級用法，頁面可以像自定義組件一樣使用 Component 來創(chuàng)建，這樣就可以使用自定義組件的特性，如 behaviors 等。具體細節(jié)請閱讀 Component 構造器 章節(jié)。

初始數(shù)據(jù)

data

data 是頁面第一次渲染使用的初始數(shù)據(jù)。 頁面加載時，data 將會以JSON字符串的形式由邏輯層傳至渲染層，因此data中的數(shù)據(jù)必須是可以轉成JSON的類型：字符串，數(shù)字，布爾值，對象，數(shù)組。 渲染層可以通過 QML 對數(shù)據(jù)進行綁定。

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

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

生命周期回調(diào)函數(shù)

onLoad(Object query)onLoad(Object query)

頁面加載時觸發(fā)。一個頁面只會調(diào)用一次，可以在 onLoad 的參數(shù)中獲取打開當前頁面路徑中的參數(shù)。

onShow()

頁面顯示/切入前臺時觸發(fā)。

onReady()

頁面初次渲染完成時觸發(fā)。一個頁面只會調(diào)用一次，代表頁面已經(jīng)準備妥當，可以和視圖層進行交互。 注意：對界面內(nèi)容進行設置的 API 如qq.setNavigationBarTitle，請在onReady之后進行。詳見生命周期

onHide()

頁面隱藏/切入后臺時觸發(fā)。 如 navigateTo 或底部 tab 切換到其他頁面，小程序切入后臺等。

onUnload()

頁面卸載時觸發(fā)。如redirectTo或navigateBack到其他頁面時。

頁面事件處理函數(shù)

onPullDownRefresh()

監(jiān)聽用戶下拉刷新事件。 需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。 可以通過qq.startPullDownRefresh觸發(fā)下拉刷新，調(diào)用后觸發(fā)下拉刷新動畫，效果與用戶手動下拉刷新一致。 當處理完數(shù)據(jù)刷新后，qq.stopPullDownRefresh可以停止當前頁面的下拉刷新。

onReachBottom()

監(jiān)聽用戶上拉觸底事件。 可以在app.json的window選項中或頁面配置中設置觸發(fā)距離onReachBottomDistance。 在觸發(fā)距離內(nèi)滑動期間，本事件只會被觸發(fā)一次。

onPageScroll(Object)

監(jiān)聽用戶滑動頁面事件。

Object 參數(shù)說明：

注意：請只在需要的時候才在 page 中定義此方法，不要定義空方法。以減少不必要的事件派發(fā)對渲染層-邏輯層通信的影響。

注意：請避免在 onPageScroll 中過于頻繁的執(zhí)行 setData 等引起邏輯層-渲染層通信的操作。尤其是每次傳輸大量數(shù)據(jù)，會影響通信耗時。

onShareAppMessage(Object)

監(jiān)聽用戶點擊頁面內(nèi)轉發(fā)按鈕（<button> 組件 open-type="share"）或右上角菜單"分享給好友"、"分享到空間"按鈕的行為，并自定義轉發(fā)內(nèi)容。 如果是監(jiān)聽用戶點擊頁面內(nèi)轉發(fā)按鈕的，可以支持快速分享（直接將小程序分享到來源的聊天窗口，不需要經(jīng)過選擇好友的步驟），如果App.onLaunch或App.onShow帶有entryDataHash參數(shù)，說明支持快速分享；如果開發(fā)者要進行快速分享，需要在onShareAppMessage接口返回的分享參數(shù)帶上entryDataHash。

注意：定義了此事件處理函數(shù)時點擊右上角菜單會顯示"分享給好友"、"分享到空間"按鈕，無需調(diào)用showShareMenu，hideShareMenu無效 Object 參數(shù)說明：

此事件需要 return 一個 Object，用于自定義轉發(fā)內(nèi)容，返回內(nèi)容如下：

shareTarget 參數(shù)說明：

自定義轉發(fā)內(nèi)容

shareType

用來指定分享的類型，目前分享有兩種，一種是分享小程序，另外一種是分享一張圖片。

示例代碼：

Page({
  onShareAppMessage(res) {
    if (res.from === 'button') {
      // 來自頁面內(nèi)轉發(fā)按鈕
      console.log(res.target)
    }
    return {
      title: '自定義轉發(fā)標題',
      path: '/page/user?id=123'
    }
  }
})

onResize(object)

小程序屏幕旋轉時觸發(fā)。詳見 響應顯示區(qū)域變化

onTabItemTap(Object)

點擊 tab 時觸發(fā)

Object 參數(shù)說明：

示例代碼：

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

組件事件處理函數(shù)

Page 中還可以定義組件事件處理函數(shù)。在渲染層的組件中加入事件綁定，當事件被觸發(fā)時，就會執(zhí)行 Page 中定義的事件處理函數(shù)。 示例代碼：

<view bindtap="viewTap">click me</view>
1
Page({
  viewTap() {
    console.log('view tap')
  }
})

route

Page.route

到當前頁面的路徑，類型為String

Page({
  onShow() {
    console.log(this.route)
  }
})

setData

Page.prototype.setData(Object data, Function callback)

setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步），同時改變對應的 this.data 的值（同步）。

參數(shù)說明

Object 以 key: value 的形式表示，將 this.data 中的 key 對應的值改變成 value。 其中 key 可以以數(shù)據(jù)路徑的形式給出，支持改變數(shù)組中的某一項或對象的某個屬性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中預先定義。

其中 key 可以以數(shù)據(jù)路徑的形式給出，支持改變數(shù)組中的某一項或對象的某個屬性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中預先定義。 注意：

1. 直接修改 this.data 而不調(diào)用 this.setData 是無法改變頁面的狀態(tài)的，還會造成數(shù)據(jù)不一致。
2. 僅支持設置可 JSON 化的數(shù)據(jù)。
3. 單次設置的數(shù)據(jù)不能超過1024kB，請盡量避免一次設置過多的數(shù)據(jù)。
4. 請不要把 data 中任何一項的 value 設為 undefined ，否則這一項將不被設置并可能遺留一些潛在問題。

<!--index.qml-->
<view>{{text}}</view>
<button bindtap="changeText">Change normal data</button>
<view>{{num}}</view>
<button bindtap="changeNum">Change normal num</button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray">Change Array data</button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject">Change Object data</button>
<view>{{newField.text}}</view>
<button bindtap="addNewField">Add new data</button>

// index.js
Page({
  data: {
    text: 'init data',
    num: 0,
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText() {
    // this.data.text = 'changed data' // 不要直接修改 this.data
    // 應該使用 setData
    this.setData({
      text: 'changed data'
    })
  },
  changeNum() {
    // 或者，可以修改 this.data 之后馬上用 setData 設置一下修改了的字段
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  changeItemInArray() {
    // 對于對象或數(shù)組字段，可以直接修改一個其下的子字段，這樣做通常比修改整個對象或數(shù)組更好
    this.setData({
      'array[0].text': 'changed data'
    })
  },
  changeItemInObject() {
    this.setData({
      'object.text': 'changed data'
    })
  },
  addNewField() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

生命周期 以下內(nèi)容你不需要立馬完全弄明白，不過以后它會有幫助。 下圖說明了 Page 實例的生命周期。