快捷導(dǎo)航

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

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

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

前言

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

步驟如下：

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

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

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

4.先看效果圖:

5.使用NativeShare.js 來(lái)達(dá)到上述功能的實(shí)現(xiàn)

// 安裝 
npm install nativeshare

6.在對(duì)應(yīng)的組件中引入

import NativeShare from 'nativeshare'

7.點(diǎn)擊分享圖標(biāo),在methods中添加對(duì)應(yīng)的代碼:

cshare() {
 if (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
 this.ui.showToast('圖文分享請(qǐng)打開(kāi)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?

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

存在的問(wèn)題:

1.uc安卓不能設(shè)置icon

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

9.NativeShare一共只有三個(gè)實(shí)力方法:

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

10.ShareData設(shè)置文案的格式為

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

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