wx.showToast()

---

文章目录

wx.showToast()前言一、wx.showToast()调用方式二、问题分析1.出现原因2.解决方案 总结

---

前言

场景一：请求接口需要调用 wx.showLoading(),接口请求结束调用 wx.hideLoading()。如果需要给用户提示错误信息，调用 wx.showToast(),在模拟器上正常显示，但是在真机上会出现提示信息闪烁一下立马消失。 场景二: wx.showToast显示后跳转页面，此时基本没显示（一闪而过），直接跳转。

---

一、wx.showToast()调用方式

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

参数说明title提示的内容icon图标image自定义图标路径，image优先级高于iconduration提示的延迟时间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 配对使用