微信小程序學習 - 程序、頁面註冊及生命週期

文章轉載來自：http://blog.csdn.net/hedong_77/article/details/54667827

=============================================

程序註冊

App() 
App() 函數用來註冊一個小程序。接受一個 object 參數，其指定小程序的生命週期函數等。 
object參數說明： 

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

只有當小程序進入後臺一定時間，或者系統資源佔用過高，纔會被真正的銷燬。 
示例代碼：

App({
  onLaunch: function() { 
    // 做一些初始化操作
  },
  onShow: function() {
      // 當頁面顯示的時候可以做一些操作
  },
  onHide: function() {
      // 當頁面隱藏的時候可以做一些操作
  },
  onError: function(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

那怎麼獲取APP實例呢，在相應的Page裏面通過getApp()獲取，如下：

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

注意：

• App() 必須在 app.js 中註冊，且不能註冊多個。
• 不要在定義於 App() 內的函數中調用 getApp() ，使用 this 就可以拿到 app 實例。
• 不要在 onLaunch 的時候調用 getCurrentPage()，此時 page 還沒有生成。
• 通過 getApp() 獲取實例之後，不要私自調用生命週期函數。

頁面註冊

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

object 參數說明： 

示例代碼：

// pages/index/main.js

var app = getApp();

Page({
  data: {

    getData: app.data

  },
  onLoad: function (options) {
    // 頁面初始化 options爲頁面跳轉所帶來的參數
  },
  onReady: function () {
    // 頁面渲染完成
  },
  onShow: function () {
    // 頁面顯示
  },
  onHide: function () {
    // 頁面隱藏
  },
  onUnload: function () {
    // 頁面關閉
  },
  onPullDownRefresh:function(){
    //下拉操作

  },
   onReachBottom: function() {
    //上拉操作
  },
  onShareAppMessage: function () {
   // 右上角分享.
  }

})

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

渲染層可以通過 WXML 對數據進行綁定。

示例代碼：

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

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

接下來看看Page的周期函數，Page總共有五個生命週期函數：

1.onLoad: 頁面加載

• 一個頁面只會調用一次。
• 接收頁面參數可以獲取wx.navigateTo和wx.redirectTo及中的 query。

2.onShow: 頁面顯示

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

3.onReady: 頁面初次渲染完成

• 一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。
• 對界面的設置如wx.setNavigationBarTitle請在onReady之後設置。

4.onHide: 頁面隱藏

• 當navigateTo或底部tab切換時調用。

5.onUnload: 頁面卸載

• 當redirectTo或navigateBack的時候調用。

可參考下圖： 

頁面的路由

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

Tab 切換對應的生命週期（以 A、B 頁面爲 Tabbar 頁面，C 是從 A 頁面打開的頁面，D 頁面是從 C 頁面打開的頁面爲例）： 

頁面棧 
框架以棧的形式維護了當前的所有頁面。 當發生路由切換的時候，頁面棧的表現如下： 

getCurrentPages() 
getCurrentPages() 函數用於獲取當前頁面棧的實例，以數組形式按棧的順序給出，第一個元素爲首頁，最後一個元素爲當前頁面。

注意：不要嘗試修改頁面棧，會導致路由以及頁面狀態錯誤。