方式一.使用NativeShare实现拉起浏览器原生分享模块
git地址:
GitHub - fa-ge/NativeShare: NativeShare是一个整合了各大移动端浏览器调用原生分享的插件
npm包安装
npm install --save nativeshare
组件内引入:
import NativeShare from 'nativeshare'
html:
<div @click="nativeShare" style="padding:20px">拉起分享</div>
js:
nativeShare() {
let nativeShare = new NativeShare()
nativeShare.setShareData({
icon: 'https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg',
link: 'https://github.com/fa-ge/NativeShare',
title: 'NativeShare',
desc: 'NativeShare是一个整合了各大移动端浏览器调用原生分享的插件',
success: function () {
alert('success')
},
fail: function () {
alert('fail')
}
})
try {
nativeShare.call('wechatFriend')//
// 如果是分享到微信则需要 nativeShare.call('wechatFriend')
// 类似的命令有
// default 默认,调用起底部的分享组件,当其他命令不支持的时候也会调用该命令
// wechatTimeline 分享到朋友圈
// wechatFriend 分享给微信好友
// qqFriend 分享给QQ好友
// qZone 分享到QQ空间
// weibo 分享到微博
alert('成功')
} catch (err) {
// 如果不支持,你可以在这里做降级处理
alert(err)
}
}
方式二.使用web share api拉起浏览器原生分享模块
html:
<div @click="webShare" style="padding:20px">webShare</div>
js:
webShare() {
if (navigator.share) {
navigator.share(
{
title: 'webShare',
text: 'webShare',
url: location.href
}
);
}
}
2022年8月11日截图Navigator.share - Web API 接口参考 | MDN
3.注意:
方式一NativeShare兼容性较强,但截止目前最后一次更新时间为2020.11.23,可能会导致未知问题。
方式二web share api兼容性较差,但它是未来趋势。
以上两种方法拉起浏览器原生分享,页面必须是https协议,http会导致拉起失败,想要尝试拉起效果可以用localhost本地打开项目。