微信小程序-消息提示框

封面图 • 2025-11-05 • 小程序

在微信小程序中，消息提示框（Toast）是用于向用户显示简短的提示信息的一种方式。它不会打断用户的操作，通常用于通知用户某些操作已完成或状态变化。

### 一、使用 `wx.showToast` 显示消息提示框

这是最常用的方式，适用于显示短暂的提示信息。

#### 语法：
```javascript
wx.showToast({
  title: '提示内容',
  icon: 'success', // 可选：success, info, none
  mask: false,     // 是否显示遮罩层，默认false
  success: function(res) {
    // 成功回调
  }
})
```

#### 示例：
```javascript
wx.showToast({
  title: '操作成功',
  icon: 'success',
  duration: 2000 // 默认1500ms，可设置持续时间
})
```

> 注意：`duration` 是可选参数，单位为毫秒。如果设置为 0，则提示框会一直显示，直到手动调用 `wx.hideToast()`。

---

### 二、使用 `wx.showModal` 显示模态对话框

如果你需要用户确认或取消某个操作，可以使用模态对话框（Modal），而不是简单的 Toast。

#### 语法：
```javascript
wx.showModal({
  title: '提示',
  content: '确定要执行此操作吗？',
  showCancel: true,
  cancelText: '取消',
  cancelColor: '#000000',
  confirmText: '确定',
  confirmColor: '#ff0000',
  success: function(res) {
    if (res.confirm) {
      console.log('用户点击确定');
    } else if (res.cancel) {
      console.log('用户点击取消');
    }
  }
})
```

---

### 三、隐藏提示框

如果你使用了 `wx.showToast` 并设置了 `duration: 0`，可以通过以下方法手动隐藏：

```javascript
wx.hideToast()
```

---

### 四、常见问题

| 问题 | 解决方案 |
|------|----------|
| 提示框不显示 | 检查是否被其他组件覆盖，或者 `mask` 设置为 `true` |
| 多次调用导致重复 | 使用 `wx.hideToast()` 先隐藏之前的提示 |
| 自定义样式 | 微信小程序的 Toast 样式不可自定义，只能使用官方提供的样式 |

---

### 五、支持的图标（icon）

- `success`: ✔️
- `info`: 📝
- `none`: ❌（不显示图标）

---

### 六、示例代码（完整页面）

**WXML 文件：**
```html
<view>
  <button bindtap="showToast">显示提示</button>
  <button bindtap="showModal">显示模态框</button>
</view>
```

**JS 文件：**
```javascript
Page({
  showToast() {
    wx.showToast({
      title: '成功',
      icon: 'success',
      duration: 2000
    })
  },
  showModal() {
    wx.showModal({
      title: '提示',
      content: '确定执行此操作吗？',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }
})
```

---

如需更复杂的交互，也可以使用自定义组件来实现更丰富的提示效果。

如果你有具体场景（比如登录失败提示、加载中提示等），我可以帮你定制更详细的代码。