优化您的 WhatsApp 分享按钮
在您的网站上添加 WhatsApp 共享按钮是提高用户参与度的绝佳方法，因为它使用户可以轻松地与他们的网络共享您的信息。使用链接在移动设备上顺利激活 WhatsApp 是标准方法。
然而，桌面版 WhatsApp 与这一策略并不兼容。这篇文章将教您创建可在 WhatsApp 在线和移动版本上运行的共享按钮所需的代码和说明。
| 命令 | 描述 |
|---|---|
| encodeURIComponent() | 通过替换与每次出现的特定字符的字符 UTF-8 编码相对应的一个、两个或三个转义序列来对 URI 组件进行编码。 |
| window.open() | 允许通过使用提供的 URL 打开新的浏览器窗口或选项卡来在 WhatsApp Web 上共享链接。 |
| express.static() | 向客户端提供静态文件，允许通过 HTML、CSS 和 JavaScript 从提供的目录访问它们。 |
| res.redirect() | 通过向客户端发送重定向响应，将客户端重定向到所提供的 URL；这对于重定向到 WhatsApp Web 共享链接很有帮助。 |
| app.use() | 在此示例中，通过将中间件函数安装到 Express 应用程序来提供静态文件。 |
| app.get() | 通过定义 GET 查询的路由处理程序，为 WhatsApp Web 共享链接创建端点。 |
| document.getElementById() | 提供具有给定 ID 的 HTML 元素的实例，以便脚本可以处理事件。 |
| onclick | 创建一个在给定 HTML 元素上发生单击时触发的事件处理程序，这就是触发共享功能的方式。 |
启用跨平台 WhatsApp 共享功能
第一个脚本使用 WhatsApp 的在线和移动版本创建共享按钮 HTML 和 JavaScript。移动共享按钮 href 属性在移动设备上打开 WhatsApp，并使用预先填充的消息 whatsapp://send?text= 网址方案。一个按钮 id “shareButton”是为桌面版本制作的。该按钮现在有一个 onclick 脚本添加的事件监听器。当它被点击时， https://web.whatsapp.com/send?text= 用于创建 WhatsApp Web 的 URL。和用途 encodeURIComponent 对消息进行加密。 window is then used to open the created URL in a new browser tab.open，使 WhatsApp Web 用户能够分发消息。
第二个脚本使用 Node.js 和 HTML 用于前端和后端开发。这 Express 框架使用的是 Node.js 用于配置服务器的后端脚本。服务器定义一条路由 /share 它会使用预先填充的消息重新路由到 WhatsApp Web 共享 URL，并从“公共”目录传送静态文件。 Web 和移动设备的共享按钮由前端脚本生成。相同 whatsapp://send?text= URL 方案由移动按钮使用。这 /share 服务器上的端点通过 Web 共享按钮链接到。到达此端点时，用户将被发送到 WhatsApp Web，其中包含使用编码的消息 res.redirect，启用 WhatsApp 网络共享。
为 WhatsApp 分享按钮开发完整的 Web 和移动解决方案
HTML 和 JavaScript 解决方案
<!DOCTYPE html><html><head><title>WhatsApp Share Button</title></head><body><!-- Mobile Share Button --><a href="whatsapp://send?text=Hello%20World!">Share on WhatsApp Mobile</a><!-- Desktop Share Button --><button id="shareButton">Share on WhatsApp Web</button><script>document.getElementById('shareButton').onclick = function () {var url = 'https://web.whatsapp.com/send?text=' + encodeURIComponent('Hello World!');window.open(url, '_blank');};</script></body></html>
将 WhatsApp 共享的前端和后端解决方案付诸实践
HTML 和 Node.js 的集成
// Backend: server.js (Node.js)const express = require('express');const app = express();const port = 3000;app.use(express.static('public'));app.get('/share', (req, res) => {const message = 'Hello World!';const url = `https://web.whatsapp.com/send?text=${encodeURIComponent(message)}`;res.redirect(url);});app.listen(port, () => {console.log(`Server running at http://localhost:${port}`);});<!-- Frontend: public/index.html --><!DOCTYPE html><html><head><title>WhatsApp Share Button</title></head><body><a href="whatsapp://send?text=Hello%20World!">Share on WhatsApp Mobile</a><a href="/share">Share on WhatsApp Web</a></body></html>
使用 WhatsApp 中的分享按钮改善用户体验
在设置 WhatsApp 共享按钮时，各种设备上的用户体验是需要考虑的重要因素。交互时，移动用户的行为与桌面用户不同。因此，确保两个平台的共享功能完美运行至关重要。用户在使用移动设备时希望进行快速且快速的活动。通过使用 WhatsApp 可以直接与 WhatsApp 应用程序进行通信 whatsapp://send?text= URL方案，提供快速简单的共享体验。
在 PC 上复制这种流畅的体验是一个挑战。不仅必须访问 WhatsApp Web 界面，还需要确保消息已准备好并准备发送。这需要谨慎的 URL 处理和正确的消息编码 encodeURIComponent。此外，桌面用户可能会发现让共享按钮易于访问和可见非常有用，这可以通过仔细规划按钮的布局和在页面上的位置来实现。您可以通过处理这些小细节来开发易于使用并提高所有设备上的参与度的共享功能。
有关 WhatsApp 上分享按钮的常见问题
- 如何在手机上为 WhatsApp 创建分享按钮？
- 在里面 href 的属性 a 标签，使用 whatsapp://send?text= 网址方案。
- 如何让 WhatsApp Web 的分享按钮正常工作？
- 利用按钮元素创建 WhatsApp Web URL 并使用 window click.open 事件。
- 什么是 encodeURIComponent 作为提供服务？
- 为了保证 URL 的格式正确，它通过用转义序列替换特定字符来对 URI 组件进行编码。
- 出于什么原因，共享按钮需要后端？
- 后端提供了更可靠、适应性更强的共享解决方案，因为它可以管理 URL 创建和重定向。
- 快递如何 res.redirect 功能？
- 客户端会收到一个重定向答案，将其定向到给定的 URL。
- 我可以同时使用移动设备和网络共享按钮吗？
- 是的，您可以为 Web 和移动平台设计独特的按钮，或使用脚本来识别平台并适当修改 URL。
- 桌面共享是否需要使用 window.open？
- 当然， window.To make sure the message is transmitted, use the open 使用 WhatsApp Web 共享 URL 打开新选项卡的选项。
- 如何使分享按钮更明显？
- 在您的网站上，突出显示按钮并使用文本或图标来清楚地指示需要执行的操作。
- 如果用户的移动设备未安装 WhatsApp，会发生什么情况？
- 如果未安装 WhatsApp，系统将提示他们下载，并且共享尝试将失败。
- 我可以更改分享链接中预先写入的消息吗？
- 是的，您可以通过正确编码并修改 URL 中的文本参数来更改消息。
关于添加 WhatsApp 分享按钮的总结
在您的网站上添加 WhatsApp 共享按钮可以促进跨平台内容共享，从而提高用户参与度。为了确保与 WhatsApp 桌面版和移动版的兼容性，必须使用特定的 URL 方案和 JavaScript 方法。此外，Node.js 后端支持可以提供可靠且适应性强的解决方案。通过考虑这些因素，您可以设计一个共享功能，以提高可用性和覆盖范围，同时保持有效和用户友好。