从确认框到半屏表单：WeUI Dialog 这7种选法怎么选

【免费下载链接】weuiA UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.项目地址: https://gitcode.com/gh_mirrors/we/weui

点"删除笔记"，屏幕中间弹出一个框，问你确定要删吗。这是移动 H5 里对话框最典型的出场瞬间。WeUI 是微信官方设计团队的移动端 UI 库，WeUI Dialog 就是其中的对话框组件：在页面上盖一层遮罩加浮层，逼用户先做个选择，点掉之前流程不走。从默认样式到半屏形态，外观都写在样式文件 weui-dialog.less 里。

对话框解决什么问题

手机屏幕小，提示语没地方常驻。Toast 一闪而过，用户容易漏掉；Dialog 相反，遮罩把页面其余部分挡住，流程被强制打断，用户点完"确定"或"取消"才放行。所以判断用不用对话框，标准只有一条：这一步必须得到答案，像"删还是留""付还是走"。至于"保存成功"这类轻提示，用它反而添堵。

选哪种对话框，本质是决定"怎么打断"：标题露不露、按钮摆几个、跟 iOS 还是 Android 的口味、要不要铺开半屏。先问自己三个问题——必须强制用户回答吗？要说的话多不多？用户主要用哪个系统？按这三个答案，WeUI Dialog 的 7 种用法可以归成三类。

按需求挑样式

几句话能说完的小框，用得最多。标准形态是标题加正文加两个按钮；内容本身已经说得清，就省掉标题，框更轻；碰上删除这类危险操作，把按钮换成警示色调（weui-dialog__btn_warn），风险一眼可见。按钮文字长、或想强调主操作，就让按钮竖着排（weui-dialog_btn-wrap），一行一个，误触少。

想跟系统口味一致。默认样式偏 iOS 味道，产品跑在 Android 上时，给同一套结构加上weui-skin_android，框和按钮就变成 Material 观感。

内容多，一个框装不下。换半屏对话框，它从屏幕底边往上展开、占据半个屏幕，半屏对话框示例 里有完整写法。框里还要放输入框、列表这类复杂交互，可参考表单样式文件 weui-form_common.less 做样式扩展。

最小 HTML 结构

这 8 行 HTML 就是一个标准确认对话框：

<div class="weui-dialog"> <div class="weui-dialog__hd"><strong class="weui-dialog__title">删除这条笔记？</strong></div> <div class="weui-dialog__bd">删除后无法恢复</div> <div class="weui-dialog__ft"> <a role="button" class="weui-dialog__btn weui-dialog__btn_default">取消</a> <a role="button" class="weui-dialog__btn weui-dialog__btn_primary">确认删除</a> </div> </div>

__hd（标题）、__bd（正文）、__ft（按钮区）三段可自由组合，__btn_primary是主操作、__btn_default是辅助操作，其余交给样式。

容易踩的坑

• 正文控制三行以内，超了就换半屏对话框，用户没耐心滚动。
• 按钮文案要能猜出后果，"确认删除"好过"确定"，用户点下去不犹豫。
• 按目标端选风格，Android 产品别套默认对话框，观感会飘。
• 遮罩weui-mask别漏，它负责挡住底层页面，少了它对话框只是悬在那。
• 辅助操作居左弱化、主操作居右高亮，位置别摆反。

想自定义外观，翻 weui-dialog.less，那是整个 Dialog 的样式入口；同库的 ActionSheet、Toast 等提示组件也值得顺手看看。

【免费下载链接】weuiA UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.项目地址: https://gitcode.com/gh_mirrors/we/weui