小程序弹窗是用户交互中最基础也最常用的功能，无论是提示操作成功、确认删除、还是收集用户意见，都离不开弹窗。很多零基础的朋友觉得写代码很难，其实小程序里的弹窗只需要几行简单的 JavaScript 代码就能实现。下面我会从最基础的三种弹窗开始，手把手教你写出第一个可交互的小程序弹窗。
## 前置准备
在开始编写代码之前，你需要准备好以下环境和工具：
1. **微信开发者工具**：从微信官方下载并安装最新版本。这是编写和调试小程序的必备软件。
2. **一个小程序项目**：打开开发者工具，点击“新建项目”，填入你的 AppID（如果没有就选择“测试号”），项目名称随意（例如“弹窗教程”），模板选择“JavaScript 基础模板”。
3. **基础文件结构认知**：你只需要关注两个文件：
- `pages/index/index.wxml`：负责页面布局（相当于 HTML）。
- `pages/index/index.js`：负责逻辑功能（写弹窗代码的地方）。
4. **确保开发者工具模拟器处于运行状态**：点击工具栏的“编译”按钮，如果看到手机模拟器里出现“Hello World”字样，说明项目创建成功。
## 分步操作步骤
### 1. 编写页面触发按钮（WXML 布局）
首先，我们需要在页面上放一个按钮，用户点击这个按钮才会弹出弹窗。打开 `pages/index/index.wxml` 文件，将里面的所有代码替换为以下内容：
```html
```
**操作细节说明**：
- `
- `bindtap="showAlert"` 的意思是：当用户点击这个按钮时，会去 `index.js` 里寻找名为 `showAlert` 的函数并执行。后面两个按钮同理，分别对应 `showConfirm` 和 `showToast`。
- `
### 2. 编写最简单的提示弹窗（showAlert 函数）
接下来编写核心的 JS 代码。打开 `pages/index/index.js` 文件，你会看到一些默认的代码。找到 `Page({})` 这个大括号，在大括号里面（注意不要删除其他代码，在 `data: {}` 的后面，加一个英文逗号）写入以下函数：
```javascript
// pages/index/index.js
Page({
data: {
// 这里可以放页面数据，暂时不用管
},
// 提示弹窗函数
showAlert: function() {
wx.showModal({
title: '温馨提示',
content: '这是一个提示弹窗，点击确定关闭。',
showCancel: false, // 隐藏取消按钮
success: function(res) {
if (res.confirm) {
console.log('用户点击了确定');
}
}
});
}
});
```
**操作细节说明**：
- `wx.showModal()` 是小程序官方提供的弹窗 API（应用程序接口），专门用来显示模态弹窗。
- `title` 是弹窗顶部的标题，`content` 是弹窗中间的文字内容。
- `showCancel: false` 表示不显示“取消”按钮，只显示一个“确定”按钮，适合纯提示场景。
- `success` 是一个回调函数，当用户点击按钮后会自动触发。`res.confirm` 为 `true` 表示用户点了“确定”，`false` 表示点了“取消”。这里我们只是把结果打印到控制台，方便调试。
- 保存文件后，点击模拟器里第一个绿色按钮，就能看到弹窗了。
### 3. 编写带确认/取消的交互弹窗（showConfirm 函数）
很多时候我们需要用户做选择，比如“确定要删除吗？”。在刚才的 `showAlert` 函数后面（记得加英文逗号），继续添加 `showConfirm` 函数：
```javascript
// 确认取消弹窗函数
showConfirm: function() {
wx.showModal({
title: '操作确认',
content: '你确定要执行这个操作吗？',
showCancel: true, // 显示取消按钮（默认就是true，可省略）
cancelText: '我再想想', // 自定义取消按钮文字
confirmText: '确定执行', // 自定义确定按钮文字
success: function(res) {
if (res.confirm) {
// 用户点击了确定
wx.showToast({
title: '操作已执行',
icon: 'success'
});
} else {
// 用户点击了取消
wx.showToast({
title: '已取消操作',
icon: 'none' // 不显示图标
});
}
}
});
},
```
**操作细节说明**：
- 这次 `showCancel` 设为 `true`（或者不写，因为默认就是 `true`），弹窗会显示两个按钮。
- `cancelText` 和 `confirmText` 可以自定义按钮上的文字，让提示更友好。
- 在 `success` 里，我们根据 `res.confirm` 的值，分别调用 `wx.showToast` 显示一个轻提示（Toast），告诉用户操作结果。`icon: 'none'` 表示只显示文字，不显示成功或失败图标。
- 保存后点击第二个灰色按钮测试。你会发现弹窗有“我再想想”和“确定执行”两个选项。
### 4. 编写轻提示弹窗（showToast 函数）
轻提示是一种短暂出现后自动消失的弹窗，适合做操作反馈。继续添加第三个函数：
```javascript
// 轻提示弹窗函数
showToast: function() {
wx.showToast({
title: '操作成功！', // 提示文字
icon: 'success', // 图标：success / error / none / loading
duration: 2000, // 显示时长，单位毫秒（2秒后自动消失）
mask: true, // 是否显示透明蒙层，防止触摸穿透
success: function() {
console.log('轻提示显示成功');
},
fail: function() {
console.log('轻提示显示失败');
}
});
}
```
**操作细节说明**：
- `wx.showToast` 的弹窗默认不会自动关闭，需要设置 `duration` 来控制显示时间。2000 毫秒即 2 秒。
- `icon` 参数支持 `success`（绿色对勾）、`error`（红色叉号）、`loading`（加载图标）和 `none`（无图标）。如果不需要图标，可以设为 `'none'`。
- `mask: true` 非常实用：当弹窗出现时，用户无法点击页面上的其他按钮，避免误操作。
- `fail` 回调用于处理显示失败的情况，比如用户连续快速点击导致弹窗冲突。
- 保存后点击红色按钮测试，你会看到屏幕中间出现一个带对勾的提示，2秒后自动消失。
## 常见问题
**Q1：为什么我点击按钮后没有任何反应？**
A：最常见的原因是函数名写错了。请检查 `index.wxml` 中 `bindtap` 后面的名字（如 `showAlert`）是否与 `index.js` 中定义的函数名完全一致，包括大小写。另一个原因是忘记在函数后面加英文逗号，导致 JS 语法错误，可以在开发者工具的“控制台”面板看是否有红色报错信息。
**Q2：弹窗文字显示不全或被截断怎么办？**
A：`wx.showModal` 的 `content` 支持换行，可以在文字中插入 `\n` 来手动换行。例如：`content: '第一行内容\n第二行内容'`。如果文字太长，建议精简文案，或者改用自定义弹窗组件。
**Q3：如何让轻提示显示更长时间？**
A：`duration` 最大建议值为 10000（10秒），但微信官方限制最大为 1500（1.5秒）左右？实际上官方文档说明 `duration` 的有效范围是 1500 到 10000 毫秒，但实测超过 3000 毫秒后效果不稳定。如果需要长时间提示，建议改用 `wx.showModal`。
**Q4：弹窗弹出后，点击取消按钮依然执行了操作？**
A：检查 `success` 回调中的判断逻辑。必须用 `if (res.confirm)` 包裹确定操作的代码，不能直接写操作代码。同时确保没有在其他地方（如 `complete` 回调）误触发了操作。
**Q5：同时弹出多个弹窗怎么办？**
A：小程序不允许同时显示多个弹窗。如果用户快速点击按钮，可能会触发多个 `showModal` 或 `showToast`。解决方案是在函数开头加一个锁变量，例如：
```javascript
showAlert: function() {
if (this.data.isShowing) return; // 如果正在显示弹窗，直接返回
this.setData({ isShowing: true });
wx.showModal({
// ... 弹窗参数
complete: () => {
this.setData({ isShowing: false }); // 弹窗关闭后解锁
}
});
}
```
同时记得在 `data` 中初始化 `isShowing: false`。
## 收尾总结
通过以上步骤，你已经掌握了小程序中最核心的三种弹窗写法。总结一下重点：
- **提示弹窗**（showModal + showCancel: false）：适合展示信息，用户只能点确定。
- **确认弹窗**（showModal + showCancel: true）：适合让用户做二选一决策，通过 `res.confirm` 区分点击结果。
- **轻提示**（showToast）：适合短暂的操作反馈，自动消失，注意设置 `mask` 防止穿透。
这些代码可以直接复制到你的项目中使用，只需要修改 `title` 和 `content` 的文字内容即可。后续你可以尝试组合使用这些弹窗，比如在用户确认删除后，再弹出一个轻提示告知删除成功。现在，你可以打开开发者工具，亲手点击按钮测试效果，有任何问题都可以对照上面的常见问题排查。