《十九》微信小程序骨架屏

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

在小程序中，需要手工维护骨架屏的代码，当业务变更时，同样需要对骨架屏代码进行调整。微信开发者工具提供了自动生成骨架屏代码的能力。

骨架屏仅包括页面首屏中的可见区域，对于横向滚动的 swiper 等容器，超出屏幕的子元素将被忽略。
部分组件如 movable-view、movable-area、rich-text、editor、picker、picker-view、picker-view-column、ad、officail-account 和 open-data 无法生成理想的骨架效果，可通过添加一个父容器，结合 grayBlock、empty 等配置，将其置灰。

生成方式：

微信开发者工具可以为当前正在预览的页面生成骨架屏代码。入口位于模拟器面板右下角三点处。

点击生成骨架屏，将有弹窗提示是否允许插入骨架屏代码。确定后将在当前页面同级目录下生成 page.skeleton.wxml 和 page.skeleton.wxss 两个文件，分别为骨架屏代码的模板和样式。

使用方式：

骨架屏代码通过小程序模板的方式引入，以 pages/index/index 页面为例：

<!-- pages/index/index.wxml 引入模板 -->
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" data="{{}}"/> // 通过 wx:if 控制显示隐藏

/* pages/index/index.wxss 中引入样式 */
@import "index.skeleton.wxss";

// 可在 project.config.json 增加字段 skeletonConfig 进行骨架屏相关配置，页面配置会覆盖掉全局配置。
{
	"skeletonConfig": {}
}