必须显式写 type="button" 且 data-product-id 类型须与后端一致；否则触发表单提交或接口400错误，同时需配对控制 disabled 和 aria-busy 状态。
必须显式写 type="button"，否则在 <form></form> 内点击会触发表单提交；data-product-id 是唯一可靠的商品标识方式，别用 id 或拼 URL。
为什么 type="button" 不是可选项
浏览器对 <button></button> 的默认 type 是 submit，不是“无行为”。哪怕按钮没套在 <form></form> 里，不声明也会埋下兼容隐患（比如某些旧版 Safari 在表单上下文中自动推断）。
- 错误写法：
<button>加入购物车</button>—— 点击后可能刷新页面或跳转 - 安全写法：
<button type="button" data-product-id="1057">加入购物车</button> - 若真要嵌入表单（如带数量输入），也必须写
type="button"，再由 JS 显式调用fetch，而不是靠event.preventDefault()补救
data-product-id 必须存在且类型一致
前端 JS 靠它取 ID 发请求，后端接口（如 /api/cart/add）的 product_id 字段必须能直接匹配。字符串和数字混用会导致 400 错误，但错误信息常被忽略。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 服务端渲染时，确保模板输出的值与 API 要求一致：后端要字符串，就输出
"1057"；要整数，就输出1057（不加引号） - 有 SKU 变体时，补上
data-sku-id，避免只靠主商品 ID 无法区分库存单位 - 禁用 class 名或文本内容推断 ID：比如
class="btn-1057"或按钮文字含 ID，DOM 结构一变逻辑就崩
移动端点击区域和状态控制不能只靠 CSS
WCAG 要求最小触控区 ≥ 44×44px，且禁用状态必须同步 DOM 属性与 ARIA，光靠类名切换不可靠。
立即学习“前端免费学习笔记（深入）”；
- 给按钮设
min-width: 44px; min-height: 44px;，并用padding扩展内容区，避免依赖inline-block间隙（换行符会产生空白，导致实际尺寸缩水） - 点击后立刻执行：
btn.disabled = true; btn.setAttribute('aria-busy', 'true'); - 请求完成（无论成功失败）必须恢复：
btn.disabled = false; btn.removeAttribute('aria-busy');，不能只删 loading 类 - 失败后建议保持按钮启用，并用
alert()或 inline 提示（如 “库存不足”），而不是静默失败
最易被忽略的是 data-product-id 和后端字段的类型一致性，以及 aria-busy 与 disabled 的配对操作——这两处出错，用户连点多次、屏幕阅读器误读、接口反复 400，问题都很难定位到 HTML 层面。
