微信小程序开发1------微信小程序中的消息提示框总结

微信小程序中的消息提示框主要分为以下几种：

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)：接口调用结束的回调函数（调用成功、失败都会执行）。

示例：

成功提示
加载中提示
无图标提示
自定义图片提示

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)：接口调用结束的回调函数（调用成功、失败都会执行）。

• 示例：

确认对话框

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)：接口调用结束的回调函数（调用成功、失败都会执行）。

• 示例：

开始加载

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，但是可以考虑使用自定义组件来模拟实现，以便更好地控制样式和交互体验。 这需要一定的开发成本。

总而言之，理解这几种消息提示框的功能和属性，并根据实际情况选择合适的提示方式，可以有效地提升小程序的用户体验。