QQ小程序 注冊(cè)頁面

頁面 Page

Page(Object) 構(gòu)造器 Page(Object) 函數(shù)用來注冊(cè)一個(gè)頁面。接受一個(gè) 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 ，作為高級(jí)用法，頁面可以像自定義組件一樣使用 Component 來創(chuàng)建，這樣就可以使用自定義組件的特性，如 behaviors 等。具體細(xì)節(jié)請(qǐng)閱讀 Component 構(gòu)造器 章節(jié)。

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

data

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

<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)

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

onShow()

頁面顯示/切入前臺(tái)時(shí)觸發(fā)。

onReady()

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

onHide()

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

onUnload()

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

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

onPullDownRefresh()

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

onReachBottom()

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

onPageScroll(Object)

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

Object 參數(shù)說明：

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

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

onShareAppMessage(Object)

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

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

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

shareTarget 參數(shù)說明：

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

shareType

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

示例代碼：

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

onResize(object)

小程序屏幕旋轉(zhuǎn)時(shí)觸發(fā)。詳見 響應(yīng)顯示區(qū)域變化

onTabItemTap(Object)

點(diǎn)擊 tab 時(shí)觸發(fā)

Object 參數(shù)說明：

示例代碼：

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

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

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

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

route

Page.route

到當(dāng)前頁面的路徑，類型為String

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

setData

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

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

參數(shù)說明

Object 以 key: value 的形式表示，將 this.data 中的 key 對(duì)應(yīng)的值改變成 value。 其中 key 可以以數(shù)據(jù)路徑的形式給出，支持改變數(shù)組中的某一項(xiàng)或?qū)ο蟮哪硞€(gè)屬性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中預(yù)先定義。

其中 key 可以以數(shù)據(jù)路徑的形式給出，支持改變數(shù)組中的某一項(xiàng)或?qū)ο蟮哪硞€(gè)屬性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中預(yù)先定義。 注意：

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

<!--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
    // 應(yīng)該使用 setData
    this.setData({
      text: 'changed data'
    })
  },
  changeNum() {
    // 或者，可以修改 this.data 之后馬上用 setData 設(shè)置一下修改了的字段
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  changeItemInArray() {
    // 對(duì)于對(duì)象或數(shù)組字段，可以直接修改一個(gè)其下的子字段，這樣做通常比修改整個(gè)對(duì)象或數(shù)組更好
    this.setData({
      'array[0].text': 'changed data'
    })
  },
  changeItemInObject() {
    this.setData({
      'object.text': 'changed data'
    })
  },
  addNewField() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

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