小程序前端反编译教程–小白笔记从零开始（7）

前面我们详细介绍了如何获取某一个小程序的 .wxapkg 包，以及分析了 .wxapkg 包的结构，最后通过脚本解压获取包中的文件：小程序“编译”后的代码文件和资源文件，但是由于这些文件大部分被混淆了，可读性很差，所以本文将进一步分析，尽可能地把 .wxapkg 包的内容还原为“编译”前的内容。

特别感谢：下文使用的还原工具来自于 GitHub 上的开源项目 wxappUnpacker，在此特别感谢原作者的无私贡献。

分包文件介绍：

第一步：解包 XXXXXXX.wxapkg

把获取到的 XXXXXXX.wxapkg，放到 wxappUnpacker 文件同目录，开始解包，获得一个 XXXXXXX 文件夹

这个文件夹里面已经自动出现 N多内容

解包命令：

cd /

cd rr\wxappUnpacker-master

node wuWxapkg.js XXXXXXX.wxapkg

分包.wxapkg文件第一次解出来之后有：app-service.js， page-frame.js还有pages文件夹里面的html文件

第二步：app-service.js可以解出来js文件

解包命令：

node wuJs.js app-service.js

**** app-service.js 把这个需要解开的 app-service.js 放到 wxappUnpacker 文件同目录

第三步：page-frame.js可以解出来wxml文件

解包命令：

node wuWxml.js page-frame.js

**** page-frame.js 把这个需要解开的 page-frame.js 放到 wxappUnpacker 文件同目录

但是没有wxss文件，在微信小程序官方介绍也说了小程序的wxml和wxss混淆了，混淆之后就是在我们提取的html文件里面。

所以现在单独解pages里面的 html就能把wxss提取出来

第四步：html 解包还原命令：

由于部分文件夹解出来以后，只有一个 xxx.html 和 xxx.json

缺少 xxx.wxml 缺少 xxx.js 缺少 xxx.wxcss，用 html 还原出来就是缺少的这3个

node wuWxss.js 小程序分包名称\pages文件夹

第五步：还原 html 并做最后整理

最后整理的时候把html文件删了，如果在上传小程序的时候还提示代码包过大，就直接整理下解包文件或者压缩下图片大小。

最简单的办法，就是把一些常用，并且一般都不会去改变的图片，改为远程图片，删除本地代码包里面的图片（大图）

假设，一张图片 bg.jpg 有 80 kb ，我们又不能直接删除这张图片，又想节约80kb 空间，怎么办？

编译工具里面，全局搜索，找到 bg.jpg 这张图片，一般路径是 ../../images/bg.jpg 这样写的，然后你就这样做；

把图片传到你的网站或者 OSS，那么，这张图片就可以通过https://xxxxxxxxx/bg.jpg 访问了嘛；

把编译工具里面找到的 ../../images/bg.jpg 替换成 https://xxxxxxxxx/bg.jpg ；

然后删除本地代码文件夹里面的 bg.jpg 是不是，就大功告成了？？

图片[1]-小程序前端反编译教程–小白笔记从零开始（7）–梳理回顾-共赢传播官博 ||

利用上面的方法和步骤，成功获取人人商城前端代码、禾匠商城等多个小程序，还完美运行，没有一个报错；

志汇同城，最简单，一个命令，解开 xxxx.wxapkg ，就OK 了

文章版权归作者所有，未经允许请勿转载。

THE END

小程序前端反编译教程–小白笔记从零开始 （7）–梳理回顾