用实现分享按钮组需构造各平台intent url（如twitter：https://twitter.com/intent/tweet?text=xxx&url=yyy），参数须encodeuricomponent()编码；微信必须接入js-sdk，纯html无效；web share api仅限https移动端且支持有限；需添加role="button"、aria-label等保障可访问性。
怎么用 <a></a> 实现带图标和样式的分享按钮组
纯 HTML 本身不提供“分享按钮组”组件，得靠 <a></a> 标签 + 手动拼接平台 URL 实现。关键不是加个按钮，而是让链接能真正跳转到对应平台的预填分享页。
常见错误是直接写死 href="https://twitter.com"，结果点开只是首页，没带内容。必须构造带参数的分享 URL，比如 Twitter 的 https://twitter.com/intent/tweet?text=xxx&url=yyy。
- 每个平台都有自己的 intent URL 格式（官方叫 “Share Intent”），不是随便拼的，错一个参数名或编码就失效
-
text、url、hashtags等参数值必须encodeURIComponent()编码，否则空格、中文、& 符号会截断链接 - 不要用
target="_blank"就完事——现代浏览器可能拦截弹窗，建议加rel="noopener noreferrer" - 图标用 SVG 或字体图标更可控，别依赖第三方 CDN 图片，避免加载失败后只剩文字
微信分享为什么不能只靠 HTML？
微信内置浏览器（X5 内核）不支持标准 Web Share API，也不认 Twitter/Facebook 那套 intent URL。纯前端 HTML 按钮点开只会跳转到微信首页或提示“无法打开”。
想在微信里真正分享到朋友圈或好友，必须走微信 JS-SDK：wx.onMenuShareTimeline 和 wx.onMenuShareAppMessage。但这需要后端配合签名、配置 JS 接口安全域名、引入 https://res.wx.qq.com/open/js/jweixin-1.6.0.js。
- HTML 页面里放个“微信分享”按钮，不接 JS-SDK = 摆设
- 调试时注意：微信开发者工具模拟不了全部行为，真机调试才靠谱
- 分享卡片标题/描述/缩略图由 JS-SDK 的
config和ready后设置，不是 HTML meta 标签决定的
Web Share API 在哪些地方能用？
navigator.share() 是原生分享能力，但只在 HTTPS 环境 + 移动端 Chrome / Edge / Samsung Internet 里稳定可用，桌面端基本不可用，Safari 完全不支持。
它不依赖平台 URL，调用后直接唤起系统分享面板，用户选微信、短信、邮件等任意目标。但限制很死：
- 必须由用户手势触发（比如
onclick），不能 onload 自动调 - 只接受
{ title, text, url }三个字段，没法指定平台、加图片、设 hashtag - 如果环境不支持，
navigator.share是undefined，必须先判断再调用 - 部分安卓定制 ROM（如华为 EMUI）会拦截或静默失败，没提示
按钮组样式和可访问性容易被忽略的点
一堆 <a></a> 并排，看着像按钮，但默认语义是“链接”。屏幕阅读器会读成“链接”，而不是“分享到微博按钮”。
- 加
role="button"和aria-label="分享到微博"，不然残障用户不知道这是操作入口 - 别只靠颜色区分状态，hover/focus 时要有明显轮廓或背景变化，满足 WCAG 2.1 对比度要求
- 移动端按钮间距至少 44×44px，小屏上挤在一起根本点不准
- 如果用了 SVG 图标，确保
<svg></svg>有aria-hidden="true"，避免重复读图标名
<a></a>，而是不同平台 URL 参数对不上、微信要后端签名校验、Web Share 兼容性碎片化——这些地方一卡，整个分享功能就断在半路。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
