這篇文章主要介紹了小程序開發(fā)之page()函數(shù)怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)是一家專業(yè)提供淇縣企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、小程序制作等業(yè)務(wù)。10年已為淇縣眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

Page

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

object參數(shù)說明：

示例代碼：

//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.
  },  onReachBottom: function() {
    // Do something when page reach bottom.
  },  onShareAppMessage: function() {
    // return custom share date when user share.
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

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

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

渲染層可以通過WXML對數(shù)據(jù)進(jìn)行綁定。

示例代碼：

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

生命周期函數(shù)

onLoad: 頁面加載

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

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

onShow: 頁面顯示

每次打開頁面都會(huì)調(diào)用一次。

onReady: 頁面初次渲染完成

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

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

onHide: 頁面隱藏

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

onUnload: 頁面卸載

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

生命周期的調(diào)用以及頁面的路由方式詳見

onLoad參數(shù)

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

onPullDownRefresh: 下拉刷新

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

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

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

onShareAppMessage: 用戶分享

只有定義了此事件處理函數(shù)，右上角菜單才會(huì)顯示“分享”按鈕

用戶點(diǎn)擊分享按鈕的時(shí)候會(huì)調(diào)用

此事件需要 return 一個(gè) Object，用于自定義分享內(nèi)容

自定義分享字段

示例代碼

Page({
  onShareAppMessage: function () {    return {
      title: '自定義分享標(biāo)題',
      path: '/page/user?id=123'
    }
  }
})

事件處理函數(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í)改變對應(yīng)的this.data的值。

注意：

直接修改this.data無效，無法改變頁面的狀態(tài)，還會(huì)造成數(shù)據(jù)不一致。

單次設(shè)置的數(shù)據(jù)不能超過1024kB，請盡量避免一次設(shè)置過多的數(shù)據(jù)。

setData()參數(shù)格式

接受一個(gè)對象，以key，value的形式表示將this.data中的key對應(yīng)的值改變成value。

其中key可以非常靈活，以數(shù)據(jù)路徑的形式給出，如array[2].message，a.b.c.d，并且不需要在this.data中預(yù)先定義。

注意：

直接修改 this.data 而不調(diào)用 this.setData 是無法改變頁面的狀態(tài)的，還會(huì)造成數(shù)據(jù)不一致

單次設(shè)置的數(shù)據(jù)不能超過1024kB，請盡量避免一次設(shè)置過多的數(shù)據(jù)。

示例代碼：

{{text}} Change normal data {{num}} Change normal num {{array[0].text}} Change Array data {{object.text}} Change Object data {{newField.text}} Add new data 
//index.jsPage({
  data: {
    text: 'init data',
    num: 0,
    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'
    })
  },
  changeNum: function() {
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  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)容你不需要立馬完全弄明白，不過以后它會(huì)有幫助。

生命周期函數(shù)

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“小程序開發(fā)之page()函數(shù)怎么用”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!