小程式原理之： WXSS 編譯

FinFish發表於2023-01-09
編譯
過往中小企業或技術團隊開發一個 App 的時間成本和人力成本居高難下，但是隨著微信上線小程式，更像是為這部分群體開啟了一扇天窗，此後小程式呈現出井噴式發展的狀態，不僅微信，支付寶、百度、抖音等超級 App 都跟上步伐上線小程式平臺。
小程式能夠得到快速發展的原因，現在看來主要有三：一是之前中小企業開發 App 門檻高，耗時耗力還可能出現各種bug和體驗不佳的問題；二是原有的 Web 端的使用者生態並不完整，在 Web 上做業務的收益越來越小；三是背靠微信、支付寶等流量平臺的紅利，可以快速低成本獲得使用者。
如果概括的講小程式的優勢也可以分為以下幾個小點：
  • 獲客成本低：掛靠微信/支付寶等超級 App，讓超級 App 的使用者成為自己的潛在使用者。
  • 使用者訪問成本低：透過掃一掃、附近的小程式、分享、App 內搜尋等即可直接訪問。
  • 更輕量觸達：不必再記住網址，不必下載 App，點選直達。
  • 使用者體驗更好：功能幾乎和 App 一樣全面，包括語音、支付、地理等，遠超 H5 的體驗。
  • 使用者負擔更小：一個賬號走天下，減輕個人負擔，包括賬號、會員、線上、線下。
  • 更安全：安全無需自己維護，由超級 App 直接負責。
那小程式對於中小企業來講是否還有難點呢？那必然有！WXML、WXSS、架構、規則、文件，對於開發者來說可能都是陌生事物。

小程式編譯

微信開發者工具和微信客戶端都無法直接執行小程式的原始碼，因此我們需要對小程式的原始碼進行編譯。更通俗的講可以理解為：小程式編譯更像是一個翻譯器，把小程式原始碼翻譯為微信客戶端和開發工具可以讀懂的語言，以便能夠明白小程式想要表達和實現的效果。
程式碼編譯過程包括本地預處理、本地編譯和伺服器編譯。為了快速預覽，微信開發者工具模擬器執行的程式碼只經過本地預處理、本地編譯，沒有伺服器編譯過程，而微信客戶端執行的程式碼是額外經過伺服器編譯的。

什麼是 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 選項卡。


小程式原理之： WXSS 編譯


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


小程式原理之： WXSS 編譯


我們找到了 WCSC 編譯工具後，把這個工具複製到專案的 pages/index 目錄下，與 index.wxss 同目錄。


小程式原理之： WXSS 編譯


在執行編譯前，先看一下 index.wxss 內部結構是怎樣的。 看完內部結構後，把終端目錄開啟到 pages/index 目錄中。執行： $ ./wcsc -js index.wxss >> wxss.js  這時候可以看到目錄中多了一個 wxss.js 檔案。


小程式原理之： WXSS 編譯


wxss.js 檔案就是 WXSS 檔案編譯後的檔案，index.wxss 檔案會先透過 WCSC 可執行程式檔案編譯成 js 檔案。並不是直接編譯成 css 檔案。

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

小程式的深化價值

這種「Native + 小程式」的混合開發模式其實非常適合現已經有 App 的企業，一是優質的體驗已經成為使用者決定是否開啟app的重要因素；二是低成本的開發和跨端，能夠避免 iOS、Android 重複開發；三是小程式管理後臺直接上架下的方式相當於讓app具備了熱更新能力，規避了應用商店上架稽核的流程。
例如 FinClip 在整合 SDK 後便使得自己的 App 具備小程式執行能力，配合小程式管理後臺能夠實現全生命週期的管理，不管是上下架、授權、使用資料都能實現低門檻使用，而免費的社群版也基本上能夠滿足一般企業的使用規模。
希望能夠帶給接觸過小程式開發的同學一些更深入的認識，也能夠幫助深入學習小程式開發的同學一些新的思路。



來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/70021577/viewspace-2931455/，如需轉載，請註明出處，否則將追究法律責任。

相關文章