前言：小程序开发中偶尔会碰到一些功能需求或效果，但不知道具体的实现方案，在搜索引擎中也不知道到用更加准确的关键字获取搜索信息。这时直接扒下别人的源码阅读、调试学习是最快速有效的方式，在前端网页开发中这种方式也已经屡试不爽。
 

一、获取小程序源文件包

通过微信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) {}
}

解决该报错后我们就可以进入反编译后的小程序了

接下来就可以在开发工具中调试学习了！