web share api 调用需满足https安全上下文、用户手势触发（如click）、同源绝对url三要素；检测支持须组合判断'share' in navigator && 'canshare' in navigator && issecurecontext并调用navigator.canshare()验证参数，不可仅靠if (navigator.share)。
Web Share API 不是加个按钮就能用的功能，navigator.share 调用失败时大概率不是代码写错了，而是环境或时机不满足硬性条件——HTTPS、用户手势、同源 URL 缺一不可。
怎么检测浏览器真正支持 navigator.share
只写 if (navigator.share) 是不够的。iOS Safari 16.4+ 才开始支持，Firefox 桌面版至今不支持，部分安卓定制系统（如华为 EMUI）会返回函数但调用即抛 NotAllowedError。
- 必须组合判断：
if ('share' in navigator && 'canShare' in navigator && window.isSecureContext) -
navigator.canShare({ url: 'https://example.com' })能提前验证参数合法性，比直接share()更可靠 - 不要在
DOMContentLoaded或window.onload里检测，等按钮 DOM 就绪后再查，避免navigator未定义 - 微信内置浏览器（X5 内核）始终返回
undefined，这不是你的问题，是微信主动禁用
为什么点击后没反应？常见触发失败原因
“点了没弹窗”几乎全是触发上下文问题，不是 JS 报错被吞掉，而是浏览器直接拒绝执行。
- 调用必须在用户 click/touchend 的同步链中——不能放在
fetch().then()、setTimeout、Promise.resolve().then()里，哪怕延迟 0ms 也不行 - 页面协议必须是 HTTPS 或
http://localhost；http://127.0.0.1、IP 地址、HTTP 域名全都不行 - 按钮不能被
pointer-events: none、opacity: 0或遮罩层挡住，否则手势不被视为有效 - Vue/React 中别在
useEffect或mounted里绑定事件，要确保@click/onClick直接关联到原生事件处理器
navigator.share() 参数怎么填才不被忽略
它只认 title、text、url 三个字段，其他一律静默丢弃。各平台对字段的处理差异极大，不能靠“填了就显示”来假设。
-
url必须是绝对 URL，且与当前页面同源（https://a.com/page不能传https://b.com/xxx），相对路径如/share可接受 -
text建议控制在 100–120 字以内，Safari 可能截断，部分安卓 ROM 对超长 text 直接拒绝唤起面板 -
title在多数 Android 厂商系统中被忽略，仅用于系统分享面板顶部标题，不影响社交平台卡片渲染（那是og:title的事） - 不要传
null、undefined或空字符串，某些 Android 版本会直接报TypeError
错误怎么捕获和降级才不误导用户
不包 try/catch 就看不到任何提示，而错误类型决定了该不该提示用户。
- 必须捕获三类错误：
AbortError（用户点取消，正常，不用提示）、NotAllowedError（环境/时机不合规，应 fallback）、TypeError（参数非法，需检查字段值） - 降级首选
navigator.clipboard.writeText(url)+ Toast 提示“链接已复制”，轻量且 100% 可用 - 构造微博/LinkedIn 分享链接时，
url和title必须用encodeURIComponent()编码，否则中文或特殊字符会导致跳转失败 - 别在不支持的环境里渲染“分享”按钮，或至少置灰并文案注明“仅限最新 Chrome/Safari”
最难的不是调用 API，而是应对 iOS Safari 的 PWA 限制、安卓厂商对 text 的随意截断、以及微信 X5 内核的彻底屏蔽——这些没法靠代码绕过，只能靠检测 + 明确的 fallback 策略兜底。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
