北京
给“联系我们”按钮配一个 mailto: 链接，依然是网页放邮箱地址最高效的办法。真正恼人的是点击之后——浏览器很可能拽出一款用户从来不用的桌面邮件客户端，或者系统根本没配置任何邮件处理程序。而另一边，他们明明早已登入了 Gmail、Outlook、Proton Mail 等常用网页邮箱。
非要让访客在“用网页邮箱”和“忍受默认跳转”之间二选一，其实大可不必。有一个轻量方案，既能保留普通 mailto 链接，又能在它之上叠加一层更体贴的选择，让用户自己决定用什么发信。
做法很简单。第一步，保持你原有的 HTML 不动，就留一个普通锚点，比如 Email us。这层保留至关重要——哪怕 JavaScript 因任何原因没跑起来，浏览器仍然能识别出一个正常的 mailto: 地址，并交给系统预设的邮件应用处理，不会让按钮彻底失灵。
第二步，安装框架无关的核心包 smart‐mailto。只需要一行 npm install @smart-mailto/core，它没有运行时依赖，体积几乎可以忽略。
第三步，在浏览器入口文件里引入，然后调用一次初始化：import { initSmartMailto } from '@smart-mailto/core'; initSmartMailto();。整段迁移到此结束，你不需要把每个邮箱链接逐个替换成自定义组件。
这个库采用了一套事件委托机制，只用一个全局点击监听器就能管住所有合法的 mailto: 锚点，包括事后才动态添加到页面里的链接。访客点击任何一个邮箱链接，屏幕上出现的就不再是直奔操作系统默认邮件应用的跳转，而是一个提供商选择面板。收件人地址、原有 subject、body 等预填参数都会保留在邮件意图里，只是不同服务商对这些字段的预填支持程度略有差异。
选择面板也考虑到了“别人推荐的网页邮箱未必合我胃口”的情况。默认内置“复制邮箱地址”选项，访客可以把收件人复制下来，再粘贴到任何邮件服务里。移动端上还默认提供“默认邮件应用”按钮；如果你想在桌面端也显示这一选项，可以用 initSmartMailto({ includeNative: true }) 开启。万一面板加载失败，库会自动回退到原始的 mailto: 链接，而如果收件人地址为空或无效，它则彻底放行点击，不对用户做任何干扰。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
