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

花了一周多，终于把公司小程序做出来了。真机上测试发现调用 showToast 不显示，或者闪一下就没了。经过查找，发现是与 wx.showLoading 冲突了，两者调用的是同个框。

先放上我的错误代码：

1. // 请求事件
2. requestEvent: function() {
3.  
4. wx.showLoading({
5. title: '正在加载中',
6. })
7. wx.request({
8. url: '',
9. success: function(res) {
10. wx.showToast({
11. title: '成功',
12. duration: 2000
13. })
14. },
15. fail: function() {
16. wx.showToast({
17. title: '失败',
18. duration: 2000
19. })
20. },
21. complete: function() {
22. wx.hideLoading()
23. }
24. })
25. }

我是想请求接口后，将加载框隐藏掉，再显示 toast 提示。但是真机上发现 showToast 不显示。正如上面所说，两者调用的是同个框。现在，我们分析整个流程：

1、首先显示 loading 框；  2、然后调用 success / fail，弹框的内容由 loading 变成了 toast；  3、最后调用 onComplete 时，hideLoading 将弹框隐藏掉了；

很明显，我们最终把 toast 框隐藏掉了。知道原因后，改起来就容易了。先调用 wx.hideLoading()，再调用 wx.showToast() 即可。

建议：

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

如下是正确代码：

1. // 请求事件
2. requestEvent: function() {
3.  
4. wx.showLoading({
5. title: '正在加载中',
6. })
7. wx.request({
8. url: '',
9. success: function(res) {
10. wx.hideLoading()
11. wx.showToast({
12. title: '成功',
13. duration: 2000
14. })
15. },
16. fail: function() {
17. wx.hideLoading()
18. wx.showToast({
19. title: '失败',
20. duration: 2000
21. })
22. }
23. })
24. }