微信小程序开始实现骨架屏

问题背景

客户端开发和学习过程中，骨架屏是一种很常见的场景。应用打开时加载资源和复杂逻辑导致耗时较长，可能出现白屏等场景，此时增加骨架屏可以极大改善用户的体验。本文将介绍微信小程序中是如何实现骨架屏的。

问题分析

(1)微信开发者工具，可以很方便的给对应页面生成对应的骨架屏页面文件，如下所示： image.png (2)完成后会生成两个对应的骨架屏文件，如图所示： image.png (3)index.skelelon.wxml文件中会给出骨架屏的使用方法，如图所示： image.png 我们直接按这个指导直接配置即可，配置需要在index.js文件中data里面新建loading变量，并通过这个变量控制骨架屏和对应的界面的显示情况。

问题解决

话不多说，直接上代码。 (1)index.js文件，代码如下：

// pages/healdata/healthydata.ts
Page({
  /**
   * 页面的初始数据
   */
  data:{
    loading:true,
    code:"0",
    location:[],
    imageUrl: "https://profile-avatar.csdnimg.cn/default.jpg!0"
  },

  onLoad: function() {
    // 定时设置loading变量的值，控制骨架屏的消失时间
    var that = this;
    setTimeout(function() {
      that.setData ({
        loading: false,
      });
    }, 2000);
  },

  onShow: function() {
  },

  /* navigateTo进行页面跳转 */
  router1: function () {
    wx.navigateTo({
      url: '/pages/index2/index',
      success: function(res) {
        console.log('router1 success');
      },
      fail: function(res) {
        console.log('router1 fail');
        console.log(res)
      }
    })
  },

      /* redirectTo进行页面跳转 */
      router2: function () {
        wx.redirectTo({
          url: '/pages/index3/index',
          success: function(res) {
            console.log('router3 success');
          },
          fail: function(res) {
            console.log('router3 fail');
            console.log(res)
          }
        })
      },

        /* switchTab进行页面跳转 */
        router3: function () {
          wx.switchTab({
            url: '/pages/index4/index'
          })
        }
})

(2)index.wxml文件，代码如下：

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

<view wx:if="{{!loading}}">
  <button class="buttonStyle" type="primary" bindtap="router1">跳转index2</button>
  <button class="buttonStyle" type="primary" bindtap="router2">跳转index3</button>
  <button class="buttonStyle" type="primary" bindtap="router3">跳转index4</button>
  <view>index页面</view>
</view>

(3)index.wxss文件，代码如下：

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

/* 设置swiper组件的宽高 */
.swiper{
  width: 100%;
  height: 600rpx;
}
/* 设置swiper组件里面图片的宽高 */
.image{
  width: 100%;
  height: 600rpx;
}

.content1{
  /* text-align: center; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 10rpx;
}

.buttonStyle{
  margin-top: 120rpx;
}

.place{
  font-style: italic;
}

运行结果如下： 1681785482885.gif

问题总结

本文初步介绍了微信小程序中是实现骨架屏的基本方法，有兴趣的同学可以进一步深入研究。