怎么在vue項目中調用瀏覽器分享功能

怎么在vue項目中調用瀏覽器分享功能？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用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項目中調用瀏覽器分享功能問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。