第一次在掘金一样高的社区写文章,敲开了我在获取小程序源代码过程中的经验分享。
最近在研究微信小程序的开发。经过半个月的学习,真的很想在实战中踩坑,于是复制了一个滴滴小绿橙单车小程序的前端实现。这个过程说来话长,快两个星期过去了。我发现小程序里的坑远比我想象的多!实际上,它完全是黑盒。别人在网上看到小程序的效果纯属猜测。有些效果绞尽脑汁也能大致实现,但有些细节却是费了九牛二虎之力也想不出来的。我很想一睹源代码的风采,看看到底是什么,看看大厂的前端神是如何避开小程序的各种精彩坑的。
于是我想到了获取小程序的源文件,然后反编译还原成源代码作为学习参考。百度拍了各种关于小程序的反编译教程,但我觉得不适合我这样的初学者,踩过不少坑。在这里,我重新简化了快速获取微信小程序源代码并记录下来的方法。
简单聊聊。
ads/allimg/180605/10252R1R-1.png" />就以我说的这款青桔单车的小程序举例(希望滴滴的大神不会想打死我~)
在模拟器微信中运行一下后,直接切回模拟器桌面运行RE浏览器来到目录
/data/data/com.tencent.mm/MicroMsg/{{一串32位的16进制字符串文件夹}}/appbrand/pkg/
就抵达了目的文件夹
你会看到发现里面的一些.wxapkg后缀的文件,就是它们没错啦,可以根据使用的时间来判断那个是你刚才从服务器下载过来的
一般小程序的文件不会太大,可以结合时间来判断,长按压缩所选文件,然后再将压缩好的包通过QQ发送到我的电脑
如果不进行压缩的话,是无法将这个文件通过QQ来发送的
所以QQ的这个功能可以让我们很方便的拿到源文件,而不必到电脑目录去找模拟器的文件目录。
解压。这样几步简单操作,就成功拿到了小程序的源文件了。
到这里你应该已经将反编译脚本从github下载 或者 clone 到本地某个目录
打开nodejs命令窗口
cd 到你clone或者下载好的反编译脚本目录下
在node命令窗口中依次安装如下依赖:
npm install esprimanpm install css-treenpm install cssbeautifynpm install vm2npm install uglify-es
安装好依赖之后,就是最后一步了,反编译 .wxapkg 文件
在当前目录下输入
node wuWxapkg.js [-d] <files...> //files 就是你想要反编译的文件名
例如:我有一个需要反编译的文件_163200311_32.wxapkg已经解压到了D盘根目录下,那么就输出命令
node .wuWxapkg.js D:_163200311_32.wxapkg
回车运行
反编译脚本就能一步将.wxapkg 文件还原为微信开发者工具能够运行的源文件,目录地址和你反编译的文件地址是一样的
然后在微信开发者工具新增项目即可打开
运行成功,源码获取完成
至此我们就通过非常简单的方式获取到了一个想要的小程序源文件,并对齐进行了反编译还原 以后想要再反编译其他的小程序,非常快速,真的只需要两步
使用此方法,绝大部分的小程序都能正常反编译出来,但是也会有一些特殊的情况,具体可以查看qwerty472123大神的readme文件
.apk 之类的文件反编译非常困难,而小程序竟可以如此轻松随意地被获取到源码,根源在于小程序的开发团队并没有对小程序的执行文件进行有效的保护,也就是加密,所以我们才能使用别人写好的脚本直接进行反编译,其过程类似于解压。
实际上,小程序只是很简单的将图片、js和json文件压在一起,而压制的过程就是Wxml -> Html、 Wxml -> JS、Wxss -> Css,转换后文件二进制格式跟后缀名为wx二进制格式完全一致。
上线的源代码能如此简单的被获取到,不得不说小程序的源码安全存在很大的隐患,这一点很多开发者应该也知道,所以发现有些小程序会将重要的js逻辑代码柔在一个js文件中,这样,即使被获取了源码,也不是很容易读懂,但是任然避免不了被窥视的问题。 小程序作为微信生态内的新生力量,不仅被官方,也被很多开发者和内容创业者寄予厚望,处于对代码的安全性的考虑,这个漏洞迟早有一天会被修复(封掉)的。
所以这种这里介绍的获取小程序源码的方法,应该是不会太长久的。