Page
Page()
函數用來註冊一個頁面。接受一個 object 參數,其指定頁面的初始數據、生命週期函數、事件處理函數等。
object 參數說明:
屬性 | 類型 | 描述 |
---|---|---|
data | Object | 頁面的初始數據 |
onLoad | Function | 生命週期函數--監聽頁面加載 |
onReady | Function | 生命週期函數--監聽頁面初次渲染完成 |
onShow | Function | 生命週期函數--監聽頁面顯示 |
onHide | Function | 生命週期函數--監聽頁面隱藏 |
onUnload | Function | 生命週期函數--監聽頁面卸載 |
onPullDownRefresh | Function | 頁面相關事件處理函數--監聽用戶下拉動作 |
onReachBottom | Function | 頁面上拉觸底事件的處理函數 |
onShareAppMessage | Function | 用戶點擊右上角轉發 |
onPageScroll | Function | 頁面滾動觸發事件的處理函數 |
其他 | Any | 開發者可以添加任意的函數或數據到 object 參數中,在頁面的函數中用 this 可以訪問 |
示例代碼:
//index.js
Page({
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
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
},
customData: {
hi: 'MINA'
}
})
初始化數據
初始化數據將作爲頁面的第一次渲染。data 將會以 JSON 的形式由邏輯層傳至渲染層,所以其數據必須是可以轉成 JSON 的格式:字符串,數字,布爾值,對象,數組。
渲染層可以通過 WXML 對數據進行綁定。
示例代碼:
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})
生命週期函數
onLoad
: 頁面加載- 一個頁面只會調用一次,可以在 onLoad 中獲取打開當前頁面所調用的 query 參數。
onShow
: 頁面顯示- 每次打開頁面都會調用一次。
onReady
: 頁面初次渲染完成- 一個頁面只會調用一次,代表頁面已經準備妥當,可以和視圖層進行交互。
- 對界面的設置如
wx.setNavigationBarTitle
請在onReady
之後設置。詳見生命週期
onHide
: 頁面隱藏- 當
navigateTo
或底部tab
切換時調用。
- 當
onUnload
: 頁面卸載- 當
redirectTo
或navigateBack
的時候調用。
- 當
生命週期的調用以及頁面的路由方式詳見
onLoad參數
類型 | 說明 |
---|---|
Object | 其他頁面打開當前頁面所調用的 query 參數 |
頁面相關事件處理函數
onPullDownRefresh
: 下拉刷新- 監聽用戶下拉刷新事件。
- 需要在
config
的window
選項中開啓enablePullDownRefresh
。 - 當處理完數據刷新後,
wx.stopPullDownRefresh
可以停止當前頁面的下拉刷新。
onReachBottom
: 上拉觸底- 監聽用戶下拉觸底事件。
onPageScroll
: 頁面滾動- 監聽用戶滑動頁面事件。
- 參數爲 Object,包含以下字段:
字段 | 類型 | 說明 |
---|---|---|
scrollTop | Number | 頁面在垂直方向已滾動的距離(單位px) |
onShareAppMessage
: 用戶轉發- 只有定義了此事件處理函數,右上角菜單纔會顯示“轉發”按鈕
- 用戶點擊轉發按鈕的時候會調用
- 此事件需要 return 一個 Object,用於自定義轉發內容
自定義轉發字段
字段 | 說明 | 默認值 |
---|---|---|
title | 轉發標題 | 當前小程序名稱 |
path | 轉發路徑 | 當前頁面 path ,必須是以 / 開頭的完整路徑 |
示例代碼
Page({
onShareAppMessage: function () {
return {
title: '自定義轉發標題',
path: '/page/user?id=123'
}
}
})
事件處理函數
除了初始化數據和生命週期函數,Page 中還可以定義一些特殊的函數:事件處理函數。在渲染層可以在組件中加入事件綁定,當達到觸發事件時,就會執行 Page 中定義的事件處理函數。
示例代碼:
<view bindtap="viewTap"> click me </view>
Page({
viewTap: function() {
console.log('view tap')
}
})
Page.prototype.route
route
字段可以獲取到當前頁面的路徑。
Page.prototype.setData()
setData
函數用於將數據從邏輯層發送到視圖層,同時改變對應的 this.data
的值。
setData() 參數格式
接受一個對象,以 key,value 的形式表示將 this.data 中的 key 對應的值改變成 value。
其中 key 可以非常靈活,以數據路徑的形式給出,如 array[2].message
,a.b.c.d
,並且不需要在 this.data 中預先定義。
注意:
- 直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的,還會造成數據不一致
- 單次設置的數據不能超過1024kB,請儘量避免一次設置過多的數據。
示例代碼:
<!--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.js
Page({
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'
})
}
})
以下內容你不需要立馬完全弄明白,不過以後它會有幫助。
生命週期
下圖說明了 Page 實例的生命週期。