怎么在vue项目中调用浏览器分享功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
为什么要使用Vue
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。
步骤如下：
开发环境 vue+vant
电脑系统 windows10专业版
在使用vue开发的过程中,我们经常会遇到分享,下面我来分享一下我的方法,希望对你有所帮助。
先看效果图:
使用NativeShare.js 来达到上述功能的实现
// 安装 npm install nativeshare在对应的组件中引入
import NativeShare from 'nativeshare'点击分享图标,在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('此浏览器不支持跳转') } } },为什么选择NativeShare.js?
兼容性(毫无疑问是兼容浏览器最多的插件)
存在的问题:
uc安卓不能设置icon
百度浏览器安卓不能指定分享
NativeShare一共只有三个实力方法:
getShareData() 获得分享的文案setShareData() 设置分享的文案call(command = ‘default', [options]) 调用浏览器原生的分享组件ShareData设置文案的格式为
{ icon: '', link: '', title: '', desc: '', from: '', // 以下几个回调目前只有在微信中支持和QQ中支持 success: noop, fail: noop, cancel: noop, trigger: noop,}调用call方法时第一个参数是指定用什么命令调用分享组件。目前支持6个命令。分别是:
default 默认，调用起底部的分享组件，当其他命令不支持的时候也会调用该命令
timeline 分享到朋友圈
appMessage 分享给微信好友
qq 分享给QQ好友
qZone 分享到QQ空间
weiBo 分享到微博
关于怎么在vue项目中调用浏览器分享功能问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网行业资讯频道了解更多相关知识。
