小程式概要
- 小程式執行環境
- 小程式與H5的區別
- 小程式編譯原理及反編譯的實現
- 錯誤日誌監控平臺FrontJs
- 小程式運營資料及埋點
微信小程式執行在三端：iOS、Android 和 用於除錯的開發者工具
- 在 iOS 上，小程式的 javascript 程式碼是執行在 JavaScriptCore 中
- 在 Android 上，小程式的 javascript 程式碼是通過 X5 核心來解析
- 在 開發工具上， 小程式的 javascript 程式碼是執行在 nwjs（chrome核心） 中
表1-1 小程式的執行環境
| 執行環境 | 邏輯層 | 渲染層 |
|---|---|---|
| iOS | JavaScriptCore | WKWebView |
| 安卓 | X5 JSCore | X5瀏覽器 |
| 小程式開發者工具 | NWJS | Chrome WebView |
小程式與普通網頁開發的區別
- 網頁開發渲染執行緒和指令碼執行緒是互斥的，長時間的指令碼執行會導致頁面失去響應, 小程式中，二者是分開的，分別執行在不同的執行緒中
- 網頁開發者可以使用到各種瀏覽器暴露出來的 DOM API，進行 DOM 選中和操作， 小程式的邏輯層和渲染層是分開的，不是一個完整瀏覽器物件，缺少相關的DOM API和BOM API。
- 網頁開發者需要面對的環境是各式各樣的瀏覽器，小程式開發過程中需要面對的是兩大作業系統 iOS 和 Android 的微信客戶端
真機執行環境
微信小程式的執行環境應該更類似 ReactNative 之類，而不是純 Html5。兩者最大的不同在於，ReactNative 的介面是由原生控制元件渲染出來的，而 Html5 的介面是由瀏覽器核心渲染出來的,原理上小程式是如何在微信 App 裡執行的
- 微信 App 裡包含 javascript 執行引擎
- 微信 App 裡包含了 WXML/WXSS 處理引擎，最終會把介面翻譯成系統原生的控制元件，並展示出來。這樣做的目的是為了提供和原生 App 效能相當的使用者體驗。
開發工具
小程式的 javascript 程式碼執行在 nwjs 中,nwjs 合併 Browser 和 Node.js的執行時，可以使用前端開發技術來開發跨平臺的應用程式。藉助 Node.js 訪問作業系統原生 API 的能力，可以開發中跨平臺的應用程式,如果你是Mac使用者，進入目錄/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app,可以看到開發工具的實現程式碼，當然程式碼是經過混淆的。網上流行的破解版本開發工具原理上就是修改這裡面的程式碼。
小程式載入執行的過程
- 使用者點選開啟一個小程式
- 微信 App 從微信伺服器下載這個小程式
- 分析 app.json 得到應用程式的配置資訊（導航欄，視窗樣式，包含的頁面列表等）
- 載入並執行 app.js
- 載入並顯示在 app.json 裡配置的第一個頁面 小程式架構
小程式的渲染層和邏輯層分別由2個執行緒管理：渲染層的介面使用了WebView 進行渲染；邏輯層採用JsCore執行緒執行JS指令碼。一個小程式存在多個介面，所以渲染層存在多個WebView執行緒，這兩個執行緒的通訊會經由微信客戶端（下文中也會採用Native來代指微信客戶端）做中轉，邏輯層傳送網路請求也經由Native轉發，小程式的通訊模型如圖3-1所示。
生命週期
至於微信 App 是如何與小程式的邏輯層 javascript 互動的呢？可以簡單地歸納如下： JavaScript 是指令碼語言，可以在執行時解釋並執行。微信 App 裡包含了一個 JavaScript 引擎，由它來負責執行邏輯層的 JavaScript 程式碼。那麼 JavaScript 呼叫的小程式相關 API最終會被翻譯成實現在微信 App 裡的原生介面
編譯
通過微信開發者工具上傳, 編譯經過一系列的混淆, 壓縮加密後, 變成微信小程式所對應的 wxapkg 包檔案 , 其位置位於Android 手機中的 /data/data/com.tencent.mm/MicroMsg/{User}/appbrand/pkg({User}, 其中User 為當前使用者的使用者名稱，類似於2bc******b65 命名的資料夾
錯誤監控
推薦FrontJS : https://www.frontjs.com/home/tour
常見錯誤: http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1360&highlight=%E9%9D%A2%E5%90%91%E6%96%B0%E6%89%8B
運營資料
有兩種方式可以方便的看到小程式的 運營資料
方法一：
登入 小程式管理後臺 - 資料分析
點選相應的 tab 可以看到相關的資料。
方法二：
使用小程式資料助手，在微信中方便的檢視運營資料
幾個不足：
- 不支援從 node_modules 中載入模組。這樣無形中就把 npm 排除在外了。從開發生態角度，這個應該是微信小程式下一步要重點解決的問題吧。
- 開發工具自帶的程式碼編輯器還是太簡陋了， 生態不夠完善