微信反编译（二）源码还原

概览

我们知道，前端 Web 网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描页面的结构，CSS 用来描述页面的样子，JS 通常用来处理页面逻辑和用户的交互。类似地，在小程序中也有同样的角色，一个小程序工程主要包括如下几类文件：

• .json 后缀的 JSON 配置文件
• .wxml 后缀的 WXML 模板文件
• .wxss 后缀的 WXSS 样式文件
• .js 后缀的 JavaScript 脚本逻辑文件

例如“知识小集”的小程序源码工程结构如下：

然而，根据上一篇文章介绍，对“知识小集”小程序的 .wxapkg 解包后得到如下文件：

主要包括 app-config.json, app-service.js, page-frame.html, *.html, 资源文件 等，但这些文件已经被“编译混淆”并重新整合压缩，微信开发者工具并不能识别它们，我们无法直接对它们进行调试/编译运行。

所以，我们先尝试分析一下从 .wxapkg 提取出来的各个文件内容的结构及其用途，然后介绍如何用脚本工具把它们一键还原为“编译”前的源码，并在微信开发者工具中跑起来。

文件分析

本节主要以“知识小集”小程序的 .wxapkg 解包后的源码文件为例，进行分析。

你也可以跳过本节的分析，直接看下一节介绍用脚本“反编译”还原源码。

app-config.json

小程序工程主要包括工具配置 project.config.json，全局配置 app.json 以及页面配置 page.json 三类 JSON 配置文件。其中：

project.config.json 主要用于对开发者工具进行个性化配置以及包括小程序项目工程的一些基础配置，所以它不会被“编译”到 .wxapkg 包中；

app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等；

page.json 用于对每一个页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

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

1. {

2. "page": { // 各页面配置

3. "pages/index/index.html": { // 某一页面地址

4. "window": { // 某一页面具体配置

5. "navigationBarTitleText": "知识小集",

6. "enablePullDownRefresh": true

7. }

8. },

9. // 此处省略...

10. },

11. "entryPagePath": "pages/index/index.html", // 小程序入口地址

12. "pages": ["pages/index/index", "pages/detail/detail", "pages/search/search"], // 页面列表

13. "global": { // 全局页面配置

14. "window": {

15. "navigationBarTextStyle": "black",

16. "navigationBarTitleText": "知识小集",

17. "navigationBarBackgroundColor": "#F8F8F8",

18. "backgroundColor": "#F8F8F8"

19. }

20. }

21. }

通过与原工程 app.json 和各页面配置 page.json 内容的对比，我们可以得出 app-config.json 汇总文件的简单整合规律，很容易把它拆分成“编译”前对应的各 json 文件。