【dart-skeleton】自动生成骨架屏项目
2023-02-18 16:41:29 时间
Dear,大家好,我是“前端小鑫同学”,?长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~
前言:
骨架屏是在数据加载前用来展示给用户页面结构,经常由灰色占位图来体现,在数据加载完毕后自动隐藏。通常比页面白屏,闪烁或转圈的小菊花带给用户的感受要更加舒服。由于初次接触这块的内容,所以这个项目是在dps项目的基础上重写的一个Ts版本,目的是学习思路方便后续改造。
项目结构图:
项目由如图三块内容组成分别是:脚本,逻辑,CLI。
?脚本:
主要的功能就是对目标页面进行分析对指定的元素进行绘制为灰色块,并按条件跳过指定的干扰元素。因为我们的使用是在浏览器中所以在编译Ts的代码的时候我们将target
和module
分别设置成了es5
和es2015
,为了方便逻辑块的调用我们没有导出函数而是直接挂在到window
对象上。调试本地html文件的话可以直接将编译后的Js
引入页面,当我们需要调试在线的一些页面的话可以在浏览器的开发者工具=>Sources
=>Snippets
中新建一个片段将我们编译后的Js
放进去,直接Run来执行。
?逻辑:
主要的功能是使用**Puppeteer**
来加载目标页面,并执行我们第一阶段调试的脚本,最终导出骨架片段并插入目标页面。逻辑块的代码由于我们后续想通过CLI的方式在Node
环境执行,所以编译成了CommonJS
模块。需要特殊记录一下的是脚本注入后的执行函数,如下:
// 执行脚本获取生成的html片段
html = await page.evaluate((res) => {
return window.evalDOMScripts.apply(window, res);
}, opts);
?CLI:
这块的功能相对简单,主要是通过命令行的方式来收集用户的输入信息,构建初始化配置文件和执行逻辑部分导出的启动函数。
使用说明:
?构建说明:
- 全局安装Typescript,调试代码推荐一起安装ts-node:
yarn global add typescript ts-node
- 安装项目配置的依赖:
yarn
?脚本&源码编译: - 编译脚本文件:
yarn build:script
- 编译源码文件:
yarn build:source
?链接模块到本地NPM: - 建立连接命令:
npm link
- 反建立连接命令:
npm unlink
?CLI使用说明:
- 初始化配置文件:
ds init
- 执行生成函数:
ds start
演示效果: 手机版百度页面:
手机版京东页面:
手机版哔哩哔哩页面:
结语:
经过简单的测试发现直接生成的骨架屏片段确实不怎么完美(未调整干扰元素的情况下),此次只是通过dps项目来学习处理问题的思路方法,大家在自己的项目中都是怎么处理骨架屏的呀,想学习学习。?
相关文章
- stm32CubeIDE中CMSIS_V1和CMSIS_V2选项的区别
- 性能之巅-优化你的程序
- Cortex-M中特别实用的DWT计数器
- 一款Win下超简单的网络嗅探工具MiniSniffer
- STM32高级开发——gcc-arm-none-eabi
- STM32高级开发——使用VS Code搭建STM32开发环境
- 快应用VS原生APP,优势在哪里?
- STM32中RTC简介以及使用方法
- STM32高级开发——链接器与启动文件
- 装配式建筑一站式交付平台方“大乐装”完成近亿元B轮融资 | 腾讯SaaS加速器 · 学员动态
- 腾讯云 DevOps 产品年度报告
- VScode + keil开发环境搭建安装使用过程
- 抛弃IDE — 在window下使用VScode搭建ARM开发环境
- 如何使用CubeMx生成一个DFU工程
- 【进阶】详解KEIL的分散加载文件
- 深耕宽带无线路由细分领域 深圳信丰伟业创新研发铸就行业标杆
- UDP/TCP 包的大小限制是多少?
- 几种用jLink命令行烧录hex文件的方法
- 深耕热管高效散热细分领域,广东新创意科技助推电子行业蓬勃发展
- 图文详解STM32单片机远程升级