1. 程式人生 > >小程式開發之全域性邏輯層App.js及生命週期

小程式開發之全域性邏輯層App.js及生命週期

小程式邏輯層 App Service

小程式開發框架的邏輯層使用 JavaScript 引擎為小程式提供開發者 JavaScript 程式碼的執行環境以及微信小程式的特有功能。

邏輯層將資料進行處理後傳送給檢視層,同時接受檢視層的事件反饋。

開發者寫的所有程式碼最終將會打包成一份 JavaScript 檔案,並在小程式啟動的時候執行,直到小程式銷燬。這一行為類似 ServiceWorker,所以邏輯層也稱之為 App Service

注:ServiceWorker是一個瀏覽器背後執行的腳步,獨立於web頁面,為無需一個頁面或使用者互動的功能打開了大門。本質上充當Web應用程式與瀏覽器之間的代理伺服器,也可以在網路可用時作為瀏覽器和網路間的代理。它們旨在(除其他之外)使得能夠建立有效的離線體驗,攔截網路請求並基於網路是否可用以及更新的資源是否駐留在伺服器上來採取適當的動作。他們還允許訪問推送通知和後臺同步API。

在 JavaScript 的基礎上,我們增加了一些功能,以方便小程式的開發:

  • 增加 App 和 Page 方法,進行程式和頁面的註冊。
  • 增加 getApp 和 getCurrentPages 方法,分別用來獲取 App 例項和當前頁面棧。
  • 提供豐富的 API,如微信使用者資料,掃一掃,支付等微信特有能力。
  • 每個頁面有獨立的作用域,並提供模組化能力。

注意:小程式框架的邏輯層並非執行在瀏覽器中,因此 JavaScript 在 web 中一些能力都無法使用,如 window,document 等。

App(Object) 函式及生命週期

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

注:App() 必須在 app.js 中呼叫,必須呼叫且只能呼叫一次。不然會出現無法預期的後果。

Object 引數說明:

在這裡插入圖片描述

介紹之前需要大家區分前臺、後臺
前臺:當再次進入微信或再次開啟小程式,又會從後臺進入前臺。
後臺:當用戶點選左上角關閉,或者按了裝置 Home 鍵離開微信,小程式並沒有直接銷燬,而是進入了後臺;
當日如果小程式進入後臺一定時間,或者系統資源佔用過高,才會被真正的銷燬。

例如

App({
  onLaunch: function () {
    //小程式初始化完成時(全域性只觸發一次)
  },
  onShow() {
    // 小程式啟動,或從後臺進入前臺顯示時
  },
  onHide() {
    // 小程式從前臺進入後臺時
  },
  onError(msg) {
    // 小程式發生指令碼錯誤,或者 api 呼叫失敗時觸發,會帶上錯誤資訊
  },
  onPageNotFound() {
    // 小程式要開啟的頁面不存在時觸發,會帶上頁面資訊回撥該函式
    wx.redirectTo({
      url: 'pages/...'
    }) 
  },
  globalData: {
    //全域性變數
    userInfo: null
  }
})

下面我們一一介紹
在這裡插入圖片描述

生命週期

  1. 使用者首次開啟小程式,觸發 onLaunch(全域性只觸發一次)。
  2. 小程式初始化完成後,觸發onShow方法,監聽小程式顯示。
  3. 小程式從前臺進入後臺,觸發 onHide方法。
  4. 小程式從後臺進入前臺顯示,觸發 onShow方法。
  5. 小程式後臺執行一定時間,或系統資源佔用過高,會被銷燬。

onLaunch(Object)

小程式初始化完成時觸發,全域性只觸發一次。
引數使用 wx.getLaunchOptionsSync 獲取。

onShow(Object)

小程式啟動,或從後臺進入前臺顯示時觸發,
可以使用wx.onAppShow 繫結監聽。

onLaunch, onShow 引數
在這裡插入圖片描述
其中referrerInfo 的結構
在這裡插入圖片描述

referrerInfo來源資訊。從另一個小程式、公眾號或 App 進入小程式時返回。否則返回 {}。
返回有效 referrerInfo 的場景
在這裡插入圖片描述

注:部分版本在無referrerInfo的時候會返回 undefined,建議使用 options.referrerInfo && options.referrerInfo.appId 進行判斷。

onHide

小程式從前臺進入後臺時觸發。
可以使用 wx.onAppHide 繫結監聽。

onError

小程式發生指令碼錯誤或 API 呼叫報錯時觸發。
可以使用 wx.onError 繫結監聽。

onPageNotFound()

小程式要開啟的頁面不存在時觸發。
可以使用 wx.onPageNotFound 繫結監聽。

getApp(Object)

全域性的 getApp() 函式可以用來獲取到小程式 App 例項。
在這裡插入圖片描述
例如
獲取全域性變數userInfo

const app = getApp()
console.log(app.globalData.userInfo) 

注:
(1)不要在App.js 內的函式中呼叫 getApp()
(2)App.js 中,使用 this 就可以拿到 app 例項。

var that = this
console.log(this.globalData.userInfo) 

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