範(fàn)例程式碼：

//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 的形式由邏輯層傳至渲染層，所以其資料必須是可以轉(zhuǎn)成 JSON 的格式：字串，數(shù)字，布林值，對象，陣列。
渲染層可以透過 WXML 對資料進(jìn)行綁定。

範(fàn)例程式碼：

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

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

生命週期函數(shù)

onLoad: 頁面載入

#一個(gè)頁面只會呼叫一次。

參數(shù)可以取得wx.navigateTo和wx.redirectTo及中的 query。

onShow: 頁面顯示

每次開啟頁面都會呼叫一次。

onReady: 頁面初次渲染完成

一個(gè)頁面只會呼叫一次，代表頁面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行互動(dòng)。

對介面的設(shè)定如wx.setNavigationBarTitle請?jiān)趏nReady之後設(shè)定。詳見生命週期

onHide: 頁面隱藏

當(dāng)navigateTo或底部tab切換時(shí)呼叫。

onUnload: 頁面卸載

當(dāng)redirectTo或navigateBack的時(shí)候呼叫。

頁面相關(guān)事件處理函數(shù)

onPullDownRefresh: 下拉刷新

監(jiān)聽使用者下拉刷新事件。

需要在config的window選項(xiàng)中開啟enablePullDownRefresh。

當(dāng)處理完資料刷新後，wx.stopPullDownRefresh可以停止目前頁面的下拉刷新。

事件處理函數(shù)

除了初始化資料和生命週期函數(shù)，Page 中還可以定義一些特殊的函數(shù)：事件處理函數(shù)。在渲染層可以在元件中加入事件綁定，當(dāng)達(dá)到觸發(fā)事件時(shí)，就會執(zhí)行 Page 中定義的事件處理函數(shù)。

範(fàn)例程式碼：

click me ?

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

Page.prototype.setData()

#setData 函數(shù)用於將資料從邏輯層傳送到視圖層，同時(shí)改變對應(yīng)的this.data的值。

注意：

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

setData() 參數(shù)格式

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

範(fàn)例程式碼：

<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' 
  }) 
 } 
})

以下內(nèi)容你不需要立刻完全弄明白，不過以後它會有幫助。

生命週期

下圖說明了 Page 實(shí)例的生命週期。

頁面的路由

#在小程式中所有頁面的路由全部由框架管理，對於路由的觸發(fā)方式與頁面生命週期函數(shù)如下：
路由方式

??觸發(fā)時(shí)機(jī)?路由後頁面?路由前頁

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有幫助，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)！

相關(guān)推薦：

微信小程式中wx:for和wx:for-item的用法

微信小程式-getUserInfo回呼的介紹