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