小程序學習（四）小程序邏輯層之註冊頁面

註冊頁面（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 data when user share. //頁面分享、轉發
  },
  onPageScroll: function() {
    // Do something when page scroll //頁面滑動
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: ‘Set some data for updating view.‘ //更新前臺頁面上值的事件函數
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: ‘MINA‘
  }
})

初始化數據

初始化數據將作為頁面的第一次渲染。data將會以Json的形式由邏輯層傳遞到渲染層，所以其數據必須是可以轉為JSON的格式：字符串、數字、布爾值、對象、數組。

渲染層可以通過WXML（頁面的前端） 對數據進行綁定。

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

Page({
  data: {
    text: ‘Hello WeiXin App‘,
    array: [{msg: ‘Hello‘}, {msg: ‘World‘}]
  }
})

生命周期函數

onLoad：頁面加載

　　一個頁面只會調用一次，可以在onLoad中獲取打開當前頁面所調用的query值。

onShow：頁面顯示

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

onReady：頁面初次渲染完成

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

　　對界面的設置如：wx.setNavigationBarTitle 請在 onReady 之後設置。

onHide：頁面隱藏

　　當 navigateTo 或者底部的 tab 切換時調用

onUnload：頁面卸載

　　當 redirectTo 或 navigate‘Back 的時候調用

onLoad參數： object ，其他頁面打開當前頁面所調用的 query 參數

頁面相關事件處理函數

　　onPullDownRefresh：下拉刷新

　　　　監聽用戶下拉刷新事件。

　　　　需要在 app.json 的 window 選項中或頁面配置中開啟 enablePullDownRefresh.

　　　　當處理完數據刷新後， wx.stopPullDownRefresh 可以停止當前頁面的下拉刷新

　　onReachBottom：上拉觸底

　　　　監聽用戶上拉觸底事件

　　　　可以在 app.json 的window 選項中或頁面配置中開啟 onReachBottomDistance

　　　　在出發距離內滑動期間，本事件只會被觸發一次

　　onPageScroll：頁面滾動

　　　　監聽用戶滑動頁面事件

　　　　參數為 Object ，包含一個字段 scrollTop 類型為：Number ，指當前頁面在垂直方向已滾動的距離

　　onShareAppMessage：用戶轉發

　　　　只有定義了此事件處理函數。右上角點開才出出現“轉發”按鈕

　　　　用戶點擊轉發按鈕的時候，會調用該事件

　　　　此事件需要 return 一個 object ，用戶自定義轉發內容　　　　

　　　　自定義轉發的字段： title 轉發的標題（默認為小程序名稱）；path 轉發的路徑，當前頁面的 path 必須以 / 開頭的完整路徑

Page({
  onShareAppMessage: function () {
    return {
      title: ‘自定義轉發標題‘,
      path: ‘/page/user?id=123‘
    }
  }
})

事件處理函數

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

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

Page({
  viewTap: function() {
    console.log(‘你點擊了這個View‘)
  }
})

Page.prototype.route

route 字段可以獲取當前頁面的路徑

Page.prototype.setData()

setData 函數用戶將數據從邏輯層發送到視圖層（異步），同時改變對應的 this.data 的值（同步）

setData()參數格式

object 以 key，value的形式表示將this.data中的 key 對應的值改變成 value。callback 是一個回掉函數，在這次 setData 對界面渲染完畢後調用。

其中 key 可以非常靈活，以數據路徑的形式給出，如 array[1].message ,a,b,c,d 並且不需要在 this.data 中預先定義

註意：

1. 直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的，還會造成數據不一致
2. 單次設置的數據不能超過1024kB，請盡量避免一次設置過多的數據。

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> 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>

Page({
  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‘
    })
  }
})

生命周期

下面這張圖，說明了 Page 實例的生命周期 。（圖來自官方教程）

以下是我對這張圖的理解，歡迎給出指正。

上圖將整個生命周期劃分為兩個線程，或者可以說兩個模塊。一個是前端視圖，另一個是頁面的後端處理

第一步、首先前端頁面初始化，後臺註冊頁面。

第二布、當前端頁面初始化完成後，通知後臺，並等待數據進行加載；後臺註冊頁面完成，等待前端通知。onLoad、onShow

第三部、後臺接收到前端的通知後，後臺傳遞數據給前端

第四步、前端開始加載後臺傳遞的數據，加載完成後，通知後臺

第五步、所有頁面內容加載完成 onReady

第六步、前端操作和後臺相應操作的事件函數，傳遞數據等等。每次前端與後臺進行交互後，前端的頁面需要重新構建。

第七步、後臺執行隱藏頁面操作，前端頁面隱藏，當再次顯示時，前端頁面再次重新構建，但是後臺的頁面生命一直是存在的 Alive。（這一步可能不存在）

第八步、卸載頁面。onUnload。結束頁面生命。

小程序學習（四）小程序邏輯層之註冊頁面