微信小程序开发，骨架屏实现

1. 官方文档指南

1. 骨架屏： https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html

2. 定义

在开发微信小程序时，往往会加载网络数据，这个过程需要一定的时间，在这个过程中为了不使页面显示空白，就出现了骨架屏这一说法

骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。

3. 运行环境

下载并安装 1.03.2006032 或 1.04.2006032 以上版本的开发者工具

4. 使用方法

1. 打开微信开发者工具，在右下角选择【…】->选择生成骨架屏，如下图所示

2. 此时会弹出一个对话框，确定是否要继续？点击【确定】即可

3. 点击【确定】按钮后，会在对应的页面下，会多出xxx.skeleton.wxml和xxx.skeleton.wxss 两个文件

5. 如何使用？

骨架屏代码通过小程序模板（template）的方式引入

打开index.skeleton.wxml 这里就介绍了使用方法，很简单，如下图所示

第一步： 在需要加入骨架屏的wxss中，导入样式
注意文件路径不要指向错误，使用相对路径

/* 第一步： 引入骨架屏样式文件 */
@import "./index.skeleton.wxss";

第二步： 在需要加入骨架屏的wxml中，引入骨架屏
注意文件路径不要指向错误，使用相对路径

<!--第二步：  引入骨架屏 -->
<import src="index.skeleton.wxml"/>

第三步：使用骨架屏

<template is="skeleton" wx:if="{{loading}}" />

loading就是控制骨架屏的隐藏和显示，这里注意，wx:else 一定要加上，这是基本语法原则。说白了就是通过wx:if 来控制隐藏显示

6. 项目演示效果

7. 温馨提示Tips

1. 骨架屏仅包括页面首屏中的可见区域，对于横向滚动的 swiper 等容器，超出屏幕的子元素将被忽略；
2. 骨架屏的布局复用开发者的页面布局，需要骨架屏自适应页面尺寸时，页面布局应采用 rpx 等自适应方案；
3. 部分组件如 movable-view、movable-area、rich-text、editor、picker、picker-view、picker-view-column、ad、officail-account和open-data 无法生成理想的骨架效果，可通过添加一个父容器，结合 grayBlock、empty 等配置，将其置灰。
4. 请勿修改自动生成的骨架屏的代码，当效果不理想时，建议调整相关配置，这样当页面变更时，仍可自动生成；
5. 生成的骨架屏代码中会包含预览时的页面数据，将被用来填充页面；
6. 骨架屏通常用于商品列表、新闻列表等页面，对于动画/原生组件较多的页面展示效果不佳；
7. 该能力除用于展示首屏骨架外，也可作为局部加载的 loading 样式，可灵活使用；