H5通过Navigator.share()调用浏览器的分享功能

1,145 阅读1分钟

定义(MDN):

Navigator.share() 方法通过调用本机的共享机制作为 Web Share API 的一部分。如果不支持 Web Share API,则此方法为 undefined。

参数:

必须至少指定以下字段之一,包括:

  • url: 共享的 URL( String )
  • text: 共享的文本( String )
  • title: 共享的标题( String )
  • files: 共享的文件(FrozenArray)
  • tips:分享文件前需要使用navigator.canShare方法判断下文件是否能分享

浏览器兼容性:

image.png

示例(vue)

<div class="sharebutton" @click="navShare">点击分享</div>
navShare() {
    console.log(navigator.share && navigator.canShare);
    if (navigator.share && navigator.canShare) {
    navigator.share({ 
     title: 'webShare', 
     text: 'webShare', 
     url: 'http://www.webqianduan.com/'
    });
    } else {
     alert(`当前浏览器版本不支持分享此功能`);
    }
}