谈一谈还原解包后小程序页面wxss样式的若干方法

在样式缺失这个问题上已经困扰了好一段时间了,博主在尝试N次之后总结了一些提取方法。
下面就按可操作性由繁到简介绍这几种方法。

提取的样式出处:
通过上文聊一聊微信小程序包内容,大家应该知道了,所有的页面样式都是统一打包到如下几个文件里的。提取也是从这些文件里面去查找。
执行命令 node wuWxapkg.js-o xxx.wxapkg 之后去找如下文件:

  • page-frame.html

  • app-wxss.js

1.纯天然手工提取????????

就像名字所说,直接打开源文件,搜索样式缺失文件名,然后手工提取wxss样式️
watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=,博主表示:"同学你很 brave~ "

2.半手动提取

这里具体还要分两种情况,取决于源文件

1.源文件为 page-frame.html 的情况

①使用浏览器(最好是谷歌)打开 page-frame.html
②打开开发者工具(右键选择审查元素或者按F12或者从设置打开)
③在控制台输入类似下面的代码,这里以某个包的 wxParse.wxss 文件为例

  •  

setCssToHead(__COMMON_STYLESHEETS__["./wxParse/wxParse.wxss"])("",{deviceWidth:375},document.body)

按回车之后执行结果️
watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=这样你要的样式就显示在网页上了,复制出来即可。

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 平台的同学也不用管文件夹名的特殊字符问题了。

上一篇:小程序插屏广告代码
下一篇:中国城市电话区号对照表,电话区号域名表
相关文章:
小程序插屏广告代码
小程序生命周期(onLaunch、onShow、onHide、onReady、onLoad、onUn
微信小程序反编译 wxss反编译不成功的解决方法
微信小程序wx.setstoragesync设置有效时间及缓存过期时间
微信小程序解决ios上createInnerAudioContext播放没声音的问题
微信小程序云函数实现文本,图片敏感内容过滤
微信小程序云开发云函数http请求的两种写法request
利用node反编译最新微信小程序解包wxapkg