如何在 React 应用程序中实现类似 Wordle 的共享功能？答案

【问题标题】：How can I implement a Wordle-like sharing functionality in a React application?如何在 React 应用程序中实现类似 Wordle 的共享功能？
【发布时间】：2023-01-20 07:02:53
【问题描述】：

我正在开发一个 React（更具体地说是 Next.js）Web 应用程序，我想实现一个类似 Worldle 的共享功能。

它是这样工作的：当桌面用户点击一个按钮时，我想将一个字符串复制到剪贴板，当移动用户点击这个按钮时，我想打开一个本地共享屏幕，允许用户复制粘贴我的字符串到 WhatsApp 消息、电子邮件、Twitter 和其他社交应用程序中。

复制到桌面上的剪贴板很容易，我可以使用navigator.clipboard.writeText 实现。这似乎不适用于 Safari 和 Chrome 的移动版本，但也许我什至不需要它工作，相反，我需要以某种方式打开共享屏幕，但我似乎无法做到这一点。我试过使用以下点击处理程序：

const shareHandler = async () => {
    if ("share" in navigator) {
      await navigator.share({
        title: "Share",
        text: "Share this text",
      })
    } else {
      alert("Share not supported by your browser")
    }
  }

在移动设备 (iPhone 13) 上点击我的按钮没有任何反应。请注意，我使用的是最新版本的 Chrome 和 Safari，所以这应该不是由过时的浏览器引起的。

关于如何使它正常工作的任何建议？

非常感谢！

【问题讨论】：

标签： javascript mobile sharing

【解决方案1】：

任何不幸在未来遇到类似问题的人的更新：

navigator.share 只能通过 HTTPS 或本地主机使用。因为我是在物理移动设备上尝试这个，所以我不在本地主机上，我的开发连接也不是通过 HTTPS 提供的。您可以通过 HTTPS 运行服务器的方法很复杂，但我选择了一个更简单的解决方案，我只是使用了可以通过本地主机访问我的应用程序的 iOS 模拟器。为了获得更流畅的体验，我必须在 Safari 中启用开发人员工具，这让我可以从模拟器监控控制台日志。

【讨论】：