做者：jayzouvue
https://segmentfault.com/a/1190000015876164react
首屏
通常状况下，在首屏数据未拿到以前，为了提高用户的体验，会在页面上展现一个loading的图层，相似下面这个：webpack
其中除了菊花图之外网上还流传这各类各样的loading动画，在PC端上几乎要统一江湖了，不过最近在移动端上面看到不一样于菊花图的加载方式，就是这篇文章须要分享的Skeleton Screen，中文称之为"骨架屏"git
概念
A skeleton screen is essentially a blank version of a page into which information is gradually loaded.github
在H5中，骨架屏其实已经不是什么新奇的概念了，网上也有各类方案生成对应的骨架屏，包括咱们常用的知乎、饿了么、美团等APP都有应用骨架屏这个概念。web
图片来源网络，侵删：chrome
方案
先从H5生成骨架屏方案开始提及，总的来讲H5生成骨架屏的方案有2种：canvas
一、彻底靠手写HTML和CSS方式给每一个页面定制一套骨架屏小程序
二、利用预渲染的方式生成静态骨架屏segmentfault
第一套方案，毫无疑问是最简单最直白的方式，缺点也很明显，假如页面布局有修改的话，那么除了修改业务代码以外还须要额外修改骨架屏，增长了维护的成本。
第二套方案，必定程度上改善了第一套方案带来的维护成本增长的缺点，主要仍是使用工具预渲染页面，获取到DOM节点和样式，保留页面结构，覆盖样式，生成灰色块盖在原有文本、图片或者是canvas等节点上面，最后将生成的HTML和CSS打包出来，就是一个带有骨架屏的页面。最后再利用webpack工具将生成的骨架屏插入到HTML里面，详细的话能够看看饿了么的分享，这里就很少描述了。
调研了下H5生成骨架屏的方案，对于小程序生成骨架屏的方案也有了一个大体的想法，主要有2个难点须要实现：
一、预渲染
二、获取节点
预渲染
再说回饿了么提供的骨架屏的方案，使用 puppeteer （https://github.com/GoogleChrome/puppeteer）渲染页面（或者使用服务端渲染，vue或者react都有提供相应的方案），拿到DOM节点和样式，这里有一点须要注意的是，页面的渲染是须要初始化的数据，数据的来源能够是初始化的data（vue）或者mock数据，固然小程序是没法直接使用 puppeteer 来作预渲染（有另外的方案能够实现），须要利用小程序初始化的 data + template 渲染以后获得一个初始化结构做为骨架屏的结构。
//index.js
Page({
data: {
motto: 'Hello World',
userInfo: {
avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132',
nickName: 'jay'
},
lists: [
'aslkdnoakjbsnfkajbfk',
'qwrwfhbfdvndgndghndeghsdfh',
'qweqwtefhfhgmjfgjdfghaefdhsdfgdfh',
],
showSkeleton: true
},
onLoad: function () {
const that = this;
setTimeout(() => {
that.setData({
showSkeleton: false
})
}, 3000)
}
})
//index.wxml
<view class="container">
<view class="userinfo">
<block>
<image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}"
mode="cover"></image>
<text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text>
</block>
</view>
<view style="margin: 20px 0">
<view wx:for="{{lists}}" class="lists">
<icon type="success" size="20" class="list skeleton-radius"/>
<text class="skeleton-rect">{{item}}</text>
</view>
</view>
<view class="usermotto">
<text class="user-motto skeleton-rect">{{motto}}</text>
</view>
<view style="margin-top: 200px;">
aaaaaaaaaaa
</view>
</view>
有了上面的 data + template 以后，就有了一个初始化的页面结构，接下来就须要拿到节点信息。
节点
小程序基础库1.4.0以后小程序基础库提供了一组新的API，可用于获取节点信息，具体API戳这里。
跟H5方式同样，根据class或者id获取节点信息，不一样的是只能获取到当前的节点信息，没法获取到其父或者子节点信息，因此只能手动给须要渲染骨架屏的节点添加相应的class或者id：
<view class="container">
<view class="userinfo">
<block>
<image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}"
mode="cover"></image>
<text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text>
</block>
</view>
<view style="margin: 20px 0">
<view wx:for="{{lists}}" class="lists">
<icon type="success" size="20" class="list skeleton-radius"/>
<text class="skeleton-rect">{{item}}</text>
</view>
</view>
<view class="usermotto">
<text class="user-motto skeleton-rect">{{motto}}</text>
</view>
<view style="margin-top: 200px;">
aaaaaaaaaaa
</view>
</view>
约定2个特殊的class做为获取节点信息的标记 skeleton-rect和 skeleton-radius，在页面中获取相应的 top、 left、 width、 height进行骨架屏的绘制。
结果
具体的调用方式和源码，请看 github （https://github.com/jayZOU/skeleton），最后求start。
总结
上文有说到小程序也可使用 page-skeleton-webpack-plugin （https://github.com/ElemeFE/page-skeleton-webpack-plugin）方式同样生成骨架屏，最重要的一点就是须要将小程序跑在chrome上面，后面的流程就同样了，至于怎么将小程序跑在chrome上面呢？能够利用 wept （https://github.com/chemzqm/wept），缺点就是目前做者已经中止维护这个工具了，不支持新版小程序的API。
说回来我这个生成骨架屏的方案，其实跟 page-skeleton-webpack-plugin 有点类似，不一样的是，page-skeleton-webpack-plugin 采用离线渲染的方式生成静态骨架屏插入路由中，而我采用运行时先渲染页面默认结构，而后根据默认结构再绘制骨架屏。从性能角度出发确实不如 page-skeleton-webpack-plugin，可是也差不了多少了，主要仍是小程序并无提供相似服务端渲染的方案。目前从使用上来说，仍是有点小麻烦，须要默认数据撑开页面结构，须要给相应的节点添加class，后面有时间再研究下有没有更好的方案吧~~~
感兴趣的小伙伴，能够关注公众号【grain先森】，回复关键词 “小程序”，获取更多资料，更多关键词玩法期待你的探索~
本文同步分享在 博客“grain先森”（JianShu）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。