data-product-id是唯一可靠的商品标识传递方式，必须显式携带ID、声明type="button"、配合data-sku-id处理变体，数量输入用type="number"并设min="1"，点击后立即禁用按钮并设置aria-busy，移动端触控区不小于44×44px，且data属性名须与后端接口字段严格对齐。
data-product-id 是唯一可靠的商品标识传递方式
HTML 按钮本身不“知道”商品是什么，必须靠 data-product-id 显式携带 ID。这是 JS 后续调用 /api/cart/add 时最直接、最不易出错的参数来源。别指望从 class 名、文本内容或 DOM 位置推导 ID——结构一变逻辑就崩。
常见错误包括：
– 把 ID 拼在 href="add?id=1057" 里，按钮变成跳转链接，破坏单页体验；
– 用 id="btn-1057" 或 class="add-btn-1057"，语义错乱且难维护；
– 在表单里写 <button>加入购物车</button> 却没设 type，结果触发表单提交刷新页面。
正确写法必须同时满足三点：
– 使用 data-product-id（字符串或数字皆可，但需与后端接口字段类型一致）
– 显式声明 type="button"
– 若有 SKU 变体，额外加 data-sku-id
带数量输入时，input 必须用 type="number" + min="1"
用户手动输数量不是自由，而是风险点。用 <input type="number" min="1" value="1"> 能天然拦截负数、小数、字母，省去 JS 层第一道校验。如果用 type="text"，就得自己 parse、isNaN 判断、兜底设为 1，多写 5 行还容易漏。
注意：
– 不要依赖 placeholder 或 label 提示“请输入数量”，屏幕阅读器和自动化测试不认这个
– value 默认值必须是数字字符串（如 value="1"），不要写 value="" 再靠 JS 初始化，否则 SSR 渲染时可能为空
– 如果商品支持多规格，数量输入框应绑定到当前选中的 data-sku-id，而非主商品 ID
点击后必须立刻禁用按钮并设置 aria-busy
用户连点两次不是“手快”，是网络慢、接口卡顿或 UI 反馈缺失下的自然反应。只加 CSS 类（如 .loading）或只改文字（如 “加入中…”）远远不够。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
真正有效的防护是：
– 点击瞬间执行 button.disabled = true，物理阻止二次触发
– 同步设置 button.setAttribute('aria-busy', 'true')，让读屏软件感知状态
– 请求完成（无论成功失败）后，必须恢复 button.disabled = false 和 aria-busy="false"
– 失败时不要自动重试，而要恢复按钮可用，并显示具体错误（如 “库存不足”，不是 “请求失败”）
移动端触控区小于 44×44px 就算 WCAG 不合规
这不是“建议”，是硬性可访问性门槛。iPhone 上手指点不准，不是用户问题，是你的按钮尺寸没达标。
别只加 padding 就以为万事大吉：
– inline-block 元素间的换行符会产生空白间隙，实际宽度缩水
– 用 display: block 或 flex 布局更可控
– 最小尺寸按物理像素算，44×44pt ≈ 44×44px @1x，高 DPI 屏幕也得保证等效触控面积
– 如果按钮文字太小，优先放大容器，而不是强行缩放字体导致模糊
最常被忽略的一点：data 属性值和服务端接口字段名必须严格对齐。比如前端传 data-product-id="1057"，后端接收字段却叫 item_id 或 pid，不改接口或不加映射，请求永远 400。这个映射关系要在前后端联调初期就对齐，别留到上线前才发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
