【微信小程序】常用6个消息框的使用心得及使用说明_wx.showmodal
在微信小程序开发过程中，我们会经常的消息框功能，常用的有wx.showToast、wx.showModal、wx.showLoading、wx.showActionSheet、wx.hideToast、wx.hideLoading下面我们结合着例子给大家讲解一下
1、wx.showModal使用说明
1.1、wx.showModal官方描述
wx.showToast(Object object)以 Promise 风格 调用：支持
小程序插件：支持，需要小程序基础库版本不低于 1.9.6
微信 Windows 版：支持
微信 Mac版：支持
微信 鸿蒙 OS 版：支持
功能描述
显示消息提示框
注：用于显示轻量级提示框（自动消失）
1.2、wx.showToast具体参数使用说明参见官方文档
【微信公众平台API----wx.showToast】
1.3、wx.showToast实例
wx.showToast({title: \'提示消息\', // 必填，最多显示7个汉字icon: \'success\', // 可选值：success/error/loading/noneduration: 2000, // 显示时长（默认1500ms）mask: true, // 是否显示透明蒙层（防止触摸穿透,默认是false）success: function () { console.log(\"接口调用成功的回调函数\");},fail: function () { console.log(\"接口调用失败的回调函数\");},complete: function () { console.log(\"接口调用结束的回调函数（调用成功、失败都会执行）\");}})注意： icon为loading时提示框持续显示，需手动调用wx.hideToast()关闭
1.4、wx.showToast显示效果图
icon可选四个值：
success 显示成功图标，此时 title 文本最多显示 7 个汉字长度
error 显示失败图标，此时 title 文本最多显示 7 个汉字长度 2.14.1
loading 显示加载图标，此时 title 文本最多显示 7 个汉字长度
none 不显示图标，此时 title 文本最多可显示两行，1.9.0及以上版本支持
当icon的值为 success，title的值为提示消息
当icon的值为 error，title的值为提示消息
当icon的值为 loading，title的值为提示消息
当icon的值为 none，title的值为提示消息
2、wx.showModal使用说明
2.1、wx.showModal官方描述
wx.showModal(Object object)以 Promise 风格 调用：支持
小程序插件：支持，需要小程序基础库版本不低于 1.9.6
微信 Windows 版：支持
微信 Mac
版：支持
微信 鸿蒙 OS 版：支持
功能描述
显示模态对话框
注：用于显示模态对话框（含确认/取消按钮）
2.2、wx.showModal具体参数使用说明参见官方文档
【微信公众平台API----wx.showModal】
2.3、wx.showModal实例
wx.showModal({ title: \'提示\', //提示的标题 content: \'确认删除此项？\', //提示的内容 confirmText: \'确定\', //确认按钮的文字，最多 4 个字符 cancelText: \'取消\', // 取消按钮的文字，最多 4 个字符 success(res) { if (res.confirm) { // 用户点击确定后的操作 }else{ // 用户取消后的操作 } } })2.4、wx.showModal显示效果图
3、wx.showLoading使用说明
3.1、wx.showLoading官方描述
wx.showLoading(Object object)基础库 1.1.0 开始支持，低版本需做兼容处理。
以 Promise 风格 调用：支持
小程序插件：支持，需要小程序基础库版本不低于 1.9.6
微信 Windows 版：支持
微信 Mac 版：支持
微信 鸿蒙 OS 版：支持
功能描述
显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
3.2、wx.showLoading具体参数使用说明参见官方文档
【微信公众平台API----wx.showLoading】
3.3、wx.showLoading实例
wx.showLoading({title: \'加载中...\',mask: true});注： 数据加载完成后主动调用wx.hideLoading()，将wx.showLoading进行关闭
3.4、wx.showLoading显示效果图
4、wx.showActionSheet使用说明
4.1、wx.showActionSheet官方描述
wx.showActionSheet(Object object)以 Promise 风格 调用：支持
小程序插件：支持，需要小程序基础库版本不低于 1.9.6
微信 Windows 版：支持
微信 Mac版：支持
微信 鸿蒙 OS 版：支持
功能描述
显示操作菜单
注：显示底部操作菜单
4.2、wx.showActionSheet具体参数使用说明参见官方文档
【微信公众平台API----wx.showActionSheet】
4.3、wx.showActionSheet实例
wx.showActionSheet({ itemList: [\'保存\', \'分享\', \'删除\'], //按钮的文字数组，数组长度最大为 6 itemColor:\'#0000FF\',// 按钮的文字颜色 默认是#000000 黑色 success (res) { //用户点击itemList的列表项目 console.log(res.tapIndex) //tapIndex用户点击的按钮序号，从上到下的顺序，从0开始 }, fail (res) { //用户点击取消 console.log(res.errMsg) } })4.3、wx.showActionSheet显示效果图
注：点击取消的时候执行fail方法，点击功能按键的时候执行success方法
5、wx.hideToast使用说明
5.1、wx.hideToast官方描述
wx.hideToast(Object object)以 Promise 风格 调用：支持
小程序插件：支持，需要小程序基础库版本不低于 1.9.6
微信 Windows 版：支持
微信 Mac 版：支持
微信 鸿蒙 OS 版：支持
功能描述
隐藏消息提示框
5.2、wx.hideToast具体参数使用说明参见官方文档
【微信公众平台API----wx.hideToast】
5.3、wx.hideToast实例
//直接使用就可以，默认参数为空wx.hideToast()6、wx.hideLoading使用说明
6.1、wx.hideLoading官方描述
wx.hideLoading(Object object)基础库 1.1.0 开始支持，低版本需做兼容处理。
以 Promise 风格 调用：支持
小程序插件：支持，需要小程序基础库版本不低于 1.9.6
微信 Windows 版：支持
微信 Mac 版：支持
微信 鸿蒙 OS 版：支持
功能描述
隐藏 loading 提示框
6.2、wx.hideLoading具体参数使用说明参见官方文档
【微信公众平台API----wx.hideLoading】
6.3、wx.hideLoading实例
//直接使用就可以，默认参数为空wx.hideLoading()
