前言
「Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進式框架。官方描述的它還是一個漸進式框架,本文主要介紹了關(guān)于vue調(diào)用瀏覽器分享的相關(guān)資料，下面話不多說了，來一起看看詳細的介紹吧
步驟如下：
1.開發(fā)環(huán)境 vue+vant
2.電腦系統(tǒng) windows10專業(yè)版
3.在使用vue開發(fā)的過程中,我們經(jīng)常會遇到分享,下面我來分享一下我的方法,希望對你有所幫助。
4.先看效果圖:
5.使用NativeShare.js 來達到上述功能的實現(xiàn)
|
1
2
|
// 安裝 npm install nativeshare |
6.在對應(yīng)的組件中引入
|
1
|
import NativeShare from 'nativeshare' |
7.點擊分享圖標,在methods中添加對應(yīng)的代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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('此瀏覽器不支持跳轉(zhuǎn)') } } }, |
8.為什么選擇NativeShare.js?
兼容性(毫無疑問是兼容瀏覽器最多的插件)
存在的問題:
1.uc安卓不能設(shè)置icon
2.百度瀏覽器安卓不能指定分享
9.NativeShare一共只有三個實力方法:
|
1
2
3
|
getShareData() 獲得分享的文案setShareData() 設(shè)置分享的文案call(command = ‘default', [options]) 調(diào)用瀏覽器原生的分享組件 |
10.ShareData設(shè)置文案的格式為
|
1
2
3
4
5
6
7
8
9
10
11
|
{ icon: '', link: '', title: '', desc: '', from: '', // 以下幾個回調(diào)目前只有在微信中支持和QQ中支持 success: noop, fail: noop, cancel: noop, trigger: noop,} |
11.調(diào)用call方法時第一個參數(shù)是指定用什么命令調(diào)用分享組件。目前支持6個命令。分別是:
default 默認，調(diào)用起底部的分享組件，當其他命令不支持的時候也會調(diào)用該命令
timeline 分享到朋友圈
appMessage 分享給微信好友
qq 分享給QQ好友
qZone 分享到QQ空間
weiBo 分享到微博
總結(jié)
到此這篇關(guān)于vue如何調(diào)用瀏覽器分享功能的文章就介紹到這了,更多相關(guān)vue調(diào)用瀏覽器分享內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://segmentfault.com/a/1190000039675372
