微信小程序剖析 | 運行機制及框架原理

微信小程序剖析 ， 運行機制及框架原理：

運行機制

還好微信的開發團隊在軟件工程的實踐還有待提升，咱們纔有機會能夠深刻了解他們的代碼。

解壓應用

首先你須要有下面的工具：

• 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——畢竟爲了分發。

上傳的過程大體以下：

• 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

框架原理

從map組件提及

在微信公佈的開發文檔裏，咱們知道使用一個地圖組件的時候是這樣子的：

<map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375px; height: 200px;"></map>

在以前的文件裏，咱們提到過這個文件是wxml文件，而後咱們要用wxcc將其轉換爲virtual dom中的方法，如：

它就會返回一個js的方法，如：

插播一句：上面有一個count，頗有意思$gwxc > 16000，這個就是dom數的count。超了就來個異常：enough, dom limit exceeded, you don't do stupid things, do you?，中文意思就是：你個愚蠢的人類，你是一個前端開發人員嗎？

隨後，在瀏覽器裏調試一下：

在微信中是要這樣調用的：

就會返回下面的結果：

看來這個名爲wx-map的標籤就是微信下的map標籤，它是wx-page的children。而後讓咱們在WAWebview中搜索一下，就會發現一個頗有意思的代碼:

它的behaviors中有一句：wx-native，這莫非就是傳說中的native組件：

順便再看一個video是否是也是同樣的：

好了，你那麼聰明，我就這麼說一半好了，剩下你本身去猜。

能夠確定的是：

• map標籤在開發的時候會變成HTML + CSS

• map標籤在微信上可使用相似於Cordova的形式調用 Native組件

再接着說，virtual dom的事，回到示例代碼裏的map.js:

js裏只放置了data，剩下的都是依據上面的值變更的observer，如：

• _updatePosition

• _hiddenChanged

• latitudeChanged

• longitudeChanged

• scaleChanged

• coversChanged

• ...

這種代碼的感受比React更進了一步的節奏，原本你還須要編碼來觀察state，如今只須要state變更了就能夠了。。。23333....，大家這些程序員都會被fire的。

好了，這裏差很少就這樣了~~。

 

 

從新審視WXWebview.js

因而，我從新逛逛WXWebview.js，發現這個文件裏面不僅有component的內容，還有：

• reportSDK

• webviewSDK ??

• virtual_dom

• exparser

• wx-components.js

• wx-components.css

等等，你是否是已經猜到我在說什麼了，上文中咱們說到了PageFrame：

在以前的想法裏，我以爲我必需要集齊上面的SDK，才能招喚中神龍。後來，我看到了這句：

若是不是開發環境就使用WAWebview.js，在開發環境中使用使用xxSDK，那麼生產環境是怎麼回事？若是是在開發環境會去下載最新的SDK，好像不對~~，哈哈。。

我猜這部分，我須要一個內測id，才能猜出這個答案。

有意思的是，IDE會對比version.json，而後去獲取最新的，用於預覽或者區分對待開發者？

上面已經解釋清楚了WAWebview的功能了，那麼WAService.js呢——就是封裝那些API的，如downloadFile：

這一點上仍然至關有趣，在咱們開發的時候仍然是WAWebview作了至關多的事，而它和WAService的打包是分離的。

那麼，咱們從理論上來講，只須要有WAWebview就能夠Render頁面了。

好了，那麼問題來了，如何在瀏覽器上運行呢？下篇文章中咱們來揭曉。