构建优雅的微信小程序全局loading组件：封装与调用

2024-01-26 22:46:38

从零实现一个单词对战游戏（七）实战篇3：封装一个全局loading组件

引言

在微信小程序开发中，经常需要在页面加载或执行耗时操作时向用户展示加载状态，这通常通过显示loading组件来实现。为了让loading组件能够在全局范围内调用，需要对其进行封装。

封装loading组件

第一步，需要定义一个全局的loading组件，如loading，并将其封装在一个单独的文件中，如loading.js。

// loading.js
const app = getApp();

Component({
  properties: {},
  data: {
    show: false,
  },
  methods: {
    show() {
      this.setData({
        show: true,
      });
    },
    hide() {
      this.setData({
        show: false,
      });
    },
  },
});

第二步，在需要使用loading组件的页面中，需要先导入loading.js文件，然后在页面的json文件中声明该组件，如：

// page.json
{
  "usingComponents": {
    "loading": "/components/loading/loading",
  }
}

第三步，在页面的wxml文件中，可以直接使用loading组件，如：

<!-- page.wxml -->
<loading id="loading" bind:show="showLoading" bind:hide="hideLoading"></loading>

第四步，在页面的js文件中，需要定义showLoading和hideLoading方法，用于控制loading组件的显示和隐藏，如：

// page.js
Page({
  data: {
    loading: false,
  },
  showLoading() {
    this.setData({
      loading: true,
    });
    this.$("#loading").show();
  },
  hideLoading() {
    this.setData({
      loading: false,
    });
    this.$("#loading").hide();
  },
});

调用loading组件

使用loading组件非常简单，只需要调用showLoading和hideLoading方法即可。例如，在页面加载时，可以在onLoad方法中调用showLoading方法，并在数据加载完成后调用hideLoading方法。

// page.js
Page({
  onLoad() {
    this.showLoading();
    // 加载数据
    wx.request({
      url: '...',
      success: (res) => {
        this.hideLoading();
      },
      fail: () => {
        this.hideLoading();
      },
    });
  },
});