HTML表单直接后台发送WhatsApp消息：客户端限制与后端实现策略

<form>
  <input type="text" id="mssgbox" placeholder="输入消息内容" />
  <button type="button" onclick="sendMessage()">发送</button>
</form>

<script>
function sendMessage() {
  let typedText = document.querySelector('#mssgbox').value;
  // 这种方式会强制浏览器重定向到WhatsApp
  window.location.href = 'https://api.whatsapp.com/send?phone=2347034907106&text=' + encodeURIComponent(typedText);
}
</script>

// 前端HTML表单 (示例)
// <form id="messageForm">
//   <input type="text" id="messageInput" name="message" />
//   <button type="submit">发送</button>
// </form>

// <script>
// document.getElementById('messageForm').addEventListener('submit', async function(event) {
//   event.preventDefault();
//   const message = document.getElementById('messageInput').value;
//   const response = await fetch('/send-whatsapp-message', {
//     method: 'POST',
//     headers: { 'Content-Type': 'application/json' },
//     body: JSON.stringify({ message: message, recipient: '2347034907106' }) // 接收方号码也可以从前端获取
//   });
//   const data = await response.json();
//   if (data.success) {
//     alert('消息已成功发送！');
//   } else {
//     alert('消息发送失败: ' + data.error);
//   }
// });
// </script>

// 后端服务 (Node.js Express 伪代码示例)
const express = require('express');
const axios = require('axios'); // 用于发送HTTP请求
const app = express();
app.use(express.json());

const WHATSAPP_API_URL = 'https://graph.facebook.com/v19.0/<YOUR_PHONE_NUMBER_ID>/messages'; // 替换为你的电话号码ID
const ACCESS_TOKEN = 'YOUR_WHATSAPP_BUSINESS_API_ACCESS_TOKEN'; // 替换为你的访问令牌

app.post('/send-whatsapp-message', async (req, res) => {
  const { message, recipient } = req.body;

  if (!message || !recipient) {
    return res.status(400).json({ success: false, error: '消息内容和接收方不能为空。' });
  }

  try {
    const response = await axios.post(WHATSAPP_API_URL, {
      messaging_product: 'whatsapp',
      to: recipient,
      type: 'text',
      text: {
        body: message
      }
    }, {
      headers: {
        'Authorization': `Bearer ${ACCESS_TOKEN}`,
        'Content-Type': 'application/json'
      }
    });

    if (response.data && response.data.messages && response.data.messages.length > 0) {
      res.json({ success: true, messageId: response.data.messages[0].id });
    } else {
      res.status(500).json({ success: false, error: 'WhatsApp API响应异常。' });
    }
  } catch (error) {
    console.error('发送WhatsApp消息失败:', error.response ? error.response.data : error.message);
    res.status(500).json({ success: false, error: '无法发送消息，请稍后再试。' });
  }
});

// app.listen(3000, () => console.log('Backend listening on port 3000'));