鉴于同事执行了删除代码的疯狂操作，并多次覆盖后，硬盘恢复文件的几率几乎为零，只能另辟蹊跷，所幸之前看到过微信小程序反编译的一篇文章。通过简单的搜索，就找到了相关的文章。根据文章所写，其他的都还算顺利，但是样式文件就迟迟弄不出来。
1反编译
执行wxss反编译程序后获得如下错误：
guess wxss(first turn)...
/users/aimuz/workspace/web/wxappunpacker/node_modules/vm2/lib/main.js:214
throw this._internal.decontextify.value(e);
^
referenceerror: $gwx is not defined
at vm.js:3:3
at script.runincontext (vm.js:134:20)
at vm.run (/users/aimuz/workspace/web/wxappunpacker/node_modules/vm2/lib/main.js:208:72)
at runvm (/users/aimuz/workspace/web/wxappunpacker/wuwxss.js:69:6)
at runonce (/users/aimuz/workspace/web/wxappunpacker/wuwxss.js:86:27)
at array.prerun (/users/aimuz/workspace/web/wxappunpacker/wuwxss.js:166:5)
at cntevent.decount (/users/aimuz/workspace/web/wxappunpacker/wulib.js:17:43)
at iolimit.runwithcb (/users/aimuz/workspace/web/wxappunpacker/wulib.js:81:11)
at agent (/users/aimuz/workspace/web/wxappunpacker/wulib.js:54:14)
at fsreqcallback.readfileafterclose [as oncomplete] (internal/fs/read_file_context.js:53:3)
在翻阅相关的资料后，发现不少人遇到了相同的问题
这简直和我的一毛一样啊。可惜没有解决方法。
偌大的互联网竟然还没有人找到解决问题。
2 分析文件
到了这里可以确认，微信小程序官方应该对小程序进行了升级，导致原反编译工具失效。可是这并不能为难我胖虎，通过 l 进行简单的反混淆后。获得了较为清晰的文件
通过仔细阅读代码后发现了 page-frame.html 文件，包含了样式信息。
__wxappcode__[components/menu/menu.wxss] = setcsstohead([., [1], menubox{ width: 100%; height: , [0, 100], ; position: fixed; bottom: , [0, 0], ; left: , [0, 0], ; display: -webkit-flex; display: flex; background: #fff; padding-top: , [0, 10], ; border-top: , [0, 2], solid #ccc; }\n., [1], menubox ., [1], menu{ width: , [0, 250], ; text-align: center; font-size: , [0, 22], ; color: #8a8a8a }\n., [1], menubox wx-image{ width: , [0, 50], ; height: , [0, 50], ; }\n., [1], menubox ., [1], menu wx-view{ }\n,], undefined, { path: ./components/menu/menu.wxss });
setcsstohead 函数 定义
var setcsstohead = function (file, _xcinvalid, info) {
通过查看 setcsstohead 函数，发现其中有一个 makeup 方法，这个方法是对原来的wxss中rpx进行单位转换，换成通用型的px。
makeup 方法相关的代码
function makeup(file, opt) {
var _n = typeof(file) === number;
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;
}
在这之后又找到了一个 rewritor
rewritor 相关代码
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 + this wxss file is ignored.);
return;
}
}
ca = {};
css = makeup(file, opt);
if (!style) {
var head = document.head || document.getelementsbytagname(head)[0];
window.__rpxrecalculatingfuncs__ = window.__rpxrecalculatingfuncs__ || [];
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;
}
}
并发现setcsstohead最后就是返回了rewritor 方法，由此以及根据上述代码可以猜出，该方法应该主要是还原wxss文件。
3 分析代码
rewritor 拥有三个参数，阅读代码可以得出 suffix 参数是给样式添加前缀，例如原来样式名是 .abc, suffix 参数是 a，那么会拼接成 .aabc。
opt 看代码结构应该是一个对象
style 应该是一个document.node的对象。
通过浏览器直接打开page-frame.html文件，在控制台中输入 __wxappcode__[components/menu/menu.wxss], 看看其返回值
看出，确实是返回一个方法，先不传任何参数，再次输入测试 __wxappcode__[components/menu/menu.wxss]()
直接返回了 undefined
由此说明参数应该必填的，现在输入正确的参数类型尝试 __wxappcode__[components/menu/menu.wxss](,{},document.body)
把代码复制到小程序中，，像素比例竟然放大了。再次翻看一下代码，rewritor又调用了makeup方法，并且用到了设备宽度
改变浏览器宽度后，确实发生了改变
.menubox{ width: 100%; height: 50px; position: fixed; bottom: 0px; left: 0px; display: -webkit-flex; display: flex; background: #fff; padding-top: 5px; border-top: 1px solid #ccc; }
.menubox .menu{ width: 125px; text-align: center; font-size: 11px; color: #8a8a8a }
.menubox wx-image{ width: 25px; height: 25px; }
.menubox .menu wx-view{ }
把设备宽度调成了iphone 6的宽度，然后复制小程序里面
再把代码过了一遍之后，了解到 opt 会使用到一个 devicewidth 属性，传入iphone 6的宽度像素，也得到了
__wxappcode__[pages/index/carddetail/carsdetail.wxss](,{devicewidth:375},document.body)
wxss 代码
.menubox{ width: 100%; height: 50px; position: fixed; bottom: 0px; left: 0px; display: -webkit-flex; display: flex; background: #fff; padding-top: 5px; border-top: 1px solid #ccc; }
.menubox .menu{ width: 125px; text-align: center; font-size: 11px; color: #8a8a8a }
.menubox wx-image{ width: 25px; height: 25px; }
.menubox .menu wx-view{ }
但是这个只能在iphone 6上适配啊，需要改成rpx,方能适配其他的设备终端。rpx和px 的转换公式，
rpx = px * 2
px = rpx / 2
经过转换后，问题就完美解决了。