总结下还原样式的几个方法
在样式缺失这个问题上已经困扰了好一段时间了,博主在尝试N次之后总结了一些提取方法。
下面就按可操作性由繁到简介绍这几种方法。
提取的样式出处:
通过上文聊一聊微信小程序包内容,大家应该知道了,所有的页面样式都是统一打包到如下几个文件里的。提取也是从这些文件里面去查找。
执行命令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 标签:
头
<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(){};
尾