# 注冊頁面
對于小程序中的每個頁面,都需要在頁面對應的?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 參考文檔](https://www.w3cschool.cn/weixinapp/weixinapp-sxd138ql.html)?。
## 在頁面中使用 behaviors
> 基礎庫 2.9.2 開始支持,低版本需做[兼容處理](https://www.w3cschool.cn/weixinapp/compatibility.html?RECACHE=1)。
頁面可以引用 behaviors 。 behaviors 可以用來讓多個頁面有相同的數據字段和方法。
~~~
// my-behavior.js
module.exports = Behavior({
data: {
sharedText: 'This is a piece of data shared between pages.'
},
methods: {
sharedMethod: function() {
this.data.sharedText === 'This is a piece of data shared between pages.'
}
}
})
~~~
~~~
// page-a.js
var myBehavior = require('./my-behavior.js')
Page({
behaviors: [myBehavior],
onLoad: function() {
this.data.sharedText === 'This is a piece of data shared between pages.'
}
})
~~~
具體用法參見?[behaviors](https://www.w3cschool.cn/weixinapp/weixinapp-tghb38sa.html)?。
## 使用 Component 構造器構造頁面
> 基礎庫 1.6.3 開始支持,低版本需做[兼容處理](https://www.w3cschool.cn/weixinapp/compatibility.html?RECACHE=1)。
Page?構造器適用于簡單的頁面。但對于復雜的頁面,?Page?構造器可能并不好用。
此時,可以使用?Component?構造器來構造頁面。?Component?構造器的主要區別是:方法需要放在?methods: { }?里面。
代碼示例:
~~~
Component({
data: {
text: "This is page data."
},
methods: {
onLoad: function(options) {
// 頁面創建時執行
},
onPullDownRefresh: function() {
// 下拉刷新時執行
},
// 事件響應函數
viewTap: function() {
// ...
}
}
})
~~~
這種創建方式非常類似于?自定義組件?,可以像自定義組件一樣使用?behaviors?等高級特性。
具體細節請閱讀?[Component?構造器](https://www.w3cschool.cn/weixinapp/weixinapp-453938s7.html)?章節。
- 惠惠軟件-開發自助學習系統
- 一.微信公眾號(服務號)申請流程
- 二.申請所需提前準備資料
- 三.認證微信公眾號:申請微信小程序流程
- 四.微信小程序安裝和開發環境
- 五.微信小程序如何上傳、提交審核、發布操作
- 六.微信小程序開發教程手冊
- 0.1微信小程序 小程序簡介
- 0.2微信小程序 開始第一步
- 0.3微信小程序 小程序代碼構成
- 0.4微信小程序 小程序宿主環境
- 0.5微信小程序 小程序協同工作和發布
- 0.6微信小程序 目錄結構
- 0.7微信小程序 全局配置
- 0.8微信小程序 頁面配置
- 0.9微信小程序 sitemap配置
- 0.10微信小程序 場景值
- 0.11微信小程序 注冊小程序
- 0.12微信小程序 注冊頁面
- 0.13微信小程序 頁面生命周期
- 0.14微信小程序 頁面路由
- 0.15微信小程序 模塊化
- 0.16微信小程序 API
- 0.17微信小程序 運行環境
- 0.18微信小程序 JavaScript支持情況
- 0.19微信小程序 運行機制
- 0.20微信小程序 更新機制
- 0.21微信小程序 廣告·Banner 廣告
- 0.22微信小程序 安全指引·開發原則與注意事項
- 0.23微信小程序 調試
- 0.24微信小程序 啟動性能
- 0.25微信小程序 運行時性能
- 0.26微信小程序 性能分析工具
- 0.27微信小程序 體驗評分
- 八.小程序的美工
- 8.1圖片大小
- 8.2顏色代碼
- 8.3小程序的美工技巧
- 九.微信小程序-定制開發
- 十.微信支付申請流程
- 十一.小程序支付對接流程
- 十二.微信小程序使用中常見問題匯總
- 十二.小程序開發中遇到的問題—匯總
- 十四.小程序問題及解決
- 十五.網站開發定制
- 1.開發定制流程
- 2.搭建網站的過程
- 3.做網站基本費用
- 4.服務器選什么系統更好?
- 十六.常用工具、軟件網站推薦