2021年來，隨著科技的進步，人們的生活水平也在不斷提高。現在，微信小程序已經成為了現代人生活中不可或缺的一部分，它可以幫助我們更方便地查找信息，購物，預訂機票和酒店，進行社交等等。眾多商家也陸續意識到了小程序的重要性，從而大力著手改變自己的營銷策略。如實體店結合微信小程序來進行點單以及服務，便成了現在的一種主流的營銷模式.

小程序編譯

微信開發者工具和微信客戶端都無法直接運行小程序的源碼，因此我們需要對小程序的源碼進行編譯。更通俗的講可以理解為：小程序編譯更像是一個翻譯器，把小程序源碼翻譯為微信客戶端和開發工具可以讀懂的語言，以便能夠明白小程序想要表達和實現的效果。

代碼編譯過程包括本地預處理、本地編譯和服務器編譯。為了快速預覽，微信開發者工具模擬器運行的代碼只經過本地預處理、本地編譯，沒有服務器編譯過程，而微信客戶端運行的代碼是額外經過服務器編譯的。

什么是 WXSS ？

小程序是基于 Web 規范，采用 html 、css 和 JS 等搭建的一套框架，微信官方給它們取了一個很厲害的名字：WXML、WXSS，但本質上還是在整個 Web 體系之下構建的。

所以在正式了解小程序編譯的原理前，非常有必要搞清楚什么是 WXML 、WXSS 。

WXML：WeiXin Markup Language ，是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。

WXSS ：WeiXin Style Sheets ，是一套樣式語言，用于描述 WXML 的組件樣式。 WXSS 用來決定 WXML 的組件應該怎么顯示。WXSS 具有 CSS 大部分特性。同時為了更適合開發微信小程序，WXSS 對 CSS 進行了擴充以及修改，更通俗的可以理解成基于CSS改了點東西，又加了點東西。

與 CSS 相比，WXSS 擴展的特性有：

• 尺寸單位
• 樣式導入

如何進行編譯？

小程序的框架包含兩部分 View 視圖層、AppService 邏輯層，View 層用來渲染頁面結構，AppService 層用來邏輯處理、數據請求、接口調用，它們在兩個進程（兩個Webview）里運行。

WXSS 并不可以直接執行在 Webview 層進行渲染，而是通過了一層編譯工具。

編譯的工具名字叫 WCSC，這個編譯的過程是在微信開發者工具端執行的，在微信開發者工具的控制臺界面，輸入 help() 命令可見如所示界面。

如果 help() 函數執行后無效果或者報錯，請檢查控制臺下方位置是否為 top 選項卡。

可以看到這里有一些命令，繼續在控制臺執行第八條 openVendor() 命令。這時候彈出了一個名為 WeappVendor 的文件夾，可以看到最后一個文件名稱正是我們要尋找的 WCSC 。文件種類是可執行文件。WXSS 正是用這個工具來編譯的。

我們找到了 WCSC 編譯工具后，把這個工具復制到項目的 pages/index 目錄下，與 index.wxss 同目錄。

在執行編譯前，先看一下 index.wxss 內部結構是怎樣的。

看完內部結構后，把終端目錄打開到 pages/index 目錄中。執行：

$ ./wcsc -js index.wxss >> wxss.js

這時候可以看到目錄中多了一個 wxss.js 文件。

wxss.js 文件就是 WXSS 文件編譯后的文件，index.wxss 文件會先通過 WCSC 可執行程序文件編譯成 js 文件。并不是直接編譯成 css 文件。

以上就是微信小程序編譯的原理。

當然支付寶小程序、百度小程序、FinClip小程序等原理都大同小異，只不過官方起名換了一種叫法，例如支付寶小程序將 WXML 、WXSS 分別稱為 AXML、ACSS，FinClip小程序分別叫做FXML、FTSS。

小程序的深化價值

說到小程序開發者如何提升其利用價值其實上一篇文章有講到，在各個巨頭推出自己的小程序開放平臺后，微信、支付寶也逐漸將自己的小程序運行能力作為一個付費服務開放給開發者和第三方企業，詳情可以查閱：微信開放小程序運行SDK，我們的App可以跑小程序了。

這種「Native + 小程序」的混合開發模式其實非常適合現已經有 App 的企業，一是優質的體驗已經成為用戶決定是否打開app的重要因素；二是低成本的開發和跨端，能夠避免 IOS、Android 重復開發；三是小程序管理后臺直接上架下的方式相當于讓app具備了熱更新能力，規避了應用商店上架審核的流程。

例如 FinClip 在集成 SDK 后便使得自己的 App 具備小程序運行能力，配合小程序管理后臺能夠實現全生命周期的管理，不管是上下架、授權、使用數據都能實現低門檻使用，而免費的社區版也基本上能夠滿足一般企業的使用規模。