官方文档

前言

在小程序中，微信开发者工具提供了自动生成骨架屏代码的能力, 为开发便利, 支持以json化的方式进行骨架屏配置。

一、json配置

方式一：在 project.config.json 增加字段 skeleton-config 进行骨架屏相关配置

"skeleton-config": {
    "global": {
      "loading": "chiaroscuro",
      "text": {
        "color": "#EEEEEE"
      },
      "image": {
        "shape": "",
        "color": "#EFEFEF",
        "shapeOpposite": []
      },
      "button": {
        "color": "#EFEFEF",
        "excludes": []
      },
      "remove": [
        ".footer"
      ]
      ...
      //更多配置前往官网查看
    }
  }

方式二：在页面配置(注意:会覆盖掉全局配置)亲测此方式不生效

"pages": {
      "index/index": {
          "loading": "chiaroscuro",
          //配置项同上，更多配置前往官网查看
      }
 }

二、生成骨架屏

工具入口位于模拟器面板右下角三点处。

三、页面配置

/**loading控制骨架屏的显示隐藏**/
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx-if="{{loading}}"/>

提示：亲测使用时，页面配置不会覆盖全局配置，且生成时先定义好json再生成，否则按默认规则生成。 如果你有解决办法，欢迎评论区讨论。

官方示例代码片段：developers.weixin.qq.com/s/3AQoEBmh7…

# 相关链接

• vue骨架屏实践