微信小程序中的消息提示框主要分为以下几种：
1. wx.showToast(Object object)
-
功能： 显示消息提示框，一般用于显示操作结果、状态等。
-
特点： 提示框显示在屏幕中间，持续一段时间后自动消失（默认1.5秒）。
-
属性：
title(String)：提示的内容，长度限制为 7 个汉字/14 个英文数字。 (必须）icon(String)：图标，有效值有success,loading,none。 默认值为success。image(String)：自定义图标的本地路径，image 的优先级高于 icon。duration(Number)：提示的延迟时间，单位毫秒。 默认值为 1500, 最大值为 10000。mask(Boolean)：是否显示透明蒙层，防止触摸穿透，mask 为 true 时即使设置了 duration 也不会自动消失。 默认为 false。success(Function)：接口调用成功的回调函数。fail(Function)：接口调用失败的回调函数。complete(Function)：接口调用结束的回调函数（调用成功、失败都会执行）。
示例：
javascript
<button bindtap="showSuccessToast">成功提示</button>
<button bindtap="showLoadingToast">加载中提示</button>
<button bindtap="showNoneToast">无图标提示</button>
<button bindtap="showCustomImageToast">自定义图片提示</button>
javascript
Page({
showSuccessToast: function() {
wx.showToast({
title: '操作成功',
icon: 'success',
duration: 2000
})
},
showLoadingToast: function() {
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 2000
})
},
showNoneToast: function() {
wx.showToast({
title: '提示信息',
icon: 'none',
duration: 2000
})
},
showCustomImageToast: function() {
wx.showToast({
title: '提示信息',
image: '/images/custom.png', // 替换为你的图片路径
duration: 2000
})
}
})-
注意：
icon: 'loading'一般用于ajax请求中，页面等待。mask: true时，提示框不会自动消失，通常需要手动隐藏，例如使用wx.hideToast()。
2. wx.showModal(Object object)
-
功能： 显示模态对话框，用于需要用户确认或进行选择的场景。
-
特点： 模态对话框会遮盖住整个屏幕，用户需要点击确定或取消按钮才能关闭。
-
属性：
title(String)：提示的标题。 （必须）content(String)：提示的内容。 （必须）showCancel(Boolean)：是否显示取消按钮，默认为 true。cancelText(String)：取消按钮的文字，默认为"取消"。cancelColor(String)：取消按钮的文字颜色，默认为"#000000"。confirmText(String)：确定按钮的文字，默认为"确定"。confirmColor(String)：确定按钮的文字颜色，默认为"#3CC51F"。success(Function)：接口调用成功的回调函数。 Result 包含confirm（用户点击了确定按钮）和cancel（用户点击了取消按钮）fail(Function)：接口调用失败的回调函数。complete(Function)：接口调用结束的回调函数（调用成功、失败都会执行）。
-
示例：
javascript
<button bindtap="showConfirmationModal">确认对话框</button>
javascript
Page({
showConfirmationModal: function() {
wx.showModal({
title: '确认操作',
content: '您确定要进行该操作吗？',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
})3. wx.showLoading(Object object)
-
功能： 显示 loading 提示框，一般用于在数据加载或处理时，提供用户等待反馈。
-
特点： 与
wx.showToast({icon: 'loading'})类似，但可以手动控制隐藏。 -
属性：
title(String)：提示的内容，长度限制为 7 个汉字/14 个英文数字。 (必须）mask(Boolean)：是否显示透明蒙层，防止触摸穿透。 默认为 false。success(Function)：接口调用成功的回调函数。fail(Function)：接口调用失败的回调函数。complete(Function)：接口调用结束的回调函数（调用成功、失败都会执行）。
-
示例：
javascript
<button bindtap="startLoading">开始加载</button>
javascript
Page({
startLoading: function() {
wx.showLoading({
title: '加载中',
mask: true
})
setTimeout(function() {
wx.hideLoading() // 2秒后隐藏 loading
}, 2000)
}
})4. wx.hideToast()
- 功能： 隐藏消息提示框 (与
wx.showToast配套使用，尤其在mask: true的情况下) - 属性： 无
5. wx.hideLoading()
- 功能： 隐藏 loading 提示框 (与
wx.showLoading配套使用) - 属性： 无
选择哪种消息提示框？
- wx.showToast： 用于简单的结果反馈，例如操作成功、操作失败、加载完成等。
- wx.showModal： 用于需要用户确认或选择的场景，例如删除确认、退出登录等。
- wx.showLoading： 用于数据加载或处理时，提供用户等待反馈。
最佳实践建议：
- 避免过度使用： 过多的提示框会影响用户体验。
- 简洁明了： 提示内容应该简洁明了，让用户快速理解。
- 适当的延迟时间：
wx.showToast的延迟时间应该根据提示内容的长度进行调整。 - 错误处理： 在异步操作中，务必对错误情况进行处理，并给出相应的提示。
- 自定义样式： 虽然小程序没有提供直接修改
wx.showToast和wx.showModal样式的 API，但是可以考虑使用自定义组件来模拟实现，以便更好地控制样式和交互体验。 这需要一定的开发成本。
总而言之，理解这几种消息提示框的功能和属性，并根据实际情况选择合适的提示方式，可以有效地提升小程序的用户体验。