這篇文章主要介紹了微信小程式Page（）函數詳解的相關資料,在開發過程中肯定會遇到Page（）函數，希望能幫助到大家，需要的朋友可以參考下
微信小程式－Page（）:
在發展微信小程式的時候遇到函數，或是無法理解的地方，最好上官網查詢，相應的知識，這裡小編幫大家整理了下page()函數的用法。
Page() 函數用來註冊一個頁面。接受一個 object 參數，其指定頁面的初始資料、生命週期函數、事件處理函數等。
object 參數說明：
| #屬性 | ##類型##說明 | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Object | #頁面的初始資料 | ||||||||||||||||||||||||
| Function | 生命週期函數--監聽頁面載入 | ||||||||||||||||||||||||
| Function | 生命週期函數--監聽頁面初次渲染完成 | ||||||||||||||||||||||||
| Function | 生命週期函數--監聽頁面顯示 | ||||||||||||||||||||||||
| Function | 生命週期函數--監聽頁面隱藏 | ||||||||||||||||||||||||
| onPullDownRefreash | Function | ||||||||||||||||||||||||
| 其他 | Any | ||||||||||||||||||||||||
|
範例程式碼： //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
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
}
})登入後複製 #初始化資料 初始化資料將作為頁面的第一次渲染。 data 將會以 JSON 的形式由邏輯層傳至渲染層，所以其資料必須是可以轉成 JSON 的格式：字串，數字，布林值，對象，陣列。 範例程式碼： <view>{{text}}</view>
<view>{{array[0].msg}}</view>登入後複製 Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})登入後複製 生命週期函數 onLoad: 頁面載入 #一個頁面只會呼叫一次。 參數可以取得wx.navigateTo和wx.redirectTo及 onShow: 頁面顯示 每次開啟頁面都會呼叫一次。 onReady: 頁面初次渲染完成 一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和視圖層進行互動。 對介面的設定如wx.setNavigationBarTitle請在onReady之後設定。詳見生命週期 onHide: 頁面隱藏 當navigateTo或底部tab切換時呼叫。 onUnload: 頁面卸載 當redirectTo或navigateBack的時候呼叫。 頁面相關事件處理函數 onPullDownRefresh: 下拉刷新 監聽使用者下拉刷新事件。 需要在config的window選項中開啟enablePullDownRefresh。 當處理完資料刷新後，wx.stopPullDownRefresh可以停止目前頁面的下拉刷新。 事件處理函數 除了初始化資料和生命週期函數，Page 中還可以定義一些特殊的函數：事件處理函數。在渲染層可以在元件中加入事件綁定，當達到觸發事件時，就會執行 Page 中定義的事件處理函數。 範例程式碼： Page({
viewTap: function() {
console.log('view tap')
}
})登入後複製 Page.prototype.setData() #setData 函數用於將資料從邏輯層傳送到視圖層，同時改變對應的this.data的值。 注意： 直接修改 this.data 無效，無法改變頁面的狀態，也會造成資料不一致。 setData() 參數格式 接受一個對象，以key，value 的形式表示將this.data 中的key 對應的值改變成value。 範例程式碼： <view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.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',
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'
})
},
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 實例的生命週期。
頁面的路由 #在小程式中所有頁面的路由全部由框架管理，對於路由的觸發方式與頁面生命週期函數如下： 觸發時機 路由後頁面 路由前頁
以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！ 相關推薦： # |
以上是微信小程式 Page（）函數的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
