概述
在开发小程序中遇到了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无效的全部内容,希望文章能够帮你解决微信小程序 - 真机运行toast无效所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复