WEB程序开发笔记
WEB程序开发笔记
wx.showToast 和 wx.showLoading 不能同时使用。它们共用同一个底层弹窗组件，后调用的会直接覆盖先调用的。
先来快速看下两者的区别：
| 方法 | 说明 | 关闭方式 |
|---|---|---|
wx.showLoading |
显示加载提示框，通常用于网络请求等耗时操作。 | 必须主动调用 wx.hideLoading 关闭。 |
wx.showToast |
显示消息提示框，常用于操作结果反馈，一段时间后自动消失。 | 调用 wx.hideToast 或等待 duration 参数设定的时间后自动关闭。 |
最常见的冲突场景是：你在发起网络请求前显示了 Loading，然后在请求的回调中想显示一个 Toast。如果处理不当，Toast 可能会不显示或一闪而过。
❌ 错误示例
wx.showLoading({ title: '加载中...' });
wx.request({
// ...
success: (res) => {
// 错误：直接调用showToast，最后又被complete里的hideLoading关闭了
wx.showToast({ title: '请求成功' });
},
complete: () => {
wx.hideLoading(); // 这里会把上面的Toast也一并关掉
}
});
✅ 正确做法：先关闭 Loading，再显示 Toast
wx.showLoading({ title: '加载中...' });
wx.request({
// ...
success: (res) => {
wx.hideLoading(); // 1. 先手动关闭Loading
wx.showToast({ // 2. 再显示Toast
title: '请求成功',
icon: 'success'
});
},
fail: (err) => {
wx.hideLoading(); // 失败时也建议先关闭Loading
wx.showToast({
title: '请求失败',
icon: 'error'
});
}
// 注意：complete回调里不要再调用wx.hideLoading()，否则可能会重复关闭
});
如果你的项目中多处需要处理这种顺序，可以考虑封装一个简单的提示管理器，通过状态控制来避免冲突。核心思路是给Toast更高的优先级：
这样可以确保最终用户看到的是最重要的提示信息。
希望这些能帮你更好地处理小程序的提示交互。
🔥BuildAdmin是一个永久免费开源，无需授权即可商业使用，且使用了流行技术栈快速创建商业级后台管理系统。
