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

　　介绍

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

为什么要使用vue

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

<强>步骤如下:

1。开发环境vue + vant

2。电脑系统windows10专业版

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

4。先看效果图:

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

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

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

//,安装, 　　npm  install  nativeshare

6。在对应的组件中引入

import  NativeShare 得到& # 39;nativeshare& # 39;

7。点击分享图标,在方法中添加对应的代码:

cshare (), { 　　,if  (navigator.userAgent.toLowerCase () .indexOf (& # 39; micromessenger& # 39;), !==, 1), { 　　,this.ui.showToast(& # 39;图文分享请打开QQ浏览器& # 39;,,2) 　　,}else  { 　　,try  { 　　,this.nativeShare.setShareData ({ 　　,//链接:& # 39;http://192.168.3.82:8080 #/页面/索引/itest& # 39;, 　　标题:大敌;& # 39;title111& # 39; 　　描述:大敌;& # 39;desc11& # 39; 　　,//图标:& # 39;https://t12.baidu.com/it/u=751929707, 172094732, fm=76 & # 39; 　　,}) 　　,this.nativeShare.call (& # 39; default  & # 39;) 　　,}catch (错),{ 　　,console.log (err) 　　,this.ui.showToast(& # 39;此浏览器不支持跳转& # 39;) 　　,} 　　,} 　　},

8。为什么选择NativeShare.js ?

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

存在的问题:

1. uc安卓不能设置图标

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

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

getShareData(),获得分享的文案 　　setShareData(),设置分享的文案 　　调用(command =, '默认# 39;,,[选项]),调用浏览器原生的分享组件

10。ShareData设置文案的格式为

{ 　　,图标:& # 39;& # 39; 　　,链接:& # 39;& # 39; 　　标题:大敌;& # 39;& # 39; 　　描述:大敌;& # 39;& # 39; 　　,从:& # 39;& # 39; 　　,//以下几个回调目前只有在微信中支持和QQ中支持,,成功:,等待, 　　,失败:等待, 　　,取消:等待, 　　,触发:等待, 　　}

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

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

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