微信小程序中Page()函數(shù)的用法-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序中Page()函數(shù)的用法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

為任丘等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及任丘網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、任丘網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

微信小程序——Page（）:

       在開(kāi)發(fā)微信小程序的時(shí)候遇到函數(shù)，或者不明白的地方，好上官網(wǎng)查詢(xún)，相應(yīng)的知識(shí)，這里小編幫大家整理了下page()函數(shù)的用法。

Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。

object 參數(shù)說(shuō)明：

屬性	類(lèi)型	描述
data	Object	頁(yè)面的初始數(shù)據(jù)
onLoad	Function	生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
onReady	Function	生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
onShow	Function	生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
onHide	Function	生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
onUnload	Function	生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
onPullDownRefreash	Function	頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
其他	Any	開(kāi)發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 object 參數(shù)中，用 this 可以訪(fǎng)問(wè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.' 
  }) 
 } 
})

初始化數(shù)據(jù)

初始化數(shù)據(jù)將作為頁(yè)面的第一次渲染。data 將會(huì)以 JSON 的形式由邏輯層傳至渲染層，所以其數(shù)據(jù)必須是可以轉(zhuǎn)成 JSON 的格式：字符串，數(shù)字，布爾值，對(duì)象，數(shù)組。
渲染層可以通過(guò) WXML 對(duì)數(shù)據(jù)進(jìn)行綁定。

示例代碼：

{{text}} 
{{array[0].msg}}

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

生命周期函數(shù)

onLoad: 頁(yè)面加載

一個(gè)頁(yè)面只會(huì)調(diào)用一次。

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

onShow: 頁(yè)面顯示

每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次。

onReady: 頁(yè)面初次渲染完成

一個(gè)頁(yè)面只會(huì)調(diào)用一次，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。

對(duì)界面的設(shè)置如wx.setNavigationBarTitle請(qǐng)?jiān)趏nReady之后設(shè)置。詳見(jiàn)生命周期

onHide: 頁(yè)面隱藏

當(dāng)navigateTo或底部tab切換時(shí)調(diào)用。

onUnload: 頁(yè)面卸載

當(dāng)redirectTo或navigateBack的時(shí)候調(diào)用。

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

onPullDownRefresh: 下拉刷新

監(jiān)聽(tīng)用戶(hù)下拉刷新事件。

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

當(dāng)處理完數(shù)據(jù)刷新后，wx.stopPullDownRefresh可以停止當(dāng)前頁(yè)面的下拉刷新。

事件處理函數(shù)

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

示例代碼：

click me

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

Page.prototype.setData()

setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層，同時(shí)改變對(duì)應(yīng)的 this.data 的值。

注意：

直接修改 this.data 無(wú)效，無(wú)法改變頁(yè)面的狀態(tài)，還會(huì)造成數(shù)據(jù)不一致。
單次設(shè)置的數(shù)據(jù)不能超過(guò)1024kB，請(qǐng)盡量避免一次設(shè)置過(guò)多的數(shù)據(jù)。

setData() 參數(shù)格式

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

示例代碼：

{{text}} 
 Change normal data  
{{array[0].text}} 
 Change Array data  
{{obj.text}} 
 Change Object data  
{{newField.text}} 
 Add new data 

//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)容你不需要立馬完全弄明白，不過(guò)以后它會(huì)有幫助。

生命周期

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

頁(yè)面的路由

在小程序中所有頁(yè)面的路由全部由框架進(jìn)行管理，對(duì)于路由的觸發(fā)方式以及頁(yè)面生命周期函數(shù)如下：
路由方式

觸發(fā)時(shí)機(jī) 路由后頁(yè)面 路由前頁(yè)面

觸發(fā)時(shí)機(jī)	路由后頁(yè)面	路由前頁(yè)面
初始化	小程序打開(kāi)的第一個(gè)頁(yè)面	onLoad，onShow
打開(kāi)新頁(yè)面	調(diào)用 API wx.navigateTo 或使用組件	onLoad，onShow	onHide
頁(yè)面重定向	調(diào)用 API wx.redirectTo 或使用組件	onLoad，onShow	onUnload
頁(yè)面返回	調(diào)用 API wx.navigateBack或用戶(hù)按左上角返回按鈕	onShow	onUnload
Tab切換	多 Tab 模式下用戶(hù)切換 Tab	第一次打開(kāi) onLoad，onshow；否則 onShow	onHide

關(guān)于“微信小程序中Page()函數(shù)的用法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

分享名稱(chēng)：微信小程序中Page()函數(shù)的用法-創(chuàng)新互聯(lián)
本文地址：http://m.jiaotiyi.com/article/pjhgp.html