微信小程序反编译总结

参考博客

操作步骤

1. 下载node.js
2. 下载 wxappUnpacker https://github.com/ROBOT008/wxappUnpacker 或者自行在github上搜索wxappUnpacker选择下载 或者百度云链接 提取码：hao6
3. 在cmd中切换到wxappUnpacker的目录下，输入以下命令安装依赖(百度云下载可以不执行这一步)，会创建一个 node_modules 的文件夹：

npm install esprima --save npm install css-tree --save npm install cssbeautify --save npm install vm2 --save npm install uglify-es --save npm install js-beautify --save npm install escodegen --save npm install cheerio --save 

4. 下载安卓模拟器，登录微信并打开微信小程序
5. 找到文件路径 /data/data/com.tencent.mm/MicroMsg/{User}/appbrand/pkg 其中{User} 为当前用户的用户名，类似于 2bcb65
6. 文件后缀为.wxapkg就是微信小程序的’包’，发送这样的文件到电脑，如果发送不了就压缩一下。
7. 解析主包命令执行命令 node wuWxapkg.js testpkg/master-xxx.wxapkg（主包）
   解析子包命令执行命令 node wuWxapkg.js testpkg/sub-1-xxx.wxapkg -s=../master-xxx
   注：-s参数可为相对路径或绝对路径相对路径的起点不是当前目录 而是子包解包后的目录，如果相对路径的文件夹不存在，就无法产生wxml和js文件到主包的目录

   
   
   
   

├── testpkg │ ├── sub-1-xxx.wxapkg #被解析子包 │ └── sub-1-xxx #相对路径的起点 │ ├── app-service.js │ ├── master-xxx.wxapkg #被解析主包 │ └── master-xxx # ../master-xxx 就是这个目录 │ ├── app.json 

一些说明

1. 在找寻wxapkg包的时候，有一个大约10M的wxapkg的包反编译出来没有pages、lib等文件夹，并且这个包反编译会报This package is unrecognizable或者 not a directory, scandir 'D:\223\__432\WAAutoService.js'错误，这个包有可能是微信小程序运行的一些核心包
2. 分包和主包的文件名下划线后面的数字都是一样，主包的大小要比分包大
   
   
   

遇到的问题

编译报magic number is not correct

编译出来没有wxss文件 vd_version_info is not define

【解决】只需要进wuWxss.js文件里修改一下方法就行，找到function runOnce() 方法，修改成以下代码：

function runOnce() { for (let name in runList) { var start = `var window = window || {}; var __pageFrameStartTime__ = Date.now(); var __webviewId__; var __wxAppCode__={}; var __mainPageFrameReady__ = function(){}; var __WXML_GLOBAL__={entrys:{},defines:{},modules:{},ops:[],wxs_nf_init:undefined,total_ops:0}; var __vd_version_info__=__vd_version_info__||{}; $gwx=function(path,global){ if(typeof global === 'undefined') global={};if(typeof __WXML_GLOBAL__ === 'undefined') {__WXML_GLOBAL__={}; }__WXML_GLOBAL__.modules = __WXML_GLOBAL__.modules || {}; }`; runVM(name, start + " \r\n" + runList[name]); } } 

修改wxWxss文件的runVm函数 ，改为

function runVM(name, code) { let wxAppCode = {}; let handle = {cssFile: name}; let gg = new GwxCfg(); let tsandbox = { $gwx: GwxCfg.prototype["$gwx"], __mainPageFrameReady__: GwxCfg.prototype["$gwx"], //解决 $gwx is not defined __vd_version_info__: GwxCfg.prototype["$gwx"], //解决 __vd_version_info__ is not defined __wxAppCode__: wxAppCode, setCssToHead: cssRebuild.bind(handle) } let vm = new VM({sandbox: tsandbox}); vm.run(code); for (let name in wxAppCode) { if (name.endsWith(".wxss")) { handle.cssFile = path.resolve(frameName, "..", name); wxAppCode[name](); } } } 

【未解决】反编译wxss文件时报错 SyntaxError: Unexpected end of input

.wxapkg不是微信小程序的包

【报错】This package is unrecognizable 或者 not a directory, scandir 'D:\223\__432\WAAutoService.js'
【说明】当前反编译的包不是工程文件夹，里面都是微信的基础包，无需还原。

【未解决】Illegal return statement

请选择app.json/project.config.json 的目录

【解决】将项目下的 app-config.json 改名为 app.json

成功截图

手动获取相关的js代码

- `node wuConfig.js 
    ` 将 app-config.json 中的内容拆分到各个文件对应的 .json 和 app.json , 并通过搜索 app-config.json 所在文件夹下的所有文件尝试将 iconData 还原为 iconPath 。 - `node wuJs.js 
    ` 将 app-service.js (或小游戏中的 game.js ) 拆分成一系列原先独立的 javascript 文件，并使用 Uglify-ES 美化，从而尽可能还原编译前的情况。如果是子包的app-service.js,则需要另外处理（和主包的app-service.js保持结构一致定义了__wxAppCode__,并没有`$gwx('init', global);`） - `node wuWxml.js [-m] 
    ` 将编译/混合到 page-frame.html ( 或 app-wxss.js 或 page-frame.js ) 中的 wxml 和 wxs 文件还原为独立的、未编译的文件。如果加上`-m`指令，就会阻止`block`块自动省略，可能帮助解决一些相关过程的 bug 。 - `node wuWxss.js 
    ` 通过获取文件夹{ 
   { 
   dirs}}下的 page-frame.html ( 或 app-wxss.js ) 和其他 html 文件的内容，还原出编译前 wxss 文件的内容。
- `node wuWxapkg.js [-o] [-d] [-s= 
    

      ] 
      
    ` 将 wxapkg 文件解包，并将包中上述命令中所提的被编译/混合的文件自动地恢复原状。如果加上`-o`指令，表示仅解包，不做后续操作。如果加上`-d`指令，就会保留编译/混合后所生成的新文件，否则会自动删去这些文件。同时，前面命令中的指令也可直接加在这一命令上。而如果需要解压分包，请先解压主包，然后执行`node wuWxapkg.js [-d] -s= 
    
 
      
    `，其中`Main Dir`为主包解压地址。除`-d`与`-s`外，这些指令两两共存的后果是未定义的（当然，是不会有危险的）。 

微信小程序中js相关的代码都在 app-service.js中，在下面这段代码中，/bookingSuccess/bookingSuccess.js是js文件名【绿色的】，其中 define()括号中 "use strict"; 和 }); require("/bookingSuccess/bookingSuccess.js");之间的代码为 js文件的内容【红色的】。在 app-service.js文件中，你只需要关心类似于下面这段代码的其他代码，一般在最后。

__wxRoute = ‘/bookingSuccess/bookingSuccess’;__wxRouteBegin = true; wxAppCurrentFile = ‘/bookingSuccess/bookingSuccess.js’; define(“$/bookingSuccess/bookingSuccess.js$“, function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket,Reporter,webkit,WeixinJSCore){ “use strict”; Page({data:{num:0,time:””,shopName:””},onLoad:function(n){this.setData({num:n.num,time:n.time,shopName:n.shopName}),wx.hideShareMenu()},myBooking:function(){wx.redirectTo({url:”/myYuyue/myYuyue”})},onReady:function(){},onShow:function(){},onHide:function(){},onUnload:function(){},onPullDownRefresh:function(){},onReachBottom:function(){},onShareAppMessage:function(){}});
});

require(“$/bookingSuccess/bookingSuccess.js$“);

手动获取wxss

参考 https://blog.csdn.net/weixin_/article/details/

wxss和wxml 的代码在 page-frame.js，例如想获取 /bookingSuccess/bookingSuccess.wxss的内容：

• 将以下代码另存为html文件
• 首先搜索 wxAppCode[’/bookingSuccess/bookingSuccess.wxss’] = setCssToHead，可以看到setCssToHead是一个函数
• 将函数的第一个参数（数组）替换为以下html代码中setCssToHead的第一个参数
• 最后运行html就可以得到wxss

<br><br>结果：<br><br> <script type="text/javascript"> var __wxAppCode__= __wxAppCode__ || { 
     }; var BASE_DEVICE_WIDTH = 750; var isIOS=navigator.userAgent.match("iPhone"); var deviceWidth = window.screen.width || 375; var deviceDPR = window.devicePixelRatio || 2; var checkDeviceWidth = window.__checkDeviceWidth__ || function() { 
      var newDeviceWidth = window.screen.width || 375 var newDeviceDPR = window.devicePixelRatio || 2 var newDeviceHeight = window.screen.height || 375 if (window.screen.orientation && /^landscape/.test(window.screen.orientation.type || '')) newDeviceWidth = newDeviceHeight if (newDeviceWidth !== deviceWidth || newDeviceDPR !== deviceDPR) { 
      deviceWidth = newDeviceWidth deviceDPR = newDeviceDPR } } checkDeviceWidth() var eps = 1e-4; var transformRPX = window.__transformRpx__ || function(number, newDeviceWidth) { 
      if ( number === 0 ) return 0; number = number / BASE_DEVICE_WIDTH * ( newDeviceWidth || deviceWidth ); number = Math.floor(number + eps); if (number === 0) { 
      if (deviceDPR === 1 || !isIOS) { 
      return 1; } else { 
      return 0.5; } } return number; } window.__rpxRecalculatingFuncs__ = window.__rpxRecalculatingFuncs__ || []; var __COMMON_STYLESHEETS__ = __COMMON_STYLESHEETS__||{ 
     } var setCssToHead = function(file, _xcInvalid, info) { 
      var Ca = { 
     }; var css_id; var info = info || { 
     }; var _C = __COMMON_STYLESHEETS__ function makeup(file, opt) { 
      var _n = typeof(file) === "string"; if ( _n && Ca.hasOwnProperty(file)) return ""; if ( _n ) Ca[file] = 1; var ex = _n ? _C[file] : file; var res=""; for (var i = ex.length - 1; i >= 0; i--) { 
      var content = ex[i]; if (typeof(content) === "object") { 
      var op = content[0]; if ( op == 0 ) res = transformRPX(content[1], opt.deviceWidth) + "px" + res; else if ( op == 1) res = opt.suffix + res; else if ( op == 2 ) res = makeup(content[1], opt) + res; } else res = content + res } return res; } var styleSheetManager = window.__styleSheetManager2__ var rewritor = function(suffix, opt, style){ 
      opt = opt || { 
     }; suffix = suffix || ""; opt.suffix = suffix; if ( opt.allowIllegalSelector != undefined && _xcInvalid != undefined ) { 
      if ( opt.allowIllegalSelector ) console.warn( "For developer:" + _xcInvalid ); else { 
      console.error( _xcInvalid ); } } Ca={ 
     }; css = makeup(file, opt); if (styleSheetManager) { 
      var key = (info.path || Math.random()) + ':' + suffix if (!style) { 
      styleSheetManager.addItem(key, info.path); window.__rpxRecalculatingFuncs__.push(function(size){ 
      opt.deviceWidth = size.width; rewritor(suffix, opt, true); }); } styleSheetManager.setCss(key, css); return; } if ( !style ) { 
      var head = document.head || document.getElementsByTagName('head')[0]; style = document.createElement('style'); style.type = 'text/css'; style.setAttribute( "wxss:path", info.path ); head.appendChild(style); window.__rpxRecalculatingFuncs__.push(function(size){ 
      opt.deviceWidth = size.width; rewritor(suffix, opt, style); }); } if (style.styleSheet) { 
      style.styleSheet.cssText = css; } else { 
      if ( style.childNodes.length == 0 ) style.appendChild(document.createTextNode(css)); else style.childNodes[0].nodeValue = css; } return css } return rewritor; } __wxAppCode__['pages'] = setCssToHead([".",[1],"container{background-color:#f7f7f7}\n.",[1],"gray{color:#dcdcdc!important}\n.",[1],"purple{color:#9f8bea!important}\n.",[1],"repair-state-panel,.",[1],"work-sheet-panel{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;margin-top:",[0,15],"}\n.",[1],"repair-state-title,.",[1],"work-sheet-title{color:#888;padding:",[0,5]," 0 ",[0,10]," ",[0,30],"}\n.",],undefined,{ 
     path:"./pages"}); document.write(__wxAppCode__['pages']("",{ 
     deviceWidth:375},document.body))  
     script> 

手动获取html信息

wxml 的代码也在 page-frame.js中，使用wxml.js只能得到wxml的整体架构，但是有很多值为Empty，这是因为解析__WXML_GLOBAL__.ops_cached.$gwx1_1数组失败，手动根据var m0=function(e,s,r,gg)函数的执行过程还原