# 小程序的由來
微信小程序是如何架構出來的，深入了解之后，可能你會悄然大悟。所有的創新都是在前人的基礎之上進行的。react實現了高效的虛擬DOM，微信在此基礎之上，構建了一個微信瀏覽器，即小程序運行環境。
首先你需要有下面的工具啦
1、Mac電腦
2、微信web開發者工具.app
3、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 + f6RENAME 這些變量好十幾次，終于看到了下面的代碼了：
這是一個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的工具。
1、wcc用于轉轉wxml中的自定義tag為virtual\_dom
2、wcsc，我觀察到的現象是它為轉換wxss為css
這樣的話，我們就可以理解為微信小應用有點類似于 Virtual Dom + WebView，畢竟上面有個WAWebView文件 ，還有一個webviewSDK文件 。
當然無論是React + WebView，或者Vue + WebView都不重要，現在有了 WA + WebView了，哈哈。
WeApp采用的是如下圖所示的提交方式，所以：
你在本地寫的WeApp都會被提交到微信服務器，然后打包，上傳到服務器，交給CDN——畢竟為了分發。
上傳的過程大致如下：
1、APP會被打包成以日期命名+ .wx文件
2、IDE會檢測包的大小，并提示：代碼包大小為 xx kb，超過限制 xx kb，請刪除文件后重試。這個xx好像是1024，所以APP的大小是1M。
3、APP將會上傳到servicewechat.com/wxa-dev/commitsource/?appid=xx&user-version=&user-desc=xx
另外，從今天開始，公眾號“關聯小程序”能力全面開放
一、關聯小程序的主體不再受限
二、每個公眾號最多關聯13個小程序
三、同一小程序最多可關聯3個公眾號
