uni-app警告 “请注意 showLoading 与 hideLoading 必须配对使用”

在uni-app开发中，showLoading和hideLoading是用于显示和隐藏加载提示框的API。如果这两个API没有正确配对使用，就可能导致加载提示框无法正常消失，从而影响用户体验。为了确保showLoading和hideLoading的配对使用，我们通常会在显示加载提示框后立即进行某个操作（如网络请求），并在操作完成后隐藏加载提示框。

以下是一个简单的代码示例，展示了如何在uni-app中正确配对使用showLoading和hideLoading：

// 假设我们有一个页面，需要在页面加载时发送一个网络请求，并显示加载提示框
Page({
  onLoad: function() {
    // 显示加载提示框
    uni.showLoading({
      title: '加载中...',
      mask: true // 是否显示透明蒙层，防止触摸穿透
    });

    // 发送网络请求
    uni.request({
      url: 'https://api.example.com/data', // 替换为你的API地址
      method: 'GET',
      success: (res) => {
        // 请求成功，处理返回的数据
        console.log('请求成功：', res.data);

        // 隐藏加载提示框
        uni.hideLoading();

        // 更新页面数据
        this.setData({
          data: res.data
        });
      },
      fail: (err) => {
        // 请求失败，处理错误
        console.error('请求失败：', err);

        // 隐藏加载提示框，并显示错误信息
        uni.hideLoading();
        uni.showToast({
          title: '请求失败，请稍后再试',
          icon: 'none'
        });
      }
    });
  }
});

在这个示例中，我们在页面加载时首先调用uni.showLoading显示加载提示框，然后发送一个网络请求。网络请求的回调函数中，无论请求成功还是失败，都会调用uni.hideLoading来隐藏加载提示框。这样就确保了showLoading和hideLoading的配对使用。

此外，为了避免因异常或错误导致hideLoading没有被调用，我们可以在页面的onUnload或onError生命周期函数中添加额外的hideLoading调用，以确保在页面卸载或发生错误时也能隐藏加载提示框。但请注意，这种做法应谨慎使用，因为它可能会隐藏掉因其他原因正在显示的加载提示框。

onUnload: function() {
  uni.hideLoading(); // 页面卸载时隐藏加载提示框（谨慎使用）
},
onError: function(err) {
  console.error('页面错误：', err);
  uni.hideLoading(); // 页面发生错误时隐藏加载提示框（谨慎使用）
}