微信小程序（二十八）- 骨架屏

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情

本次系列文章参与八月的更文活动，记录一个微信小程序从零到有的开发过程。本文为本系列第二十八篇：生成骨架屏

当项目完成得差不多了，我们就需要考虑一些关于样式和体验方面的优化。当请求接口时，通常我们会有一段时间的白屏，这时候体验就不太好。如果可以增加一个骨架屏，那就再好不过了。微信小程序官方也为我们提供了一个相当好用的生成骨架屏的工具。下文就来告诉你该如何简单得实现骨架屏。

骨架屏官方文档点此进入

首先，打开微信开发者工具。打开想要生成骨架屏的页面，最模拟器的右下角有三个点，点击生成骨架屏。如下：

点击生成完成，会提示是否继续。点击确定，则会在对应页面的文件夹中生成index.skeleton.wxml和index.skeleton.wxss两个文件。

最后，在js页面中编写接收到数据后，将loading置为false即可。即不展示骨架屏。

Page({
  data: {
    loading:true
  }
  onload(){
   this.getjiaofu();
  },
 getjiaofu(){
    const that = this;
    var url='/api/xxx';
    api._post(url,this.data.params).then(res=>{ 
      if (res.data.code == 999) {
        that.setData({loading:false})
      }
   })
 }

此外，页面可能被划分成不同的区域，通过不同的请求来获取数据，它们的响应时间也不一致。因此需要对骨架屏进行拆分，通过data控制其隐藏/显示。

以下是官方给出的demo:developers.weixin.qq.com/s/3AQoEBmh7…

首先在原来wxml中添加某区域块是否显示骨架屏的变量

在对应的骨架屏wxml的对应位置也需要增加该变量

最后再在自己的js文件中根据实际的请求完成后将改变量置为true