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

公司主營業(yè)務：成都做網(wǎng)站、成都網(wǎng)站建設、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出湖南免費做網(wǎng)站回饋大家。

微信小程序——Page（）:

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

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

object 參數(shù)說明：

屬性	類型	描述
data	Object	頁面的初始數(shù)據(jù)
onLoad	Function	生命周期函數(shù)--監(jiān)聽頁面加載
onReady	Function	生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
onShow	Function	生命周期函數(shù)--監(jiān)聽頁面顯示
onHide	Function	生命周期函數(shù)--監(jiān)聽頁面隱藏
onUnload	Function	生命周期函數(shù)--監(jiān)聽頁面卸載
onPullDownRefreash	Function	頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
其他	Any	開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 object 參數(shù)中，用 this 可以訪問

示例代碼：

//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ù)將作為頁面的第一次渲染。data 將會以 JSON 的形式由邏輯層傳至渲染層，所以其數(shù)據(jù)必須是可以轉成 JSON 的格式：字符串，數(shù)字，布爾值，對象，數(shù)組。
渲染層可以通過 WXML 對數(shù)據(jù)進行綁定。

示例代碼：

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

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

生命周期函數(shù)

onLoad: 頁面加載

一個頁面只會調用一次。

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

onShow: 頁面顯示

每次打開頁面都會調用一次。

onReady: 頁面初次渲染完成

一個頁面只會調用一次，代表頁面已經(jīng)準備妥當，可以和視圖層進行交互。

對界面的設置如wx.setNavigationBarTitle請在onReady之后設置。詳見生命周期

onHide: 頁面隱藏

當navigateTo或底部tab切換時調用。

onUnload: 頁面卸載

當redirectTo或navigateBack的時候調用。

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

onPullDownRefresh: 下拉刷新

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

需要在config的window選項中開啟enablePullDownRefresh。

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

事件處理函數(shù)

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

示例代碼：

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

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

Page.prototype.setData()

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

注意：

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

setData() 參數(shù)格式

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

示例代碼：

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

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

生命周期

下圖說明了 Page 實例的生命周期。

頁面的路由

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

觸發(fā)時機 路由后頁面 路由前頁面

觸發(fā)時機	路由后頁面	路由前頁面
初始化	小程序打開的第一個頁面	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

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

網(wǎng)頁名稱：微信小程序中Page()函數(shù)的用法
URL鏈接：http://m.rwnh.cn/article38/jdgdpp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供云服務器、網(wǎng)站建設、定制網(wǎng)站、Google、響應式網(wǎng)站、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)