Page
Page() 函數(shù)用來注冊(cè)一個(gè)頁面。接受一個(gè) object 參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
object 參數(shù)說明：
| 屬性 | 類型 | 描述 |
|---|
| data | Object | 頁面的初始數(shù)據(jù) |
| onLoad | Function | 生命周期函數(shù)--監(jiān)聽頁面加載 |
| onReady | Function | 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 |
| onShow | Function | 生命周期函數(shù)--監(jiān)聽頁面顯示 |
| onHide | Function | 生命周期函數(shù)--監(jiān)聽頁面隱藏 |
| onUnload | Function | 生命周期函數(shù)--監(jiān)聽頁面卸載 |
| onPullDownRefresh | Function | 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作 |
| onReachBottom | Function | 頁面上拉觸底事件的處理函數(shù) |
| onShareAppMessage | Function | 用戶點(diǎn)擊右上角轉(zhuǎn)發(fā) |
| onPageScroll | Function | 頁面滾動(dòng)觸發(fā)事件的處理函數(shù) |
| onTabItemTap | Function | 當(dāng)前是 tab 頁時(shí)，點(diǎn)擊 tab 時(shí)觸發(fā) |
| 其他 | Any | 開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 object 參數(shù)中，在頁面的函數(shù)中用 this 可以訪問 |
object 內(nèi)容在頁面加載時(shí)會(huì)進(jìn)行一次深拷貝，需考慮數(shù)據(jù)大小對(duì)頁面加載的開銷
示例代碼：
//index.jsPage({
data: {
text: "This is page data."
},
onLoad: function(options) { // Do some initialize when page load.
},
onReady: function() { // Do something when page ready.
},
onShow: function() { // Do something when page show.
},
onHide: function() { // Do something when page hide.
},
onUnload: function() { // Do something when page close.
},
onPullDownRefresh: function() { // Do something when pull down.
},
onReachBottom: function() { // Do something when page reach bottom.
},
onShareAppMessage: function () { // return custom share data when user share.
},
onPageScroll: function() { // Do something when page scroll
},
onTabItemTap(item) { console.log(item.index) console.log(item.pagePath) console.log(item.text)
}, // Event handler.
viewTap: function() { this.setData({
text: 'Set some data for updating view.'
}, function() { // this is setData callback
})
},
customData: {
hi: 'MINA'
}
})初始化數(shù)據(jù)
初始化數(shù)據(jù)將作為頁面的第一次渲染。data 將會(huì)以 JSON 的形式由邏輯層傳至渲染層，所以其數(shù)據(jù)必須是可以轉(zhuǎn)成 JSON 的格式：字符串，數(shù)字，布爾值，對(duì)象，數(shù)組。
渲染層可以通過 WXML 對(duì)數(shù)據(jù)進(jìn)行綁定。
示例代碼：
<view>{{text}}</view><view>{{array[0].msg}}</view>Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})生命周期函數(shù)
onLoad: 頁面加載
onShow: 頁面顯示
onReady: 頁面初次渲染完成
一個(gè)頁面只會(huì)調(diào)用一次，代表頁面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。
對(duì)界面的設(shè)置如wx.setNavigationBarTitle請(qǐng)?jiān)?code style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 0.85em; break-inside: avoid; direction: ltr; margin: 0px; padding: 0.2em; border: none; color: inherit; background-color: rgb(247, 247, 247);">onReady之后設(shè)置。詳見生命周期
onHide: 頁面隱藏
onUnload: 頁面卸載
生命周期的調(diào)用以及頁面的路由方式詳見
onLoad參數(shù)
| 類型 | 說明 |
|---|
| Object | 其他頁面打開當(dāng)前頁面所調(diào)用的 query 參數(shù) |
頁面相關(guān)事件處理函數(shù)
onPullDownRefresh: 下拉刷新
onReachBottom: 上拉觸底
onPageScroll: 頁面滾動(dòng)
監(jiān)聽用戶滑動(dòng)頁面事件。
參數(shù)為 Object，包含以下字段：
| 字段 | 類型 | 說明 |
|---|
| scrollTop | Number | 頁面在垂直方向已滾動(dòng)的距離（單位px） |
自定義轉(zhuǎn)發(fā)字段
| 字段 | 說明 | 默認(rèn)值 |
|---|
| title | 轉(zhuǎn)發(fā)標(biāo)題 | 當(dāng)前小程序名稱 |
| path | 轉(zhuǎn)發(fā)路徑 | 當(dāng)前頁面 path ，必須是以 / 開頭的完整路徑 |
示例代碼
Page({
onShareAppMessage: function () { return {
title: '自定義轉(zhuǎn)發(fā)標(biāo)題',
path: '/page/user?id=123'
}
}
})事件處理函數(shù)
除了初始化數(shù)據(jù)和生命周期函數(shù)，Page 中還可以定義一些特殊的函數(shù)：事件處理函數(shù)。在渲染層可以在組件中加入事件綁定，當(dāng)達(dá)到觸發(fā)事件時(shí)，就會(huì)執(zhí)行 Page 中定義的事件處理函數(shù)。
示例代碼：
<view bindtap="viewTap"> click me </view>
Page({
viewTap: function() { console.log('view tap')
}
})Page.prototype.route
基礎(chǔ)庫 1.2.0 開始支持，低版本需做兼容處理
route 字段可以獲取到當(dāng)前頁面的路徑。
Page.prototype.setData()
setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步），同時(shí)改變對(duì)應(yīng)的 this.data 的值（同步）。
setData() 參數(shù)格式
| 字段 | 類型 | 必填 | 描述 | 最低版本 |
|---|
| data | Object | 是 | 這次要改變的數(shù)據(jù) |
|
| callback | Function | 否 | 回調(diào)函數(shù) | 1.5.0 |
object 以 key，value 的形式表示將 this.data 中的 key 對(duì)應(yīng)的值改變成 value。 callback 是一個(gè)回調(diào)函數(shù)，在這次setData對(duì)界面渲染完畢后調(diào)用。
其中 key 可以非常靈活，以數(shù)據(jù)路徑的形式給出，如 array[2].message，a.b.c.d，并且不需要在 this.data 中預(yù)先定義。
注意：
直接修改 this.data 而不調(diào)用 this.setData 是無法改變頁面的狀態(tài)的，還會(huì)造成數(shù)據(jù)不一致。
單次設(shè)置的數(shù)據(jù)不能超過1024kB，請(qǐng)盡量避免一次設(shè)置過多的數(shù)據(jù)。
請(qǐng)不要把 data 中任何一項(xiàng)的 value 設(shè)為 undefined ，否則這一項(xiàng)將不被設(shè)置并可能遺留一些潛在問題。
示例代碼：
<!--index.wxml--><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.jsPage({
data: {
text: 'init data',
num: 0,
array: [{text: 'init data'}],
object: {
text: 'init data'
}
},
changeText: function() { // this.data.text = 'changed data' // bad, it can not work
this.setData({
text: 'changed data'
})
},
changeNum: function() { this.data.num = 1
this.setData({
num: this.data.num
})
},
changeItemInArray: function() { // you can use this way to modify a danamic data path
this.setData({ 'array[0].text':'changed data'
})
},
changeItemInObject: function(){ this.setData({ 'object.text': 'changed data'
});
},
addNewField: function() { this.setData({ 'newField.text': 'new data'
})
}
})以下內(nèi)容你不需要立馬完全弄明白，不過以后它會(huì)有幫助。
生命周期
下圖說明了 Page 實(shí)例的生命周期。
