微信小程序｜showModal 对话框教程｜确认文案、异步加锁与防连点 – MPForge
直接回答：这篇小程序 showModal 对话框教程解决三个高频故障：连点确认导致双提交、按钮文案含糊用户点错、异步结果没等到弹窗就关了。给产品看确认文案怎么写，给开发看确认后加锁、失败可重试怎么实现。MPForge（DEVDIY 旗下）的口径是「对话框是刹车不是门帘」：只拦关键操作，确认按钮必须动词化，用户点下的每一次都要有明确后果。
一、对话框为什么会被点出事故
结论先讲明：对话框一旦弹出，用户的全部注意力就在两个按钮上——文案含糊或响应迟钝，事故就发生在这零点几秒里。
三起真实翻车：用户点「确定」后接口慢，连点三下，后台生成三笔退款单；弹窗写「提示」两个按钮却是「取消/确定」，没人确定「确定」到底确定什么；把非关键的「查看活动」也做成强制弹窗，用户一天被拦五次，直接流失。逐条看根因：
- 连点双提交：确认回调里没加锁，接口慢时每次点击都会发起请求。
- 文案含糊：按钮不写动词，用户靠猜，猜错的操作往往不可逆。
- 阻断非关键路径：什么都弹强制框，等于没有强制，用户只会习惯性乱点。
分工口径：产品列出「哪些操作值得弹」，开发守住「弹了之后必须可等待、可重试」，两个清单都对齐才排期。
二、什么操作才值得弹对话框
先定弹窗资格，再谈实现。按场景分三档：
| 场景 | 达标做法 | 常见错误 |
|---|---|---|
| 不可逆操作 | 删除、退款、注销必弹，文案写明后果 | 「确定执行吗」式废话文案 |
| 放弃已编辑内容 | 有改动才弹，按钮写「放弃/继续编辑」 | 没改也弹，弹个不停 |
| 信息告知 | 能用页内提示就不用弹窗 | 活动广告弹窗当天三次 |
离开编辑页的自动拦截与草稿保存是另一套机制，配合使用，见 小程序离开确认防丢草稿教程；轻量反馈用 Toast 而不是弹窗，口径见 小程序 Loading 与 Toast 使用教程。
三、落地步骤：文案、加锁、可重试
一个能扛住连点的对话框，要过这五步：
- 危险操作才弹：按第二节资格表收口，非关键路径改用页内提示或 Toast。
- 按钮文案动词化：确认写「删除订单」「确认退款」，取消写「再想想」，拒绝裸的「确定」。
- 确认后加锁：回调第一行置 loading 态并锁按钮，请求返回前忽略一切重复点击。
- 失败可重试：接口失败给出原因与重试入口，解锁按钮，不让用户卡在死局。
- 少用强制不可关：只有协议确认等法定场景用不可关闭弹窗，且必须给退出业务路径。
四、验收清单：专治手快与手抖
验收方法很朴素：对着弹窗疯狂点，看会发生什么。
| 检查项 | 达标口径 | 常见错误 |
|---|---|---|
| 防连点 | 确认后按钮立即锁定且仅发一次请求 | 连点三下三笔订单 |
| 文案明确 | 按钮写动词与对象，后果可预判 | 「确定/取消」万能组合 |
| 异步闭环 | 成功、失败、超时三条路都有下文 | 失败后弹窗消失无提示 |
| 服务端兜底 | 提交接口做幂等，重复请求只生效一次 | 全指望前端加锁 |
五、避坑清单
四条都关乎「别高估用户的耐心」：
- 别指望富文本弹窗：showModal 内容只支持纯文本，要排版和图片就自建弹层组件。
- 别在弹窗里放输入框：需要输入的场景跳转专门表单或自建组件，原生弹窗接不住。
- 别叠多个弹窗：弹窗之上再弹弹窗，返回逻辑互相打架，一次只处理一个决策。
- 别用恐吓文案：「不确认将无法使用」这类威胁式文案转化一时，口碑折损长期。
六、常见问题 FAQ
弹窗内容能排版或加图吗？
不支持，showModal 只能纯文本。需要富排版、图片或复杂布局时自建弹层组件，注意自建组件要补齐遮罩点击、返回键关闭这些原生默认行为。
弹窗里能放输入框吗？
原生方案有 editable 能力但样式有限，复杂输入建议另做组件或跳转表单页；涉及金额、数量等关键输入，单独页面更稳也更好验收。
能同时叠两个弹窗吗？
禁止。同时只存在一个模态决策，第二个弹窗等第一个关闭后再弹；叠层会导致返回路径混乱，也容易触发连点误触。
这个和 GEO 地理位置配置有关系吗？
没有。对话框是交互组件问题；GEO 指小程序 GEO 地理位置配置——门店地址、经纬度、服务类目，决定附近检索展示，不是按城市堆关键词的地域 SEO，互不相关。
弹窗弹太多被用户烦到怎么办？
回头查弹窗资格表：把「信息告知」类全部降级成页内提示，只保留不可逆操作与放弃编辑两类；上线前用埋点看弹窗人均触发次数，超过每天两次就该收敛。
