微信小程序 - 真机运行toast无效

在开发小程序中遇到了Toast无效的问题，在解决该bug后，特记录于此 ~

问题出现场景

网络请求后对应的回调区间内调用toast在模拟器可正常显示，但在真机却无效！！！

问题解析

主要原因：loading、toast的调用顺序

个人理解：因俩者执行在同一队列，当有一者执行时队列被占用，另一者无法执行或已经被隐蔽执行，所以导致我们只看到了菊花消失，却看不到toast展示

前置解决方法

注：如操作完前置解决方法已经实现效果，那么可忽略完美补充

问题检查：查看是否在toast之前有网络请求的loading，且toast在wx.hideLoading()之前

• 错误代码

  // 请求事件
  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()
      }
    })
  }

解决方式：如上所述，那么我们需要在调用toast之前就先行调用wx.hideLoading()

• 正确代码

 // 请求事件
  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
        })
      }
    })
  }

完美补充 （小小补充，一时三刻）

• 注：已实行前置解决方法，但在真机运行依旧无法正常显示toast
• 因：小程序自带缺陷，方法过度封装，扩展性一般般
• 解：延时操作toast，建议不要延迟太久，最好1秒以内，例如几百毫秒不影响体验

正确代码

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

    wx.showLoading({
      title: '正在加载中',
    })
    wx.request({
      url: '',
      success: function(res) {
        wx.hideLoading()

	  //看过来，看过来，关键在这里
	 	setTimeout(function() {
          wx.showToast({
          title: '成功',
          duration: 2000
        })
        }, 500)
      },
      fail: function() {
        wx.hideLoading()
        
   	  //看过来，看过来，关键在这里   
	 	setTimeout(function() {
          wx.showToast({
          title: '失败',
          duration: 2000
        })
        }, 500)
      }
    })
  }

最后

以上就是细心信封最近收集整理的关于微信小程序 - 真机运行toast无效的全部内容，更多相关微信小程序内容请搜索靠谱客的其他文章。