解决微信小程序真机 showToast 不显示

今天在真机上测试发现调用 showToast 不显示，或者闪一下就没了。经过查找，发现是与 wx.showLoading 冲突了，两者调用的是同个框。

先看下错误代码：

  // 请求事件
  requestEvent: function() {

    wx.showLoading({
      title: '正在加载中',
    })
    wx.request({
      url: '',
      success: function(res) {
        wx.showToast({
          title: '成功',
          duration: 2000
        })
      },
      fail: function() {
        wx.showToast({
          title: '失败',
          duration: 2000
        })
      },
      complete: function() {
        wx.hideLoading()
      }
    })
  }

看这代码，好像一点问题都没有，但是hideLoading和showTast调用的是同个框，所以我们走下流程：

首先显示 loading 框；
然后调用 success / fail，弹框的内容由 loading 变成了 toast；
最后调用 onComplete 时，hideLoading 将弹框隐藏掉了；
很明显，我们最终把 toast 框隐藏掉了。知道原因后，改起来就容易了。先调用 wx.hideLoading()，再调用 wx.showToast() 即可。

建议：

若是在网络请求前需要调用 wx.showLoading，建议在该 success 和 fail 回调函数内第一行就调用 wx.hideLoading。即使暂时不需要 showToast 操作。因为以后需要在回调函数内添加 toast 时， 就不用再管什么顺序问题了；
当 toast 和 loading 同时使用，多注意两者的调用顺序；

如下是正确代码：

// 请求事件
  requestEvent: function() {
 
    wx.showLoading({
      title: '正在加载中',
    })
    wx.request({
      url: '',
      success: function(res) {
        wx.hideLoading()
        wx.showToast({
          title: '成功',
          duration: 2000
        })
      },
      fail: function() {
        wx.hideLoading()
        wx.showToast({
          title: '失败',
          duration: 2000
        })
      }
    })
  }

不要着急划走！！！还有另外一种情况就是使用了跳转页面：

 wx.reLaunch，wx.switchTab，wx.redirectTo，wx.navigateTo使用这三个方法后，showTast还没来得及显示，页面就已经跳转了，所以我们可以在此加入setTimeOut，妥妥的没毛病

 

原文链接：https://blog.csdn.net/TiaoZhanJi_Xian/article/details/121011868