微信小程序反编译 wxss 丢失问题

鉴于同事执行了删除代码的疯狂操作，并多次覆盖后，硬盘恢复文件的几率几乎为零，只能另辟蹊跷，所幸之前看到过微信小程序反编译的一篇文章。通过简单的搜索，就找到了相关的文章。根据文章所写，其他的都还算顺利，但是样式文件就迟迟弄不出来。

微信小程序反编译可以参考

https://github.com/qwerty472123/wxappUnpacker

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)

在翻阅相关的资料后，发现不少人遇到了相同的问题

• https://github.com/qwerty472123/wxappUnpacker/issues/187

这简直和我的一毛一样啊。可惜没有解决方法。

偌大的互联网竟然还没有人找到解决问题。😞

2 分析文件

到了这里可以确认，微信小程序官方应该对小程序进行了升级，导致原反编译工具失效。可是这并不能为难我胖虎，通过

http://jsnice.org/工具对page-frame.html

进行简单的反混淆后。获得了较为清晰的文件

通过仔细阅读代码后发现了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参数是，那么会拼接成.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

微信相关文档:
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#wxss

经过转换后，问题就完美解决了。

本文链接：https://aimuz.me/wei-xin-xiao-cheng-xu-fan-bian-yi-wxss-diu-shi-wen-ti.html