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

90 阅读 0 评论 60 点赞

我是靠谱客的博主细心信封，这篇文章主要介绍微信小程序 - 真机运行toast无效，现在分享给大家，希望可以做个参考。

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

问题出现场景

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

问题解析

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

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

前置解决方法

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

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

错误代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  // 请求事件
  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()

正确代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 // 请求事件
  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秒以内，例如几百毫秒不影响体验

正确代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 // 请求事件
  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)
      }
    })
  }