脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue调用浏览器分享

vue如何调用浏览器分享功能详解

 更新时间：2021年03月20日 12:09:34   作者：灰太狼的情与殇  
这篇文章主要给大家介绍了关于vue如何调用浏览器分享的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

「Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。官方描述的它还是一个渐进式框架,本文主要介绍了关于vue调用浏览器分享的相关资料，下面话不多说了，来一起看看详细的介绍吧

步骤如下：

1.开发环境 vue+vant

2.电脑系统 windows10专业版

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

4.先看效果图:

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

// 安装 
npm install nativeshare

6.在对应的组件中引入

import NativeShare from '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如何调用浏览器分享功能的文章就介绍到这了,更多相关vue调用浏览器分享内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

  • vue 2.1.3 实时显示当前时间,每秒更新的方法

    vue 2.1.3 实时显示当前时间,每秒更新的方法

    今天小编就为大家分享一篇vue 2.1.3 实时显示当前时间,每秒更新的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue实现锁屏功能的示例代码

    Vue实现锁屏功能的示例代码

    这篇文章主要为大家详细介绍了如何利用Vue实现简单的锁屏功能，文中的示例代码讲解详细，具有一定的参考价值，需要的小伙伴可以了解一下
    2023-06-06
  • vue实现列表拖拽排序的示例代码

    vue实现列表拖拽排序的示例代码

    本文主要介绍了vue实现列表拖拽排序的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vue实现打印功能的两种方法

    vue实现打印功能的两种方法

    这篇文章主要介绍了vue实现打印功能的两种方法,文中通过两种方法给大家介绍了指定不打印区域的解决方法，需要的朋友可以参考下
    2018-09-09
  • 解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

    解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

    这篇文章主要介绍了解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 在vue中实现清除echarts上次保留的数据(亲测有效)

    在vue中实现清除echarts上次保留的数据(亲测有效)

    这篇文章主要介绍了在vue中实现清除echarts上次保留的数据(亲测有效)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue-cli 介绍与安装

    vue-cli 介绍与安装

    这篇文章主要给大家介绍的是vue-cli 介绍与安装，vue-cli是和vue进行深度组合的工具，可以快速帮我们创建vue项目，并且把一些脚手架相关的代码给我们创建好。真正使用vue开发项目，都是用vue-cli来创建项目的，下面文章详细内容,需要的朋友可以参考一下
    2021-10-10
  • Vue源码分析之Vue实例初始化详解

    Vue源码分析之Vue实例初始化详解

    这篇文章主要给大家介绍了关于Vue源码分析之Vue实例初始化的相关资料,需要的朋友可以参考下
    2019-08-08
  • vue中的install方法使用

    vue中的install方法使用

    这篇文章主要介绍了vue中的install方法使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • VUE实现自身整体组件销毁的示例代码

    VUE实现自身整体组件销毁的示例代码

    这篇文章主要介绍了VUE实现自身整体组件销毁的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01

最新评论