微信小程序“反編譯”實(shí)戰(zhàn)（二）：源碼還原（下篇）
page-freme.html在小程序中使用 WXML 文件描述頁面的結(jié)構(gòu)， WXSS 文件描述頁面的樣式。工程中有一個 app.wxss 文件用于定義一些全局的樣式，會自動被 import 到各個頁面中；另外每個頁面也都分別包含 page.wxml 和 page.wxss 用于描述其頁面的結(jié)構(gòu)和樣式；同時，我們也會自定義一些公共的 xxxCommon.wxss 樣式文件和公共的 xxxTemplate.wxml 模板文件供一些頁面復(fù)用，一般在各自頁面的 page.wxss 和 page.wxml 中去 import 。 當(dāng)“編譯”小程序后，所有的 .wxml 文件和 app.wxss 及公共 xxxCommon.wxss 樣式文件的將被整合到 page-freme.html 文件中，而每個頁面的 page.wxss 樣式文件，將分別單獨(dú)在各自的路徑下生成一個 page.html 文件。 page-freme.html 文件的內(nèi)容結(jié)構(gòu)如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
<link rel="icon" href="data:image/ico;base64,aWNv">
<script>
// 一些全局變量的聲明
var __pageFrameStartTime__ = Date.now();
var __webviewId__;
var __wxAppCode__ = {};
var __WXML_GLOBAL__ = {
entrys: {},
defines: {},
modules: {},
ops: [],
wxs_nf_init: undefined,
total_ops: 0
};
// 小程序編譯基礎(chǔ)庫版本
/*v0.6vv_20180125_fbi*/
window.__wcc_version__ = 'v0.6vv_20180125_fbi';
window.__wcc_version_info__ = {
"customComponents": true,
"fixZeroRpx": true,
"propValueDeepCopy": false
};
var $gwxc
var $gaic = {}
$gwx = function(path, global) {
// $gwx 方法定義（最核心）
}
var BASE_DEVICE_WIDTH = 750;
var isIOS = navigator.userAgent.match("iPhone");
var deviceWidth = window.screen.width || 375;
var deviceDPR = window.devicePixelRatio || 2;
function checkDeviceWidth() {
// checkDeviceWidth 方法定義
}
checkDeviceWidth()
var eps = 1e-4;
function transformRPX(number, newDeviceWidth) {
// transformRPX 方法定義
}
var setCssToHead = function(file, _xcInvalid) {
// setCssToHead 方法定義
}
setCssToHead([])(); // 先清空 Head 中的 CSS
setCssToHead([...]); // 設(shè)置 app.wxss 的內(nèi)容到 Head 中，其中 ... 為小程序工程中 app.wxss 的內(nèi)容
var __pageFrameEndTime__ = Date.now()
</script>
</head>
<body>
<div></div>
</body>
</html>
相比其他文件， page-freme.html 比較復(fù)雜，微信把 .wxml 和部分 .wxss 直接“編譯”并混淆成 JS 代碼放入上述文件中，然后通過調(diào)用這些 JS 代碼來構(gòu)造 Virtual-Dom ，進(jìn)而渲染頁面。 其中最核心的是 $gwx 和 setCssToHead 這兩個方法。 $gwx 用于通過 JS 代碼生成所有 .wxml 文件，其中每個 .wxml 文件的內(nèi)容結(jié)構(gòu)都在 $gwx方法中被定義好并混淆了，我們只要傳給它頁面的 .wxml 路徑參數(shù)，即可獲取到每個 .wxml 的內(nèi)容，再簡單加工一下即可還原成“編譯”前的內(nèi)容。 在 $gwx 中有一個 x 數(shù)組用于存儲當(dāng)前小程序都有哪些 .wxml 文件，例如，“知識小集”小程序的 x 值如下： var x = ['./pages/detail/detail.wxml', '/towxml/entry.wxml', './pages/index/index.wxml', './pages/search/search.wxml', './towxml/entry.wxml', '/towxml/renderTemplate.wxml', './towxml/renderTemplate.wxml']; 此時我們可以在 Chrome 中打開 page-freme.html 文件，然后在 Console 中輸入如下命令，即可得到 index.wxml 的內(nèi)容（輸出一個 JS 對象，通過遍歷這個對象即可還原出 .wxml 的內(nèi)容）
$gwx("./pages/index/index.wxml")
setCssToHead 方法用于根據(jù)幾段被拆分的樣式字符串?dāng)?shù)組生成 .wxss 代碼并設(shè)置到 HTML 的 Head 中，同時，它還將所有被 import 引用的 .wxss 文件（公共 xxxCommon.wxss 樣式文件）所對應(yīng)的樣式數(shù)組內(nèi)嵌在該方法中的 _C 變量中，并標(biāo)記哪些文件引用了 _C 中數(shù)據(jù)。另外在 page-freme.html 文件的末尾，調(diào)用了該方法生成全局 app.wxss 的內(nèi)容設(shè)置到 Head 中。 因此，我們可以在每個調(diào)用 setCssToHead 方法的地方提取相應(yīng) .wxss 的內(nèi)容并還原。 對于 page-freme.html 文件中 $gwx 和 setCssToHead 這兩個方法更詳細(xì)的分析，可以參考這篇 文章 。 此外， checkDeviceWidth 方法顧明思議，用于檢測屏幕的寬度，其檢測結(jié)果將用于 transformRPX 方法中將 rpx 單位轉(zhuǎn)換為 px 像素。 rpx 的全稱是 responsive pixel ，它是小程序自己定義的一個尺寸單位，可以根據(jù)當(dāng)前設(shè)備屏幕寬度進(jìn)行自適應(yīng)。小程序中規(guī)定，所有的設(shè)備屏幕寬度都為 750rpx ，根據(jù)設(shè)備屏幕實(shí)際寬度的不同， 1rpx 所代表的實(shí)際像素值也不一樣。 *.html上面提到，每個頁面的 page.wxss 樣式文件，“編譯”后將分別在各自的所在路徑下生成一個 page.html 文件，每個 page.html 的結(jié)構(gòu)如下：
<style></style>
<page></page>
<script>
var __setCssStartTime__ = Date.now();
setCssToHead([...])() // 設(shè)置 search.wxss 的內(nèi)容
var __setCssEndTime__ = Date.now();
document.dispatchEvent(new CustomEvent("generateFuncReady", {
detail: {
generateFunc: $gwx('./pages/search/search.wxml')
}
}))
</script>
在該文件中通過調(diào)用 setCssToHead 方法將 .wxss 樣式內(nèi)容設(shè)置到 Head 中，所以同樣地，我們可以根據(jù) setCssToHead 的調(diào)用參數(shù)提取每個頁面的 page.wxss 。 資源文件小程序工程中的圖片、音頻等資源文件在“編譯”后將直接被拷貝到 .wxapkg 包中，其原始的路徑也保留不變，因此我們可以直接使用。 “反編譯”在上一節(jié)，我們完成了 .wxapkg 包幾乎所有文件內(nèi)容的簡要分析。現(xiàn)在我們介紹一下如何通過 node.js 腳本幫我們還原出小程序的源碼。 在這里需要再次感謝 wxappUnpacker 作者提供的還原工具，讓我們可以“站在巨人的肩膀上”輕松地去完成“反編譯”。它的使用如下：
同時，作者還提供了 一鍵 解包并還原的腳本，你只需要提供一個小程序的 .wxapkg 文件，然后執(zhí)行如下命令： node wuWxapkg.js [-d] <path/to/.wxapkg> 此腳本就會自動將 .wxapkg 文件解包，并將包中相關(guān)的已被“編譯/混淆”的文件自動地恢復(fù)原狀（包括目錄結(jié)構(gòu)）。 PS: 此工具依賴 uglify-es , vm2 , esprima , cssbeautify , css-tree 等 node.js 包，所以你可能需要 npm install xxx 安裝這些依賴包才能正確執(zhí)行。 更詳細(xì)的用法及相關(guān)問題請查閱該開源項(xiàng)目的 GitHub repo。 最后，我們在 微信開發(fā)者工具 中新建一個空小程序工程，并將上述還原后的相關(guān)目錄文件導(dǎo)入工程，即可編譯運(yùn)行起來，如下圖為“知識小集”小程序 .wxapkg 還原后的代碼工程：
以上，大功告成！ 總結(jié)本文詳細(xì)分析了 .wxapkg 解包后的各文件結(jié)構(gòu)，并介紹了如何通過腳本“一鍵還原”得到任意小程序的源碼。 對于一些簡單的，且使用微信官方介紹的原生開發(fā)方式開發(fā)的小程序，用上述工具基本可以直接還原得到可運(yùn)行的源碼，但是對于一些邏輯復(fù)雜，或者使用 WePY 、 Vue 等一些框架開發(fā)的小程序，還原后的源碼可能會有一些小問題，需要我們?nèi)巳馊シ治鼋鉀Q。 后續(xù)本文對小程序源碼“編譯”后的各文件內(nèi)容結(jié)構(gòu)及用途的分析相對比較零散，而且沒有對各文件的依賴關(guān)系及加載邏輯進(jìn)行研究，后續(xù)我們再寫一些文章講解微信客戶端是如何解析加載小程序 .wxapkg 包并運(yùn)行起來。 |
