背景:从微信小程序源码上线后,网上一直有大神写程序来反编微信小程序的源码,不过现在来看基本都不能用了,有的能用也不能获取样式wxss文件,经过我的不懈努力,找到一些办法,接下来我会一步步讲。
反编译步骤及工具:
工具:夜神模拟器、node环境、反编工具
1、开启夜神,在夜神中下载微信、RE文件管理器并安装
2、打开RE文件管理器,设置里面开启root权限
3、登录微信、打开你要反编的微信小程序,开启即可,如果是带分包的小程序最好都点点,把分包也加载回来(备注:这一步会很卡,我也是登录了好几次才登录上微信、小程序更是开了五次才打开,期间不断重启,恶心人。)
4、使用RE浏览器找到小程序.wxapkg文件 具体路径在 /data/data/com.tencent.mm/MicroMsg/一串32位的16进制字符串文件夹/appbrand/pkg/
5、压缩成zip文件,通过微信发给朋友,至此电脑下包工作结束(注意:一定要等发送成功再下机)
6、反编译脚本链接:https://pan.baidu.com/s/1fnMRnn2Jcq2RPv2waOmeNA 提取码:bgyz(网友提供,现在git上很多都没有了)
7、解压已下载好的wxappUnpacker,然后进入该文件夹,复制该文件夹的地址,然后以管理员身份打开cmd窗口(直接按win+R打开运行窗口,然后输入cmd,按ctrl+shift+enter),然后跳转到wxappUnpacker内,如下所示:
注意一定要管理员身份运行cmd窗口,否则后面可能造成命令执行出错。
然后开始安装依赖,按顺序执行以下命令:
npm install esprima
npm install css-tree
npm install cssbeautify
npm install vm2
npm install uglify-es
npm install js-beautify
8、完成后在wuWxapkg.js同级目录内运行如下命令进行反编译小程序包;
输入node wuWxapkg.js 后,将上面解包后的.wxapkg文件拖放到命令窗口可以自动识别路径
最终的命令例如下:
node wuWxapkg.js E:\Project\wxappUnpacker\testpkg\_1174665696_27.wxapkg
此时,报错: Unexpected end of input(查资料说是因为微信更新导致的,很久了,网上的工具都是这样)
重点来了:此时得到的文件,只是没有css样式,其他都在,不过我们不能止步于此
获取css样式:
1、找到源码中 page-frame.html 文件,将其拖拽到浏览器中,并打开F12调试
2、vscode中搜索 __wxAppCode__
3、在调试工具中执行:
__wxAppCode__["pages/index/index.wxss"]("",{deviceWidth:375},document.body)
此时页面上就会输出以 375 iPhone6尺寸的css样式,因为用小程序用的rpx是根据设备宽度转换的。
4、把样式粘回指定的文件里,即可(注意:第三步的路径就是粘回去的文件路径、文件要自己创建, app.wxss只能从里面自己复制出了)
5、在微信小程序开发工具中,大家获取的wxss样式文件,右键“格式化文档”,即可格式化样式。
自此完整获取了微信小程序源码