怎么在vue项目中调用浏览器分享功能

怎么在vue项目中调用浏览器分享功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

步骤如下：

1.开发环境 vue+vant

2.电脑系统 windows10专业版

3.在使用vue开发的过程中,我们经常会遇到分享,下面我来分享一下我的方法,希望对你有所帮助。

4.先看效果图:

5.使用NativeShare.js 来达到上述功能的实现

//安装
npminstallnativeshare

6.在对应的组件中引入

importNativeSharefrom'nativeshare'

7.点击分享图标,在methods中添加对应的代码:

cshare(){
if(navigator.userAgent.toLowerCase().indexOf('micromessenger')!==-1){
this.ui.showToast('图文分享请打开QQ浏览器',2)
}else{
try{
this.nativeShare.setShareData({
//link:'http://192.168.3.82:8080/#/pages/index/itest',
title:'title111',
desc:'desc11',
//icon:'https://t12.baidu.com/it/u=751929707,172094732&fm=76',
})
this.nativeShare.call('default')
}catch(err){
console.log(err)
this.ui.showToast('此浏览器不支持跳转')
}
}
},

8.为什么选择NativeShare.js?

兼容性(毫无疑问是兼容浏览器最多的插件)

存在的问题:

1.uc安卓不能设置icon

2.百度浏览器安卓不能指定分享

9.NativeShare一共只有三个实力方法:

getShareData()获得分享的文案
setShareData()设置分享的文案
call(command=‘default',[options])调用浏览器原生的分享组件

10.ShareData设置文案的格式为

{
icon:'',
link:'',
title:'',
desc:'',
from:'',
//以下几个回调目前只有在微信中支持和QQ中支持success:noop,
fail:noop,
cancel:noop,
trigger:noop,
}

11.调用call方法时第一个参数是指定用什么命令调用分享组件。目前支持6个命令。分别是:

default 默认，调用起底部的分享组件，当其他命令不支持的时候也会调用该命令timeline 分享到朋友圈appMessage 分享给微信好友qq 分享给QQ好友qZone 分享到QQ空间weiBo 分享到微博

关于怎么在vue项目中调用浏览器分享功能问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注恰卡编程网行业资讯频道了解更多相关知识。