微信小程序使用骨架屏

傷城~ 2022-11-29 05:35 266阅读 0赞

骨架屏的使用越来越广泛。在微信小程序中使用骨架屏如果自己实现，不同的页面对应不同的骨架屏，会有一定难度；不过，微信小程序已经提供生成骨架屏功能，使得我们在开发中非常方便，下面介绍如何生成

在生成骨架屏之前，先确保微信开发者工具是 [1.03.2006032][] 或 [1.04.2006032][1.03.2006032] 以上的版本

**1、生成骨架屏代码文件**

找到要生成骨架屏的页面，并进行预览，找到模拟器面板右下角三点处

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70][]

点击生成骨架屏

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 1][]

点击 确定

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 2][]

生成 wxml 和 wxss 骨架屏文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 3][]

**2、页面使用**

（1）、在需要使用骨架屏的页面引入生成的骨架屏 wxml 文件，并将骨架屏代码通过小程序模板（[template][]）的方式引入

如下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 4][]

（2）、在 wxss 文件中引入骨架屏的 wxss 样式文件

@import "product.skeleton.wxss";

如下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 5][]

（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、效果如下**

![2020081911282744.gif][]

参考文档：[https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html][https_developers.weixin.qq.com_miniprogram_dev_devtools_skeleton.html]

[1.03.2006032]: https://developers.weixin.qq.com/miniprogram/dev/devtools/nightly.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70]: /images/20221124/7539f6588c7b48b7a228e69958ff7095.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 1]: /images/20221124/0ec15b7504544934b2641d320e810b6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 2]: /images/20221124/ad572c576ed044ecbf9b967f92a50d29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 3]: /images/20221124/31e172d4def144dc8bbf9090d655813c.png
[template]: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 4]: /images/20221124/4557788723bf41148844b7132227e60c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 5]: /images/20221124/c61e11a4e9ae4f0db0e4d29ced0b1185.png
[2020081911282744.gif]: /images/20221124/35016934e6df47e19c10f9518c9b3a8b.png
[https_developers.weixin.qq.com_miniprogram_dev_devtools_skeleton.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html