首先你需要有下面的工具啦

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中文網其它相關文章！