1.1.0 • Published 8 months ago
web-skeleton-node v1.1.0
web-skeleton-node
骨架屏生成工具
说明
- 骨架图生成组件，在node端使用。该组件提供骨架图生成和骨架图模板能力。
- 骨架图生成逻辑：通过传入页面地址，使用 Puppeteer 无头浏览器打开页面地址，对页面首屏图片和文本等节点进行灰色背景处理，然后对页面首屏进行截图，生成压缩后的 base64 png 图片和加入动画的代码片段。
安装
全局安装
$ npm i web-skeleton-node -g项目中安装
$ npm i web-skeleton-node -D使用方法
添加配置文件
skeleton.config.json:
{
"pageName": "baidu",
"pageUrl": [
"https://baidu.com",
"http://localhost:3000/mine"
],
"device": "iPhone X",
"minGrayBlockWidth": 50,
"minGrayPseudoWidth": 10,
"outputPath": "./demo",
"debug": false,
"debugTime": 3000,
"loading": "shine",
"scripts": "sessionStorage.setItem('userInfo', '1111')",
"cookies": [
{
"domain": ".x.com",
"expirationDate": 1568267131.555328,
"hostOnly": false,
"httpOnly": false,
"name": "tt",
"path": "/",
"sameSite": "unspecified",
"secure": false,
"session": false,
"storeId": "0",
"value": "yyyyyyyyy",
"id": 2
}
]
}全局生成骨架屏
$ skeleton -c ./skeleton.config.json页面 DomReady 之后，会在页面顶部出现红色按钮：开始生成骨架屏。 支持多个页面截屏的操作(pageUrl传入数组) 生成完成后，会在运行目录生成 skeleton-output 文件件，里面包括骨架屏 png 图片、base64 文本、html 文件：
- skeleton-baidu-xxx.png # 骨架图图片
- base64-baidu-xxx.txt # 骨架图 Base64 编码
- skeleton-baidu-xxx.html # 最终生成 HTML
其中 html 文件可以直接拿来用，复制下面位置：
<html>
<head>
<!--- 骨架屏代码 -->
</head>
</html>注意：
- 骨架图默认在 onload 事件后销毁。
- 手动销毁方式：
window.SKELETON && SKELETON.destroy();当然，你也可以在项目中直接使用生成的 Base64 图片
项目中生成骨架屏
在 package.json 中添加脚本：
"scripts": {
"skeleton": "skeleton -c ./skeleton.config.json"
}生成骨架屏：
$ npm run skeleton参数
| 参数名称 | 必填 | 默认值 | 说明 |
|---|---|---|---|
| pageUrl | 是 | - | 页面地址-数组或字符串（此地址必须可访问） |
| pageName | 否 | output | 页面名称（仅限英文） |
| cookies | 否 | 页面 Cookies，用来解决登录态问题 | |
| scripts | 否 | - | 注入的js |
| loading | 否 | shine | 三种动画样式 blink loading shine |
| outputPath | 否 | skeleton-output | 骨架图文件输出文件夹路径，默认到项目 skeleton-output 中 |
| openRepeatList | 否 | true | 默认会将每个列表的第一项进行复制 |
| device | 否 | 空为PC | 参考 puppeteer/DeviceDescriptors.js，可以设置为 'iPhone X' |
| debug | 否 | false | 是否开启调试开关 |
| debugTime | 否 | 0 | 调试模式下，页面停留在骨架图的时间 |
| minGrayBlockWidth | 否 | 0 | 最小处理灰色块的宽度 |
| minGrayPseudoWidth | 否 | 0 | 最小处理伪类宽 |
dom 节点属性
这是获取优质骨架图的要点，通过设置以下几个 dom 节点属性，在骨架图中对某些节点进行移除、忽略和指定背景色的操作，去除冗余节点的干扰，从而使得骨架图效果达到最佳。
| 参数名称 | 说明 |
|---|---|
| data-skeleton-remove | 指定进行移除的 dom 节点属性 |
| data-skeleton-bgcolor | 指定在某 dom 节点中添加的背景色 |
| data-skeleton-ignore | 指定忽略不进行任何处理的 dom 节点属性 |
| data-skeleton-empty | 将某dom的innerHTML置为空字符串 |
示例：
<div data-skeleton-remove><span>abc</span></div>
<div data-skeleton-bgcolor="#EE00EE"><span>abc</span></div>
<div data-skeleton-ignore><span>abc</span></div>
<div data-skeleton-empty><span>abc</span></div>参考： awesome-skeleton
1.1.0
8 months ago