前言:小程序开发中偶尔会碰到一些功能需求或效果,但不知道具体的实现方案,在搜索引擎中也不知道到用更加准确的关键字获取搜索信息。这时直接扒下别人的源码阅读、调试学习是最快速有效的方式,在前端网页开发中这种方式也已经屡试不爽。
一、获取小程序源文件包
通过微信pc端启动小程序,点击小程序尽量多的页面(小程序过大时可能存在很多分包,启动小程序时一般只会下载主包,点击足够多的页面可以保证分包也被下载),然后小程序则会缓存在本地路径。
二、解密小程序包
反编译之前需要先解密小程序包。打开解密软件,找到目录中的对应源文件夹,文件夹是以小程序appId命名的。
分两次分别解密主包和分包,分包解密后的文件记得重命名,否则会重名覆盖。
三、反编译小程序
反编译的功能是使用node实现的,进入 wxappUnpacker-master
项目目录,在该目录路径启动 cmd
窗口,然后把解密后的包放入该项目 pkg
目录。
先反编译主包,在 cmd
中运行命令 bingo.bat pkg/wx3cb474a0bbb784ee.wxapkg
,执行成功后会在小程序包同级目录中生成类似小程序项目的文件夹。
上图可以看出 pagesA
文件夹中的文件没有实质代码,这是因为 pagesA
和 pagesB
文件夹中的的代码在各自的分包中。因为前面运行小程序时没有点击进入所有的页面,所有本地只缓存了一个分包 pagesA
。
接下来我们反编译分包(pagesA
分包),在 cmd
中运行命令 node wuWxapkg.js -s=../wx3cb474a0bbb784ee ./pkg/wx3cb474a0bbb784ee_sub.wxapkg
,该分包生成的新的文件覆盖原来的 pagesA
文件夹,这里我们就能看到具体的业务代码了
剩下的就是将该项目代码导入到微信开发工具中。
四、运行项目展示效果
导入到开发工具后,发现报如下报错:
修改一下 @babel/runtime/helpers/typeof.js
文件 全部替换 即可
function _typeof2(o) {
"@babel/helpers - typeof";
return (_typeof2 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
return typeof o;
} : function(o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
})(o);
}
function _typeof(o) {
return "function" == typeof Symbol && "symbol" === _typeof2(Symbol.iterator) ? module.exports = _typeof = function(o) {
return _typeof2(o);
} : module.exports = _typeof = function(o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : _typeof2(o);
}, _typeof(o);
}
module.exports = _typeof;
接下来又出现新的报错,提示变量未定义,该错误需要分析代码手动解决。
分析代码发现该变量为一个对象,包含一个处理异常的方法,所以该对象并不重要,我们可以删掉使用该变量的代码,也可以在相应报错js文件中,按照该对象的结构定义一下该对象,比如:
let VM2_INTERNAL_STATE_DO_NOT_USE_OR_PROGRAM_WILL_FAIL = {
handleException: function(e) {}
}
解决该报错后我们就可以进入反编译后的小程序了
接下来就可以在开发工具中调试学习了!