52、vue-skeleton-webpack-plugin骨架屏

这是一个基于 Vue 的 webpack 插件，为单页/多页应用生成骨架屏 skeleton，减少白屏时间，在页面完全渲染之前提升用户感知体验。

支持 webpack@3 和 webpack@4，支持 Hot reload。

参考了 饿了么的 PWA 升级实践 一文， 使用服务端渲染在构建时渲染 skeleton 组件，将 DOM 和样式内联到最终输出的 html 中。

另外，为了开发时调试方便，会将对应路由写入 router.js 中，可通过 /skeleton 路由访问。

安装：

运行测试用例：

在 webpack 中引入插件：

开发模式已经支持 hot reload，该参数不再需要。

如果你的项目是使用 Lavas 创建的，可参考 Lavas Appshell模版 和 Lavas MPA模版 中的应用。

如果你的项目是使用 vue-cli 创建的，可以参考基于 Vue Webpack 模板应用这个插件的例子： SPA 中单个 Skeleton：

修改的文件如下： build/webpack.prod.conf.js、build/webpack.dev.conf.js

添加的文件如下： build/webpack.skeleton.conf、src/utils/Skeleton.vue、src/utils/enter-skeleton.js

SPA 中多个 Skeleton:

或者你可以参考 examples 下的测试用例，其中也包含了单页和多页情况，具体如下：

插件需要使用与 Webpack 版本配套的插件进行样式分离。

运行出现如下错误：

由于插件使用了 Vue 服务端渲染在构建时渲染 skeleton 组件，将 DOM 和样式内联到最终输出的 html 中。 因此在给 skeleton 使用的 Webpack 配置对象中需要开启 样式分离 ，将 skeleton 使用的样式从 JS 中分离出来。

在 Webpack 中样式分离是通过 extract-text-webpack-plugin 插件实现的。因此在 webpack.skeleton.config 中必须正确配置该插件。

以使用 vue-cli 创建的项目为例，如果你的 webpack.skeleton.conf 继承自 webpack.base.conf ，在开发模式下是默认关闭样式分离的，因此需要修改，可参考 修改方案 。

链接： https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html

有些时候在我们的页面中有大量数据或者图片加载,如果不做任何处理,整个进入加载的用户体验会很差很难看

第一种为增加菊花加载或其它样式的加载按钮,在数据加载完成后隐藏

第二种就是骨架屏形式,现在小程序已经支持快速生成骨架屏,用起来相当方便.

骨架屏 Skeleton Screen Loading 也叫加载占位图，是近年流行的加载控件，通常表现形式是在界面上待加载区域填充灰色的占位图，与线框图的效果非常相似。Skeleton Screen本质上是界面加载过程中的过渡效果。

适用于布局排版固定的内容区域

骨架屏所展现的是内容的大概轮廓，如果内容布局和排版不是固定的，那么轮廓和内容布局的巨大差异，不仅不能给用户顺畅和期待感，反倒会造成落差。

因此骨架屏适用于布局排版固定的内容区域，例如列表、文章、个人信息。

注意：如果内容区域有空页面的情况，也不建议使用骨架屏。

一直以来，客户端的应用中，为了提升应用的加载等待这段时间的用户感知体验，各种技术层出不穷。其中，尤以菊花图以及由它衍生各种加载动画最为突出。

对于菊花图我们自不必多说，现在对于加载的设计体验有了比菊花加载体验更棒的方法，即大家常看到的Skeleton Screen Loading，中文叫做骨架屏。

所谓Skeleton Screen Loading，即表示在页面完全渲染完成之前，用户会看到一个占位的样式，用以描绘了当前页面的大致框架，加载完成后，最终骨架屏中各个占位部分将被真实的数据替换。很多项目中都有相关的应用，如饿了么h5版本、知乎、facebook等网站中都有应用。 其效果如下图所示：

iOS实现Skeleton效果的第三方库有很多，当然也可以自己创建一个，而骨架屏最核心的就是占位和属性动画。在实现方面，本文介绍几种主流的实现方式：

实现原理

对UIView进行扩展，增加skeletonable、skeletonLayer等属性。调用showSkeleton方法，对属性skeletonable为true的视图进行遍历，找到其最上层的、skeletonable为true的子View，然后创建skeletonLayer添加到上面，构成骨架图，动效效果亦是在skeletonLayer层。需要隐藏效果时，调用hideSkeleton，同样进行遍历，移除skeletonLayer。

简单的说，在显示占位的时候，将tableView的代理设置为通过某个对象，这个对象根据cell的Idenfier创建cell并添加占位显示。关闭显示占位的时候，将代理tableView的代理切回ViewController，正常显示。

特点

1、不需手动写占位控件，不需处理圆角等问题，占位效果与实际控件布局一致。

2、缺点是有的控件是自适应大小，在未获得数据之前，控件位置是错误的，导致占位效果有问题。

同样是扩展UIView，添加属性somoContainer，表示占位视图的容器视图，其中每个占位区域都是一个SomoView。对于想要显示占位效果的View，需实现协议，在协议方法中返回SomoView列表。将这些SomoView添加到somoContainer，并显示。

特点

1、避免了上述自适应控件无数据时大小不正确的问题。

2、需要手工指定每个占位区域，且每个占位区域是UIView级别，不是CALayer。

除此之外，TABAnimated也是一个被使用的比较多的，同样TABAnimated也是扩展的UIView。在ios中集成TABAnimated需要经历以下几步：

1，Install

2，第二步（可选）

可以选择在appDelegate的didFinishLaunchingWithOptions方法全局设置动画属性，设有默认属性。例如：

3，第三步，设置animatedStyle属性

在需要动画的view上，将属性animatedStyle设置为TABTableViewAnimationStart,不需要动画的view不用做额外的 *** 作。

4，第四步

1、将需要动的组件的属性loadStyle，设置为需要的类型，不需要动的组件不用做额外的 *** 作；

2、（可选）新增属性tabViewWidth，其为动画开启时该组件的宽度,有较为合理默认值；

5，第五步

在获取到数据后，停止动画。

示例源码链接： iOS骨架屏示例

在Android中，骨架屏的实现也后很多的第三方框架，常见的有以下几个库：

ShimmerRecyclerView是一个带有闪光和指示效果的库，其运行效果如下图：

源码地址： https://github.com/sharish/ShimmerRecyclerView

Skeleton也是一个使用得比较广泛的库，它现在使用闪存动画的内存优化版本，因此速度更快，您也可以设置更大的布局动画。

项目源码： https://github.com/ethanhua/Skeleton

spruce-android

Spruce 是一个轻量级动画库，可帮助编排屏幕上的动画，该库同时还支持 iOS。

源码地址： https://github.com/willowtreeapps/spruce-android

---