微信小程式是如何架構出來的，深入了解之後，可能你會悄悄大悟。所有的創新都是在前人的基礎之上進行的。 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個公眾號
詳見鏈接，一句話，更加開放了。允許多處引流了。
--
以上是帶你了解小程式的由來的詳細內容。更多資訊請關注PHP中文網其他相關文章！
