vue如何調用瀏覽器分享功能詳解
前言
「Vue (讀音 /vjuː/，類似于 view) 是一套用于構建用戶界面的漸進式框架。官方描述的它還是一個漸進式框架,本文主要介紹了關于vue調用瀏覽器分享的相關資料，下面話不多說了，來一起看看詳細的介紹吧
步驟如下：
1.開發(fā)環(huán)境 vue+vant
2.電腦系統(tǒng) windows10專業(yè)版
3.在使用vue開發(fā)的過程中,我們經常會遇到分享,下面我來分享一下我的方法,希望對你有所幫助。
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調用瀏覽器分享內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了vue組件生命周期鉤子使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
詳解vue-video-player使用心得（兼容m3u8）
這篇文章主要介紹了詳解vue-video-player使用心得（兼容m3u8），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要介紹了Vue子組件調用父組件方法案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細介紹了Vue計數器案例的實現方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
解決vue創(chuàng)建項目使用vue-router和vuex報錯Object(...)is not a&nb
這篇文章主要介紹了解決vue創(chuàng)建項目使用vue-router和vuex報錯Object(...)is not a function問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章介紹了Vue項目中使用Bootstrap的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
不知不覺中,2023年已然逝去了,龍年到了,所以本文小編使用Vue3 + CSS實現一個噴火龍的動畫效果,文中有相關的代碼示例供大家參考,具有一定的參考價值,感興趣的同學可以自己動手嘗試一下2024-02-02
五分鐘教你使用vue-cli3創(chuàng)建項目(新手入門)
本文主要介紹了五分鐘教你使用vue-cli3創(chuàng)建項目，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue elementui select標簽監(jiān)聽change事件失效問題
這篇文章主要介紹了vue elementui select標簽監(jiān)聽change事件失效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了vue中transition組件在項目中運用,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12