小程序wx.showToast真机不显示？
问题描述
今天在真机上测试发现调用
showToast不显示，或者闪一下就没了。就觉得很奇怪！经过查找微信文档，发现是与showLoading冲突了，因为两者调用的是同个element。
代码&问题
async function getScanQRArriveData() {
showLoading({ title: "加载中" });
const { statusCode, message } = await getScanQRArriveDetail(orderNo);
if (statusCode && statusCode == 200) {
setData(data);
} else {
alert(message) // showToast封装方法
}
hideLoading();
}
一开始看上面的代码，感觉一点问题都没有，但是 hideLoading 和 showTast 调用的是同个element，我们按顺序执行一下：
首先显示 showLoading 框； 然后在调用api的时候，弹框的内容由 showLoading 变成了 showToast； 结果showToast还没显示，hideLoading 就将弹框隐藏掉了；
解决方案
将 hideLoading 的调用前置，再调用 showToast 即可。
async function getScanQRArriveData() {
showLoading({ title: "加载中" });
const { data, statusCode, message } = await getScanQRArriveDetail(query.orderNo);
hideLoading();
if (statusCode && statusCode == 200) {
setData(data);
} else {
alert(message) // showToast封装方法
setTimeout(() => reLaunch({ url: "/pages/index/index" }), 2200);
}
}
最后
1、在api请求前需要调用 showLoading，则应该在 success 或者 fail 回调函数内第一行就调用 hideLoading。即使暂时不需要 showToast 操作。也可避免后续需要使用 showToast 而出现问题。
2、当 showToast 和 showLoading 同时使用的时候，多注意两者的调用顺序
3、在使用 reLaunch，switchTab，redirectTo，navigateTo 进行页面跳转的时候，showToast 还没来得及显示，页面就已经跳转了，所以我们可以在此加入定时器进行延迟跳转。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2022-11-04，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
