如何在HTML5中通过WebShareAPI将网页链接及描述一键发送至社交应用-H5教程-PHP中文网

web share api 可让网页调用系统原生分享面板，分享标题、文本和url至微信等社交app（需https/localhost、用户手势触发），不支持图片、x5内核微信暂不可用，须降级处理。

如何在html5中通过webshareapi将网页链接及描述一键发送至社交应用

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。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

兼容性降级：检测并提示用户

不是所有浏览器都支持该 API，应先检测再调用：

if (navigator.share) {
  // 支持 Web Share API，启用原生分享
  shareBtn.style.display = 'inline';
} else {
  // 不支持，显示备用方案（如复制链接、二维码、手动跳转）
  fallbackShareSection.style.display = 'block';
}

常见降级策略包括：