当前位置：首页 > JavaScript

js 实现分享功能实现

2026-04-06 13:06:22JavaScript

使用 Web Share API 实现分享功能

Web Share API 是现代浏览器提供的原生分享功能，支持分享文本、链接和文件。该方法无需依赖第三方库，但需注意浏览器兼容性。

if (navigator.share) {
  navigator.share({
    title: '分享标题',
    text: '分享内容描述',
    url: 'https://example.com'
  })
  .catch(error => console.error('分享失败:', error));
} else {
  console.log('当前浏览器不支持Web Share API');
}

自定义社交平台分享链接

对于不支持Web Share API的浏览器或特定平台分享，可使用各平台提供的分享URL模板：

function shareToPlatform(platform) {
  const url = encodeURIComponent('https://example.com');
  const text = encodeURIComponent('分享内容');

  const urls = {
    twitter: `https://twitter.com/intent/tweet?text=${text}&url=${url}`,
    facebook: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
    linkedin: `https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${text}`,
    whatsapp: `https://wa.me/?text=${text}%20${url}`
  };

  if (urls[platform]) {
    window.open(urls[platform], '_blank', 'width=600,height=400');
  }
}

使用第三方分享库

对于更复杂的分享需求，可考虑使用第三方库如share-this或social-share.js：

安装share-this库：

js 实现分享功能实现

npm install share-this

使用示例：

import shareThis from 'share-this';
import 'share-this/dist/share-this.css';

shareThis({
  selector: '#share-button',
  sharers: [
    {
      name: 'Twitter',
      icon: '...',
      shareUrl: '...'
    }
    // 其他平台配置
  ]
});

移动端应用内分享实现

在混合应用（如Cordova/Ionic）中，可使用插件实现更丰富的分享功能：

安装Cordova社交分享插件：

js 实现分享功能实现

cordova plugin add cordova-plugin-x-socialsharing

使用示例：

window.plugins.socialsharing.share(
  '分享内容', 
  '分享标题', 
  null, // 文件
  'https://example.com'
);

剪贴板分享功能实现

对于需要复制分享链接的场景，可使用Clipboard API：

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    alert('链接已复制到剪贴板');
  } catch (err) {
    console.error('复制失败:', err);
    // 降级方案
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    alert('链接已复制');
  }
}