App()

App() 函數(shù)用來注冊一個小程序。接受一個 object 參數(shù)，其指定小程序的生命周期函數(shù)等。

object參數(shù)說明：

1.png

前臺、后臺定義： 當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開微信，小程序并沒有直接銷毀，而是進(jìn)入了后臺；當(dāng)再次進(jìn)入微信或再次打開小程序，又會從后臺進(jìn)入前臺。

只有當(dāng)小程序進(jìn)入后臺一定時間，或者系統(tǒng)資源占用過高，才會被真正的銷毀。

示例代碼：

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() 函數(shù)用戶獲取當(dāng)前頁面的實(shí)例。

getApp()

我們提供了全局的 getApp() 函數(shù)，可以獲取到小程序?qū)嵗?/p>

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

注意：

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

不要在定義于 App() 內(nèi)的函數(shù)中調(diào)用 getApp() ，使用 this 就可以拿到 app 實(shí)例。

不要在 onLaunch 的時候調(diào)用 getCurrentPage()，此時 page 還沒有生成。

通過 getApp() 獲取實(shí)例之后，不要私自調(diào)用生命周期函數(shù)。

Page

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

object 參數(shù)說明：

2.png

示例代碼：

//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ù)必須是可以轉(zhuǎn)成 JSON 的格式：字符串，數(shù)字，布爾值，對象，數(shù)組。

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

示例代碼：

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

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

生命周期函數(shù)

onLoad: 頁面加載

一個頁面只會調(diào)用一次。
參數(shù)可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。

onShow: 頁面顯示

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

onReady: 頁面初次渲染完成

一個頁面只會調(diào)用一次，代表頁面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。
對界面的設(shè)置如wx.setNavigationBarTitle請?jiān)趏nReady之后設(shè)置。詳見生命周期

onHide: 頁面隱藏

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

onUnload: 頁面卸載

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

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

• onPullDownRefresh: 下拉刷新
  • 監(jiān)聽用戶下拉刷新事件。
  • 需要在config的window選項(xiàng)中開啟enablePullDownRefresh。
  • 當(dāng)處理完數(shù)據(jù)刷新后，wx.stopPullDownRefresh可以停止當(dāng)前頁面的下拉刷新。

事件處理函數(shù)

除了初始化數(shù)據(jù)和生命周期函數(shù)，Page 中還可以定義一些特殊的函數(shù)：事件處理函數(shù)。在渲染層可以在組件中加入事件綁定，當(dāng)達(dá)到觸發(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ā)送到視圖層，同時改變對應(yīng)的 this.data 的值。

注意：

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

setData() 參數(shù)格式

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

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

示例代碼：

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

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

生命周期

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

image

頁面的路由

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

100043.png