AMP Email 不支持 JavaScript，但可通过 amp-bind 和状态管理动态控制问题的逐级显示，本文详解实现原理、完整代码及关键限制与注意事项。
amp email 不支持 javascript，但可通过 `amp-bind` 和状态管理动态控制问题的逐级显示，本文详解实现原理、完整代码及关键限制与注意事项。
在 AMP Email 中实现“答完上一题才显示下一题”的交互效果，核心在于利用 AMP 的声明式数据绑定机制（amp-bind）配合
✅ 正确实现方式：状态驱动 + 条件渲染
以下是一个精简、可落地的 AMP Email 表单示例，严格遵循 AMP for Email 规范，已在 Gmail（支持 amp-bind）中验证可用：
<meta charset="utf-8"><script async src="https://cdn.ampproject.org/v0.js"></script><script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script><script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script><script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script><style amp4email-boilerplate>body{visibility:hidden}</style><style amp-custom>
body { font-family: Arial, sans-serif; margin: 0; padding: 16px; }
.question { margin-bottom: 24px; }
.btn { background: #4CAF50; color: white; border: none; padding: 10px 16px; font-size: 16px; cursor: pointer; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
</style><amp-state id="formState"><script type="application/json">
{
"currentQuestion": 1,
"answers": {}
}
</script></amp-state>
? 关键要点说明
- data-css-strict 是必需属性：启用严格的 CSS 验证，避免因样式问题导致邮件被拒收；
-
禁用
用于多选逻辑 ：它不适用于“线性流程”控制；应使用 on="tap:AMP.setState(...)" 显式切换状态； - [hidden] 是唯一可靠显示控制方式：不要依赖 CSS 类（如 .hide/.show），因部分邮箱客户端会忽略内联 class 绑定；
-
状态需集中管理：
存储当前题号和用户输入（如 formState.answers.q1 = event.value 可扩展），但注意：AMP Email 无法持久化中间状态，所有答案必须在最终 submit 时一并发送； - 按钮类型必须为 type="button"：避免意外触发表单提交；仅最后一题使用 type="submit"；
- Gmail 是主要支持平台：Yahoo Mail、Outlook 等不支持 amp-bind，其用户将看到全部问题静态展示（需降级兼容设计）。
⚠️ 重要限制与建议
- ❌ 无法真正“保存中间答案”：AMP Email 没有本地存储能力，amp-bind 状态仅在当前会话内存中存在，页面刷新即丢失；
- ✅ 推荐降级方案：对不支持 amp-bind 的客户端，可借助 @supports (display: -ms-grid) 等 CSS 特性检测，或通过
- ✅ 服务端需校验完整性：因前端无法保证用户完成全部步骤，后端必须校验必填字段是否齐全；
- ✅ 测试务必覆盖真实环境：使用 AMP Email Playground 预览，并通过 Gmail 账号实测接收效果。
通过合理运用 amp-bind 状态机与 [hidden] 绑定，你可以在支持的邮箱（主要是 Gmail）中构建出流畅的分步表单体验——既符合 AMP 安全沙箱约束，又显著提升用户参与度。
