如何用小程序搭建骨架屏幕

第一屏

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

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

概念

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

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

程序

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

1.完全通过手写HTML和CSS为每个页面定制一个框架屏幕

2.通过预渲染生成静态骨架屏幕

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

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

本文研究了在H5下生成骨架屏的方案，并给出了用小程序生成骨架屏的总体思路，主要有两个难点需要实现

1.预渲染

2.获取节点

预渲染

先说说饿了么提供的骨架屏幕方案，用Puppet渲染页面(或者用服务器端渲染，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=' user info ' block image class=' user info-avatar skeleton-radius ' src=' http : { { user info . avatar URL } } ' mode=' cover '/image text class=' user info-昵称skeleton-rect ' { user info .昵称} }/text/block/view style='aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

结节

1.4.0之后的applet基础库提供了一套新的API，可以用来获取节点信息。具体的API在这里盖章。与H5一样，节点信息是根据类或id获取的，但不同的是只能获取当前节点信息，而无法获取父节点或子节点信息，因此只能手动将对应的类或id添加到需要渲染骨架屏幕的节点中。

view class=' container ' view class=' userinfo ' block image class=' userinfo-avatar skeleton-radius ' src=' http : { { userinfo . avatar URL } } ' mode=' cover '/imagetext class=' userinfo-昵称skeleton-rect ' { userinfo .昵称} }/text/block/view style=' margin 3360 20px ' view wx : for=' { { list } } ' class=' list ' icon type=' success ' size='aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/view/view为获取节点信息指定了骨架矩形和骨架半径两个特殊类，并在页面中获取对应的顶部、左侧、宽度和高度来绘制骨架屏幕

结果

具体调用方法和源代码请见github，最后请求启动

摘要

如上所述，小程序也可以像page-skeleton-webpack-plugin一样生成框架屏幕。最重要的一点是小程序需要在chrome上运行，下面的流程也是一样的。如何在chrome上运行小程序？可以使用used，但缺点是作者已经停止维护这个工具，不支持新版小程序的API。

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

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。