URL编码后分享至WhatsApp失效问题排查求助

我一眼就看出问题所在了：你已经正确用encodeURIComponent处理了lst参数的内容，但忽略了一个关键步骤——把生成好的完整URL传给WhatsApp的text参数时，这个URL本身也需要编码。

问题根源 #

whatsapp://send?text=这个协议的text参数和普通HTTP URL的参数规则是一样的：它要求参数值里的特殊字符（包括你生成的URL里的?、=、%这些）必须被编码。如果直接把未编码的完整URL拼进去，WhatsApp会错误地解析原URL里的参数，最终导致分享出去的链接变回了原始的、带非法字符的格式。

修复方案 #

只需要在sendWhatsApp函数里，对传入的message（也就是你生成的目标URL）再做一次encodeURIComponent编码即可：

function sendWhatsApp(message) {
  // 对要分享的完整URL再次编码
  window.location = "whatsapp://send?text=" + encodeURIComponent(message);
}

或者你也可以在调用sendWhatsApp的时候提前编码：

// 在shareList函数里调用时
sendWhatsApp(encodeURIComponent(text));

完整修改后的代码示例 #

function shareList() { 
  let text = ""; 
  let boxes = getList(); // returns a list like [..., "Smoothie Purple;selectGetranke;0", "Smoothie Yellow;selectGetranke;0", ...] 
  for (let i = 0; i < boxes.length; i++) { 
    text += boxes[i] + ","; 
  } 
  if (text.length > 0) { 
    text = text.substring(0, text.length - 1); 
  } 
  // 编码lst参数的值
  text = encodeURIComponent(text); 
  text = "https://example.com/?lst=" + text; 
  console.log(text); 
  // 传入前先编码完整URL
  sendWhatsApp(encodeURIComponent(text)); 
} 

function sendWhatsApp(message) { 
  window.location = "whatsapp://send?text=" + message; 
}

这样修改后，WhatsApp收到的就是完全编码后的字符串，分享出来的链接就能正确保留所有编码后的特殊字符了。

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