微信小程序实现自定义加载图标功能攻略

1. 目标

本文的目标是在微信小程序中实现自定义的加载图标功能，让我们的小程序在请求过程中能够显示我们自己设计的加载图标，提高用户体验。

2. 基本步骤

实现自定义加载图标功能的基本步骤如下：

在App.js中定义全局请求拦截器和响应拦截器
在拦截器中修改全局变量，判断当前是否在请求中，并记录请求的数量
在页面中使用wx.showLoading和wx.hideLoading显示和隐藏加载图标

3. 具体实现步骤

3.1 在App.js中定义拦截器

我们在App.js中定义全局变量loading和拦截器，如下代码：

App({
  // 定义全局变量loading
  globalData: {
    loading: false
  },
  // 定义一个全局请求拦截器
  request: function (obj) {
    // 判断当前是否已有其他请求在进行
    if (this.globalData.loading) {
      // 如果已有请求，在请求数组中添加当前请求
      this.globalData.requests.push(obj)
      return
    }
    // 如果当前没有请求，将loading置为true，并记录请求数为1
    this.globalData.loading = true
    this.globalData.requests = [{
      success: obj.success,
      fail: obj.fail
    }]
    // 显示加载图标
    wx.showLoading({
      title: '加载中...',
      mask: true
    })
    // 发起请求
    wx.request({
      url: obj.url,
      method: obj.method,
      data: obj.data,
      success: res => {
        // 隐藏加载图标
        wx.hideLoading()
        // 获取请求成功回调函数
        let successFn = this.globalData.requests[0].success
        if (successFn) {
          successFn(res)
        }
      },
      fail: err => {
        // 隐藏加载图标
        wx.hideLoading()
        // 获取请求失败回调函数
        let failFn = this.globalData.requests[0].fail
        if (failFn) {
          failFn(err)
        }
      },
      complete: () => {
        // 请求完成后，判断是否还有未完成的请求
        if (this.globalData.requests.length > 1) {
          // 如果有未完成的请求，继续发起请求
          let obj = this.globalData.requests.shift()
          this.request(obj)
        } else {
          // 如果没有未完成的请求，将loading置为false
          this.globalData.loading = false
        }
      }
    })
  }
})

3.2 在页面中使用wx.showLoading和wx.hideLoading

在需要发起请求的页面中，我们需要构造一个请求对象并传递给App.js的request方法。同时，在页面中使用wx.showLoading和wx.hideLoading方法来显示和隐藏加载图标。

例如，我们在index页面发起一个get请求，代码如下：

// pages/index/index.js
const app = getApp()
Page({
  onLoad: function () {
    // 发起get请求
    app.request({
      url: 'https://www.example.com/api/test',
      method: 'GET',
      success: res => {
        console.log(res.data)
      }
    })
  }
})

在需要使用加载图标的位置，我们使用wx.showLoading方法来显示加载图标，并在数据请求完成后使用wx.hideLoading方法来隐藏加载图标。例如，我们在index页面中的请求成功回调函数中添加显示和隐藏加载图标的代码，如下：

// pages/index/index.js
const app = getApp()
Page({
  onLoad: function () {
    // 发起get请求
    app.request({
      url: 'https://www.example.com/api/test',
      method: 'GET',
      success: res => {
        // 隐藏加载图标
        wx.hideLoading()
        // 处理请求数据
        console.log(res.data)
      }
    })
    // 显示加载图标
    wx.showLoading({
      title: '加载中...',
      mask: true
    })
  }
})

3.3 示例1：替换默认的加载图标

我们可以通过在app.json中设置全局的window配置，来修改默认的加载图标。例如：

"window": {
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "Weixin",
  "navigationBarTextStyle": "black",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark",
  "backgroundColor": "#f5f5f5",
  "appLaunch": true,
  "loading": "/images/loading.png",
  "pageOrientation": "auto"
}

在上面的示例中，我们将默认的加载图标修改为了/images/loading.png。

3.4 示例2：自定义加载图标

如果不喜欢默认的加载图标，我们可以使用自定义的图标。具体步骤如下：

准备一个GIF或者PNG图片作为我们自定义的加载图标，例如加载动画可以在https://loading.io/上选择合适的GIF图片
在小程序根目录或者子目录下创建一个images目录
将我们的自定义加载图标保存在images目录中
在app.json中设置全局的loading属性为我们的自定义加载图标

例如，我们下载了一张GIF图片，保存在小程序的/images目录下，我们在app.json中添加如下配置：

"window": {
  ...
  "loading": "/images/loading.gif",
  ...
}

这样就可以在全局使用我们的自定义加载图标。

4. 总结

本文介绍了如何在微信小程序中实现自定义的加载图标功能。通过使用全局变量、拦截器和wx.showLoading和wx.hideLoading方法，我们可以在页面中方便地显示和隐藏我们自定义的加载图标。此外，本文还对如何替换默认加载图标和自定义加载图标进行了介绍。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：微信小程序实现自定义加载图标功能 - Python技术站

微信小程序实现自定义加载图标功能