如何通过小程序搭建骨架屏结构？

本文共计1596个文字，预计阅读时间需要7分钟。

首屏+一般情况下，首屏数据未获取到之前，为了提升用户体验，页面会展示一个loading图层。其中，除了常见的花卉图以外，还包含了网络上流行的各种样式loading动画，PC端上则展示了几种。

首屏

一般情况下，在首屏数据未拿到之前，为了提升用户的体验，会在页面上展示一个loading的图层，类似下面这个

其中除了菊花图以外网上还流传这各种各样的loading动画，在PC端上几乎要统一江湖了，不过最近在移动端上面看到不同于菊花图的加载方式，就是这篇文章需要分享的Skeleton Screen，中文称之为"骨架屏"

概念

A skeleton screen is essentially a blank version of a page into which information is gradually loaded.

在H5中，骨架屏其实已经不是什么新奇的概念了，网上也有各种方案生成对应的骨架屏，包括我们经常使用的知乎、饿了么、美团等APP都有应用骨架屏这个概念

方案

先从H5生成骨架屏方案开始说起，总的来说H5生成骨架屏的方案有2种

1.完全靠手写HTML和CSS方式给每个页面定制一套骨架屏

2.利用预渲染的方式生成静态骨架屏

第一套方案，毫无疑问是最简单最直白的方式，缺点也很明显，假如页面布局有修改的话，那么除了修改业务代码之外还需要额外修改骨架屏，增加了维护的成本。

第二套方案，一定程度上改善了第一套方案带来的维护成本增加的缺点，主要还是使用工具预渲染页面，获取到DOM节点和样式，保留页面结构，覆盖样式，生成灰色块盖在原有文本、图片或者是canvas等节点上面，最后将生成的HTML和CSS打包出来，就是一个带有骨架屏的页面。