今天终于解答了一个困扰我很久的问题，饿了么，美团等app上的加载动画是如何做的，感觉体验蛮好的。我一直以为是使用gif，或者背景什么做的，今天才了解到是"骨架层"，是不是很懵，我第一次接触到这个词，见字识意，就是页面的骨架，我看了微信小程序的骨架制作原理，就是对照着使用加载动画的页面生成了一份类似的结构和样式(如果页面很多都要使用，不知道打包文件会很大)。

先看效果：

小程序中自带了骨架层的配置，当然你也可以使用第三方的库，看个人选择。

文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html

{
    loading: true, // 骨架层

}

async getData () { // 获取页面所有的接口数据
    const {data: infos} = await bookModels.bookInfo();
    const {data: latestBooks} = await bookModels.latestBook({page_type: 'index'});
    setTimeout(() => {
      this.setData({
        infos,
        latestBooks,
        loading: false
      })
    }, 5000)

<!-- 骨架屏 -->
<import src="/pages/books/index/index.skeleton.wxml"/>
<template is="skeleton" wx-if="{{loading}}"/>
<!-- end -->

@import "/pages/books/index/index.skeleton.wxss";

讲一个我遇到的坑，可以看这位老哥：https://developers.weixin.qq.com/community/develop/doc/0000443527c6801dc52b079d056c00

对于这个问题，只要在设置中配置mode：auto即可。遇到问题，还是要看文档，用百度都搜不出结果！