Web Share API 可让网页调用系统原生分享面板，分享标题、文本和URL至微信等社交App（需HTTPS/localhost、用户手势触发），不支持图片、X5内核微信暂不可用，须降级处理。
Web Share API 可以让网页直接调用系统原生分享面板，把标题、文本、URL 发送给微信、QQ、微博、钉钉等已安装的社交应用（需设备支持且页面为 HTTPS 或 localhost）。它不依赖第三方 SDK，轻量、安全、无需跳转。
前提条件：确保环境合规
Web Share API 有严格运行限制：
- 必须在安全上下文（HTTPS 协议，或 localhost / 127.0.0.1）中使用；HTTP 站点会静默失败
- 必须由用户手势触发（如点击按钮），不能在页面加载或定时器中自动调用
- 目前仅支持分享 text、title 和 url 三个字段（不支持图片、文件等二进制内容）
- Android Chrome、Edge、Firefox、Safari（iOS 16.4+ / macOS Ventura 13.3+）已支持；微信内置浏览器（X5 内核）暂不支持，但微信 iOS 版 Safari 浏览器中可正常唤起分享面板
基础用法：分享链接 + 描述
只需调用 navigator.share() 并传入对象即可。示例代码：
document.getElementById('shareBtn').addEventListener('click', async () => {
try {
await navigator.share({
title: '前端开发新特性速览',
text: 'HTML5 Web Share API 让网页一键唤起系统分享面板，兼容主流社交 App。',
url: 'https://example.com/web-share-guide'
});
} catch (err) {
// 用户取消或浏览器不支持时进入这里
console.log('分享被取消或不可用：', err.message);
}
});
注意：url 字段会自动补全为绝对路径（相对路径会被解析为当前页同源 URL），建议始终传入完整 URL。
立即学习“前端免费学习笔记（深入）”；
兼容性降级：检测并提示用户
不是所有浏览器都支持该 API，应先检测再调用：
if (navigator.share) {
// 支持 Web Share API，启用原生分享
shareBtn.style.display = 'inline';
} else {
// 不支持，显示备用方案（如复制链接、二维码、手动跳转）
fallbackShareSection.style.display = 'block';
}
常见降级策略包括：
- 提供「复制链接」按钮（配合
navigator.clipboard.writeText()） - 生成带参数的微博/微信分享链接（如
https://service.weibo.com/share/share.php?url=...&title=...） - 引导用户长按链接手动分享（尤其在微信内）
注意事项与常见问题
实际使用中容易踩坑：
- 微信内无法调用：微信 Android/iOS 客户端使用的 X5 内核尚未实现 Web Share API，此时必须走降级逻辑
-
URL 跨域限制：
url字段必须与当前页面同源，或为绝对 URL（推荐显式写全协议和域名） - iOS Safari 行为差异：分享后若用户选“微信”，iOS 会打开微信内浏览器（非客户端），且不会自动粘贴描述文字——这是系统限制，无法绕过
- 不要滥用：频繁或无交互触发分享会被浏览器拦截，部分安卓厂商定制系统也会限制弹窗频率
