vue如何調(diào)用瀏覽器分享功能詳解

更新時間：2021年03月20日 12:09:34 作者：灰太狼的情與殤

這篇文章主要給大家介紹了關于vue如何調(diào)用瀏覽器分享的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

「Vue (讀音 /vjuː/，類似于 view) 是一套用于構建用戶界面的漸進式框架。官方描述的它還是一個漸進式框架,本文主要介紹了關于vue調(diào)用瀏覽器分享的相關資料，下面話不多說了，來一起看看詳細的介紹吧

步驟如下：

1.開發(fā)環(huán)境 vue+vant

2.電腦系統(tǒng) windows10專業(yè)版

3.在使用vue開發(fā)的過程中,我們經(jīng)常會遇到分享,下面我來分享一下我的方法,希望對你有所幫助。

4.先看效果圖:

5.使用NativeShare.js 來達到上述功能的實現(xiàn)

// 安裝 
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('此瀏覽器不支持跳轉(zhuǎn)')
 }
 }
 },

8.為什么選擇NativeShare.js?

兼容性(毫無疑問是兼容瀏覽器最多的插件)

存在的問題:

1.uc安卓不能設置icon

2.百度瀏覽器安卓不能指定分享

9.NativeShare一共只有三個實力方法:

getShareData() 獲得分享的文案
setShareData() 設置分享的文案
call(command = ‘default', [options]) 調(diào)用瀏覽器原生的分享組件

10.ShareData設置文案的格式為

{
 icon: '',
 link: '',
 title: '',
 desc: '',
 from: '',
 // 以下幾個回調(diào)目前只有在微信中支持和QQ中支持  success: noop,
 fail: noop,
 cancel: noop,
 trigger: noop,
}

11.調(diào)用call方法時第一個參數(shù)是指定用什么命令調(diào)用分享組件。目前支持6個命令。分別是: