何为骨架屏？
通俗地说骨架屏就是在页面还没有加载之前，先给用户展示出页面的大致结构，直到请求数据返回后，再渲染页面，以优化用户体验。 虽然在一定程度上loading也可以减少用户等待的焦躁，但是页面上空白一片也不是很好的体验，所以提前显示页面骨架，这样用户感觉页面是正在渲染的，不会焦急立马走人
实现骨架屛的方案？
目前骨架屏的实现主要有以下三种方案：
1. 手动设置。 为每个需要使用骨架屏的页面定制一套静态页面。这种方法缺点很明显，需要为每个页面单独定制，布局如果修改则需要同时修改两个页面，增加了维护成本。但这种特别适用于长列表，只需要做用户可见的部分，可在一定程度上增加响应速度。
2. 利用工具组件渲染页面。 获取指定的DOM节点和对应样式，生成灰色块覆盖在原来的样式结构上，从而实现骨架屏。批量设置，使用简单。推荐使用 skeleton 这款组件轻量、方便、快捷。
3. 使用小程序自带功能。 本篇主要介绍这种方法。
自带骨架屛实现方法
前提： 确保微信开发者工具是 [1.03.2006032] 或 [1.04.2006032] 以上的版本
1. 选择你要生成骨架屏的页面，选择模拟器面板右下角三点处，点击选择生成骨架屛。
将有弹窗提示是否允许插入骨架屏代码。确定后将在当前页面同级目录下生成 page.skeleton.wxml 和 page.skeleton.wxss 两个文件，分别为骨架屏代码的模板和样式。
2. 引入骨架屏代码的模板和样式
骨架屏代码通过小程序模板（template）的方式引入 以 pages/index/index 页面为例，引入方式如下。
<!-- pages/index/index.wxml 引入模板 -->
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" data="{{}}"/>
/* pages/index/index.wxss 中引入样式 */
@import "index.skeleton.wxss";
3. 显示与隐藏
通过 wx:if 控制骨架屛的显示隐藏。我们需要把wx:if中的这个loading变量定义在index.js中的data上，通过控制loading的true和false决定是否显示骨架屏。即代码加载完毕后 将loading变量从true变为false即可。
4. 其他配置
找到小程序根目录中的project.config.json文件，在JSON文件中插入以下配置代码，其中loading字段负责决定使用什么样的动画风格。具体配置文档请参考官网小程序骨架屛文档。
插入到project.config.json文件中的顺序没有讲究，只需要保证是在json的第一层即可，也就是说不要和别的配置项嵌套了，不然就乱了
"skeleton-config": {
"global": {
"loading": "spin",
"text": {
"color": "#EEEEEE"
},
"image": {
"shape": "",
"color": "#EFEFEF",
"shapeOpposite": []
},
"button": {
"color": "#EFEFEF",
"excludes": []
},
"pseudo": {
"color": "#EFEFEF",
"shape": "circle",
"shapeOpposite": []
},
"excludes": [],
"remove": [
".footer"
],
"empty": [],
"hide": [],
"grayBlock": [
".swiper-item",
".scroll-view-item"
],
"cssUnit": "rpx",
"decimal": 4,
"showNative": false,
"backgroundColor": "transparent",
"mode": "auto",
"templateName": "skeleton"
},
"pages": {
"index/index": {},
"other/other": {
"showNative": true
}
}
},
效果与总结
上述代码最终效果如下：
使用小程序自带的骨架屛，使我们不必再借助第三方的框架，就能很好的实现骨架屛的效果。而且该能力除用于展示首屏骨架外，也可作为局部加载的 loading 样式，可灵活使用。更多自定义属性和注意事项，请移步官网小程序骨架屛文档。
相关文档：【微信小程序实现预加载占位图片】
创作不易，点赞鼓励~~~~~~~
