骨架屏的使用越來越廣泛。在微信小程式中使用骨架屏如果自己實現，不同的頁面對應不同的骨架屏，會有一定難度；不過，微信小程式已經提供生成骨架屏功能，使得我們在開發中非常方便，下面介紹如何生成

在生成骨架屏之前，先確保微信開發者工具是 1.03.2006032 或 1.04.2006032 以上的版本

1、生成骨架屏程式碼檔案

找到要生成骨架屏的頁面，並進行預覽，找到模擬器面板右下角三點處

點選生成骨架屏

點選 確定

生成 wxml 和 wxss 骨架屏檔案

2、頁面使用

（1）、在需要使用骨架屏的頁面引入生成的骨架屏 wxml 檔案，並將骨架屏程式碼通過小程式模板（template）的方式引入

<import src="product.skeleton.wxml"/>
<template is="skeleton" wx-if="{{loading}}" />

如下圖

（2）、在 wxss 檔案中引入骨架屏的 wxss 樣式檔案

@import "product.skeleton.wxss";

如下圖

（3）、在 js 檔案中新增骨架屏顯示與隱藏的控制邏輯

data: {
  productList: [],
  loading: true
},

/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
  let products 
 
= [1,2,3,4,5,6,7,8,9,10]
  setTimeout(() => {
    this.setData({
      productList: products,
      loading: false
    })
  }, 3000)
},

通過 loading 的 true 或 false，來控制骨架屏的顯示與隱藏

setTimeout 模擬後臺請求返回資料

3、效果如下