React项目无需WhatsApp Cloud API自动附图发送WhatsApp消息的实现方法

前端（React JS）实现方案 #

1. Web Share API（推荐，支持带媒体分享） #

WhatsApp的whatsapp:// URI协议仅支持text参数，无法直接附加图片。但可以使用浏览器的Web Share API实现带图片+文案的分享，不过有以下限制：

• 必须运行在HTTPS环境（本地开发localhost例外）
• 仅支持移动端主流浏览器（Chrome、Safari等），桌面端支持有限

React中使用示例：

const shareWithWhatsApp = async () => {
  const msg = 'This is an interesting caption.';
  // 图片需是可公开访问的URL，或通过File对象获取（比如用户上传的本地图片）
  const imageUrl = 'https://your-domain.com/path/to/your-image.jpg';

  try {
    await navigator.share({
      title: '分享内容',
      text: msg,
      url: imageUrl, // 部分设备会自动识别为媒体附件
    });
    console.log('分享已触发');
  } catch (err) {
    if (err.name === 'NotSupportedError') {
      alert('当前设备不支持分享功能，请手动分享');
    } else {
      alert('分享失败，请重试');
    }
  }
};

注意：使用Web Share API时，无法指定直接发送到特定手机号，用户需要在系统分享面板中选择WhatsApp，再选择联系人。如果必须指定手机号，只能结合whatsapp://协议单独发送文案，图片需要用户手动添加。

2. 原生桥接（React Native场景） #

如果你的项目是React Native，可通过原生模块（如react-native-share库）调用系统分享功能，直接传递图片和文案，唤起WhatsApp并预填内容，用户确认后发送。示例：

import Share from 'react-native-share';

const shareImageToWhatsApp = async () => {
  const options = {
    message: 'This is an interesting caption.',
    url: 'file:///path/to/your-image.jpg', // 本地图片路径或远程URL
    type: 'image/jpeg',
    social: Share.Social.WHATSAPP,
    recipient: '+628123456789', // 指定接收手机号
  };

  try {
    await Share.shareSingle(options);
    console.log('WhatsApp分享面板已打开');
  } catch (err) {
    alert('请确保已安装WhatsApp');
  }
};

后端（Codeigniter 4 / PHP）实现方案 #

后端无法直接触发WhatsApp的带图分享，但可以做以下辅助工作：

1. 生成可分享的媒体链接 #

将需要分享的图片上传到服务器（Codeigniter 4的文件上传功能），生成公开访问的URL，然后前端结合Web Share API或原生分享功能使用这个URL。

Codeigniter 4上传图片示例：

public function uploadImage() {
    $validationRule = [
        'image' => [
            'label' => 'Image File',
            'rules' => 'uploaded[image]|is_image[image]|mime_in[image,image/jpg,image/jpeg,image/png]',
        ],
    ];

    if (!$this->validate($validationRule)) {
        return $this->response->setJSON(['error' => $this->validator->getErrors()]);
    }

    $file = $this->request->getFile('image');
    if ($file->isValid() && !$file->hasMoved()) {
        $newName = $file->getRandomName();
        $file->move(WRITEPATH . 'uploads', $newName);
        $imageUrl = base_url('uploads/' . $newName);
        return $this->response->setJSON(['imageUrl' => $imageUrl]);
    }

    return $this->response->setJSON(['error' => '图片上传失败']);
}

2. 生成分享引导页面 #

后端可以生成一个包含图片和文案的页面，引导用户使用浏览器的分享功能（如点击系统分享按钮）选择WhatsApp分享。这种方式兼容性较好，但需要用户手动操作。

关键结论 #

不使用WhatsApp Cloud API的情况下：

• 无法实现完全自动发送带图片的WhatsApp消息（受限于WhatsApp的安全机制，第三方应用不能直接操控发送带附件的消息）
• 只能通过唤起系统分享功能或WhatsApp客户端，由用户确认后发送预填的图片和文案
• 如果必须指定接收手机号，目前仅React Native的原生分享库支持直接指定，Web端无法实现，只能让用户手动选择联系人

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