微信小程式 教程之註冊頁面，微信小程式頁面

小程式 教程之註冊頁面，小程式頁面

系列文章：

小程式 教程之模組化

小程式 教程之註冊頁面

小程式 教程之註冊程式

小程式——Page

Page()函數用來註冊一個頁面。接受一個object參數，其指定頁面的初始資料、生命週期函數、事件處理函數等。

object參數說明：

屬性	類型	描述
data	Object	頁面的初始資料
onLoad	Function	生命週期函數--監聽頁面載入
onReady	Function	生命週期函數--監聽頁面渲染完成
onShow	Function	生命週期函數--監聽頁面顯示
onHide	Function	生命週期函數--監聽頁面隱藏
onUnload	Function	生命週期函數--監聽頁面卸載
其他	Any	開發人員可以添加任意的函數或資料到Object參數中，用this可以訪問

範例程式碼：

//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. }, // Event handler. viewTap: function() { this.setData({  text: 'Set some data for updating view.' }) }})

初始化資料

初始化資料將作為頁面的第一次渲染。data將會以JSON的形式由邏輯層傳至渲染層，所以其資料必須是可以轉成JSON的格式：字串，數字，布爾值，對象，數組。

渲染層可以通過WXML對資料進行綁定。

範例程式碼：

<view>{{text}}</view><view>{{array[0].msg}}</view>

Page({ data: { text: 'init data', array: [{msg: '1'}, {msg: '2'}] }})

事件處理函數

​ 除了初始化資料和生命週期函數，Page中還可以定義一些特殊的函數：事件處理函數。在渲染層可以在組件中加入事件綁定，當達到觸發事件時，就會執行Page中定義的事件處理函數。

範例程式碼：

<view bindtap="viewTap"> click me </view>

Page({ viewTap: function() { console.log('view tap') }})

Page.prototype.setData()

setData函數用於將資料從邏輯層發送到視圖層，同時改變對應的this.data的值。

注意：

直接修改this.data無效，無法改變頁面的狀態，還會造成資料不一致。
單次設定的資料不能超過1024kB，請盡量避免一次設定過多的資料。

setData()參數格式

接受一個對象，以key，value的形式表示將this.data中的key對應的值改變成value。
其中key可以非常靈活，以資料路徑的形式給出，如array[2].message，a.b.c.d，並且不需要在this.data中預先定義。

範例程式碼：

<!--index.wxml--><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.jsPage({ 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 var changedData = {} var index = 0 changedData['array[' + index + '].text'] = 'changed data' this.setData(changedData) }, changeItemInObject: function(){ this.setData({  'object.text': 'changed data' }); }, addNewField: function() { this.setData({  'newField.text': 'new data' }) }})

以下內容你不需要立馬完全弄明白，不過以後它會有協助。

生命週期函數

說明了Page執行個體的生命週期。

頁面的路由

在小程式中所有頁面的路由全部由架構進行管理，對於路由的觸發方式以及頁面生命週期函數如下：

路由方式	觸發時機	路由後頁面	路由前頁面
初始化	小程式開啟的第一個頁面	onLoad，onShow
開啟新頁面	調用 API wx.navigateTo或使用組件 <navigator />	onLoad，onShow	onHide
頁面重新導向	調用 API wx.redirectTo或使用組件 <navigator />	onLoad，onShow	onUnload
頁面返回	調用 API wx.navigateBack或使用者按左上方返回按鈕	onShow	onUnload
Tab切換	多 Tab 模式下使用者切換 Tab	第一次開啟 onLoad，onshow；否則 onShow	onHide

感謝閱讀，希望能協助到大家，謝謝大家對本站的支援！