navigator.share 是现代浏览器支持的 web share api，可在移动端唤起系统分享面板；需 https、用户手势触发且浏览器兼容（chrome 75+/safari 16.4+），不支持微信等国产 webview。

navigator.share 是现代浏览器提供的 Web Share API，能让网页在支持的移动端（如 Chrome for Android、Safari on iOS 16.4+）直接唤起系统级分享面板，无需跳转第三方 App 或手动复制链接，显著提升用户分享意愿和传播效率。

确认兼容性与基础调用条件

Web Share API 并非所有环境都可用。需同时满足以下条件才能成功调用：

• 页面运行在 HTTPS 协议下（本地开发可使用 localhost）
• 调用发生在 用户手势触发的上下文内（如 click、tap 事件中，不能在 setTimeout 或 fetch 回调里直接调）
• 目标浏览器支持：Chrome 75+（Android）、Edge 79+、Safari 16.4+（iOS/iPadOS），不支持微信内置浏览器（X5 内核）和大部分国内安卓 WebView

基础分享结构与常用字段

调用时传入一个对象，至少包含 title、text 或 url 中的一项。推荐组合使用以适配不同平台：

• url：必须是当前站点同源的绝对 URL（如 https://example.com/article/123），跨域会报错
• title：作为分享卡片标题，在部分平台（如 iOS）会显示为“标题 + 网址”格式
• text：纯文本描述，常用于补充说明或带话题标签（如 #前端开发 #WebShareAPI）

示例代码：

document.getElementById('share-btn').addEventListener('click', async () => {
  try {
    await navigator.share({
      title: '这篇文章讲清了 Web Share API',
      text: '很实用，推荐一看 ?',
      url: window.location.href
    });
  } catch (err) {
    // 用户取消或不支持时降级处理
    console.log('分享未执行：', err.message);
  }
});

优雅降级：不支持时的替代方案

由于兼容性限制，必须为不支持 navigator.share 的环境准备后备策略：

• 检测是否可用：if ('share' in navigator)
• 不可用时，可提供「复制链接」按钮（配合 navigator.clipboard.writeText）
• 或生成带参数的微信/微博分享链接（如 https://weibo.com/share?title=xxx&url=xxx），但注意这些链接在非对应 App 中可能打开效果不佳
• 避免弹窗提示“请用其他方式分享”，而是静默切换为更轻量的操作（如自动复制并 Toast 提示）

注意事项与常见问题

实际集成中容易踩坑的地方：

• 分享的 url 必须是同源地址，不能是短链或跳转页（如 bit.ly），否则 Safari 会拒绝
• iOS Safari 对 title 和 text 的拼接逻辑较特殊，建议测试真实设备，避免标题被截断
• 部分安卓厂商定制系统（如华为 EMUI）可能禁用该 API，需结合 UA 判断后隐藏按钮或提示
• 不要在分享成功后自动跳转或刷新页面——用户可能希望继续浏览，干扰体验