周中堅，美團點評工程師，4年 Web 前端開發(fā)經驗，主要負責過會員卡、外賣、預訂、商家平臺等業(yè)務的前端開發(fā)，現(xiàn)在是美團點評點餐團隊的一員。知曉程序（微信號 zxcx0101）已經為大家?guī)?4 篇來自大眾點評的小程序開發(fā)文章，相信大家看了這些文章、再結合官方文檔已經可以毫無壓力地開發(fā)小程序了。關注知曉程序（微信號 zxcx0101），回復「點評」，獲取該系列所有文章。但是為什么小程序會有這些坑、是不是可以繞過去、怎么排查問題，我們還想從源頭，也就是小程序的源碼的角度來嘗試分析，因此有了這篇源碼解析。以 macOS 系統(tǒng)為例，首先進入應用程序文件夾，再右鍵微信開發(fā)者工具顯示包內容，最后讓我們進入 ./Contents/Resources/app.nw 目錄。接下來，我們就可以查看小程序的源碼了。代碼結構如圖：文件夾看起來很多，但命名還算清晰?，F(xiàn)在，讓我們從開發(fā)者工具入手，來看下都用到了哪些文件吧。這個頁面里的很多信息，可以和這個項目中的 package.json 對應起來，比如 name、icon、version 等。代理的設置在 ./app/dist/components/setting/setting.js，而用戶設置的保存（包括后面要說的模擬器設備、網(wǎng)絡等信息）是調用了 ./app/dist/stores/*.js 方法。菜單的設置在 ./app/dist/common/menu/menu.js，動作在 ./app/dist/common/actions/actions.js，大家可以自行到代碼中查看文件的 require，再做進一步分析。上圖可以看到我自己添加了一個設備以及一個網(wǎng)絡類型。模擬器的設備配置在 ./app/dist/config/DeviceModules.js，網(wǎng)絡配置在 ./app/dist/common/jssdk/osInfoSdk.js。調試工具是這一節(jié)最核心的內容了。乍一看，微信的調試工具和 Chrome 的 DevTools 長的很像。查查源代碼，果然就是借助它實現(xiàn)的。其中 Console、Sources、Network 就是直接使用的 DevTools，而 Storage、AppData、Wxml、Sensor，都是微信自己實現(xiàn)的。參照這些調試工具，我們自己弄一個自己的調試工具就很簡單了。
只要在 ./app/dist/extensions 目錄下新建一個文件夾，用 html/css/js 完成這個工具的功能，再將 devtools.html 這個工具引入
chrome.devtools.panels.create()。有趣的是，在 0.15.150201 這個測試版中，已經發(fā)現(xiàn)了一個名為 Bluetooth 的開發(fā)工具。（知曉程序注：小程序現(xiàn)已支持藍牙接口。）上面一節(jié)主要講的是小程序開發(fā)者工具的源碼。我們借助分析源碼可以搞清楚代理是怎么設置的，模擬器的設備和網(wǎng)絡如何添加，怎樣開發(fā)一個滿足自己特定需求的 DevTool。這一節(jié)主要介紹，我們寫的微信小程序的代碼是如何變成頁面，在用戶的終端運行的。tpl 文件夾下是頁面模板。
onlinevendor/wcc 在編譯時把 WXML 文件轉為 JS 文件，onlinevendor/wcsc 在編譯時把 WXSS 文件轉化為 JS，這也是編譯包比代碼庫要大不少的重要原因。
trans 文件夾下有五個方法，其中 transConfigToPf 可以將配置轉成 pageFrame，trans/transWxmlToHtml 將 WXML 轉成 DOM 樹，再進一步用 WebView 渲染，trans/transWxssToCss 將 WXSS 轉成 CSS，提供 View 層樣式。
onlinevendor/WAService.js 提供了service 層幾乎一切功能。
首先是看一下剛才提到的 pageFrame，對應的 transConfigToPf 主要用字符串替換的方式完成轉換。
開發(fā)者工具提供了封裝過的 WXML pannel，我們并不能從中看到頁面完整的 DOM 結構。但是，利用 $('*') 選擇器，我們可以看到頁面的 AppService 模板。我們可以分析它，了解小程序是如何使用 WXML、WXSS、JS 將頁面生成出來的。
WAService.js 是小程序頁面運行的核心方法，主要有幾大功能：內置的 report 方法定義 微信小程序 API 封裝 WeixinJSBridge 封裝
appServiceEngine 模塊
總結 如果是為了源碼分析而進行源碼分析，我覺得大可不必。在小程序的場景下，源碼分析的價值在于：官方文檔不一定和實際情況是對齊的，開發(fā)時碰到不一致的情況可以查閱源碼，以此為準。 熟悉源碼結構可以快速定位問題，提升開發(fā)效率，甚至給自己開發(fā)合適的 DevTool。 小程序可以認為是前端的一個子集，而且相對封閉，開發(fā)時會有各種約束，查閱源碼可以有助于小程序的設計。
本文由知曉程序授權轉載，關注微信號 zxcx0101，在微信后臺回復「點評」，獲取大眾點評小程序開發(fā)系列文章。
|
