如何反编译微信小程序前端，30分钟教你学会

反编译环境

操作系统：window10操作系统
微信开发者工具：Stable v1.02.1910120
模拟器：安卓夜神模拟器
NodeJs：v10.8.0
反编译脚本：wxappUnpacker

搭建小程序之前要先准备好服务器，服务器环境：CentOS 7 + 宝塔 + Nginx + php

这里给出云服务器的链接：

腾讯云服务器仅99/年

阿里云服务器仅87/年

准备工作

1、在电脑安装好安卓夜神模拟器，使用过其他模拟器也可，如网易MuMu。
2、安装nodejs环境，自行百度安装
3、打开模拟器，安装好微信和RE文件管理器

获取小程序包

1.  使用自己手机上的微信打开要反编译的小程序；

2.  打开模拟器的微信并登录；

3.  在模拟器微信的下拉小程序最近使用历史中打开要反编译的小程序，如果历史记录中没有就在我的小程序中找一找；

4.  打开小程序等待加载之后就可以去找源码包了；

5.  打开RE文件管理器,按照data/data/com.tencent.mm/MicroMsg依次打开目录，找到文件名格式是一串16进制的字符串（每个人生成的不一样），然后继续进入appbrandpkg。按照你打开小程序的时间就能很快找到你需要的wxapkg文件，将wxapkg文件拷贝到电脑即可。
小程序包路径：/data/data/com.tencent.mm/MicroMsg/4c8188dbf07eec893d0ac90974657aeb(每个人微信不一样)/appbrand/pkg

反编译wxapkg文件

1.进入反编译工具对的根目录，如果没有安装过npm包就先执行安装，如果提示安装依赖包，按照提示安装相关依赖包。
npm install esprima
npm install css-tree
npm install cssbeautify
npm install vm2
npm install uglify-es
npm install js-beautify
2.运行解包命令：node wuWxapkg.js<wxapkg文件路径>
如需要反编译的文件_163200311_32.wxapkg已经解压到了C盘根目录下,那么就输出命令：node .wuWxapkg.js C:_163200311_32.wxapkg
可以看到命令行输出如下提示:

3.如果想单独执行config、js、wxml、wxss的反编译可以在解包时加-o参数不做后续操作
【反编译脚本使用介绍】
node wuConfig.js 将 app-config.json 中的内容拆分到各个文件对应的 .json 和 app.json , 并通过搜索 app-config.json 所在文件夹下的所有文件尝试将 iconData 还原为 iconPath 。
node wuJs.js 将 app-service.js (或小游戏中的 game.js ) 拆分成一系列原先独立的 javascript 文件，并使用 Uglify-ES 美化，从而尽可能还原编译前的情况。
node wuWxml.js [-m] 将编译/混合到 page-frame.html ( 或 app-wxss.js ) 中的 wxml 和 wxs 文件还原为独立的、未编译的文件。如果加上-m指令，就会阻止block块自动省略，可能帮助解决一些相关过程的 bug 。
node wuWxss.js 通过获取文件夹下的 page-frame.html ( 或 app-wxss.js ) 和其他 html 文件的内容，还原出编译前 wxss 文件的内容。
node wuWxapkg.js [-o] [-d] [-s=</wxapkg文件路径>] 将 wxapkg 文件解包，并将包中上述命令中所提的被编译/混合的文件自动地恢复原状。如果加上-o指令，表示仅解包，不做后续操作。如果加上-d指令，就会保留编译/混合后所生成的新文件，否则会自动删去这些文件。同时，前面命令中的指令也可直接加在这一命令上。而如果需要解压分包，请先解压主包，然后执行node wuWxapkg.js [-d] -s=，其中Main Dir为主包解压地址。除-d与-s外，这些指令两两共存的后果是未定义的（当然，是不会有危险的）。

微信开发者工具运行小程序

打开微信开发者工具，导入项目即可，注意小程序的项目设置中：
1、注意勾选不校验合法域名
2、勾掉e6转es5(这个小程序貌似并没有使用es6语法)
运行效果如下图：
 

结束语

至此微信小程序的反编译过程就结束了，仅供学习之用。不懂也可以转发小程序给我，付费帮你反编译。