卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 工具箱
  • 关于
首页 › 技术 › 小程序wx.showToast真机不显示?

小程序wx.showToast真机不显示?

坚果大叔
2022-11-03 17:42:55技术阅读 1,485

文章目录[隐藏]

  • 问题描述
  • 代码&问题
  • 解决方案
  • 最后

问题描述

今天在真机上测试发现调用 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 还没来得及显示,页面就已经跳转了,所以我们可以在此加入定时器进行延迟跳转。



微信扫描下方的二维码阅读本文

小程序
赞赏 赞(0)
喵喵喵
上一篇
早上 大雾
下一篇
近期文章
  • ant-design-vue a-select 下拉滚动的时候出现数据重复
  • ant-design-vue a-checkbox-group 追加数据后第一个无法选中
  • 5.1游记
  • 将数组中空值字段赋默认值!
  • 周末出游,惊喜相伴——水牛的美丽邂逅。
ant-design-vue a-select 下拉滚动的时候出现数据重复
2023-05-15 14:49:38
91 1 0
ant-design-vue a-checkbox-group 追加数据后第一个无法选中
2023-05-13 15:13:43
147 0 0
将数组中空值字段赋默认值!
2023-04-25 14:49:11
182 0 0
数字跟文字一起被强制换行了?
2023-04-07 17:25:04
254 0 0
  • 0
博主

一枚佛系前端开发,会一丢丢摄影,喜欢折腾,爱好美食。分享点前端技巧、笔记以及各种有趣的APP和资源教程♥♥

友链
Lieme
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔
Copyright © 2017-2023 卖坚果的怪叔叔

萌ICP备20230818号 苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 工具箱
  • 关于
# WordPress # # CSS #
坚果大叔
243
文章
65
评论
186
喜欢