微信小程序實現原理

微信小程序采用wxml、wxss、javascript進行開發，本質是一個單頁應用，所有的頁面渲染和事件處理，都在一個頁面內進行，但又可以通過微信客戶端調用原生的各種接口。微信的架構，是數據驅動視圖的MVVM模式，其視圖UI和數據是分離的，所有的頁面更新，都需要通過對數據的變更來實現。小程序分為兩個部分Webview和AppService，Webview主要用來展現渲染界面，AppService用來處理業務邏輯、數據及接口調用，通過系統層JSBridge實現通信，實現UI的渲染與事件的處理。

目錄結構

打包前

Project
   ├── pages
   │   ├── index
   │   │     ├── index.js              // index 邏輯
   │   │     ├── index.json            // index 配置
   │   │     ├── index.wxml            // index 結構
   │   │     └── index.wxss            // index 樣式表
   │   └── logs
   │         ├── logs.js               // logs 邏輯
   │         ├── logs.json             // logs 配置
   │         ├── logs.wxml             // logs 結構
   │         └── logs.wxss             // logs 樣式表
   ├── app.js                          // 邏輯
   ├── app.json                        // 公共配置
   ├── app.wxss                        // 公共樣式表
   ├── project.config.json             // 項目配置
   └── sitemap.json                    // 頁面收錄配置

打包后

Project
   ├── app-config.json                  // 小程序工程全部json配置信息
   ├── app-service.js                   // JS業務邏輯打包到此處
   ├── page-frame.html                  // 視圖的模板文件
   └── pages
         ├── index.html                 // index 頁面
         └── logs.html                  // logs 頁面

架構方案

微信小程序的框架包含兩部分View視圖層與AppService邏輯層，View層用來渲染頁面結構，AppService層用來邏輯處理、數據請求、接口調用，它們在兩個進程里運行，具體實現是在兩個Webview中運行。
視圖層和邏輯層通過系統層的JSBridge進行通信，邏輯層把數據變化通知到視圖層，觸發視圖層頁面更新，視圖層把觸發的事件通知到邏輯層進行業務處理。

-----------------------                           -----------------------
|         View        |                           |      AppService     |
|                     |                           |                     |
|  Page1 Page2 Page3  |                           |      Manager Api    |
-----------------------                           -----------------------
     |           ↑                                     |           ↑
     | Event     | Data                                | Data      | Event
     ↓           |                                     ↓           |
-------------------------------------------------------------------------
|                               JSBridge                                |
|                                                                       |
|                      Native Storage Network ...                       |
-------------------------------------------------------------------------

微信將所有的視圖都將加載到一個Webview中，稱之為View層。將所有進行邏輯處理的JS代碼全部加載到另一個WebView中，稱之為AppService層，每個小程序只有一個並且整個生命周期常駐內存。在JSBridge中封裝了消息通信以及通過App訪問OS能力的實現，對於消息通信通過在不同平台調用相應的方法進行通信，開發環境為window.postMessage, IOS下為WKWebview的window.webkit.messageHandlers.invokeHandler.postMessage，Android下為WeixinJSCore.invokeHandler。在Js引擎方面，Android中使用X5內核，IOS中使用JavaScriptCore引擎，開發工具中使用nwjs Chrome內核。
通過使用View視圖層與AppService邏輯層就實現了雙線程的小程序運行方案，通過兩個線程，可以做到將代碼放入沙箱執行，從而做到對於代碼執行的安全與管控，當然對於雙線程只是一個小程序的解決方案，倘若要在一個App上運行多個小程序，就應該采用多線程方案去執行，不僅是對於性能方面的考慮，也是為了防止小程序之間相互影響。

底層支持

微信小程序開發工具中擁有一些編譯支持模板以及小程序底層支持文件。

• transWxmlToJs: wxml轉js
• transWxssToCss: wxss轉css
• transConfigToPf: 模板頁配置
• transWxmlToHtml: wxml轉html
• transManager: 管理器
• WAConsole.js: 框架JS庫，控制台能力
• WAWebview.js: 框架JS庫，提供視圖層基礎的API能力，主要功能有將消息通信封裝為JSBridge消息，日志組件Reporter封裝，wx對象下部分渲染視圖方面的Api,小程序組件實現和注冊，VirtualDOM與diff和Render UI的實現，頁面事件觸發處理
• WAService.js: 框架JS庫，提供邏輯層基礎的API能力，主要功能有消息通信封裝為JSBridge消息，日志組件Reporter封裝，wx對象下面的大部分Api方法，App()小程序入口，Page()頁面的入口，getApp等全局方法，數據綁定，事件分發，生命周期管理，路由管理，模塊化能力等

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://www.zhihu.com/question/50920642
https://kangzubin.com/wxapp-decompile-1/
https://github.com/berwin/Blog/issues/49
https://segmentfault.com/a/1190000018631528
http://eux.baidu.com/blog/fe/微信小程序架構原理
https://juejin.im/post/5da444ab6fb9a04e054d93d8
https://cloud.tencent.com/developer/article/1029663