优先使用 navigator.share() 实现轻量分享，需 HTTPS 和用户手势触发，仅支持文本、标题、同源 URL；不支持时降级为平台专用 URL 协议；富媒体分享必须依赖平台 SDK 并服务端签名。
点击按钮触发浏览器原生分享 API
现代浏览器（Chrome 89+、Edge 90+、Safari 16.4+）支持 navigator.share()，这是最轻量、无需第三方 SDK 的分享方式。它直接调用系统级分享面板，用户可选微信、钉钉、邮件、短信等已安装的 App。
但必须满足两个硬性条件：页面运行在 HTTPS 下，且调用必须由用户手势（如 click 事件）触发——不能在 setTimeout 或 fetch 回调里直接调；否则抛出 NotAllowedError。
- 只支持分享文本、标题、URL，不支持图片或文件（
files字段目前仅 Chrome Android 实验性支持） -
url参数必须是当前源的同源 URL，或相对路径；传入跨域链接会静默忽略 - Safari 对
text字段长度敏感，超 200 字可能截断或失败
button.addEventListener('click', async () => {
try {
await navigator.share({
title: '我的作品',
text: '来看看这个 HTML 小实验',
url: '/work/demo.html' // 必须是同源路径
});
} catch (err) {
if (err.name !== 'AbortError') {
console.warn('分享失败:', err);
}
}
});
不支持 share() 时降级到 a[href=share:] 伪协议
Firefox 和旧版 Safari 不支持 navigator.share()，此时可 fallback 到 a 标签的 href 属性模拟分享行为。常见做法是拼接 whatsapp://send?text=... 或 twitter://post?message=... 这类平台专用协议。
但要注意：这些协议只在对应 App 已安装且支持该协议时才生效；否则多数浏览器会报 Not allowed to navigate top frame to data URL 或直接空白页。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 微信没有公开的 iOS/Android 分享协议，
weixin://已废弃，不可用 - Twitter/X 的
twitter://在 iOS 上已失效，必须用https://twitter.com/intent/tweet?text=... - 务必对
text和url做encodeURIComponent()，否则空格、中文会导致链接截断
<a href="https://twitter.com/intent/tweet?text=%E6%88%91%E7%9A%84%E4%BD%9C%E5%93%81%EF%BC%81&url=https%3A%2F%2Fexample.com%2Fwork" target="_blank">分享到 Twitter</a>
需要带缩略图或富媒体？只能走平台 JS SDK
如果分享到微信朋友圈、Facebook 或 LinkedIn 时希望显示标题+描述+图片，navigator.share() 和伪协议都做不到——它们不传递 og:image 或 og:description 元信息。
这时必须引入对应平台的 SDK（如微信 js-sdk），并在后端配置可信域名、签名生成逻辑。整个流程涉及 nonceStr、timestamp、signature 等字段，且微信要求页面域名必须在公众号后台「JS 接口安全域名」中备案。
- 微信分享需服务端参与签名，纯前端无法生成合法
config签名 - Facebook 的
FB.ui({method: 'share', ...})要求页面已通过 Facebook App 审核并启用「Share Dialog」权限 - 所有 SDK 都会增加首屏加载时间，建议异步加载（
defer或动态import()）
移动端真机调试时容易漏掉的兼容点
开发时在桌面 Chrome 模拟移动设备看似正常，但真机上常遇到分享无响应、跳转白屏、文案乱码等问题。
核心原因在于：iOS Safari 对 data: URL、blob: URL、非标准协议拦截更严格；Android 各厂商浏览器（如华为、小米）对 navigator.share() 支持程度不一，有的只支持 url，有的完全不识别 text。
- 真机测试前先确认 UA 字符串是否含
Mobile，避免误判为桌面环境 - 不要依赖
location.href = 'weixin://'类跳转，iOS 15+ 会直接阻止 - 分享文案含 emoji 时，某些 Android 浏览器会崩溃，建议先用
text.replace(/[\u{1F600}-\u{1F6FF}]/gu, '')过滤
分享功能不是“写完就跑”，每个平台、每种机型、每次系统更新都可能让逻辑失效。最稳妥的做法是：优先用 navigator.share()，降级到通用 URL 分享，富媒体需求则明确告知用户需跳转到对应 App 手动分享。
