发表于 2024年6月24日1年前 介绍 Github 开源地址 在开发低代码平台物料的时候, 如果每个组件使用单一 loading ，整个配置化的页面用户体验不太好 单独去开发的话，这么多组件费时费力，所以调研了下自动生成方案的可行性 最终通过解析开发中的 mock 页生成每个组件的骨架屏，经过多个示例以及公司项目实践 生成的骨架屏完全贴合实际页面骨架结构，极大地提升了用户体验与开发效率 示例 官方 Example 示例项目 一个 带有骨架屏效果的 example 页 https://sg.xjq.icu 掘金首页列表示例 使用 项目中使用遵循以下流程 开发的页面或组件完善并保存 mock 数据 在 mock 数据下显示的静态页上预览骨架屏 复制骨架数据结合 骨架屏组件 即是完整骨架屏 Example 中的用户列表是一个完整的使用案例可供参考 https://github.com/xjq7/skeleton-generator/tree/main/packages/example/user-info/user-list 下面是两种不同的接入使用方式 chrome 插件 下载 skeleton-generator.zip 并解压 chrome 浏览器中进入 chrome://extensions/ 点击 加载已解压的扩展程序, 选中 解压的 skeleton-generator 目录 成功加载之后 以 demo 页面为例子 找到需要生成的组件容器 输入到 插件 popup 面板里 这里使用的是 class, 所以最终选择器输入框填 .ED4JZ8zZvzWhoef_o6xc 在页面中右键点击 skeleton-generator 插件 选项中的预览 查看效果 点击复制获取骨架数据 悬浮控制台 在 html 文件 head 标签中添加 script 如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Skeleton-generator example</title> <!-- 直接加载 skgen.toolkit.js 文件 --> <script src="https://image.xjq.icu/2024/6/22/1718990007203_skgen.toolkit.js" defer></script> </head> <body> <div id="root"></div> </body> </html> 在页面右下角自动加载 toolkit 按钮 按钮功能介绍 找到需要生成的组件容器 设置面板输入容器选择器 随后点击预览查看效果
介绍
Github 开源地址
在开发低代码平台物料的时候, 如果每个组件使用单一 loading ，整个配置化的页面用户体验不太好
单独去开发的话，这么多组件费时费力，所以调研了下自动生成方案的可行性
最终通过解析开发中的 mock 页生成每个组件的骨架屏，经过多个示例以及公司项目实践
生成的骨架屏完全贴合实际页面骨架结构，极大地提升了用户体验与开发效率
示例
官方 Example 示例项目
一个 带有骨架屏效果的 example 页
https://sg.xjq.icu
掘金首页列表示例
使用
项目中使用遵循以下流程
Example 中的用户列表是一个完整的使用案例可供参考 https://github.com/xjq7/skeleton-generator/tree/main/packages/example/user-info/user-list
下面是两种不同的接入使用方式
chrome 插件
下载 skeleton-generator.zip 并解压
chrome 浏览器中进入 chrome://extensions/
点击 加载已解压的扩展程序, 选中 解压的 skeleton-generator 目录
成功加载之后
以 demo 页面为例子
找到需要生成的组件容器
输入到 插件 popup 面板里
这里使用的是 class, 所以最终选择器输入框填 .ED4JZ8zZvzWhoef_o6xc
在页面中右键点击 skeleton-generator 插件 选项中的预览 查看效果
点击复制获取骨架数据
悬浮控制台
在 html 文件 head 标签中添加 script
如下:
在页面右下角自动加载 toolkit 按钮
按钮功能介绍
找到需要生成的组件容器
设置面板输入容器选择器
随后点击预览查看效果