Web Share API 仅在 HTTPS 及特定移动端浏览器中可用，PC 端和 Safari 不支持；微信分享须走 JS-SDK 签名流程；clipboard 复制需用户手势触发；分享图依赖服务端注入的 og:image 等静态 meta 标签。
分享按钮点不动？检查 navigator.share 的运行环境
原生 Web Share API 是最轻量的分享方案，但它只在 HTTPS 环境、移动端浏览器（Chrome / Edge / Samsung Internet ≥ v76，Firefox Android ≥ v110）和部分桌面端（仅 Chrome 桌面开启 flag 后可用）中生效。PC 端直接调用 navigator.share 会抛出 TypeError: navigator.share is not a function 或静默失败。
- 先用
if ('share' in navigator)做能力检测，别硬调 - 不满足时，必须降级到手动拼接 URL 的方案（比如微博的
https://service.weibo.com/share/share.php?url=...） - 注意：Safari 目前完全不支持
navigator.share，连检测都返回false
微信里点分享没反应？别依赖 window.WeixinJSBridge 直接调用
微信内置浏览器（X5 内核）早就不允许页面主动触发分享了——这是平台安全策略，不是你代码写错了。所谓“JS-SDK 分享”必须走后端签名流程，前端只能通过 wx.ready + wx.updateAppMessageShareData 等接口预设分享内容，实际触发仍由用户点击右上角菜单完成。
- 不要在页面加载完就立刻执行
WXJSSDK.config，得等微信 JS-SDK 加载成功（https://res.wx.qq.com/open/js/jweixin-1.6.0.js） - 签名用的
nonceStr、timestamp、url必须和服务端生成签名时完全一致，差一个斜杠或大小写都会config:fail invalid signature - 调试时用微信「网页开发者工具」，真机上打开「调试」开关才能看到
invalid signature这类错误
复制链接比跳转更可靠？用 navigator.clipboard.writeText 但小心权限
当分享目标是纯文本（如当前页 URL），navigator.clipboard.writeText 兼容性好、逻辑简单，但它是异步 API，且首次调用需用户手势触发（比如 click 事件中），否则会报 NotAllowedError。
- 必须绑定在用户可交互的元素上，比如
<button onclick="copyUrl()"></button>，不能在useEffect或DOMContentLoaded里自动执行 - iOS Safari 对
navigator.clipboard支持较晚（iOS 13.4+），旧版本需回退到document.execCommand('copy')（需先select()input 元素） - 复制成功后建议给个视觉反馈（比如按钮文字变“已复制”），否则用户不知道发生了什么
分享图没显示或尺寸错乱？重点看 og:image 和 twitter:image 标签
社交平台抓取分享卡片时，基本只读 HTML 里的 Open Graph 和 Twitter Card 元标签，不会执行 JS，也不会管你 React 里动态改的 document.title。
-
og:image必须是绝对路径（https://example.com/img.jpg），相对路径会被忽略 - 推荐尺寸：Facebook 要求至少 1200×630px，Twitter 推荐 1200×600px；太小会被压缩模糊，太大可能被截断
- 务必加
og:image:width和og:image:height，否则某些平台（如 LinkedIn）会拒绝加载图片 - 服务端渲染（SSR）或静态站点生成（SSG）时确保这些 meta 标签在首屏 HTML 中存在，CSR 页面容易漏掉
真正麻烦的是多平台行为不一致：微信读 og:title 但忽略 og:description，而 Telegram 完全不认 Open Graph，只看页面内第一个 <img alt="怎么添加网页分享功能_社交媒体集成指南【技巧】" >。没有银弹，得按平台逐个测。
