微信小程序 · 前端小冊

# 小程序的架構方案 ![](https://img.kancloud.cn/32/0a/320a404dfa9cb3e947f61c4d329ef7b3_800x440.png) 微信小程序的框架包含兩部分：View 視圖層、App Service 邏輯層。 - View 層用來渲染頁面結構 - AppService 層用來邏輯處理、數據請求、接口調用 - 視圖層和邏輯層通過系統層的 JSBridge 進行通信，邏輯層把數據變化通知到視圖層，觸發視圖層頁面更新，視圖層把觸發的事件通知到邏輯層進行業務處理。視圖層使用 WebView 渲染，iOS 中使用自帶 WKWebView，在 Android 使用騰訊的 x5 內核（基于 Blink）運行。邏輯層運行在獨立的 JS 引擎中（iOS：`JavaScriptCore`, android：`X5`JS解析器；統稱`JSCore`； **開發工具使用 nw.js 同時提供了視圖層和邏輯層的運行環境。** 整個小程序由兩個`webview`組成，代碼分為`UI`層和邏輯層。`UI`層運行在第一個`WebView`當中，執行`DOM`操作和交互事件的響應，里面是`WAWebview.js`代碼及編譯后的內容。邏輯層執行在（第二個`webview`中）獨立的`JS`引擎中（iOS：`JavaScriptCore`, android：`X5`JS解析器；統稱`JSCore`；當我們對`view`層進行事件操作后，會通過`WeixinJSBridge`將數據傳遞到`Native`系統層。`Native`系統層決定是否要用`native`處理，然后丟給邏輯層進行用戶的邏輯代碼處理。邏輯層處理完畢后會將數據通過`WeixinJSBridge`返給`View`層。`View`渲染更新視圖。 # 參考鏈接 [微信小程序架構原理](http://eux.baidu.com/blog/fe/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%9E%B6%E6%9E%84%E5%8E%9F%E7%90%86) [segmentfault-淺談小程序的運行機制](https://segmentfault.com/a/1190000019131399) [掘金-小程序攻略](https://juejin.im/post/5b8fd1416fb9a05cf3710690#heading-24) [小程序資源匯總](https://github.com/justjavac/awesome-wechat-weapp)