小程式入門學習—邏輯層
阿新 • • 發佈：2018-12-01
前言
- 開發者寫的所有程式碼最終將會打包成一份 JavaScript 檔案，並在小程式啟動的時候執行，直到小程式銷燬。這一行為類似 ServiceWorker，所以邏輯層也稱之為 App Service。
在 JavaScript 的基礎上，增加了如下部分功能，以方便小程式的開發：
- 增加 App 和 Page 方法，進行程式和頁面的註冊。
- 增加 getApp 和 getCurrentPages 方法，分別用來獲取 App 例項和當前頁面棧。
- 提供豐富的 API，如微信使用者資料，掃一掃，支付等微信特有能力。
- 每個頁面有獨立的作用域，並提供模組化能力。
注意：小程式框架的邏輯層並非執行在瀏覽器中，因此 JavaScript 在 web 中一些能力都無法使用，如 window，document 等。
註冊程式
- App() 函式用來註冊一個小程式。接受一個 Object 引數，其指定小程式的生命週期回撥等。
App() 必須在 app.js 中呼叫，必須呼叫且只能呼叫一次。不然會出現無法預期的後果。Object引數說明如下：
- onPageNotFound(Object)小程式要開啟的頁面不存在時觸發。開發者可以在 onPageNotFound 回撥中進行重定向處理，但必須在回撥中同步處理，非同步處理（例如 setTimeout 非同步執行）無效。
- 注意：
如果開發者沒有新增 onPageNotFound 監聽，當跳轉頁面不存在時，將推入微信客戶端原生的頁面不存在提示頁面。如果 onPageNotFound 回撥中又重定向到另一個不存在的頁面，將推入微信客戶端原生的頁面不存在提示頁面，並且不再回調 onPageNotFound。
- Page(Object) 函式用來註冊一個頁面。接受一個 Object 型別引數，其指定頁面的初始資料、生命週期回撥、事件處理函式等。
Object引數說明
Object 內容在頁面載入時會進行一次深拷貝，需考慮資料大小對頁面載入的開銷
- data 是頁面第一次渲染使用的初始資料。
頁面載入時，data 將會以JSON字串的形式由邏輯層傳至渲染層，因此data中的資料必須是可以轉成JSON的型別：字串，數字，布林值，物件，陣列。 - onLoad(Object query)
頁面載入時觸發。一個頁面只會呼叫一次，可以在 onLoad 的引數中獲取開啟當前頁面路徑中的引數。 - onShow()
頁面顯示/切入前臺時觸發。 - onReady()
頁面初次渲染完成時觸發。一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和檢視層進行互動。
注意：對介面內容進行設定的 API 如wx.setNavigationBarTitle，請在onReady之後進行。 - onHide()
頁面隱藏/切入後臺時觸發。 如 navigateTo 或底部 tab 切換到其他頁面，小程式切入後臺等。 - onUnload()
頁面解除安裝時觸發。如redirectTo或navigateBack到其他頁面時。 - onPullDownRefresh()
監聽使用者下拉重新整理事件。需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。可以通過wx.startPullDownRefresh觸發下拉重新整理，呼叫後觸發下拉重新整理動畫，效果與使用者手動下拉重新整理一致。當處理完資料重新整理後，wx.stopPullDownRefresh可以停止當前頁面的下拉重新整理。 - onReachBottom()
監聽使用者上拉觸底事件。可以在app.json的window選項中或頁面配置中設定觸發距離onReachBottomDistance。在觸發距離內滑動期間，本事件只會被觸發一次。 - onPageScroll(Object)
監聽使用者滑動頁面事件。 - onShareAppMessage(Object)
監聽使用者點選頁面內轉發按鈕（ 元件 open-type=“share”）或右上角選單“轉發”按鈕的行為，並自定義轉發內容。
注意：只有定義了此事件處理函式，右上角選單才會顯示“轉發”按鈕 - onTabItemTap(Object)
點選 tab 時觸發（基礎庫1.9.0開始支援）
- Page.prototype.setData(Object data, Function callback)
setData 函式用於將資料從邏輯層傳送到檢視層（非同步），同時改變對應的 this.data 的值（同步）。
Object 以 key: value 的形式表示，將 this.data 中的 key 對應的值改變成 value。
其中 key 可以以資料路徑的形式給出，支援改變陣列中的某一項或物件的某個屬性，如 array[2].message，a.b.c.d，並且不需要在 this.data 中預先定義。
注意：
- 直接修改 this.data 而不呼叫 this.setData 是無法改變頁面的狀態的，還會造成資料不一致。
- 僅支援設定可 JSON 化的資料。
- 單次設定的資料不能超過1024kB，請儘量避免一次設定過多的資料。
- 不要把 data 中任何一項的 value 設為 undefined ，否則這一項將不被設定並可能遺留一些潛在問題。
- 生命週期圖
頁面路由（跳轉）
- 在小程式中所有頁面的路由都是由框架進行管理的。框架以棧的形式維護了當前的所有頁面，當發生頁面發生跳轉時，頁面的表現如下圖：
- getCurrentPages() 函式用於獲取當前頁面棧的例項，以陣列形式按棧的順序給出，第一個元素為首頁，最後一個元素為當前頁面。
注意：
- 不要嘗試修改頁面棧，會導致路由以及頁面狀態錯誤。
- 不要在 App.onLaunch 的時候呼叫 getCurrentPages()，因為此時 page 還沒有生成。
模組化
- 檔案作用域：在 JavaScript 檔案中宣告的變數和函式只在該檔案中有效；不同的檔案中可以宣告相同名字的變數和函式，不會互相影響。
- 可以將一些公共的程式碼抽離成為一個單獨的 js 檔案，作為一個模組。模組只有通過 module.exports 或者 exports 才能對外暴露介面。
// common.js
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
exports.sayGoodbye = sayGoodbye
需要注意的是：
- exports 是 module.exports 的一個引用，因此在模組裡邊隨意更改 exports 的指向會造成未知的錯誤，所以更推薦採用 module.exports 來暴露模組介面。
- 小程式目前不支援直接引入 node_modules , 開發者需要使用到 node_modules 時候建議拷貝出相關的程式碼到小程式的目錄中或者使用小程式支援的 npm 功能。
- 在需要使用公共模組的檔案中，使用 require(path) 將公共程式碼引入
var common = require('common.js')
API
通常在小程式中有以下幾種API：
- 事件監聽 API
一般約定以 on 開頭的 API 用來監聽某個事件是否觸發，如：wx.onSocketOpen，wx.onCompassChange 等。
這類 API 接受一個回撥函式作為引數，當事件觸發時會呼叫這個回撥函式，並將相關資料以引數形式傳入。
wx.onCompassChange(function (res) {
console.log(res.direction)
})
- 同步 API
一般約定以 Sync 結尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等。此外，也有一些其他的同步 API，如 wx.createWorker，wx.getBackgroundAudioManager 等。
同步 API 的執行結果可以通過函式返回值直接獲取，如果執行出錯會丟擲異常。 - 非同步 API
大多數 API 都是非同步 API，如 wx.request，wx.login 等。這類 API 介面通常都接受一個 Object 型別的引數，這個引數都支援按需指定以下欄位來接收介面呼叫結果：
