我们知道，使用 Android 10 系统用户可以轻松地以二维码的形式分享 WiFi 密码，借助的是 Wi-Fi Easy Connect 协议，虽然这是一种比较简单百度分享按钮、安全的分享方式，但仍然存在一些缺点。值得庆幸的是，谷歌正在研究一种更简单的分享 WiFi 密码的方法，可能会在即将发布的 Android 12 上亮相。

在 Android 10 + 上分享 WiFi 密码很简单，用户只需要进入 WiFi 网络的网络详情页面，点击 “分享”，就会弹出一个别人可以扫描的二维码，也可以点击 “添加设备”，扫描别人设备上的二维码，将其添加到网络中百度分享按钮。

扫描二维码还是有些麻烦百度分享按钮，谷歌正在研究一种新的解决方案，让用户可以使用该公司的 “Nearby Share（附近分享）”功能更容易地与其他人分享生成的二维码。

谷歌工程师 Abel Tesfaye 提交给 AOSP 的一个新的提交旨在调整 “分享 Wi-Fi”页面，提供一个附近分享按钮。当点击时，默认的附近分享组件会被启动，这样用户就可以与附近的人分享二维码。由于 Nearby Share 可以近距离工作，但不需要身体接触或扫描任何二维码，这意味着用户可以在不同的房间分享 WiFi 密码。

由于这个提交还没有被合并，还不能确定这个功能是否会出现在 Android 12 中。IT之家了解到，第一个 Android 12 开发者预览版可能会在下个月的某个时候上线。

来源：IT之家

Web上的分享（Share）API

我认为Web Share API非常酷，简而言之，它会利用您所使用的平台上的原生共享功能（如果该平台支持的话）。

我喜欢这个：

远远不止这些东西：

为什么？

Web Share API只是几行代码。简单！没有图像，没有重量级的JavaScript或iframe。用户看到的UI是针对其平台定制的，甚至可能是由他们定制的，以在其中包含他们想要的东西。好样的，Web标准。

但并不是所有地方都支持。例如，我在Chrome浏览器中写这篇博客文章，在桌面Chrome浏览器中无法使用，但在桌面的Safari中却可以工作

所以，如果我要使用它，我宁愿在把按钮放在页面上之前先测试一下是否支持。这是非常简单的：

if (navigator.share) {}下面是一个例子，如果API被支持的话，我把一个 <button> 放在文章上，HTML和CSS省略。

JavaScript做了一些花哨的动作来获取文章的标题和第一段，以便在API中使用。我喜欢Jeremy Keith在页面上的做法：

if (navigator.share) { navigator.share( { title: document.querySelector('title').textContent, text: document.querySelector('meta[name="description"]').getAttribute('content'), url: document.querySelector('link[rel="canonical"]').getAttribute('href') } );}你也可以将字符串传递给这些值，这只是在展示你如何在任何页面上动态地做一些工作。

Jeremy也一直在倡导建立一个JavaScript可选的Web Share API版本，他认为可以像这样工作。

<button type="share">然后，指定标题和文本：

<button type="share" value="title,text">用逗号对我来说有点时髦，如果标题中包含逗号怎么办？那指定URL呢？我们可以将它们全部分成属性吗？我想我知道Jeremy会说什么：这是一个简单的声明性版本，如果你想改变默认行为，那就是JavaScript的作用。

如何使用Web Share API自从在Android的Chrome 61中首次引入以来，Web Share API似乎已经受到关注。从本质上讲，它提供了一种方法，当直接从网站或Web应用程序分享内容时，可以触发设备（或桌面，如果使用Safari）的本地分享对话框，例如链接或联系卡。

虽然用户已经可以通过原生方式分享网页上的内容，但他们必须在浏览器菜单中找到这个选项，即使如此，也无法控制分享的内容。该API的引入让开发者可以利用用户设备上的原生内容分享功能，将分享功能添加到应用或网站中。

与传统方法相比，这种方法具有许多优势：

与你在DIY实现中可能拥有的有限数量的内容相比，用户将获得广泛的内容分享选择。你可以通过删除各个社交平台上的第三方脚本来缩短页面加载时间。你不需要为不同的社交媒体网站和电子邮件添加一系列按钮，一个按钮就足以触发设备的原生分享选项。用户可以在自己的设备上定制自己喜欢的分享目标，而不是仅仅局限于预定义的选项。关于浏览器支持的说明在介绍API的工作细节之前，我们先把浏览器支持的问题解决掉。说实话，目前浏览器的支持度并不高。它只适用于Android版Chrome浏览器，以及Safari（桌面和iOS）。

但不要因此而不愿意在网站上采用这个API。要实现一个支持不提供支持的浏览器的后备功能是很容易的，你会看到的。

使用它的一些要求在您自己的Web项目上采用此API之前，需要注意两点：

您的网站必须通过}

此时，一旦点击分享按钮，就会弹出一个对话框，显示出分享内容的几个选项，这是代码的一部分，可帮助我们实现这一目标：

shareButton.addEventListener('click', event => { shareDialog.classList.add('is-open');});让我们继续进行示例转换，以改为使用Web Share API。首先要做的是检查用户的浏览器是否确实支持该API，如下所示：

if (navigator.share) { // Web Share API is supported} else { // Fallback}使用Web Share API就像调用 navigator.share() 方法并传递一个至少包含以下字段之一的对象一样简单。

url：一个字符串，代表要共享的URL。通常是文档的网址，但不是必须的。您可以通过Web Share API共享任何URL。title：表示要共享的标题的字符串，通常是 document.title。text：您要包括的任何文本。实际情况如下：

shareButton.addEventListener('click', event => { if (navigator.share) { navigator.share({ title: 'WebShare API Demo', url: '}

API是基于Promise的，所以你可以附加一个 .then() 方法，以便在共享成功时显示成功消息，并使用 .catch() 处理错误。。在实际情况下，您可能希望使用以下代码段获取页面的标题和URL：

const title = document.title;const url = document.querySelector('link[rel=canonical]') ? document.querySelector('link[rel=canonical]').href : document.location.href;对于URL，我们首先检查该页面是否有一个规范的URL，如果有，就使用它。否则，我们从 document.location 中抓取 href。

提供后备方案是个好主意在不支持Web Share API的浏览器中，我们需要提供一种后备机制，以便那些浏览器上的用户仍然可以使用一些共享选项。

在上面的DIY例中，我们弹出一个对话框，其中有一些用于共享内容的选项，并且演示中的按钮实际上并没有链接到任何地方，因为这是一个演示。但是，如果您想了解如何在不使用第三方脚本的情况下创建自己的链接来共享网页，那么Adam Coti的文章就是一个不错的起点。

我们要做的是在不支持Web Share API的浏览器上为用户显示后备对话框。这就像将打开共享对话框的代码移到 else 块中一样简单：

shareButton.addEventListener('click', event => { if (navigator.share) { navigator.share({ title: 'WebShare API Demo', url: '}

试试吧！使用支持Web Share的浏览器和不支持的浏览器。它的工作原理应该与上面的演示类似。

结束这几乎涵盖了您需要了解的有关Web Share API的基本内容。通过在您的网站上实施它，访问者可以在更广泛的社交网络上更容易地与联系人和其他原生应用程序分享您的内容。

另外值得注意的是，如果你的Web应用符合WPA Web应用安装标准，你能够将其添加为共享目标，并添加到用户的主屏幕上。Web Share Target API的此功能，您可以在Google Developers上了解。

尽管对浏览器的支持不多，但回退很容易实现，因此我认为没有理由不采用这种方式。

您是否使用过Web Share API？请在评论中分享。

最近整理了一份优质视频教程资源，想要的可以关注我然后私信“666”即可免费领取哦！如果文章对你有所启发和帮助，可以点个关注、收藏、转发，也可以留言讨论，这是对作者的最大鼓励。