如何在React Web应用中调用WhatsApp等应用实现分享功能？

1. 优先用Web Share API（原生系统分享） #

这是浏览器原生提供的API，能直接唤起系统级的分享弹窗，支持把链接、文本分享到手机上的任意应用（微信、短信、邮件等），移动端主流浏览器（Chrome、Safari、Edge）都支持，体验最好。

React组件里的实现代码：

import { useState } from 'react';

const ShareButton = () => {
  // 先判断浏览器是否支持这个API
  const [canShare, setCanShare] = useState(!!navigator.share);

  const handleShare = async () => {
    if (!canShare) return;
    try {
      await navigator.share({
        title: '我分享的内容标题',
        text: '来看看这个链接！',
        url: window.location.href // 这里可以换成你要分享的自定义链接
      });
      console.log('用户完成分享');
    } catch (err) {
      // 可能是用户取消分享，或者出现错误
      console.log('分享取消/失败:', err);
    }
  };

  return (
    <button onClick={handleShare} disabled={!canShare}>
      {canShare ? '分享' : '当前浏览器不支持分享'}
    </button>
  );
};

export default ShareButton;

注意：这个API必须在HTTPS环境下才能用（本地localhost开发除外），而且只能由用户主动触发（比如点击按钮），不能自动调用。

2. 自定义分享菜单（兼容旧浏览器） #

如果用户的浏览器不支持Web Share API，可以做一个自定义弹窗，提供常用应用的跳转链接或者复制链接功能：

import { useState } from 'react';

const CustomShareBtn = () => {
  const [showMenu, setShowMenu] = useState(false);
  const shareUrl = 'https://你的分享链接.com';

  // 复制链接到剪贴板
  const copyLink = async () => {
    await navigator.clipboard.writeText(shareUrl);
    alert('链接已复制！');
    setShowMenu(false);
  };

  return (
    <div>
      <button onClick={() => setShowMenu(!showMenu)}>分享</button>
      {showMenu && (
        <div style={{ border: '1px solid #ccc', padding: '10px', marginTop: '5px' }}>
          {/* 唤起微信分享（仅移动端微信有效） */}
          <a 
            href={`weixin://sendmsg?text=${encodeURIComponent('推荐你看这个：' + shareUrl)}`} 
            target="_blank" 
            rel="noopener noreferrer"
            style={{ display: 'block', margin: '5px 0' }}
          >
            分享到微信
          </a>
          {/* 唤起短信应用 */}
          <a 
            href={`sms:?body=${encodeURIComponent('分享链接：' + shareUrl)}`} 
            target="_blank" 
            rel="noopener noreferrer"
            style={{ display: 'block', margin: '5px 0' }}
          >
            短信分享
          </a>
          <button onClick={copyLink} style={{ marginTop: '5px' }}>复制链接</button>
        </div>
      )}
    </div>
  );
};

export default CustomShareBtn;

这种方式需要针对不同应用写对应的URL scheme（也就是你说的intent链接），安卓和iOS的部分应用scheme可能有差异，需要测试适配。

关于React Native Intent Links的说明 #

React Native里的intent机制是调用原生系统能力，和Web端的URL scheme不是一回事。Web端不需要依赖React Native的那套方法，直接用上面的两种方案就能实现需求。

内容的提问来源于stack exchange，提问作者Lipin Kariappa