别再堆分享按钮了!一个原生API让你告别社交分享的"技术债"

// 传统方案:需要引入多个SDK
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://tjs.sjs.sinajs.cn/open/api/js/wb.js"></script>
<script src="https://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"></script>

传统方案 = 你自己建了个快递站,只能发顺丰、京东、邮政
Web Share API = 你直接对接了物流平台,用户选自己的快递公司

用户点击分享按钮
        ↓
JS调用 navigator.share()
        ↓
浏览器校验上下文(HTTPS + 用户手势)
        ↓
系统弹出原生分享面板
        ↓
用户选择目标应用(微信/邮件/备忘录等)
        ↓
系统完成分享操作

┌─────────────────┐
│   网页按钮      │
│  [分享此文]     │
└────────┬────────┘
         │ onClick
         ↓
┌─────────────────────────────┐
│  navigator.share({          │
│    title: '文章标题',       │
│    url: 'https://...'       │
│  })                          │
└────────┬────────────────────┘
         │
         ↓
┌─────────────────────────────┐
│     操作系统分享面板        │
├─────────────────────────────┤
│  📱 微信    📧 邮件         │
│  💬 钉钉    📋 备忘录       │
│  🔗 拷贝    💾 保存         │
└─────────────────────────────┘

// ❌ 错误示范:没有做兼容性检查
asyncfunction shareArticle() {
await navigator.share({
    title: document.title,
    url: window.location.href
  });
}

// ✅ 正确示范:完整的兼容性处理
const shareButton = document.getElementById('share-btn');

shareButton.addEventListener('click', async () => {
// 第一步:检查浏览器支持
if (!navigator.share) {
    // 降级方案:复制链接到剪贴板
    await navigator.clipboard.writeText(window.location.href);
    alert('链接已复制,可以手动分享了');
    return;
  }

// 第二步:调用原生分享
try {
    await navigator.share({
      title: document.title,
      url: window.location.href
    });
    console.log('分享成功');
  } catch (error) {
    // 用户取消分享不算错误,静默处理
    if (error.name === 'AbortError') {
      console.log('用户取消了分享');
    } else {
      console.error('分享失败:', error);
    }
  }
});

// 模拟商品数据
const product = {
name: '苹果 AirPods Pro 2代',
price: 1799,
url: 'https://item.taobao.com/item.htm?id=123456',
discount: '限时立减200元'
};

const shareProductButton = document.getElementById('share-product');

shareProductButton.addEventListener('click', async () => {
if (!navigator.share) {
    alert('您的浏览器不支持一键分享,请手动复制链接');
    return;
  }

try {
    await navigator.share({
      // 标题要简洁有力,类似朋友圈标题
      title: `${product.name} - 仅需¥${product.price}`,
      
      // 文案要突出利益点,制造紧迫感
      text: `🔥 ${product.discount}!\n我在淘宝发现了超值好物,快来看看!`,
      
      // URL带上分享追踪参数(用于统计分析)
      url: `${product.url}?share_from=native_api&user_id=xxx`
    });
    
    // 分享成功后上报埋点
    trackEvent('product_share_success', {
      product_id: product.id,
      share_method: 'native_api'
    });
  } catch (error) {
    if (error.name !== 'AbortError') {
      alert('分享出错了,请稍后再试');
    }
  }
});

// HTML部分
<input type="file" id="upload-image" accept="image/*">
<canvas id="edit-canvas"></canvas>
<button id="share-edited-image">分享编辑后的图片</button>

// JavaScript部分
const uploadInput = document.getElementById('upload-image');
const canvas = document.getElementById('edit-canvas');
const shareButton = document.getElementById('share-edited-image');
let editedImageFile = null;

// 步骤1:用户上传图片
uploadInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;

// 将图片绘制到canvas(这里简化处理)
const img = new Image();
  img.onload = () => {
    const ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    
    // 添加水印(示例)
    ctx.font = '30px Arial';
    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
    ctx.fillText('我的设计', 20, 50);
    
    shareButton.disabled = false;
  };
  img.src = URL.createObjectURL(file);
});

// 步骤2:将canvas转为File对象
asyncfunction canvasToFile(canvas, filename) {
returnnewPromise((resolve) => {
    canvas.toBlob((blob) => {
      const file = new File([blob], filename, { type: 'image/png' });
      resolve(file);
    }, 'image/png');
  });
}

// 步骤3:分享图片文件
shareButton.addEventListener('click', async () => {
// 先转换canvas为File
  editedImageFile = await canvasToFile(canvas, '我的设计作品.png');

// 关键检查:浏览器是否支持文件分享
if (!navigator.canShare || !navigator.canShare({ files: [editedImageFile] })) {
    alert('您的浏览器不支持图片分享,建议长按图片保存后手动分享');
    return;
  }

try {
    await navigator.share({
      files: [editedImageFile],
      title: '我的设计作品',
      text: '用在线编辑器做的图,效果还不错吧!'
    });
    console.log('图片分享成功');
  } catch (error) {
    console.error('分享失败:', error);
  }
});

// 模拟用户选择了多张照片
const photoFiles = []; // 从input[multiple]获取的File数组

// 检查是否支持批量文件分享
if (navigator.canShare && navigator.canShare({ files: photoFiles })) {
  await navigator.share({
    files: photoFiles,
    title: `分享${photoFiles.length}张照片`,
    text: '周末旅行的照片,快来围观!'
  });
}

// ❌ 这段代码会报错
window.onload = () => {
  navigator.share({ url: 'https://spam.com' }); // DOMException
};

// ✅ 必须在用户点击后调用
button.onclick = () => {
  navigator.share({ url: 'https://example.com' }); // 正常工作
};

/**
 * 通用分享函数 - 自动选择最佳策略
 * @param {Object} options - 分享配置
 * @param {string} options.title - 标题
 * @param {string} options.text - 描述文本
 * @param {string} options.url - 链接
 * @param {File[]} options.files - 文件数组(可选)
 */
asyncfunction universalShare(options) {
const { title, text, url, files } = options;

// 策略1:优先使用Web Share API
if (navigator.share) {
    // 如果有文件,先检查是否支持文件分享
    if (files && files.length > 0) {
      if (!navigator.canShare || !navigator.canShare({ files })) {
        return fallbackFileDownload(files); // 降级:下载文件
      }
    }
    
    try {
      await navigator.share({ title, text, url, files });
      return { success: true, method: 'native' };
    } catch (error) {
      if (error.name === 'AbortError') {
        return { success: false, reason: 'user_cancel' };
      }
      // API调用失败,尝试降级
    }
  }

// 策略2:微信内置浏览器 - 引导用户使用菜单分享
if (isWeChatBrowser()) {
    showWeChatShareGuide(); // 显示"点击右上角分享"的引导蒙层
    return { success: false, method: 'wechat_guide' };
  }

// 策略3:桌面浏览器 - 复制链接
if (navigator.clipboard && url) {
    try {
      await navigator.clipboard.writeText(url);
      showToast('链接已复制,可以粘贴分享了');
      return { success: true, method: 'clipboard' };
    } catch (error) {
      // Clipboard API也失败了
    }
  }

// 策略4:最后的兜底 - 弹窗显示链接让用户手动复制
  showCopyModal(url);
return { success: false, method: 'manual' };
}

// 辅助函数:检测微信浏览器
function isWeChatBrowser() {
return/MicroMessenger/i.test(navigator.userAgent);
}

// 辅助函数:文件下载降级
function fallbackFileDownload(files) {
  files.forEach(file => {
    const url = URL.createObjectURL(file);
    const a = document.createElement('a');
    a.href = url;
    a.download = file.name;
    a.click();
    URL.revokeObjectURL(url);
  });
  showToast('文件已下载,可以手动分享');
}

// 辅助函数:显示微信分享引导
function showWeChatShareGuide() {
// 显示一个带箭头的蒙层,指向右上角菜单
const guide = document.createElement('div');
  guide.className = 'wechat-share-guide';
  guide.innerHTML = `
    <div class="arrow">↗</div>
    <div class="text">点击右上角菜单<br>选择"分享到朋友圈"</div>
  `;
document.body.appendChild(guide);

// 点击蒙层关闭
  guide.onclick = () => guide.remove();
}

// 使用示例
document.getElementById('share-btn').onclick = async () => {
const result = await universalShare({
    title: '这篇文章值得一读',
    text: '干货满满的技术文章',
    url: window.location.href
  });

console.log('分享结果:', result);
};

Web Share API 可用?
     │
     ├─ YES → 直接调用
     │
     ├─ NO → 检测微信浏览器?
            │
            ├─ YES → 显示"点右上角"引导
            │
            ├─ NO → Clipboard API 可用?
                   │
                   ├─ YES → 复制链接+提示
                   │
                   └─ NO → 弹窗让用户手动复制

// 微信分享需要配置签名
wx.config({
appId: 'xxx',
timestamp: xxx,
nonceStr: 'xxx',
signature: 'xxx', // 后端生成
jsApiList: ['updateAppMessageShareData']
});

// 微博分享需要构造URL
const weiboUrl = `http://service.weibo.com/share/share.php?url=${url}&title=${title}`;

// QQ分享又是另一套
// ...各种适配代码...

// 就这一行
await navigator.share({ title, url });

async function trackableShare() {
// 生成唯一的分享ID
const shareId = `share_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;

// URL带上追踪参数
const trackableUrl = `${window.location.href}?share_id=${shareId}&from=native_api`;

await navigator.share({
    title: document.title,
    url: trackableUrl
  });

// 上报分享事件到后端
  fetch('/api/track-share', {
    method: 'POST',
    body: JSON.stringify({
      share_id: shareId,
      page: window.location.pathname,
      timestamp: Date.now()
    })
  });
}

const shareOptions = {
// 微信朋友圈:标题会被截断,要把重点放前面
title: '🔥限时5折!苹果AirPods Pro 2代', // 前15字最重要

// 微博/Twitter:描述要简短有力,适合加话题标签
text: '终于等到好价!#数码好物 #苹果耳机',

url: product.url
};

button.onclick = async (e) => {
// 阻止默认行为和冒泡
  e.preventDefault();
  e.stopPropagation();

// 可选:给按钮加loading状态
  button.disabled = true;
  button.textContent = '分享中...';

try {
    await navigator.share({ url: location.href });
  } finally {
    // 恢复按钮状态
    button.disabled = false;
    button.textContent = '分享';
  }
};

async function shareWithShortUrl(longUrl) {
// 调用短链生成服务
const response = await fetch('/api/shorten', {
    method: 'POST',
    body: JSON.stringify({ url: longUrl })
  });
const { short_url } = await response.json();

await navigator.share({
    title: '分享链接',
    url: short_url // 使用短链
  });
}

// 检查文件类型是否支持
const allowedTypes = ['image/', 'video/', 'audio/', 'application/pdf'];

function canShareFile(file) {
  return allowedTypes.some(type => file.type.startsWith(type));
}

// 使用时过滤
const sharableFiles = allFiles.filter(canShareFile);
if (sharableFiles.length > 0) {
  await navigator.share({ files: sharableFiles });
}

{
  "name": "图片编辑器",
"share_target": {
    "action": "/share-handler",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url",
      "files": [
        {
          "name": "images",
          "accept": ["image/*"]
        }
      ]
    }
  }
}

// /share-handler 页面的逻辑
const formData = await request.formData();
const imageFile = formData.get('images');

// 直接在编辑器里打开这张图
loadImageToEditor(imageFile);

移动端 → 优先用Web Share API(覆盖95%场景)
桌面端 → 保留传统分享按钮(或提示复制链接)
微信内 → 引导用户用菜单分享(无法绕过)