過往中小企業(yè)或技術(shù)團(tuán)隊(duì)開發(fā)一個 App 的時間成本和人力成本居高難下，但是隨著微信上線小程序，更像是為這部分群體打開了一扇天窗，此后小程序呈現(xiàn)出井噴式發(fā)展的狀態(tài)，不僅微信，支付寶、百度、抖音等超級 App 都跟上步伐上線小程序平臺。
小程序能夠得到快速發(fā)展的原因，現(xiàn)在看來主要有三：一是之前中小企業(yè)開發(fā) App 門檻高，耗時耗力還可能出現(xiàn)各種bug和體驗(yàn)不佳的問題；二是原有的 Web 端的用戶生態(tài)并不完整，在 Web 上做業(yè)務(wù)的收益越來越小；三是背靠微信、支付寶等流量平臺的紅利，可以快速低成本獲得用戶。
如果概括的講小程序的優(yōu)勢也可以分為以下幾個小點(diǎn)：
- 獲客成本低：掛靠微信/支付寶等超級 App，讓超級 App 的用戶成為自己的潛在用戶。
- 用戶訪問成本低：通過掃一掃、附近的小程序、分享、App 內(nèi)搜索等即可直接訪問。
- 更輕量觸達(dá)：不必再記住網(wǎng)址，不必下載 App，點(diǎn)擊直達(dá)。
- 用戶體驗(yàn)更好：功能幾乎和 App 一樣全面，包括語音、支付、地理等，遠(yuǎn)超 H5 的體驗(yàn)。
- 用戶負(fù)擔(dān)更小：一個賬號走天下，減輕個人負(fù)擔(dān)，包括賬號、會員、線上、線下。
- 更安全：安全無需自己維護(hù)，由超級 App 直接負(fù)責(zé)。
那小程序?qū)τ谥行∑髽I(yè)來講是否還有難點(diǎn)呢？那必然有！WXML、WXSS、架構(gòu)、規(guī)則、文檔，對于開發(fā)者來說可能都是陌生事物。
小程序編譯
微信開發(fā)者工具和微信客戶端都無法直接運(yùn)行小程序的源碼，因此我們需要對小程序的源碼進(jìn)行編譯。更通俗的講可以理解為：小程序編譯更像是一個翻譯器，把小程序源碼翻譯為微信客戶端和開發(fā)工具可以讀懂的語言，以便能夠明白小程序想要表達(dá)和實(shí)現(xiàn)的效果。
代碼編譯過程包括本地預(yù)處理、本地編譯和服務(wù)器編譯。為了快速預(yù)覽，微信開發(fā)者工具模擬器運(yùn)行的代碼只經(jīng)過本地預(yù)處理、本地編譯，沒有服務(wù)器編譯過程，而微信客戶端運(yùn)行的代碼是額外經(jīng)過服務(wù)器編譯的。
什么是 WXSS ？
小程序是基于 Web 規(guī)范，采用 html 、css 和 JS 等搭建的一套框架，微信官方給它們?nèi)×艘粋€很厲害的名字：WXML、WXSS，但本質(zhì)上還是在整個 Web 體系之下構(gòu)建的。
所以在正式了解小程序編譯的原理前，非常有必要搞清楚什么是 WXML 、WXSS 。
WXML：WeiXin Markup Language ，是框架設(shè)計的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)。
WXSS ：WeiXin Style Sheets ，是一套樣式語言，用于描述 WXML 的組件樣式。 WXSS 用來決定 WXML 的組件應(yīng)該怎么顯示。WXSS 具有 CSS 大部分特性。同時為了更適合開發(fā)微信小程序，WXSS 對 CSS 進(jìn)行了擴(kuò)充以及修改，更通俗的可以理解成基于CSS改了點(diǎn)東西，又加了點(diǎn)東西。
與 CSS 相比，WXSS 擴(kuò)展的特性有：
- 尺寸單位
- 樣式導(dǎo)入
如何進(jìn)行編譯？
小程序的框架包含兩部分 View 視圖層、AppService 邏輯層，View 層用來渲染頁面結(jié)構(gòu)，AppService 層用來邏輯處理、數(shù)據(jù)請求、接口調(diào)用，它們在兩個進(jìn)程（兩個Webview）里運(yùn)行。
WXSS 并不可以直接執(zhí)行在 Webview 層進(jìn)行渲染，而是通過了一層編譯工具。
編譯的工具名字叫 WCSC，這個編譯的過程是在微信開發(fā)者工具端執(zhí)行的，在微信開發(fā)者工具的控制臺界面，輸入 help() 命令可見如所示界面。
如果 help() 函數(shù)執(zhí)行后無效果或者報錯，請檢查控制臺下方位置是否為 top 選項(xiàng)卡。
可以看到這里有一些命令，繼續(xù)在控制臺執(zhí)行第八條 openVendor() 命令。這時候彈出了一個名為 WeappVendor 的文件夾，可以看到最后一個文件名稱正是我們要尋找的 WCSC 。文件種類是可執(zhí)行文件。WXSS 正是用這個工具來編譯的。
我們找到了 WCSC 編譯工具后，把這個工具復(fù)制到項(xiàng)目的 pages/index 目錄下，與 index.wxss 同目錄。
在執(zhí)行編譯前，先看一下 index.wxss 內(nèi)部結(jié)構(gòu)是怎樣的。
看完內(nèi)部結(jié)構(gòu)后，把終端目錄打開到 pages/index 目錄中。執(zhí)行：
$ ./wcsc -js index.wxss >> wxss.js
這時候可以看到目錄中多了一個 wxss.js 文件。
wxss.js 文件就是 WXSS 文件編譯后的文件，index.wxss 文件會先通過 WCSC 可執(zhí)行程序文件編譯成 js 文件。并不是直接編譯成 css 文件。
以上就是微信小程序編譯的原理。
當(dāng)然支付寶小程序、百度小程序、FinClip小程序等原理都大同小異，只不過官方起名換了一種叫法，例如支付寶小程序?qū)?WXML 、WXSS 分別稱為 AXML、ACSS，F(xiàn)inClip小程序分別叫做FXML、FTSS。
小程序的深化價值
說到小程序開發(fā)者如何提升其利用價值其實(shí)上一篇文章有講到，在各個巨頭推出自己的小程序開放平臺后，微信、支付寶也逐漸將自己的小程序運(yùn)行能力作為一個付費(fèi)服務(wù)開放給開發(fā)者和第三方企業(yè)，詳情可以查閱：微信開放小程序運(yùn)行SDK，我們的App可以跑小程序了。
這種「Native + 小程序」的混合開發(fā)模式其實(shí)非常適合現(xiàn)已經(jīng)有 App 的企業(yè)，一是優(yōu)質(zhì)的體驗(yàn)已經(jīng)成為用戶決定是否打開app的重要因素；二是低成本的開發(fā)和跨端，能夠避免 IOS、Android 重復(fù)開發(fā)；三是小程序管理后臺直接上架下的方式相當(dāng)于讓app具備了熱更新能力，規(guī)避了應(yīng)用商店上架審核的流程。
例如 FinClip 在集成 SDK 后便使得自己的 App 具備小程序運(yùn)行能力，配合小程序管理后臺能夠?qū)崿F(xiàn)全生命周期的管理，不管是上下架、授權(quán)、使用數(shù)據(jù)都能實(shí)現(xiàn)低門檻使用，而免費(fèi)的社區(qū)版也基本上能夠滿足一般企業(yè)的使用規(guī)模。
希望能夠帶給接觸過小程序開發(fā)的同學(xué)一些更深入的認(rèn)識，也能夠幫助深入學(xué)習(xí)小程序開發(fā)的同學(xué)一些新的思路。
