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组件生命周期钩子使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪2022-04-04
详解vue-video-player使用心得（兼容m3u8）
这篇文章主要介绍了详解vue-video-player使用心得（兼容m3u8），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了Vue子组件调用父组件方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章主要为大家详细介绍了Vue计数器案例的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
解决vue创建项目使用vue-router和vuex报错Object(...)is not a&nb
这篇文章主要介绍了解决vue创建项目使用vue-router和vuex报错Object(...)is not a function问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章介绍了Vue项目中使用Bootstrap的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
不知不觉中,2023年已然逝去了,龙年到了,所以本文小编使用Vue3 + CSS实现一个喷火龙的动画效果,文中有相关的代码示例供大家参考,具有一定的参考价值,感兴趣的同学可以自己动手尝试一下2024-02-02
本文主要介绍了五分钟教你使用vue-cli3创建项目，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
vue elementui select标签监听change事件失效问题
这篇文章主要介绍了vue elementui select标签监听change事件失效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了vue中transition组件在项目中运用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-12-12
最新评论