Web Share API允许网页调用设备原生分享界面，需HTTPS安全上下文，支持文本/链接/文件分享，但需用户手势触发、兼容性有限且不支持指定App。
Web Share API 允许网页调用设备原生的分享界面（如 Android 的分享弹窗、iOS 的 Action Sheet），无需依赖第三方 SDK 或跳转外部 App。它轻量、安全，且仅在安全上下文（HTTPS 或 localhost）中可用。
基础用法：分享文本和链接
最简单的场景是分享一段文字和一个 URL：
- 调用 navigator.share() 方法，传入包含 title、text、url 的对象
- 该方法返回 Promise，需用 try/catch 处理拒绝（如用户取消、不支持、缺少必要字段）
- url 必须是绝对路径（如 https://example.com/page），相对路径会报错
示例代码：
if (navigator.share) {
try {
await navigator.share({
title: '一篇好文章',
text: '推荐你看这个内容！',
url: 'https://example.com/article'
});
} catch (err) {
console.log('分享被取消或失败：', err);
}
} else {
console.log('当前浏览器不支持 Web Share API');
}
兼容性判断与降级方案
并非所有浏览器都支持 Web Share API（例如 Safari 在 iOS 16.4+ 和 macOS Ventura 13.3+ 才完全支持，旧版仅支持 URL 分享）：
立即学习“Java免费学习笔记（深入）”；
- 用 'share' in navigator 判断是否可用
- 若不可用，可降级为复制链接 + 提示、生成分享图片、或跳转到微信/微博等平台的分享 URL
- 注意：Safari 对 text 字段支持较晚，早期版本只接受 url；可先尝试带 text 的分享，失败后再试仅 url
分享文件（有限支持）
Chrome 89+ 支持通过 files 字段分享本地 File 对象（如用户通过 input[type=file] 选中的图片）：
- 仅限部分平台（Android、ChromeOS），桌面端和 iOS 目前不支持
- 需确保文件已存在（不能是 Blob URL），且大小受系统限制（通常几 MB 内）
- 必须配合用户手势触发（如点击按钮），不能自动调用
示例：
<input type="file" id="fileInput" accept="image/*">
<button onclick="shareFile()">分享图片</button>
async function shareFile() {
const file = document.getElementById('fileInput').files[0];
if (file && navigator.canShare && navigator.canShare({ files: [file] })) {
try {
await navigator.share({
files: [file],
title: '我的图片',
text: '快看看！'
});
} catch (err) {
console.error(err);
}
}
}
注意事项与常见问题
- 必须由用户显式操作触发（如 click、tap），否则会被浏览器阻止
- 不支持分享到指定 App（如“只发微信”），由系统菜单统一调度
- 分享内容长度无明确标准，但过长的 text 或 title 可能被截断或导致失败
- 某些 Android 定制系统（如华为 EMUI）可能对分享入口有额外限制或 UI 差异
- 调试时建议真机测试，模拟器或桌面 Chrome 的分享行为可能不完整
