skeleton 小程序构建骨架屏的探索

第一屏

通常情况下，在获取第一个屏幕数据之前，为了提高用户体验，页面上会显示一个加载层，类似于下面这个:

其中除了菊花图，各种加载动画也在网上流传，几乎统一了PC端的江湖。但是最近手机端不同于菊花图的加载方式是本文需要分享的骷髅屏，中文叫“骷髅屏”。

概念

框架屏幕本质上是一个页面的空白版本，信息逐渐被加载到其中。

在H5，骨架屏不再是一个新奇的概念，网上也有各种方案生成相应的骨架屏，包括在知乎、饿了么、美团等应用中的应用。

图片来源网络，侵删:

计划

从H5生成骨架屏的方案出发，一般来说，H5生成骨架屏有两种方案:

完全靠手写HTML和CSS方式给每个页面定制一套骨架屏利用预渲染的方式生成静态骨架屏

第一种方案无疑是最简单、最直接的方式，缺点也很明显。如果修改页面布局，除了业务代码，还需要修改骨架屏幕，增加了维护成本。

第二种方案，在一定程度上改善了第一种方案带来的维护成本增加的缺点，主要是使用工具对页面进行预渲染，获取DOM节点和样式，保留页面结构，覆盖样式，生成灰色块覆盖原文本、图片或画布节点，最后将生成的HTML和CSS打包，这是一个带骨架屏幕的页面。最后，使用webpack工具将生成的骨架屏幕插入到HTML中。有细节的话可以看看饿了么分享，这里就不描述了。

在考察了H5下生成骨架屏的方案后，我也有了一个小程序生成骨架屏的大致思路，主要要实现两个难点:

预渲染获取节点 预渲染

先说饿的时候提供的骨架屏幕方案，用https://github.com/GoogleChrome/puppeteer渲染页面(或者用服务器端渲染，vue或者react都有提供相应的方案)，得到DOM节点和样式。这里需要注意的是，页面渲染是需要初始化的数据。数据源可以是初始化数据(vue)或模拟数据。当然小程序不能直接使用木偶器进行预渲染(还有其他方案可以实现)，所以需要使用小程序初始化的数据+模板进行渲染，得到一个初始化的结构作为骨架屏幕结构。

//index.jsPage({data: {motto: 'Hello World',userInfo: {avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132',nickName: 'jay'},lists: ['aslkdnoakjbsnfkajbfk','qwrwfhbfdvndgndghndeghsdfh','qweqwtefhfhgmjfgjdfghaefdhsdfgdfh',],showSkeleton: true},: 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>

有了上面的数据+模板，就有了一个初始化的页面结构，然后就需要得到节点信息了。

节点

1.4.0以后的小程序基础库提供了一套新的API，可以用来获取节点信息。具体API在此盖章。

与H5模式一样，节点信息是根据类或id获取的，但不同的是只能获取当前节点信息，而不能获取父节点或子节点信息，因此只能将相应的类或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>

指定两个特殊类作为骨架矩形和骨架半径的标记来获取节点信息，并在页面中获取相应的顶部、左侧、宽度和高度来绘制骨架屏幕。

结果

具体调用方法和源代码请参考github(https://github.com/jayZOU/skeleton)，最后求启动。

总结

如上所述，小程序也可以像page-skeleton-web pack-plugin(https://github . com/ElemeFE/page-skeleton-web pack-plugin)一样生成框架屏幕。最重要的一点是小程序需要在chrome上运行，后面的过程也是一样的。如何在chrome上运行小程序？哭泣(https://github.com/chemzqm/wept)可以使用，但缺点是作者已经停止维护这个工具，不支持新版本小程序的API。

另一方面，我生成骨架屏幕的方案类似于page-skeleton-webpack-plugin，不同的是page-skeleton-webpack-plugin通过离线渲染生成静态骨架屏幕并插入到路由中，而我在运行时使用页面的默认结构进行渲染，然后按照默认结构绘制骨架屏幕。从性能上看，不如页面-骨架-webpack-plugin，但也差不了多少，主要是小程序没有提供类似服务器端渲染的解决方案。目前使用中还是有点小麻烦。需要通过默认数据展开页面结构，需要在相应的节点上添加类。以后我们会有时间研究是否有更好的解决方案~ ~ ~