最近在工作當中，接觸到一些關於微信小程序的開發，寫出這篇文章和大家分享
小程序開發框架的目標是通過盡可能簡單、高效的方式讓開發者可以在微信中開發具有原生 APP 體驗的服務。
框架提供了自己的視圖層描述語言 WXML 和 WXSS，以及基於 JavaScript 的邏輯層框架，並在視圖層與邏輯層間提供了數據傳輸和事件系統，可以讓開發者可以方便的聚焦於數據與邏輯上。
那么我們從小程序的描述中不難看出，小程序所使用的前端技術JavaScript/WXML/WXSS
這些技術與常規的前端開發也存在着一些區別：
- JavaScript: 微信小程序的 JavaScript 運行環境即不是 Browser 也不是 Node.js。它運行在微信 App 的上下文中，不能操作 Browser context 下的 DOM，也不能通過 Node.js 相關接口訪問操作系統 API。雖然開發過程和用到的技術棧和 Html5 是相通的，但嚴格意義來講，微信小程序並不是 Html5。
- WXML: 作為微信小程序的展示層，並不是使用 Html，而是自己發明的基於 XML 語法的描述，布局大部分利用view等塊容器。
- WXSS: 用來修飾展示層的樣式。官方的描述是 “ WXSS (WeiXin Style Sheets) 是一套樣式語言，用於描述 WXML 的組件樣式。WXSS 用來決定 WXML 的組件應該怎么顯示。我們的 WXSS 具有 CSS 大部分特性...我們對 CSS 進行了擴充以及修改。”至於基於CSS的哪個版本，大部分特性具體指哪些，擴充和修改內容就只能在實踐中體會了。
小程序在IOS，Android 以及調試工具上的運行是不同的：
- 在 iOS 上，小程序的 javascript 代碼是運行在 JavaScriptCore 中
- 在 Android 上，小程序的 javascript 代碼是通過 X5 內核來解析
- 在 開發工具上， 小程序的 javascript 代碼是運行在 nwjs（chrome內核） 中
我們可以大膽的猜想小程序的真機運行環境‘
微信小程序的運行環境應該更類似 ReactNative 之類，而不是純 Html5。兩者最大的不同在於，ReactNative 的界面是由原生控件渲染出來的，而 Html5 的界面是由瀏覽器內核渲染出來的。
原理上，小程序是如何在微信 App 里運行的呢？
- 微信 App 里包含 javascript 運行引擎。
- 微信 App 里包含了 WXML/WXSS 處理引擎，最終會把界面翻譯成系統原生的控件，並展示出來。這樣做的目的是為了提供和原生 App 性能相當的用戶體驗。
’從原理上我們可以繼續揣測一下小程序的加載過程
- 用戶點擊打開一個小程序
- 微信 App 從微信服務器下載這個小程序
- 分析 app.json 得到應用程序的配置信息（導航欄，窗口樣式，包含的頁面列表等）
- 加載並運行 app.js
- 加載並顯示在 app.json 里配置的第一個頁面
這個只是從開發者眼中看到的一個簡化版的過程，實際過程應該比這要復雜得多，涉及到瀏覽器線程（就是運行我們的邏輯層代碼 app.js 等的線程）和 AppService 線程之間的交互。
至於微信 App 是如何與小程序的邏輯層 javascript 交互的呢？可以簡單地歸納如下：
JavaScript 是腳本語言，可以在運行時解釋並執行。微信 App 里包含了一個 JavaScript 引擎，由它來負責執行邏輯層的 JavaScript 代碼。那么 JavaScript 調用的小程序相關 API 怎么實現的呢？答案是最終會被翻譯成實現在微信 App 里的原生接口。比如開發者調用 wx.getLocation(OBJECT) 獲取當前地理位置，微信 App 里的 JavaScript 引擎在執行這個代碼時，會去調用微信 App 里實現的原生接口來獲取地理位置坐標。
總結
微信小程序最大的好處是不需要做設備適配，只要微信能運行，小程序就能運行。小程序雖然是一個封閉形態下的前端開發技術，但借助微信的巨大影響力，幾乎所有人都在往里面沖。這個正在發現的事物也存在不少弊端，但它才剛剛起步，借助這個巨大的平台，相信以后會有巨大的發展
文章作者介紹：
來自於小豹科技的彭文傑-公司專注於軟件基礎研發平台，目前公司正在研發一款基於Netty的插件式的API網關-小豹API網關。 希望與對OpenAPI、微服務、API網關、Service Mesh等感興趣的朋友多交流。 有興趣的朋友請加QQ群244054462