网页应用WhatsApp分享异常：Web端GET参数无法正常传递

嘿，我看你遇到了个头疼的小问题：WhatsApp移动端分享带参数的链接没问题，但网页版就是传不了GET参数对吧？其实这事儿根源很简单——你要分享的链接里的特殊字符没做URL编码，WhatsApp网页版把它们当成自己的参数解析了，自然就丢了你要传递的property_id。

咱们直接上解决方案：

• 第一步，把你要分享的完整链接做URL编码。比如你原来的http://uaereb.com/property-details/?property_id=41，编码后会变成http%3A%2F%2Fuaereb.com%2Fproperty-details%2F%3Fproperty_id%3D41
• 第二步，把编码后的内容替换到网页版分享链接的text参数里

修正后的网页版分享代码是这样的：

<a target="_blank" href="https://web.whatsapp.com/send?text=http%3A%2F%2Fuaereb.com%2Fproperty-details%2F%3Fproperty_id%3D41" data-action="share/whatsapp/share"><i class="fa fa-whatsapp whatsapp"></i></a>

顺便说一句，虽然你的移动端代码能正常工作，但也建议统一做编码处理，兼容性会更好，修正后的移动端代码：

<a target="_blank" href="whatsapp://send?text=http%3A%2F%2Fuaereb.com%2Fproperty-details%2F%3Fproperty_id%3D41" data-action="share/whatsapp/share"><i class="fa fa-whatsapp whatsapp"></i></a>

如果你的链接是动态生成的（比如property_id是从后端获取的变量），用JavaScript的encodeURIComponent()方法就能自动完成编码，举个例子：

// 假设propertyId是动态获取的数值
const propertyId = 41;
const originalShareUrl = `http://uaereb.com/property-details/?property_id=${propertyId}`;
const encodedShareUrl = encodeURIComponent(originalShareUrl);
// 之后把encodedShareUrl插入到a标签的href属性里就行

这样处理之后，WhatsApp网页版就能完整识别你要分享的带参数链接了，分享出去的内容里property_id参数不会再丢失~

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