微信小程序中 showToast 真机下一闪而过相关问题

一、出现问题场景

 

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

 

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

二、问题分析

 

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 同时只能显示一个