對于小程序中的每個頁面,都需要在頁面對應的 js 文件中進行注冊,指定頁面的初始數據、生命周期回調、事件處理函數等。
使用 Page 構造器注冊頁面
簡單的頁面可以使用 Page() 進行構造。
代碼示例:
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 頁面創建時執行
},
onShow: function() {
// 頁面出現在前台時執行
},
onReady: function() {
// 頁面首次渲染完畢時執行
},
onHide: function() {
// 頁面從前台變為後台時執行
},
onUnload: function() {
// 頁面銷毀時執行
},
onPullDownRefresh: function() {
// 觸發下拉刷新時執行
},
onReachBottom: function() {
// 頁面觸底時執行
},
onShareAppMessage: function () {
// 頁面被用戶分享時執行
},
onPageScroll: function() {
// 頁面滾動時執行
},
onResize: function() {
// 頁面尺寸變化時執行
},
onTabItemTap(item) {
// tab 點擊時執行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件響應函數
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
// 自由數據
customData: {
hi: 'MINA'
}
})
詳細的參數含義和使用請參考 Page 參考文檔 。
使用 Component 構造器構造頁面
Page 構造器适用于簡單的頁面。但對于複雜的頁面, Page 構造器可能并不好用。
此時,可以使用 Component 構造器來構造頁面。 Component 構造器的主要區别是:方法需要放在 methods: { } 裡面。
代碼示例:
Page({
data: {
text: "This is page data."
},
methods: {
onLoad: function(options) {
// 頁面創建時執行
},
onPullDownRefresh: function() {
// 下拉刷新時執行
},
// 事件響應函數
viewTap: function() {
// ...
}
}
})
這種創建方式非常類似于 自定義組件 ,可以像自定義組件一樣使用 behaviors 等高級特性。
具體細節請閱讀 Component 構造器 章節。