Web Share API需HTTPS/localhost环境且用户手势触发，检测应同时用navigator.share和navigator.canShare，参数仅支持title/text/url，须try...catch处理AbortError等错误。
Web Share API 是目前最轻量、最可靠、最接近“零维护”的网页分享方案，但只在 HTTPS（或 http://localhost）下可用，且必须由用户点击等手势触发 —— 不满足这两点，navigator.share 直接报错或静默失败。
怎么判断浏览器是否支持 navigator.share
不能只靠 if (navigator.share) 就开干。iOS Safari 16.4 之前、Firefox 全系、部分旧版 Chrome Android 都不支持；更隐蔽的是，某些 Android 定制系统（如华为 EMUI 12）会返回 navigator.share 存在，但调用时抛出 NotAllowedError 或直接无响应。
- 推荐写法：
if (navigator.share && navigator.canShare)——navigator.canShare是更严格的兼容性守门员，能提前过滤掉“假支持” - 即使通过检测，也要包裹
try...catch，捕获AbortError（用户取消）、NotAllowedError（非手势触发）、TypeError（参数非法）三类常见错误 - 不要在
window.onload或DOMContentLoaded里自动调用，否则 Chrome 会直接拒绝并报NotAllowedError: Permission denied
navigator.share 支持哪些参数？图片能传吗？
navigator.share 接收一个对象，目前稳定支持的字段只有 title、text、url。注意：url 必须是当前页面同源地址（或 https:// 协议），传跨域链接会静默忽略或报错。
-
files字段理论上存在，但仅 Android Chrome 115+ 真正可用；iOS Safari 和桌面端完全不认，传了也白传 -
url不能是短链或带 UTM 参数的链接，部分系统分享面板会截断或拒绝解析，建议传原始 canonical URL -
title和text长度建议控制在 100 字符内，过长可能被截断（尤其微信内置浏览器对text极其敏感）
为什么点了按钮没反应？常见触发陷阱
最常踩的坑不是代码写错，而是事件绑定时机或上下文不对。比如用 addEventListener('click', ...) 绑在动态插入的按钮上，但没用事件委托；或者按钮被 pointer-events: none 挡住了。
立即学习“前端免费学习笔记（深入）”；
- 确保绑定的是原生
click事件，而不是touchstart或自定义事件 —— Web Share API 只认标准手势事件 - 避免在异步回调里调用，例如：先发个请求拿分享文案，再调
navigator.share—— 这会导致失去“用户手势上下文”，触发NotAllowedError - Vue/React 中注意：不要在
useEffect或mounted里绑定 click，而要在模板中直接用@click或onClick，保证事件处理器与用户点击严格同步
不支持 Web Share API 时该怎么降级？
别硬塞微博、微信、QQ 的 SDK —— 那会把首屏 JS 体积拉高 50KB+，FCP 延迟 300ms 以上。优先用平台原生分享链接 + Open Graph 标签组合。
- 微博：
https://service.weibo.com/share/share.php?url=+encodeURIComponent(window.location.href)+&title=+ 编码后标题 - LinkedIn：
https://www.linkedin.com/sharing/share-offsite/?url=+ 同上编码 URL - 务必在
里加<meta property="og:title">、<meta property="og:description">、<meta property="og:image">—— 这决定了链接被粘贴到微信聊天框或 WhatsApp 时的卡片样式，和navigator.share完全无关但用户感知极强
真正难处理的其实是微信：它的分享卡片完全依赖 JS-SDK 签名，静态页无法绕过。如果必须支持微信卡片，只能后端生成签名并注入页面，前端用 weixin-js-sdk 初始化 —— 但这已经脱离“纯静态页”范畴了。
