微信小程序解包和反编译实战

背景

近年来，微信小程序以其“无需安装、触手可及”的特性，迅速成为开发者和用户的新宠。它们功能丰富，覆盖了从生活服务到游戏娱乐的方方面面。了解其背后的运行机制和代码结构，有助于开发者更好的学习。

本教程旨在为你揭开微信小程序的“神秘面纱”，一步步教你如何找到小程序的代码包（.wxapkg 文件），并利用现有的工具将其还原成可读的源代码。通过这个过程，你不仅能更好地理解小程序的项目结构和代码逻辑，还能学习到一些小程序开发中的优秀实践。

请注意，本教程所有内容仅用于学习和技术研究，切勿用于任何商业目的或侵犯他人知识产权的行为。

1. 准备工作

在开始之前，下载以下工具：

  • Node.js： 运行反编译脚本的环境
  • 微信PC版： 因为小程序包存放在电脑本地的文件夹中
  • 反编译工具： wxappUnpacker、UnpackMiniApp

2. 找到小程序包（.wxapkg文件）

wx电脑版在运行了小程序后，会把代码包（.wxapkg 文件）下载到本地缓存中。在新版的wxPC端中，这些文件位于以下路径：

  • Windows： C:\Users\用户名\AppData\Roaming\Tencent\xwechat\radium\Applet\packages\wxxx
  • macOS： ~/Library/Application Support/com.tencent.xinWeChat/2.0b4.0.9/Applet/

在这些文件夹中，以 Applet 开头的文件夹，每个文件夹代表一个小程序。.wxapkg 文件存储在里面。

提示： 可以在文件管理器或者Everything中搜.wxapkg，按“修改日期”排序，找到最近使用过的小程序包。

image-20250827140821483

3. 反编译工具及环境准备

在终端或命令提示符中使用cd命令切换到下载好的wxappUnpacker文件夹，首先查看是否安装好node.js(没装的自行搜索相关教程)

1
node -v
1
npm -v

image-20250827141417806

接着安装wxappUnpacker所需要的依赖

1
2
3
4
5
6
7
8
9
10
11
npm install esprima
    
npm install css-tree
    
npm install cssbeautify
    
npm install vm2
    
npm install uglify-es
    
npm install js-beautify

image-20250827142622512

4. 开始反编译

首先打开UnpackMiniApp，选择你想反编译的 .wxapkg 文件，如果是加密文件，会在当前目录下生成解密后的.wxapkg文件，如果显示未加密直接跳过这一步：

image-20250827142949657

接着在终端中输入bingo.bat 包路径命令，执行命令后，脚本会自动解包，并将反编译后的文件存放在一个新生成的文件夹中。这个文件夹通常会与 .wxapkg 文件同名。

image-20250827143559436

image-20250827143708465

5. 查看反编译后的代码

反编译成功后，新生成的文件夹里会包含以下内容：

  • .js 文件： 微信小程序中的 JavaScript 脚本。
  • .wxml 文件： 小程序的界面结构文件，类似于 HTML。
  • .wxss 文件： 小程序的样式文件，类似于 CSS。
  • app.json 和 project.config.json 等配置文件： 包含小程序的页面路径、窗口样式等配置信息。
  • 资源文件： 如图片、音频等。

注： 对于一些经过加密或特殊处理的小程序，反编译后的代码可能无法完全恢复，或者部分内容会缺失。

6. 使用微信开发者工具导入代码

解包后的文件夹可以作为一个新项目，在微信开发者工具中打开进行调试编译。

  • 在微信开发者工具中，点击“导入项目”。
  • 选择反编译出来的文件夹。
  • 填写 AppID。
  • 运行和调试小程序。