微信小程序“反编译”实战（一）：解包

水深无声 2022-05-25 09:35 2265阅读 0赞

> **小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java线上bug实时监控。真的是一个很好用的bug监控服务，众多大佬公司都在使用。**

我们知道，在微信开发者工具中开发完小程序后，我们点击“上传”按钮，微信开发者工具会进行“编译”，对 JS 代码进行压缩混淆以及对 `wxml`、`wxss` 和资源文件等进行整合打包成一个 `.wxapkg` 文件上传给微信服务器。

所以要“反编译”小程序，首先我们要获取到小程序对应的 `.wxapkg` 包。

之前在 V2EX 上有一篇文章 `https://www.v2ex.com/t/419056` 介绍了如何通过某 URL 直接下载每个小程序的 `.wxapkg`，但很快被微信封了。

因此，我们只能从手机端入手，在手机上找到微信客户端下载保存在本地的小程序包。

## 获取小程序的 .wxapkg 文件 ##

工具：一台已越狱的 `iPhone` 手机或者已 `Root` 的 `Android` 手机

> 本文以 `iPhone 4S`, `iOS 8.4.1` 为例，微信版本 `v6.6.6`。

在已越狱的 `iPhone` 上打开 `Cydia`，搜索并安装 `iFile` 或者 `Filza` 等文件浏览 `App`，打开 `iFile` 或者 `Filza`，跳转到本地 App 安装目录：`/var/mobile/Containers/Data/Application/`，此时，你可以看到当前 `iPhone` 上已安装的 `App` 列表，如下图所示：

![1][]

找到“微信”的目录（我手机上对应的是：297286CE-9055-400A-99FA-D2D7C0735DCF 文件夹），点击进入，即为微信在此 `iPhone` 上的“沙盒”（`Sandbox`），相信 `iOS` 开发者对此目录已经非常熟悉了，该目录下主要有 `Documents`、`Library` 和 `tmp` 等文件夹，通常用于存放不同的数据和文件，这里不再赘述。我们在当前微信“沙盒”目录中搜索 `wxapkg` 关键字，即可找到当前 `iPhone` 中微信已下载的小程序包，如下图：

![1 1][]

我们发现搜索到的 `.wxapkg` 文件名都是以数字命名的，如图中的 `2.wxapkg` 和 `25.wxapkg`，它们的命名有什么规则呢？又放在哪呢？我们接着往下看。

经过简单分析我们发现，微信下载的小程序包存放在以下目录：

/path/to/WeiChat SandBox/Library/WechatPrivate/{UserId}/WeApp/LocalCache/release/

其中，`{UserId}` 为当前登录的微信账号 `Id` 的 `MD5` 值（32 位字符串），例如我手机上小程序包存放的完整目录为：

/var/mobile/Containers/Data/Application/297286CE-9055-400A-99FA-D2D7C0735DCF/Library/WechatPrivate/c15d9cced65acecd30d2d6522df2f973/WeApp/LocalCache/release/

该目录的内容如下图所示：

![1 2][]

目录中有一系列以 `wx...` 开头的文件夹，这些 `wx...` 的 18 位字符串即为每个小程序对应的 `AppId`，在每个 `wx...` 文件夹中都放着当前小程序对应的 `.wxapkg` 包，它以数字命名，**数字代表着当前包为开发者第几次发布的**（它与开发者在发布小程序时指定的版本号是不同的），例如我们的“知识小集”小程序一共发布了两个版本，所以 `wx48...85db` 文件中存放有 `2.wxapkg` 文件：

![1 3][]

另外，我们发现，在 `iOS` 上，微信也为每个小程序分配了一个 `Sandbox` 文件夹用于管理小程序在本地存储的数据和文件，如图：

![1 4][]

其路径为：

/path/to/WeiChat SandBox/Library/WechatPrivate/{UserId}/WeApp/Sandbox/wx...（小程序 AppId）

By The Way，`Android` 手机上小程序包的存放目录为（需 Root 权限才能访问）：

/data/data/com.tencent.mm/MicroMsg/{UserId}/appbrand/pkg/

## 拷贝 .wxapkg 文件到电脑上 ##

通过上述分析，我们可以知道到小程序的压缩包 `.wxapkg` 存放在哪，接下来我们需要将手机上的 `.wxapkg` 文件拷贝到电脑上。

在 iPhone 上打开 `Cydia` 搜索并安装 `OpenSSH` 后，在 `iPhone > 设置 > 无线局域网`中查看你当前手机连接的 `WiFi`，并记录 `IP` 地址，例如我的为：`192.168.1.17`，然后在你的 Mac 电脑上打开终端（与 `iPhone` 连接同一 `WiFi`），就可以通过 `SSH` 登录到你的手机上了（具体的细节详见 `Cydia` 上 `OpenSSH` 下载页面的使用说明）：

ssh root@192.168.1.17

接下来我们就可以通过 `scp` 命令从 `iPhone` 上拷贝文件到我们的电脑上了，例如，在我的 `Mac` 上的命令行里执行（不需要 `ssh` 登录到 `iPhone` 上，直接在 `Mac` 的终端上执行）：

scp root@192.168.1.17:/var/mobile/Containers/Data/Application/297286CE-9055-400A-99FA-D2D7C0735DCF/Library/WechatPrivate/c15d9cced65acecd30d2d6522df2f973/WeApp/LocalCache/release/wx48...85db/2.wxapkg /Users/Zubin/Desktop/WeApp/

就可以把“知识小集”小程序的包 `2.wxapkg` 拷贝到我 Mac 桌面上的 `WeApp` 文件夹中了。

当然，如果你的电脑有安装 `iTool` 或者 `PP助手` 之类的工具，当连接已越狱的 `iPhone` 好像可以直接访问手机上的目录和文件，可能就不用这么麻烦了（未验证）。

## .wxapkg 解包 ##

上述费了很大周折我们终于拿到每个小程序的 `.wxapkg` 包，接下来我们可以对它进行分析了。首先 `.wxapkg` 文件到底是什么呢？你可能会认为它就是类似 Android 的 `.apk` 或者 iOS 的 `.ipa` 安装包，本质上是一个 `.zip` 压缩包？**其实不是的！**，它是一个二进制文件，实际的文件结构如下图：

![1 5][]

图片取自文章 [微信小程序源码阅读笔记][Link 1]，同时此文章的作者也提供了解包的脚本（各种语言的）放在了 [GitHub][] 上：

![1 6][]

我下载了 `Python 2` 的解包脚本，与 `.wxapkg` 文件放在一个目录，然后在命令行里执行如下命名即可得到解包后的文件：

python unwxapkg.py 2.wxapkg

以“知识小集”小程序为例，解包后得到的文件目录如下（已经基本与我开发“知识小集”小程序的工程目录一致了）：

![1 7][]

每个小程序解包后的文件都大同小异，主要包含如下文件：

*  `app-service.js`: 小程序工程中所有 JS 文件的汇总，已被混淆；
 *  `app-config.json`: 小程序工程 `app.json` 以及各个页面的 JSON 配置文件汇总，可直接查看；
 *  `page-frame.html`: 所有页面的 `.wxml` 和 `app.wxss` 样式文件的汇总，可读性差，需要还原；
 *  `*.html`: 包含每个页面对应的 `.wxss` 信息，可读性较好；
 *  `资源文件`: 各类图片、音频等资源文件

## 总结 ##

本文主要介绍了如何获取小程序的 `.wxapkg` 包文件，以及如何解包获得小程序“编译”混淆后的代码和资源文件。在下一篇文章《微信小程序“反编译”实战（二）：源码还原》将介绍如何将 `.wxapkg` 包内内容还原为"编译"前的内容。

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。  
自从2016年双十一正式上线，Fundebug累计处理了6亿+错误事件，得到了Google、360、金山软件等众多知名用户的认可。欢迎免费试用！

**您可能感兴趣的：**

*  [Fundebug上线微信小游戏错误监控！支持自动截屏！][Fundebug 1]

*  [黑科技！Fundebug支持网页录屏!][Fundebug 2]
 *  [Async/Await替代Promise的6个理由][Async_Await_Promise_6]
 *  [30个极大提高开发效率的VS Code插件][30_VS Code]
 *  [10个JavaScript难点][10_JavaScript]
 *  [2018前端工程师成长路线图][2018]
 *  [Source Map入门教程][Source Map]
 *  [2018年最值得关注的30个Vue开源项目][2018_30_Vue]
 *  [10个最佳ES6特性][10_ES6]
 *  [重新思考单元测试][Link 2]
 *  [不要争了！技术选择没那么重要][Link 3]

链接：https://juejin.im/post/5af17b72518825383611ac38

[Fundebug]: https://www.fundebug.com/
[1]: https://user-gold-cdn.xitu.io/2018/5/8/1633f4acce9e1d80?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 1]: https://user-gold-cdn.xitu.io/2018/5/8/1633f4acce4fa6e7?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 2]: https://user-gold-cdn.xitu.io/2018/5/8/1633f4acce02b767?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 3]: https://user-gold-cdn.xitu.io/2018/5/8/1633f4acce15a37a?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 4]: https://user-gold-cdn.xitu.io/2018/5/8/1633f4acd3be1bb3?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 5]: https://user-gold-cdn.xitu.io/2018/5/8/1633f4acd4b02a4a?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[Link 1]: https://link.juejin.im?target=http%3A%2F%2Flrdcq.com%2Fme%2Fread.php%2F66.htm
[GitHub]: https://link.juejin.im?target=%2560https%3A%2F%2Fgithub.com%2Fleo9960%2Fwechat-app-unpack
[1 6]: https://user-gold-cdn.xitu.io/2018/5/8/1633f4ad05267df1?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 7]: https://user-gold-cdn.xitu.io/2018/5/8/1633f4ad053b1ae7?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[Fundebug 1]: https://blog.fundebug.com/2018/05/04/fundebug-support-wechat-game/
[Fundebug 2]: https://blog.fundebug.com/2018/05/21/fundebug_release_black_tech_replay/
[Async_Await_Promise_6]: https://blog.fundebug.com/2017/04/04/nodejs-async-await/
[30_VS Code]: https://blog.fundebug.com/2018/07/24/vs-extensions/
[10_JavaScript]: https://blog.fundebug.com/2017/07/17/10-javascript-difficulties/
[2018]: https://blog.fundebug.com/2018/09/04/2018-frontend-roadmap/
[Source Map]: https://blog.fundebug.com/2017/03/13/sourcemap-tutorial/
[2018_30_Vue]: https://blog.fundebug.com/2018/05/29/30-amazing-vuejs-open-source/
[10_ES6]: https://blog.fundebug.com/2017/08/21/10-best-es6-feature/
[Link 2]: https://blog.fundebug.com/2017/12/20/rethinking-unit-test/
[Link 3]: https://blog.fundebug.com/2018/07/19/technology-selection-is-not-critical/