React应用sms:协议短信分享在Windows系统下失效问题

问题场景 #

在React应用中使用sms:协议链接实现短信分享功能，移动端浏览器测试正常，Windows笔记本设备点击无效，控制台持续抛出报错：

无法启动'sms:?&body=Check%20out%20this%20product%20I%20found%20on%20Sabi%20https://tbazesolutions.com.ng/actions/product/11f76e1107sgbdhg'，原因是该协议没有已注册的处理程序。

原有实现代码：

const shareMessage = `Check out this product i found:`;

<SMSShareLink href={`sms:?&body=${shareMessage}${url}`}>
 <TextMessageIcon />
</SMSShareLink>

sms: 是移动端系统专属的自定义协议，默认只会关联手机端的系统短信应用。Windows桌面系统默认没有注册该协议的处理程序，除非用户手动给系统绑定了支持短信唤起的第三方应用，否则点击该类链接必然触发上述报错，和React框架本身无关，是桌面端系统的天然支持限制。

做端侧场景适配，区分移动端、桌面端走不同的交互逻辑，同时修正原有代码里sms链接的兼容问题：

• 移动端：保留sms链接唤起逻辑，同时兼容iOS、安卓不同系统的sms协议参数格式，对分享内容做URL编码避免特殊字符截断
• 桌面端：不要给a标签设置有效的sms协议地址，避免浏览器抛出协议校验错误，替换为降级交互：点击后自动复制分享文案到剪贴板，提示用户桌面端无法直接唤起短信，可手动粘贴内容发送，或引导用户使用移动设备操作

import { useState, useEffect } from 'react';

const SmsShareButton = ({ shareText, shareUrl, children }) => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    // 初始化判断设备类型
    setIsMobile(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
  }, []);

  const fullShareContent = `${shareText} ${shareUrl}`;
  // 对分享内容做URL编码，兼容多系统参数规则
  const smsHref = isMobile ? `sms:?&body=${encodeURIComponent(fullShareContent)}` : 'javascript:void(0)';

  const handleClick = async (e) => {
    if (isMobile) return;
    // 桌面端走降级逻辑
    e.preventDefault();
    try {
      await navigator.clipboard.writeText(fullShareContent);
      alert('已复制分享内容到剪贴板，桌面端暂不支持直接唤起短信，可手动粘贴发送');
    } catch (err) {
      alert('桌面端暂不支持短信直接唤起，请使用移动设备操作分享');
    }
  };

  return (
    <a href={smsHref} onClick={handleClick} className="sms-share-btn">
      {children}
    </a>
  );
};

// 业务中使用
<SmsShareButton 
  shareText="Check out this product I found on Sabi" 
  shareUrl="对应产品访问地址"
>
  <TextMessageIcon />
</SmsShareButton>

• 原有代码未对拼接后的分享内容做URL编码，如果分享文本、产品链接里包含&、?、中文等特殊字符，会直接导致短信body内容截断，必须用encodeURIComponent处理
• 不要尝试在桌面端强行注册sms协议处理逻辑，该操作需要用户手动修改系统设置，普通网页无权限操作，降级交互是唯一通用方案

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