针对指定号码的WhatsApp分享代码及HTML/CSS/JS自定义消息区实现问询

嘿，刚好做过类似的需求，最简实现其实不用搞复杂，纯前端利用WhatsApp官方的链接协议就能搞定，分两部分给你说清楚👇

核心思路是利用WhatsApp的官方跳转协议，不用后端接口，直接通过前端拼接链接触发WhatsApp打开并填充预设消息。

1. HTML结构（自定义消息区域） #

先做一个基础的输入框和发送按钮：

<div class="custom-whatsapp-area">
  <textarea id="msgInput" placeholder="输入你要发送的消息..."></textarea>
  <button id="sendToTargetBtn">发送到指定号码</button>
</div>

2. 简单CSS美化（可选，适配自定义样式） #

给区域加些基础样式，你可以根据自己的需求调整：

.custom-whatsapp-area {
  max-width: 450px;
  margin: 30px auto;
}
#msgInput {
  width: 100%;
  height: 120px;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  resize: none;
  font-size: 14px;
  margin-bottom: 12px;
}
#sendToTargetBtn {
  width: 100%;
  background-color: #25d366;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
}
#sendToTargetBtn:hover {
  opacity: 0.9;
}

3. JS逻辑（实现发送功能） #

核心是获取输入内容，拼接WhatsApp的跳转链接，注意号码必须是纯数字国际格式（去掉+、空格、括号等符号）：

const sendBtn = document.getElementById('sendToTargetBtn');
const msgInput = document.getElementById('msgInput');
// 替换成你要指定的目标号码，比如中国号码是8613xxxxxxxxx，美国是1xxxxxxxxx
const targetPhoneNumber = '8613800138000';

sendBtn.addEventListener('click', () => {
  const message = msgInput.value.trim();
  if (!message) {
    alert('请输入消息内容哦');
    return;
  }
  // 对消息内容做URL编码，避免特殊字符导致的跳转错误
  const encodedMsg = encodeURIComponent(message);
  // 拼接WhatsApp官方跳转链接
  const whatsappLink = `https://wa.me/${targetPhoneNumber}?text=${encodedMsg}`;
  // 在新窗口打开链接，也可以直接用window.location.href跳转
  window.open(whatsappLink, '_blank');
});

如果是做快速分享/打开聊天的按钮，直接用静态链接或者动态生成即可，分两种场景：

1. 直接打开和指定号码的聊天框（无预设消息） #

<a href="https://wa.me/8613800138000" target="_blank">打开与指定号码的WhatsApp聊天</a>

2. 带预设消息的分享按钮 #

把要分享的内容直接拼到链接里，记得做URL编码：

<a href="https://wa.me/8613800138000?text=你好，我想咨询关于产品的问题" target="_blank">发送预设消息到指定号码</a>

关键注意事项 #

• 号码必须是纯数字的国际格式：比如中国号码要写成8613xxxxxxxxx（去掉+号），不能带空格、括号等特殊字符；
• 如果用户没安装WhatsApp，链接会自动跳转到WhatsApp网页版，提示用户登录或安装；
• 完全免费，不需要申请任何API密钥，依赖WhatsApp官方公开的协议，兼容性拉满。

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