navigator.share()需用户手势触发且仅支持HTTPS同源URL，微信不支持需降级为二维码，iOS限制text≤120字符、title≤40字符并注意Unicode截断。
分享按钮点击后没反应，检查 share() 是否被浏览器拦截
现代浏览器（尤其是 Chrome 和 Safari）默认会阻止非用户手势触发的弹窗和分享行为。如果你在页面加载后自动调用 navigator.share()，或者通过定时器、Ajax 回调等间接方式触发，share() 会直接抛出 DOMException: Permission denied 或静默失败。
必须确保调用发生在明确的用户操作回调中，比如 click、touchend（注意不是 touchstart），且不能跨事件循环延迟：
- ✅ 正确：
button.addEventListener('click', () => navigator.share({ title, text, url })) - ❌ 错误：
setTimeout(() => navigator.share(...), 100)（脱离用户手势上下文） - ❌ 错误：
fetch('/api/share').then(() => navigator.share(...))（Promise 回调不继承手势信任）
安卓微信里点分享按钮没反应，是因为 navigator.share 根本不支持
微信内置浏览器（X5 内核）至今未实现 Web Share API，'share' in navigator 永远返回 false。强行调用会报 TypeError: navigator.share is not a function。这不是兼容性“差”，而是“完全不存在”。
真实场景下必须降级处理：
- 先检测：
if ('share' in navigator)，否则走 fallback - 微信 fallback 常见方案：生成带参数的分享链接（如
weixin://dl/scan?k=xxx）无效，应改用诱导式提示 + 二维码（用qrcode.js生成当前 URL 的二维码图片） - 不要依赖
location.href = 'weixin://'类跳转——微信已屏蔽绝大多数自定义协议
navigator.share() 的 url 参数必须是同源或 HTTPS
即使在支持 Web Share API 的浏览器中（如 Chrome Android、Edge Desktop），如果传入的 url 是 http://（非 HTTPS）或跨域（如 https://example.com 试图分享 https://other.com/page），API 会直接拒绝并抛出 AbortError。
常见陷阱：
- 本地开发用
http://localhost:3000测试时，url必须也是该地址，不能写成http://127.0.0.1:3000（虽等价但被视作跨源） - 生产环境若用 CDN 分发 HTML，但分享目标 URL 写的是源站地址（如
https://origin.example.com/article/123），而用户实际访问的是https://cdn.example.com，此时仍算同源，可分享 - 想分享外部链接？只能放弃
navigator.share()，改用复制链接文本 + 手动粘贴
iOS Safari 分享后内容丢失，检查 text 和 title 长度与编码
iOS 16+ 虽支持 navigator.share()，但对 text 字段有隐式截断：超过约 150 字符时，部分分享目标（如 Messages）会丢弃整个 text，只保留 url 和 title。更隐蔽的问题是 Unicode 处理——含 emoji 或中文标点时，字节长度计算易出错。
稳妥做法：
- 限制
text≤ 120 字符（留余量），用text.slice(0, 120)截断前先做encodeURIComponent粗略估算长度（不精确但够用） -
title建议 ≤ 40 字符；过长会导致 iOS 分享面板显示异常甚至崩溃 - 避免在
text中拼接动态变量后直接传入，先trim()并替换换行符为空格（iOS 对 \n 敏感）
Web Share API 表面简单，但每个平台都有自己的“例外规则”。最常被忽略的是：它从来不是“全平台可用”的分享方案，而是一个需要主动探测、分层降级、并为每个渠道单独打磨的行为链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
