小程序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 还没来得及显示，页面就已经跳转了，所以我们可以在此加入定时器进行延迟跳转。