微信小程序信息提示组件大全

- 一、概述
- 二、主要信息提示组件
- - [1. wx.showModal - 模态对话框](#1. wx.showModal - 模态对话框)
  - [2. wx.showToast - 消息提示框](#2. wx.showToast - 消息提示框)
  - [3. wx.showLoading - 加载提示](#3. wx.showLoading - 加载提示)
  - [4. wx.showActionSheet - 操作菜单](#4. wx.showActionSheet - 操作菜单)
  - [5. wx.showNavigationBarLoading - 导航栏加载动画](#5. wx.showNavigationBarLoading - 导航栏加载动画)
- 三、组合使用示例
- - [1. 表单提交完整流程](#1. 表单提交完整流程)
  - [2. 图片选择与上传流程](#2. 图片选择与上传流程)
- 四、信息提示组件对比表格
- 五、最佳实践建议
- - [1. 用户体验优化](#1. 用户体验优化)
  - [2. 自定义扩展](#2. 自定义扩展)
  - [3. 注意事项](#3. 注意事项)

一、概述

微信小程序提供了多种信息提示组件，用于不同的交互场景。下面详细介绍各种提示组件的使用方法和示例。

二、主要信息提示组件

1. wx.showModal - 模态对话框

功能：显示模态对话框，包含确认和取消按钮。

javascript 复制代码

// 基本使用
wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success(res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

// 自定义配置示例
wx.showModal({
  title: '删除确认',
  content: '确定要删除这条记录吗？删除后无法恢复',
  confirmText: '删除',
  confirmColor: '#FF0000',
  cancelText: '再想想',
  cancelColor: '#999999',
  showCancel: true,
  success(res) {
    if (res.confirm) {
      // 执行删除操作
      wx.showToast({
        title: '删除成功',
        icon: 'success'
      })
    }
  }
})

// 仅确认按钮示例（常用于提示信息）
wx.showModal({
  title: '通知',
  content: '操作成功完成！',
  showCancel: false,
  confirmText: '知道了',
  success(res) {
    if (res.confirm) {
      console.log('用户点击了确定')
    }
  }
})

2. wx.showToast - 消息提示框

功能：显示轻量级提示，在指定时间后自动消失。

javascript 复制代码

// 基本使用
wx.showToast({
  title: '操作成功',
  icon: 'success',
  duration: 2000
})

// 不同图标类型
// 成功图标
wx.showToast({
  title: '提交成功',
  icon: 'success',
  duration: 1500
})

// 加载中
wx.showToast({
  title: '加载中',
  icon: 'loading',
  duration: 2000
})

// 无图标，自定义图片
wx.showToast({
  title: '自定义图标',
  icon: 'none',
  image: '/images/custom-icon.png',
  duration: 2000
})

// 长文本提示（超过7个字会被截断，可使用扩展方案）
wx.showToast({
  title: '这是一条较长的提示信息',
  icon: 'none',
  duration: 3000,
  mask: true  // 显示遮罩，防止重复点击
})

// 配合loading使用
wx.showLoading({
  title: '加载中'
})
// 模拟异步操作
setTimeout(() => {
  wx.hideLoading()
  wx.showToast({
    title: '加载完成',
    icon: 'success'
  })
}, 2000)

3. wx.showLoading - 加载提示

功能：显示加载提示，需要主动调用 wx.hideLoading 隐藏。

javascript 复制代码

// 基本使用
wx.showLoading({
  title: '加载中...'
})

// 网络请求示例
function fetchData() {
  wx.showLoading({
    title: '加载数据',
    mask: true  // 防止触摸穿透
  })
  
  wx.request({
    url: 'https://api.example.com/data',
    success(res) {
      wx.hideLoading()
      // 处理数据
    },
    fail(err) {
      wx.hideLoading()
      wx.showToast({
        title: '加载失败',
        icon: 'none'
      })
    },
    complete() {
      // 如果需要，可以在这里统一隐藏loading
    }
  })
}

// 自定义时长后隐藏（不推荐，通常根据异步操作结果隐藏）
setTimeout(() => {
  wx.hideLoading()
}, 5000)

4. wx.showActionSheet - 操作菜单

功能：从底部弹出操作菜单。

javascript 复制代码

// 基本使用
wx.showActionSheet({
  itemList: ['拍照', '从相册选择', '取消'],
  itemColor: '#333333',
  success(res) {
    console.log(res.tapIndex) // 用户点击的按钮索引
    if (res.tapIndex === 0) {
      console.log('点击了拍照')
    } else if (res.tapIndex === 1) {
      console.log('点击了从相册选择')
    }
  },
  fail(res) {
    console.log(res.errMsg)
  }
})

// 带警示选项的菜单
wx.showActionSheet({
  itemList: ['编辑', '删除', '取消'],
  itemColor: '#333333',
  alertText: '删除后无法恢复',
  success(res) {
    if (res.tapIndex === 0) {
      // 编辑操作
    } else if (res.tapIndex === 1) {
      // 删除操作，可再次确认
      wx.showModal({
        title: '确认删除',
        content: '确定要删除吗？',
        success(modalRes) {
          if (modalRes.confirm) {
            // 执行删除
          }
        }
      })
    }
  }
})

5. wx.showNavigationBarLoading - 导航栏加载动画

功能：在当前页面导航栏显示加载动画。

javascript 复制代码

// 在页面中显示导航栏加载动画
onLoad: function() {
  wx.showNavigationBarLoading()
  
  // 模拟数据加载
  setTimeout(() => {
    wx.hideNavigationBarLoading()
  }, 2000)
}

// 与页面下拉刷新结合
onPullDownRefresh: function() {
  // 显示导航栏加载动画
  wx.showNavigationBarLoading()
  
  // 刷新数据
  this.refreshData().then(() => {
    // 停止下拉刷新
    wx.stopPullDownRefresh()
    // 隐藏导航栏加载动画
    wx.hideNavigationBarLoading()
  })
}

三、组合使用示例

1. 表单提交完整流程

javascript 复制代码

// 表单提交处理
submitForm: function() {
  // 验证表单
  if (!this.validateForm()) {
    wx.showToast({
      title: '请填写完整信息',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  // 显示加载
  wx.showLoading({
    title: '提交中...',
    mask: true
  })
  
  // 模拟API请求
  setTimeout(() => {
    wx.hideLoading()
    
    // 提交成功
    wx.showModal({
      title: '提交成功',
      content: '您的信息已成功提交，审核结果将通过消息通知您。',
      showCancel: false,
      confirmText: '确定',
      success: () => {
        // 返回上一页
        wx.navigateBack()
      }
    })
  }, 1500)
}

2. 图片选择与上传流程

javascript 复制代码

// 选择图片并上传
chooseAndUploadImage: function() {
  wx.showActionSheet({
    itemList: ['拍照', '从相册选择', '取消'],
    success: (res) => {
      if (res.tapIndex === 2) return // 取消
      
      const sourceType = res.tapIndex === 0 ? ['camera'] : ['album']
      
      wx.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: sourceType,
        success: (chooseRes) => {
          const tempFilePath = chooseRes.tempFilePaths[0]
          
          wx.showLoading({
            title: '上传中...'
          })
          
          // 上传图片
          wx.uploadFile({
            url: 'https://example.com/upload',
            filePath: tempFilePath,
            name: 'file',
            success: (uploadRes) => {
              wx.hideLoading()
              wx.showToast({
                title: '上传成功',
                icon: 'success',
                duration: 1500
              })
              // 处理上传结果
            },
            fail: (err) => {
              wx.hideLoading()
              wx.showModal({
                title: '上传失败',
                content: '图片上传失败，请重试',
                showCancel: false
              })
            }
          })
        }
      })
    }
  })
}

四、信息提示组件对比表格

组件名称	用途	是否阻塞	自动关闭	按钮配置	适用场景
wx.showModal	模态对话框	是（阻止其他交互）	否（需用户操作）	确认/取消按钮，可自定义文本颜色	重要操作确认、重要信息提示、用户选择
wx.showToast	轻量提示	否（可设置mask为true实现阻塞）	是（duration后自动关闭）	无按钮，可设置图标/图片	操作反馈、成功/失败提示、轻量信息
wx.showLoading	加载提示	是（默认mask为false，可设置true）	否（需主动调用hideLoading）	无按钮，仅显示文字	数据加载、耗时操作等待
wx.showActionSheet	操作菜单	是	否（需用户选择或点击空白处）	自定义列表项，最多6个	多项选择、功能菜单、操作列表
wx.showNavigationBarLoading	导航栏加载	否	否（需主动调用hide）	无按钮，仅动画	页面加载、下拉刷新
wx.hideToast	隐藏Toast	-	-	-	手动关闭toast
wx.hideLoading	隐藏Loading	-	-	-	手动关闭loading

五、最佳实践建议

1. 用户体验优化

javascript 复制代码

// 1. 合理设置提示时长
wx.showToast({
  title: '操作成功',
  icon: 'success',
  duration: 1500, // 不宜过长，1.5-2秒为宜
  mask: false // 非关键提示不建议加mask
})

// 2. 错误处理友好提示
try {
  // 业务代码
} catch (error) {
  wx.showModal({
    title: '出错了',
    content: '抱歉，操作失败，请稍后重试',
    showCancel: false,
    confirmText: '好的'
  })
  console.error('操作失败:', error)
}

// 3. 加载状态管理
let isLoading = false

function safeShowLoading(title = '加载中') {
  if (!isLoading) {
    isLoading = true
    wx.showLoading({
      title: title,
      mask: true
    })
  }
}

function safeHideLoading() {
  if (isLoading) {
    isLoading = false
    wx.hideLoading()
  }
}

2. 自定义扩展

对于更复杂的需求，可以封装自定义提示组件：

javascript 复制代码

// 自定义长文本提示（解决showToast文字截断问题）
function showLongToast(title, duration = 3000) {
  wx.showModal({
    title: '提示',
    content: title,
    showCancel: false,
    confirmText: '知道了'
  })
}

// 自动消失的模态框（类似Toast但可显示更多内容）
function showAutoCloseModal(title, content, duration = 2000) {
  wx.showModal({
    title: title,
    content: content,
    showCancel: false,
    confirmText: '确定'
  })
  
  // 自动关闭（注意：官方没有提供自动关闭API，这是模拟实现）
  setTimeout(() => {
    // 在小程序基础库2.6.0+可以尝试关闭，但非官方支持
    // 更推荐使用自定义组件实现
  }, duration)
}

3. 注意事项

避免频繁调用：短时间内多次调用提示可能会被覆盖或显示异常
合理使用mask：重要操作使用mask防止误触，普通提示避免使用
网络状态提示：网络请求前检查网络状态
无障碍考虑：确保色盲用户也能理解提示含义（不要仅依靠颜色）
多语言支持：国际化小程序需要准备多语言提示文本

通过合理使用这些提示组件，可以大大提升小程序用户体验和交互友好度。