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

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

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

问题描述

今天在真机上测试发现调用 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)
喵喵喵
上一篇
早上 大雾
下一篇
再想想
暂无评论
今日天气
标签
CSS (16) Filter (2) Flex (2) Git (3) html (3) JavaScript (15) Jquery (2) JS (4) linux (2) localstorage (2) mac (1) map (2) mongoDB (1) python (3) set (2) vite (2) vue (9) websocket (1) wordpress (2) 二维码 (1) 傍晚 (2) 刷新页面 (1) 字符串 (5) 对象 (3) 小程序 (6) 年终 (1) 微信 (9) 微信机器人 (5) 总结 (1) 数据类型 (3) 数组 (5) 日常问题 (4) 服务器 (1) 朝阳 (1) 正则 (3) 生活 (6) 移动端 (2) 空地 (1) 组件 (1) 节流 (1) 记录 (3) 远方 (1) 防抖 (1) 验证码 (1) 高楼 (1)
近期文章
  • 微信小程序批量提交后台审核
  • 新年快乐🎉
  • Home
  • 随便转转!
  • 2022!充满魔幻的一年!
归档
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年3月
  • 2018年2月
  • 2017年12月
  • 2017年11月
  • 2017年9月
  • 2012年12月
  • 2002年11月
微信小程序批量提交后台审核
2023-01-29 17:56:58
114 0 1
Home
2023-01-19 13:49:05
64 0 0
2022!充满魔幻的一年!
2022-12-31 21:09:51
140 0 0
Vue Print-js 打印问题记录~
2022-09-29 17:35:25
1,657 0 2
  • 0
  • 0
博主

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

友链
Lieme
公众号
西豆 崔欣 执行上下文 卖坚果的怪叔叔 集赞助手
Copyright © 2017-2023 卖坚果的怪叔叔. Designed by nicetheme.

苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
# WordPress # # CSS #
坚果大叔
225
文章
59
评论
159
喜欢