App

App()

App() 函式用來註冊一個小程式。接受一個 object 引數，其指定小程式的生命週期函式等。

object引數說明：

前臺、後臺定義： 當用戶點選左上角關閉，或者按了裝置 Home 鍵離開微信，小程式並沒有直接銷燬，而是進入了後臺；當再次進入微信或再次開啟小程式，又會從後臺進入前臺。

只有當小程式進入後臺一定時間，或者系統資源佔用過高，才會被真正的銷燬。

示例程式碼：

App({
  onLaunch: function() { 
    // Do something initial when launch.
  },
  onShow: function() {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
 

  },
  globalData: 'I am global data'
})

App.prototype.getCurrentPage()

getCurrentPage() 函式使用者獲取當前頁面的例項。

getApp()

我們提供了全域性的 getApp() 函式，可以獲取到小程式例項。

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

注意：

App() 必須在 app.js 中註冊，且不能註冊多個。

不要在定義於 App() 內的函式中呼叫 getApp()

不要在 onLaunch 的時候呼叫 getCurrentPage()，此時 page 還沒有生成。

通過 getApp() 獲取例項之後，不要私自呼叫生命週期函式。

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
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  }
})

初始化資料

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

渲染層可以通過 WXML 對資料進行繫結。

示例程式碼：

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

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

生命週期函式

• onLoad: 頁面載入

  • 一個頁面只會呼叫一次。
  • 引數可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。

• onShow: 頁面顯示

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

• onReady: 頁面初次渲染完成

  • 一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和檢視層進行互動。
  • 對介面的設定如wx.setNavigationBarTitle請在onReady之後設定。詳見生命週期

• onHide: 頁面隱藏

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

• onUnload: 頁面解除安裝

  • 當redirectTo或navigateBack的時候呼叫。

頁面相關事件處理函式

• onPullDownRefresh: 下拉重新整理
  • 監聽使用者下拉重新整理事件。
  • 需要在config的window選項中開啟enablePullDownRefresh。

事件處理函式

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

示例程式碼：

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

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

Page.prototype.setData()

setData 函式用於將資料從邏輯層傳送到檢視層，同時改變對應的 this.data 的值。

注意：

1. 直接修改 this.data 無效，無法改變頁面的狀態，還會造成資料不一致。
2. 單次設定的資料不能超過1024kB，請儘量避免一次設定過多的資料。

setData() 引數格式

接受一個物件，以 key，value 的形式表示將 this.data 中的 key 對應的值改變成 value。

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

示例程式碼：

<!--index.wxml-->
<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 例項的生命週期。

頁面的路由

在小程式中所有頁面的路由全部由框架進行管理，對於路由的觸發方式以及頁面生命週期函式如下：