大眾點評點餐小程序開發(fā)經驗 - 源碼解析
作者介紹：周中堅，美團點評工程師，4年 Web 前端開發(fā)經驗，主要負責過會員卡、外賣、預訂、商家平臺等業(yè)務的前端開發(fā)，現(xiàn)在是美團點評點餐團隊的一員。我們團隊的小程序開發(fā)經驗系列文章已經發(fā)布了4篇，這些文章主 ...
作者介紹：周中堅，美團點評工程師，4年 Web 前端開發(fā)經驗，主要負責過會員卡、外賣、預訂、商家平臺等業(yè)務的前端開發(fā)，現(xiàn)在是美團點評點餐團隊的一員。
我們團隊的小程序開發(fā)經驗系列文章已經發(fā)布了4篇，這些文章主要介紹了小程序開發(fā)概述，小程序的視圖層，小程序的邏輯層， 小程序開發(fā)中碰到的坑(幾個設計實例)。相信大家看了這些文章，再結合官方文檔已經可以毫無壓力地開發(fā)小程序了，但是為什么有這些坑，是不是可以繞過去，怎么排查問題，我們還想從源頭——小程序的源碼的角度來嘗試分析，因此有了這篇源碼解析。
代碼結構
以 mac 電腦為例，首先進入應用程序文件夾，再右鍵微信開發(fā)者工具顯示包內容，最后讓我們進入 ./Contents/Resources/app.nw 目錄下就可以查看小程序的源碼了，代碼結構如圖：
文件夾看起來很多，但命名還算清晰，現(xiàn)在讓我們先從開發(fā)者工具界面的角度來看下都用到了哪些文件吧。
開發(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)絡
上圖可以看到我自己添加了一個設備以及一個網(wǎng)絡類型。
模擬器的設備配置在
./app/dist/config/DeviceModules.js，網(wǎng)絡配置在./app/dist/common/jssdk/osInfoSdk.js。
調試工具
調試工具是這一節(jié)最核心的內容了，乍一看微信的調試工具和 chrome 的 DevTools 長的很像，查看源代碼發(fā)現(xiàn)果然就是借助 chrome 的 DevTools 實現(xiàn)的。
其中 Console, Sources, Network 就是直接使用的 DevTools, 而 Storage, AppData, Wxml, Sensor 是自己實現(xiàn)的。
參照 Storage, AppData, Wxml, Sensor 這些調試工具，這些我們要自己添加一個其實非常簡單，只要在./app/dist/extensions目錄下新建一個文件夾，用html/css/js完成這個工具的功能，再改devtools.html將這個工具引入進來chrome.devtools.panels.create()即可，如圖：
有趣的是，在0.15.150201這個測試版中已經發(fā)現(xiàn)了一個名為Bluetooth的開發(fā)工具。
weapp
上面一節(jié)主要講的是小程序開發(fā)者工具的源碼，我們借助分析源碼可以搞清楚代理是怎么設置的，模擬器的設備和網(wǎng)絡如何添加，怎樣開發(fā)一個滿足自己特定需求的 DevTool。
這一節(jié)主要介紹我們寫的微信小程序的代碼是如何變成頁面在用戶的終端運行的：
- tpl 文件夾下是頁面模板。
-
onlinevendor/wcc在編譯時把 wxml 文件 轉為 js，onlinevendor/wcsc在編譯時把 wxss 文件轉化為 js，這也是編譯包比代碼庫要大不少的重要原因。 -
trans 文件夾下有五個方法，其中 transConfigToPf 將配置轉成pageFrame，
trans/transWxmlToHtml將 wxml 轉成 dom tree, 再進一步用 webview 渲染，trans/transWxssToCss將 wxss 轉成 css，提供 view 層樣式。 -
onlinevendor/WAService.js提供了service 層幾乎一切功能。
pageFrame
首先是看一下剛才提到的 pageFrame，對應的 transConfigToPf 主要用字符串替換的方式完成轉換。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<link href="https://res.wx.qq.com/mpres/htmledition/images/favicon218877.ico" rel="Shortcut Icon">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' *.qq.com 'unsafe-inline' 'unsafe-eval'">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<script>
var __webviewId__;
</script>
<!-- percodes -->
<!--{{appconfig}}-->
<!--{{pageconfig}}-->
<!--{{WAWebview}}-->
<!--{{reportSDK}}-->
<!--{{webviewSDK}}-->
<!--{{exparser}}-->
<!--{{components_js}}-->
<!--{{virtual_dom}}-->
<!--{{components_css}}-->
<!--{{allWXML}}-->
<!--{{eruda}}-->
<!--{{style}}-->
<!--{{currentstyle}}-->
<!--{{generateFunc}}-->
</head>
<body>
<div></div>
</body>
</html>
appservice 頁面模板
開發(fā)者工具提供了封裝過的 wxml pannel, 我們并不能從中看到頁面完整的 dom 結構，但是用$('*')選擇器我們可以看到頁面的 appservice 模板，看這段代碼我們可以分析出小程序是如何使用 wxml, wxss, js 將頁面生成出來的。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<link href="https://res.wx.qq.com/mpres/htmledition/images/favicon218877.ico" rel="Shortcut Icon">
<script>
var __wxAppData = {}
var __wxRoute
var __wxRouteBegin
global = {}
</script>
<script></script><!-- 加載一堆script標簽 -->
</head>
<body>
<p>
開發(fā)者工具使用 nwjs 來模擬小程序的實現(xiàn)，幫助大家來開發(fā)和調試微信小程序，所以這里是一個 webview，但真實
的手機端是運行在 jscore 中的，所以請不要使用任何 bom 對象。
</p>
<p>
我們建議你先完整閱讀該開發(fā)文檔，這將有助于更快地完成開發(fā)。如果發(fā)現(xiàn)我們的文檔有任何錯漏，
或者開發(fā)過程中有任何疑問或者你有更好的建議，歡迎通過下列郵箱聯(lián)系我們
weixin_developer@qq.com
或者訪問微信小程序開發(fā)者社區(qū)提交問題：
https://developers.weixin.qq.com
</p>
<script>
window._____sendMsgToNW({
sdkName: 'APP_SERVICE_COMPLETE'
})
</script>
</body>
</html>
WAService.js
WAService.js 是小程序頁面運行的核心方法，主要有幾大功能：
- 內置的 report 方法定義
- 微信小程序 API 封裝
- WeixinJSBridge 封裝
-
appServiceEngine 模塊
// 內置的 report 方法定義，用于內部 API 的調用日志 & 報錯記錄等。 var Reporter = { surroundThirdByTryCatch, slowReport, speedReport, reportKeyValue, reportIDKey, thirdErrorReport, errorReport, log, submit, registerErrorListener, unRegisterErrorListener, triggerErrorMessage } // 微信小程序 API 封裝，所有文檔中的 [API](https://mp.weixin.qq.com/debug/wxadoc/dev/api/)都在這里封裝了，以showModal為例簡單分析一下 showModal: function() { var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {} , t = { title: "", content: "", confirmText: "確定", cancelText: "取消", showCancel: !0, confirmColor: "#3CC51F", cancelColor: "#000000" };// 默認值，此處比文檔準確 if (t = (0, f.extend)(t, e), a("showModal", t, {// 調用 jsbridge，見下方代碼 title: "", content: "", confirmText: "", cancelText: "", confirmColor: "", cancelColor: "" })) return t.confirmText.length > 4 ? void B("showModal", e, "showModal:fail confirmText length should not large then 4") : t.cancelText.length > 4 ? void B("showModal", e, "showModal:fail cancelText length should not large then 4") : void (0, // 各種校驗 u.invokeMethod)("showModal", t, { beforeSuccess: function(e) { e.confirm = Boolean(e.confirm)// 返回值處理 } }) } // 此處調用 WeixinJSBridge，此外還對每個 API 調用記 log，方便微信小程序的問題排查 function a() { var e = Array.prototype.slice.call(arguments) , t = e[1]; e[1] = function(e, n) { var o = e.data , r = e.options , i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : {} , a = r && r.timestamp || 0 , s = Date.now(); "function" == typeof t && t(o, n), Reporter.speedReport({ key: "webview2AppService", data: o || {}, timeMark: { startTime: a, endTime: s, nativeTime: i.nativeTime || 0 } }) } , WeixinJSBridge.subscribe.apply(WeixinJSBridge, e) } // WeixinJSBridge 封裝，底層是調用 WeixinJSCore e.WeixinJSBridge = { invoke: d, invokeCallbackHandler: p, on: h, publish: v, subscribe: g, subscribeHandler: y } // 內置的 jsbridge core WeixinJSCore = { invokeHandler, publishHandler } // setData 方法定義，邏輯層通過 setData 方法改變 virtual dom，改變 dom tree，從而改變視圖層 // appServiceEngine 模塊，提供 App 和 Page 相關的接口
總結
如果是為了源碼分析而進行源碼分析，我覺得大可不必，在小程序的場景下，源碼分析的價值在于：
- 官方文檔不一定和實際情況是對齊的，開發(fā)時碰到不一致的情況可以查閱源碼，以此為準。
- 熟悉源碼結構可以快速定位問題，提升開發(fā)效率，甚至給自己開發(fā)合適的 DevTool。
- 小程序可以認為是前端的一個子集，而且相對封閉，開發(fā)時會有各種約束，查閱源碼可以有助于小程序的設計。
