微信小程序 showToast 真机下一闪而过 的解决办法（超全）

wx.showToast()

---

---

前言

场景一：
请求接口需要调用 wx.showLoading(),接口请求结束调用 wx.hideLoading()。如果需要给用户提示错误信息，调用 wx.showToast(),在模拟器上正常显示，但是在真机上会出现提示信息闪烁一下立马消失。

场景二:
wx.showToast显示后跳转页面，此时基本没显示（一闪而过），直接跳转。

---

一、wx.showToast()调用方式

wx.showToast(Object object)显示消息提示框

参数	说明
title	提示的内容
icon	图标
image	自定义图标路径，image优先级高于icon
duration	提示的延迟时间
mask	是否显示透明蒙层，防止触摸穿透
success	接口调用成功的回调函数
fail	接口调用结束的回调函数（调用成功、失败都会执行）
complete	接口调用结束的回调函数（调用成功、失败都会执行）

object.icon 的合法值

值	说明
success	显示成功图标，此时 title 文本最多显示 7 个汉字长度
loading	显示加载图标，此时 title 文本最多显示 7 个汉字长度
none	不显示图标，此时 title 文本最多可显示两行，1.9.0及以上版本支持

二、问题分析

1.出现原因

场景一：
wx.hideLoading()会关闭同级中的wx.showLoading 或 wx.showToast 所以要在showToast之前调用wx.hideLoading

场景二：
showToast不会出现在打开的新的页面中

2.解决方案

场景一：

延迟调用showToast，保证showToast在hideLoading之后执行

setTimeout(() => {
    wx.showToast({
        title: msg,
        mask: true,
        icon: 'none',
        duration: 2000
    });
}, 500);

或

wx.showLoading();
wx.hideLoading();
// 利用js的事件循环机制，把 wx.showToast() 放到事件队列的队尾去执行。
setTimeout( () => {
  wx.showToast({
    title: '***',
    icon: "none",
  });
  setTimeout( () =>{
    wx.hideToast();  
  },2000)
},0);

场景二：

延迟调用navigateBack或navigateTo，保证showToast完成后再跳转新页面

wx.showToast({
  title: '编辑成功',
   icon: "none",
   duration: 1000,
   mask: true
 })
 setTimeout(()=> {
   wx.navigateTo({
     url: '*****',
   })
 }, 1000)
})

---

总结

wx.showLoading 和 wx.showToast 同时只能显示一个

wx.showToast 应与 wx.hideToast 配对使用