微信小程式剖析：執行機制

阿新 • • 發佈：2019-02-05

在上一篇《微信小程式「官方示例程式碼」淺析【上】》中，我們只是簡單的羅列了一下程式碼，這一篇，讓我們來玩點刺激的——就是看看IDE的程式碼，瞭解它是怎麼執行的。

還好微信的開發團隊在軟體工程的實踐還有待提高，我們才有機會可以深入瞭解他們的程式碼——真想建議他們看看Growth的第二部分，構建系統。

解壓應用

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

Mac電腦
微信web開發者工具.app
WebStorm / 其他程式設計器或 IDE，最好可以支援重新命名

首先，我們需要右鍵微信web開發者工具.app，然後顯示包的內容，在 Contents/Resources/app.nw下面的內容即是我們的程式碼，拷貝出來啦：

drwxr-xr- 
[email protected]   7 fdhuang  staff   238B Sep 22 19:43 app
drwxr-xr-[email protected]   4 fdhuang  staff   136B Sep 21 13:12 modified_modules
drwxr-xr-[email protected] 194 fdhuang  staff   6.4K Sep 21 13:12 node_modules
-rw-r--r--    1 fdhuang  staff   900B Sep 22 21:09 package.json

簡單的說明一下：

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，而不是別的檔案。

很順利的我們看到了他們呼叫的檔案了：

<scriptsrc="../dist/app.js"></script>

這裡面有一個init方法，看來他就是NodeWebkit相關的入口了。用WebStorm的shift + f6 RENAME 這些變數好十幾次，終於看到了下面的程式碼了：

var React = require("../dist/lib/react.js");
var reactDom = require("../dist/lib/react-dom.js");
var init = require("../dist/common/loadInit/init.js");
var controller = require("../dist/components/ContainController.js");
var proxy = require("../dist/common/proxy/startProxy.js");
var windowActions = require("../dist/actions/windowActions.js");
var webViewAction = require("../dist/actions/webviewActions.js");
var webViewStore = require("../dist/stroes/webviewStores.js");
var log = require("../dist/common/log/log.js");
var shortCut = require("../dist/common/shortCut/shortCut.js");
var isDev = global.appConfig.isDev;

這是一個React應用，還好我一年多以前學得不錯。掃視了一下程式碼，終於看到了這一句：

reactDom.render(React.createElement(controller, null), document.querySelector("#container")

直接跳轉到ContainController.js，跳轉到render方法，找到了這個：

React.createElement(Main, {
    project: this.state.project,
    appQuit: this.appQuit,
    appMax: this.appMax,
    appMin: this.appMin
})

果然Main裡面就是大入口了

React.createElement("div", {className: "main"},
    React.createElement(menuBar, {
        appQuit: this.props.appQuit,
        appMin: this.props.appMin,
        appMax: this.props.appMax,
        showSetting: this.showSetting,
        project: this.props.project
    }),
    React.createElement(toolbar, {project: this.props.project}),
    React.createElement("div", {
            className: "body"
        },
        React.createElement(sidebar, {
            project: this.props.project,
            optProject: this.optProject
        }),
        React.createElement(develop, {
            show: this.state.show,
            optDebugger: this.optDebugger,
            project: this.props.project
        }),
        React.createElement(edit, {
            show: this.state.show,
            project: this.props.project
        }),
        React.createElement(detail, {
            project: this.props.project,
            show: this.state.show
        })),
    React.createElement(toast, null),
    React.createElement(setting, {
        show: this.state.showSetting,
        showSetting: this.showSetting
    }),
    React.createElement(dialog, null),
    React.createElement(popup, null),
    React.createElement(about, null))
}

對應的就是下面這個介面了：

edit 就是編輯器及其相關的事項
detail就是專案的配置

WeApp是如何執行的

慢慢的就探索到了打包，其執行時的過程。由於我並沒有拿到內測資格，所以我只好邊看邊猜測一下。

在之前的文章中，我們提到了兩點很有意思的東西：wxml和wxss，這兩個檔案會被分別轉換，即wxml -> html，wxss -> css。對應的有幾個不同的transform:

transWxmlToJs
transWxssToCss
transConfigToPf
transWxmlToHtml

transManager

這裡的PF指代的是PageFrame的意思，pageFrame有一個對應的模板檔案：

<!DOCTYPE html><htmllang="zh-CN"><head><linkhref="https://res.wx.qq.com/mpres/htmledition/images/favicon218877.ico"rel="Shortcut Icon"><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /><script>var __webviewId__;
</script><!-- percodes --><!--{{WAWebview}}--><!--{{reportSDK}}--><!--{{webviewSDK}}--><!--{{exparser}}--><!--{{components_js}}--><!--{{virtual_dom}}--><!--{{components_css}}--><!--{{allWXML}}--><!--{{eruda}}--><!--{{style}}--><!--{{currentstyle}}--><!--{{generateFunc}}--></head><body><div></div></body></html>

這種風格一看就是生成字串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。

文章來自：第九程式

微信小程式剖析：執行機制

在上一篇《微信小程式「官方示例程式碼」淺析【上】》中，我們只是簡單的羅列了一下程式碼，這一篇，讓我們來玩點刺激的——就是看看IDE的程式碼，瞭解它是怎麼執行的。還好微信的開發團隊在軟體工程的實踐還有待提高，我們才有機會可以深入瞭解他們的程式碼——真想建議他們看看Growt

微信小程式開發：二級、三級等多級聯動選單

二級級聯效果三級聯動效果二級聯動和三級聯動的程式碼結構都是一樣，就看要怎麼設定。接下來上三級聯動的程式碼。 wxml <view class="picker-box"> <view class='skill-picker'&g

微信小程式之：雲開發初體驗--致我的第一個小程式

背景：一直關注微信小程式的發展，看著小程式一步步完善，一步步壯大，心裡癢癢，也想做一個自己的微信小程式，但是苦於只會前端，不會服務端，所以想法一直被卡著。現在小程式有了雲開發，很輕鬆實現後端功能，寫後端跟寫前端沒啥區別，真的是前端小夥伴們的福音啊。經過幾個晚上的熬夜奮戰，我的第一個微信小程式正式

微信小程式 wx.reLaunch 執行前幾個頁面的 onUnload 鉤子

微信小程式 wx.reLaunch 執行前幾個頁面的 onUnload 鉤子解決方案有種場景：頁面 A => B => C => D, 當在 C 頁面呼叫 wx.reLaunch({url:’/pages/D’}) 時，頁面 A 、B、C 的 onUnloa

微信小程式教程：文字超出顯示區域後隱藏並顯示省略號

單行文字超出後隱藏首先容器需要有固定的寬高，其次加入以下程式碼即可。 view { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 多行文字超出後隱藏容器不需要有固定的寬高，

「騰訊地圖」微信小程式外掛：提供簡單的路線多方案規劃服務

上期，我們在《「騰訊視訊」微信小程式外掛介紹》一文中介紹了「騰訊視訊」小程式外掛的意義、使用場景以及使用方法。今天我們會與大家分享一款同樣優秀的小程式外掛——「騰訊地圖」外掛，從使用場景到使用方法，都將作出詳細的介紹。「騰訊地圖」外掛能做什麼？顧名思義，「

微信小程式開發：從小白開發出通過自拍預測年齡和顏值的小程式

先看下效果（作者：快簡）： 1、開啟微信小程式官方文件 https://developers.weixin.qq.com/miniprogram/dev/index.html 我們會看到讓我們申請賬號，這裡先不著急申請，因為我們每個人都可以用測試號。

微信小程式開發：提高應用速度小技巧

小程式科普類的文章已經很多了，今天這裡講的是針對小程式的優化方法，可以有效提高小程式的響應速度和使用者體驗。當然，開發體驗也提高不少。一、提高頁面載入速度在小程式這個環境下，怎樣提高頁面載入

微信小程式例項：實現tabs選項卡效果

最近微信應用號是炒的如火如荼，熱門滿滿，但是也可以發現搜尋關鍵詞出來，各類網站出現的還都是微信的官方文件解釋。正好趕上這個熱潮，這幾天先把小程式技術文件看了個遍，就直接著手寫案例了。很多元件微信內部已經封裝完了，正好發現沒有tab選項卡效果，這兩天正好研究了下。

微信小程式例項：跳轉到頂部例項

總所周知，小程式不能操作dom，那麼我們要怎麼實現在頁面滾動到一定條件的時候，顯示gotop圖示，點選後跳轉到頁面的頂部呢？這裡小程式有個元件是可以實現的，那就是scroll-view元件，他具有很多的屬性，其中我們要利用到以下兩個屬性來處理： s

微信小程式開發：http請求的session管理

作為一個開發JavaWeb應用的程式猿，都喜歡將使用者登入後的使用者資訊（比如說使用者id,使用者名稱稱）放入session中儲存，之後在業務邏輯的開發中需要用到使用者資訊的時候就可以輕鬆又方便的從session中取到值。最近在開發微信小程式的時候碰到一個問

【微信小程式】：開發之前要知道的三件事

前言微信之父張小龍在年初的那次演講中曾表示：“我自己是很多年的程式設計師，我覺得我們應該為開發的團隊做一些事情”。幾個月後，微信正式推出微信應用號（即微信小程式），在網際網路中掀起了又一波熱潮。於是，很多人準備要開發微信的小程式，如果你真的想要開發小程式

微信小程式大全：767個小程式

1001、音樂後期 1002、惠充電 1004、跑步訓練 1005、圖書館+ 1007、金福康門業 1008、分答FM 1011、楓橋

微信小程式例項：move事件導致navigator元件和tap事件無效

今天，微信小程式終於釋出了，激動的同時也在加緊最後公司專案的測試，結果發現了一個問題，就是在使用catch繫結move事件的時候，無法觸發navigator元件的url和tap事件。測試如下： test.wxml：： <view class="fle

微信小程式漏洞：可下載任意微信小遊戲原始碼

本文轉載自【小專欄平臺】公眾號，由獨立開發者朱鵬飛投稿。如果大家想要微信跳一跳小遊戲以及其他十幾個小遊戲原始碼，大家可以關注【小專欄平臺】公眾號，回覆“微信小遊戲”即可獲取到。截止原作者目前推送文章的時候（ 2018年1月1日23:50分），微信官方已經修復了這個漏

微信小程式聯盟：微信小程式之獲取並解密使用者資料（獲取openId、unionId）

前言在實際的小程式開發中，往往需要使用者授權登陸並獲取使用者的資料，快速對接使用者系統。openId : 使用者在當前小程式的唯一標識 unionId : 如果開發者擁有多個移動應用、網站應用、和公眾帳號（包括小程式），可通過unionid來區分使用者的唯一性，因為只要是同一

EA&UML日拱一卒-微信小程式實戰：位置鬧鈴 (11)-稍微聰明一點

問題的提出小程式使用wx.playVoice播放音訊時，需要從網上下載播放的物件檔案，但是每次播放都要下載的話，就太傻了。好在小程式提供了儲存檔案的功能。思路準備一個url到快取檔案的對映，當小程式成功的下載播放鈴聲以後，自動儲存下載的檔名。下次播放同一個檔案時確認是否存在已

十月微信小程式導航：官方文件+精品教程+demo集合（10月14日更新）

1：官方工具： 5：微信小程式公測接入指南：導航系列：特別說明： 1：不瞭解微信小程式的同學，請先搜尋一下微信小程式究竟是什麼，有哪些特性； 2：有htmlcssjs基礎者可以直接進入實踐，邊實踐邊學習，尤其是有react與vue基礎

微信小程式例項：建立下發模板訊息例項

鑑於目前網路上都還找不到小程式下發模板訊息的相關資源，在多次閱讀了官方文件今天終於把小程式的模版訊息給測通了，接下來介紹在不使用伺服器的情況下，前端開發人員在本地怎麼測試模板訊息的傳送。 1、在微信公眾平臺-小程式的模板中心先申請一個下發訊息模板

微信小程式學習：location API介面

微信小程式的位置介面共有兩個： 1、wx.getLocation(OBJECT)獲取當前的地理位置、速度。 2、wx.openLocation(OBJECT) 使用微信內建地圖檢視位置然後，根據object引數說明，結合module模組化重寫了下兩個介面在暴露出來引用，讓

微信小程式 剖析：執行機制

相關推薦

微信小程式剖析：執行機制