小程式開發之page（）函數

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

初始化資料

初始化資料將作為頁面的第一次渲染。 data將會以JSON的形式由邏輯層傳至渲染層，所以其資料必須是可以轉換成JSON的格式：字串，數字，布林值，物件，陣列。

渲染層可以透過WXML對資料進行綁定。

範例程式碼：

<view>{{text}}</view><view>{{array[0].msg}}</view>
Page({
  data: {
    text: &#39;init data&#39;,
    array: [{msg: &#39;1&#39;}, {msg: &#39;2&#39;}]
  }
})

生命週期函數

onLoad: 頁面載入

一個頁面只會呼叫一次。

接收頁面參數可以取得wx.navigateTo和wx.redirectTo及中的 query。

onShow: 頁面顯示

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

onReady: 頁面初次渲染完成

一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和視圖層互動。

對介面的設定如wx.setNavigationBarTitle請在onReady之後設定。詳見生命週期

onHide: 頁面隱藏

當navigateTo或底部tab切換時呼叫。

onUnload: 頁面卸載

當redirectTo或navigateBack的時候呼叫。

生命週期的呼叫以及頁面的路由方式詳見

#onLoad參數

頁面相關事件處理函數

onPullDownRefresh: 下拉刷新

    監聽使用者下拉刷新事件。

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

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

onShareAppMessage: 使用者分享

    只有定義了此事件處理函數，右上角選單才會顯示「分享」按鈕

    使用者點選分享按鈕的時候會呼叫

    此事件需要return 一個Object，用於自訂分享內容

##自訂分享欄位

#範例程式碼

Page({
  onShareAppMessage: function () {    return {
      title: '自定义分享标题',
      path: '/page/user?id=123'
    }
  }
})

事件處理函數

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

範例程式碼：

<view bindtap="viewTap"> click me </view>Page({
  viewTap: function() {
    console.log(&#39;view tap&#39;)
  }})
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中預先定義。

注意：

    直接修改this.data 而不呼叫this.setData 是無法改變頁面的狀態的，也會造成資料不一致

#單次設定的資料不能超過1024kB，請盡量避免一次設定過多的資料。

示例代码：

<!--index.wxml--><view>{{text}}</view><button bindtap="changeText"> Change normal data </button><view>{{num}}</view><button bindtap="changeText"> Change normal num </button><view>{{array[0].text}}</view><button bindtap="changeItemInArray"> Change Array data </button><view>{{object.text}}</view><button bindtap="changeItemInObject"> Change Object data </button><view>{{newField.text}}</view><button bindtap="addNewField"> Add new data </button>
//index.jsPage({
  data: {
    text: &#39;init data&#39;,
    num: 0,
    array: [{text: &#39;init data&#39;}],
    object: {
      text: &#39;init data&#39;
    }
  },

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

以下内容你不需要立马完全弄明白，不过以后它会有帮助。

生命周期函数

下图说明了Page实例的生命周期。

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 微信小程序完整源码下载

3. 微信小程序demo：阳淘

以上是小程式開發之page（）函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！