首屏

一般来说，为了增强用户体验，在获取第一个屏幕数据之前，页面上会显示一个加载层，类似于下图。

其中除了菊花图，网上流传着各种加载动画，几乎统一在PC端。但是最近我们在移动端看到了一个和菊花图不同的加载方式，就是本文需要分享的Skeleton Screen，中文叫做‘Skeleton Screen’。

概念

A骨架屏幕是页面必不可少的空白版本，信息逐渐加载到其中。在H5，骨架屏其实已经不再是一个新奇的概念，网上也有各种方案生成相应的骨架屏，包括知乎、饿了么、美团等我们经常使用的app都有应用骨架屏的概念。

图片来源网络，侵删

方案

先从H5生成骨架屏的方案说起。一般来说，H5生成骨架屏有两种方案。

完全通过手写HTML和CSS为每个页面定制一个框架屏幕。第一种通过预渲染生成静态骨架屏幕的方案无疑是最简单、最直接的方式，缺点也很明显。如果修改页面布局，除了业务代码，还需要修改骨架屏幕，增加了维护成本。

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

在考察了H5生成骨架屏的方案后，我对小程序生成骨架屏的方案也有了一个大概的想法，主要有两个难点需要实现。

预渲染采集节点

预渲染

，先来说说饿了么提供的骨架屏的方案，使用木偶师渲染页面(或者使用服务器端渲染，vue或者react都提供相应的方案)，得到DOM节点和样式。这里需要注意的是，页面的呈现是需要初始化的数据。数据源可以是初始化数据(vue)或模拟数据。当然，小程序不能直接使用木偶师进行预渲染(还有其他方案可以实现)。我们需要使用由小程序初始化的数据模板来渲染，并获得一个初始化结构作为骨架屏幕的结构。

//index . js page({ data : { motto : ' Hello World '，user info : { avatarurl : ' https://wx . qlogo.cn/MMO pen/VI _ 32/syiaiba 5 faeraybqcwdsbx4hsjfkiawzhipnxjetjmiafqmqhilrbqrqrbqr 7 ivdbke 51 PEF 6x 1cxtqd d2bzehgqma/132 '，昵称： 'jaysetTimeout(()={ that . setdata({ showskeleton : false })}，3000)})//index . wxmlview 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，最后求start

总结

上文有说到小程序也可以使用page-skeleton-webpack-plugin方式一样生成骨架屏，最重要的一点就是需要将小程序跑在chrome上面，后面的流程就一样了，至于怎么将小程序跑在chrome上面呢？可以利用wept，缺点就是目前作者已经停止维护这个工具了，不支持新版小程序的API。说回来我这个生成骨架屏的方案，其实跟 page-skeleton-webpack-plugin 有点相似，不同的是，page-skeleton-webpack-plugin 采用离线渲染的方式生成静态骨架屏插入路由中，而我采用运行时先渲染页面默认结构，然后根据默认结构再绘制骨架屏。从性能角度出发确实不如 page-skeleton-webpack-plugin，但是也差不了多少了，主要还是小程序并没有提供类似服务端渲染的方案。目前从使用上来讲，还是有点小麻烦，需要默认数据撑开页面结构，需要给相应的节点添加class，后面有时间再研究下有没有更好的方案吧~~~