小程序wx.showToast在真机上闪烁一下就消失

最新推荐文章于 2023-11-20 17:31:42 发布

九零七

最新推荐文章于 2023-11-20 17:31:42 发布

阅读量2.2k

点赞数 1

文章标签：小程序

本文链接：https://blog.youkuaiyun.com/weixin_46313540/article/details/109304841

版权

在小程序开发中，使用wx.showToast方法时，出现提示框在真机上短暂显示即消失的问题。原因在于showToast与showLoading共用同一提示框，可能被之前的hide方法影响。解决办法是将wx.showToast()放到事件队列末尾执行，以确保其正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用wx.showToast方法，在开发者工具中是按照设置的时间正常停留，但在真机上发现，提示框一闪而过，持续时间很短。

1、产生原因
网上有很多解释，这里我就直接引用一下

原因就是因为小程序的内部处理 wx.showLoading() 和 wx.showToast() 调用的是同一个框，都受 wx.hideToast() 或者 wx.hideLoading() 的影响。
比如在真机上你的代码顺序为 wx.showLoading() =>wx.hideLoading() => wx.showToast() ;但是实际你看到的现象是 wx.showLoading() => wx.showToast() =>wx.hideLoading()，受到最后的 wx.hideLoading() 影响，toast 框闪烁一下就消失；

2、解决办法
原理：把 wx.showToast() 放到事件队列的队尾去执行。
我使用的（亲测有效Android 、ios）

    fetchJifen() {
      wx.showLoading();
      
      api.jifen({
        method: 'POST',
        data: {
          paramType: "2"
        },
        success: function (res) {
        
          wx.hideLoading();
          setTimeout(() => {
            wx.showToast({
              title: `打卡成功，加${res.data.paramDetail}积分`,
              icon: "none",
              duration: 3000,
              success: (res) => {
                setTimeout(() => {
                  wx.hideToast();
                }, 3000)
              }
            });
          }, 200);

        }
      })
    },

看到网上还有以下这种办法，但我试过了没效果

wx.showLoading();
wx.hideLoading();
setTimeout( () => {
  wx.showToast({
    title: '提示的错误术语',
    icon: "none",
  });
  setTimeout( () =>{
    wx.hideToast();  
  },2000)
},0);