帶你了解小程式的由來

微信小程式是如何架構出來的，深入了解之後，可能你會悄悄大悟。所有的創新都是在前人的基礎之上進行的。 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中文網其他相關文章！