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

2020-10-03 19:33:26

总结下还原样式的几个方法

在样式缺失这个问题上已经困扰了好一段时间了,博主在尝试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 标签:


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

本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码
微信小程序

评 论:

好文推荐
极客之路公众号
加入两百人技术交流群
探讨前端、小程序开发及逆向、微信开发...
一起学习,共同成长
添加博主微信回复"加群"
微信情报 更多 >
    每天进步一点点~