坚果大叔 坚果大叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 技术 › 小程序wx.showToast真机不显示?

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

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

问题描述

今天在真机上测试发现调用 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)
喵喵喵
上一篇
早上 大雾
下一篇
在小程序中查看
搜你想看的
聚合文章
JavaScript之继承(未完待续)
重学JavaScript之基本概念(中) => 操作符
deep 不生效!
ES6入门之Promise
闲言碎语
Memos
Nuxt3中piana持久化处理!
2025-06-22 18:45:45
315 0 1
npm install 出现 Error:EISDIR:illegal operation on a directory 的错误提示!
2025-03-31 19:02:11
886 0 0
iphone 利用 Scriptable 添加网上国网电费小组件
2025-01-06 20:40:20
7,097 2
在博客中加上memos记录展示。
2024-12-25 23:41:27
3,575 2
  • 0
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2025 坚果大叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
320
文章
134
评论
372
喜欢