微信小程序“反编译”实战”解包 后面有彩蛋

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

---

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

---

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

---

获取小程序的 .wxapkg 文件

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

---

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

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

 

我们发现搜索到的 .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/

 

---

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

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

 

拷贝 .wxapkg 文件到电脑上

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

---

.wxapkg 解包

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

 

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

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

python unwxapkg.py 2.wxapkg
复制代码

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

 

 

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

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

---

---

---

---

                                          ******彩蛋******

微信PC版更新后， 不必使用安卓模拟器，使用Pc微信打开小程序，即可获取包。

 

一、获取小程序资源包，流程如下

1 微信PC版登录微信
2 使用PC微信打开小程序(此时在电脑里已经加载了该小程序的apkg源码包)
3 此时wxapkg包保存在文件路径
C:\Users{{电脑用户名}}\Documents\WeChat Files\Applet{{小程序AppID}}{{随机产生的数字}}_APP_.wxapkg

 

 

---

少部分小程序反编译，会丢失wxss文件，也就是关键的样式文件。

同时会有报错提示 vd_version_info_ is not defined 该问题是微信升级导致。

解决方案： 修改反编译目录下的wuWxss.js文件,修改RunVm方法为

function runVM(name,code){

let wxAppCode={},handle={cssFile:name};

let tsandbox = {

vd_version_info:"",

gwx:GwxCfg.prototype["gwx:GwxCfg.prototype["gwx:GwxCfg.prototype["gwx"],

mainPageFrameReady:GwxCfg.prototype["$gwx"],

wxAppCode:wxAppCode,

setCssToHead:cssRebuild.bind(handle)

}

let vm = new VM({sandbox:tsandbox});

vm.run(code);

for(let name in wxAppCode){

if(name.endsWith(".wxss")){

handle.cssFile = path.resolve(frameName,"…",name);

wxAppCodename;

}

}

}