谈一谈还原解包后小程序页面wxss样式的若干方法
总结下还原样式的几个方法
在样式缺失这个问题上已经困扰了好一段时间了，博主在尝试N次之后总结了一些提取方法。 下面就按可操作性由繁到简介绍这几种方法。
1.纯天然手工提取 2.半手动提取 3.自动提取
提取的样式出处：
通过上文聊一聊微信小程序包内容，大家应该知道了，所有的页面样式都是统一打包到如下几个文件里的。提取也是从这些文件里面去查找。
执行命令 node wuWxapkg.js -o xxx.wxapkg 之后去找如下文件：
- page-frame.html
- app-wxss.js
# 1.纯天然手工提取??
就像名字所说，直接打开源文件，搜索样式缺失文件名，然后手工提取wxss样式⬇️
，博主表示："同学你很 brave~ "
2.半手动提取
这里具体还要分两种情况，取决于源文件
1.源文件为 page-frame.html 的情况
①使用浏览器(最好是谷歌)打开 page-frame.html ②打开开发者工具(右键选择审查元素或者按F12或者从设置打开) ③在控制台输入类似下面的代码，这里以某个包的 wxParse.wxss 文件为例
setCssToHead(__COMMON_STYLESHEETS__["./wxParse/wxParse.wxss"])("",{deviceWidth:375},document.body)按回车之后执行结果
这样你要的样式就显示在网页上了，复制出来即可。
2.源文件为 app-wxss.js 的情况
啥玩意儿？？怎么是个JS... 这里观察一下文件内容，可以发现： 整个文件的大部分内容都与 page-frame.html 类似，只是缺少头尾的 html 标签 所以就需要一点特殊操作了 ①复制一份 app-wxss.js 文件改为 app-wxss.html 或者其它什么名字(不重要) ②在app-wxss.html内补齐头尾的 html 标签： 头
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" /> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'"> <link rel="icon" href="data:image/ico;base64,aWNv"> <script> var __mainPageFrameReady__ = window.__mainPageFrameReady__ || function(){};尾
</script> </head> <body> <div></div> </body> </html>③接下来我们按照2.1的①~③的操作来就可以了。
3.自动提取
上面说了这些虽然也能解决问题，但是对于新手来说很不友好，操作上也是比较麻烦的，当然不如用工具自动提取来的方便快捷。
最理想的就是在线解包 这个应该是最佳方案了，打开网址就可以使用。Windows 平台的同学也不用管文件夹名的特殊字符问题了。