在上一篇《微信小程序「官方示例代碼」淺析【上】》中，我們只是簡單的羅列了一下代碼，這一篇，讓我們來玩點刺激的——就是看看IDE的代碼，了解它是怎么運行的。
還好微信的開發團隊在軟件工程的實踐還有待提高，我們才有機會可以深入了解他們的代碼——真想建議他們看看Growth的第二部分，構建系統。
解壓應用
首先你需要有下面的工具啦
-
Mac電腦
-
微信web開發者工具.app
-
WebStorm / 其他編程器 或 IDE，最好可以支持重命名
首先，我們需要右鍵微信web開發者工具.app，然后顯示包的內容，在 Contents/Resources/app.nw下面的內容即是我們的代碼，拷貝出來啦：
簡單的說明一下：
-
app/ 目錄下放置了app的代碼
-
modified_modules/ 即一些修改后的模塊
-
node_modules/ 地球人都知道
-
package.json 呵呵，你一定是知道的，配置了NW相關的內容
在modified_modules目錄下有兩個子模塊：
-
anyproxy，從名字就可以看起來這是一個代理模塊
-
weinre，遠程調試工具
IDE
我們已經知道了這是一個NodeWebkit封裝的Web應用了。
在package.json中的"main": "app/html/index.html",，即定義了這個APP的入口是這個index.html，而不是別的文件。
很順利的我們看到了他們調用的文件了：
這里面有一個init方法，看來他就是NodeWebkit相關的入口了。用WebStorm的shift + f6 RENAME 這些變量好十幾次，終於看到了下面的代碼了：
這是一個React應用，還好我一年多以前學得不錯。掃視了一下代碼，終於看到了這一句：
直接跳轉到ContainController.js，跳轉到render方法，找到了這個：
果然Main里面就是大入口了
對應的就是下面這個界面了：
-
edit就是編輯器及其相關的事項 -
detail就是項目的配置
補充一下咯，其中的編輯環境是基於Monaco
WeAPP運行機制
慢慢的就探索到了打包，其運行時的過程。由於我並沒有拿到內測資格，所以我只好邊看邊猜測一下。
在之前的文章中，我們提到了兩點很有意思的東西：wxml和wxss，這兩個文件會被分別轉換，即wxml -> html，wxss -> css。對應的有幾個不同的transform:
-
transWxmlToJs
-
transWxssToCss
-
transConfigToPf
-
transWxmlToHtml
-
transManager
這里的PF指代的是PageFrame的意思，pageFrame有一個對應的模板文件：
這種風格一看就是生成字符串Replace的，然后他們寫了一個名為wcc以及一個名為wcsc的工具。
-
wcc用於轉轉wxml中的自定義tag為virtual_dom
-
wcsc，我觀察到的現象是它為轉換wxss為css
這樣的話，我們就可以理解為微信小應用有點類似於 Virtual Dom + WebView，畢竟上面有個WAWebView文件 ，還有一個webviewSDK文件 。
當然無論是React + WebView，或者Vue + WebView都不重要，現在有了 WA + WebView了，哈哈。
WeApp采用的是如下圖所示的提交方式，所以：
你在本地寫的WeApp都會被提交到微信服務器，然后打包，上傳到服務器，交給CDN——畢竟為了分發。
微信小程序開發交流群563752274
上傳的過程大致如下：
-
APP會被打包成以日期命名 + .wx文件
-
IDE會檢測包的大小，並提示：代碼包大小為 xx kb，超過限制 xx kb，請刪除文件后重試。這個xx好像是1024，所以APP的大小是1M。
-
APP將會上傳到 https://servicewechat.com/wxa-dev/commitsource/?appid=xx&user-version=&user-desc=xx