小程序模板网

解决微信小程序真机 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. }


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24675.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询