微信小程序——Page

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

object參數說明：

示例代碼：

//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.
 },
 // 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.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
 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實例的生命周期。

頁面的路由

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

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

以上就是微信小程序開發注冊頁面的介紹的詳細內容，更多請關注php中文網其它相關文章！