微信小程序“反编译”实战(二):源代码还原(上)

在上一篇文章《微信小程序“反编译”实战（一）：解包》中，我们详细介绍了如何获取。wxapkg包的某个小程序，并分析了其结构。wxapkg包。最后，我们通过脚本解压得到包中的文件：小程序“编译”后的代码文件和资源文件。但由于这些文件大多比较混乱，可读性较差，本文将进一步分析，尽量放得下。

注：本文包含部分源代码分析。因为手机屏幕小，阅读体验可能不好。建议在电脑上浏览。

特别感谢：下面使用的恢复工具来自GitHub上的开源项目wxappUnpacker。感谢原作者的无私贡献。

概览

我们知道前端Web页面编程采用HTML CSS JS的组合，其中HTML用来描述页面的结构，CSS用来描述页面的外观，JS通常用来处理页面逻辑和用户之间的交互。同样，在小程序中也有相同的角色。一个小程序项目主要包括以下类型的文件：

的Json配置文件。以jsON后缀、wxml后缀的WXML模板文件、wxss后缀的WXSS样式文件、JS后缀的JavaScript脚本逻辑文件为例，“Knowledge Collection”的小程序源代码工程结构如下：

但是，根据上一篇文章的介绍，在打开包装后。在“知识收集”小程序的wxapkg中，可以获得以下文件：

主要包括app-config.json、app-service.js、page-frame.html、*等。html、资源文件等。但是这些文件已经被“编译混淆”了，重新组合压缩了一遍，微信开发者工具也无法识别，所以不能直接调试/编译。

因此，首先，我们尝试分析从中提取的每个文件内容的结构和目的。wxapkg，然后介绍如何使用脚本工具一键“编译”前将它们还原到源代码，然后在微信开发者工具中运行。

文件分析

本节主要取未包装的。以“知识收集”小程序的wxapkg源文件为例进行分析。

您也可以跳过这一节的分析，直接进入下一节介绍“反编译”脚本以恢复源代码。

app-config.json

小程序项目主要包括JSON配置项目. config.json、全局配置app.json和页面配置page.json其中：

Project.config.json主要用于开发者工具的个性化配置和小程序项目的一些基本配置，所以不会“编译”到。wxapkg包。

App.json是当前小程序的全局配置，包括所有页面路径、界面表示、网络超时、底部标签等。小程序的。

Page.json用于配置每个页面的窗口表示，页面中的配置项将覆盖app.json窗口中相同的配置项

因此，“编译”文件app-config.json实际上是app.json和各页面配置文件的汇总，其内容大致如下：

{'page': {//每页配置' pages/index/index . html ' : {/一页地址' window': {//一页特定配置' navigationBarTitleText ' : ' 3360 '知识集合'，启用下拉刷新' : true}}，//此处省略.}，' entry page path ' : ' Pages/index . html '，//applet entry address ' Pages ' :[' Pages/index/index '，Pages/detail/detail '，//page list ' global ' : {//global page configuration ' window ' : { '导航栏文本样式' 3360' black '，' NavigationBarTitleText ' : ' Knowledge Collection '，' Navigation barbakgroundcolor ' 3: ' # f860 '