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