微信小程序的原理及技術理解

最近在工做當中，接觸到一些關於微信小程序的開發，寫出這篇文章和你們分享

 

小程序開發框架的目標是經過儘量簡單、高效的方式讓開發者能夠在微信中開發具備原生 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