摘要:原文地址起因最近有一個活動頁需要在移動端瀏覽器分享網(wǎng)頁到微信,。及時有提供,瀏覽器暴露出的也各不相同,而我寫的目的只是為前端開發(fā)者提供一致的來調(diào)用瀏覽器的原生分享組件。
原文地址 https://github.com/fa-ge/NativeShare/blob/master/README.md
起因最近有一個活動頁需要在移動端瀏覽器分享網(wǎng)頁到微信,QQ。雖然每一個瀏覽器都有分享到微信的能力,但不是每個都提供接口供網(wǎng)頁來調(diào)用。及時有提供,瀏覽器暴露出的api也各不相同,而我寫NativeShare的目的只是為前端開發(fā)者提供一致的api來調(diào)用瀏覽器的原生分享組件。大小uglify + gzip = 4k。
兼容性(毫無疑問是兼容瀏覽器最多的插件了)移動端幾乎所有瀏覽器都支持分享到QQ和QQ空間
QQ瀏覽器
UC瀏覽器
微信自帶瀏覽器(只能設置文案,分享需要用戶手動點擊右上角)
ios QQ自帶瀏覽器(只能設置文案,分享需要用戶手動點擊右上角)
QQ空間APP(只能設置文案,分享需要用戶手動點擊右上角)
android百度瀏覽器
支持分享到web微博
即將支持(安卓QQ自帶瀏覽器)
存在的問題
雖然幾乎所有的瀏覽器都支持分享到QQ和QQ空間,但是webview中基本都會不支持。我也很難判斷當前瀏覽器是否支持,瀏覽器是否喚起QQ APP我也很難判斷,所有除了上述支持的瀏覽器,APP外其他情況調(diào)用分享到QQ我也會拋出異常。
安卓的QQ自帶瀏覽器分享有問題
UC瀏覽器安卓端不能設置icon
百度瀏覽器安卓端不能指定分享
示例demo
使用支持ES6模塊,AMD,CMD引入
如果你的項目沒有模塊化。你也可以直接用script標簽引入NativeShare.js??梢詤⒖糳emo
import NativeShare from "nativeshare" // 先創(chuàng)建一個實例 var nativeShare = new NativeShare() // 如果你需要在微信瀏覽器中分享,那么你需要設置額外的微信配置 // 特別提示一下微信分享有一個坑,不要分享安全域名以外的鏈接(具體見jssdk文檔),否則會導致你配置的文案無效 // 創(chuàng)建實例應該帶參數(shù) var nativeShare = new NativeShare({ appId: "", timestamp: "", nonceStr: "", signature: "", }) // 設置分享文案 nativeShare.setShareData({ icon: "https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg", link: "https://github.com/fa-ge/NativeShare", title: "NativeShare", desc: "NativeShare是一個整合了各大移動端瀏覽器調(diào)用原生分享的插件", from: "@fa-ge", }) // 喚起瀏覽器原生分享組件(如果在微信中不會喚起,此時call方法只會設置文案。類似setShareData) try { nativeShare.call() // 如果是分享到微信則需要 nativeShare.call("wechatFriend") // 類似的命令下面有介紹 } catch(err) { // 如果不支持,你可以在這里做降級處理 }API
NativeShare一共只有三個實例方法
getShareData() 獲得分享的文案
setShareData() 設置分享的文案
call(command = "default", [options]) 調(diào)用瀏覽器原生的分享組件
{ icon: "", link: "", title: "", desc: "", from: "", // 以下幾個回調(diào)目前只有在微信中支持和QQ中支持 success: noop, fail: noop, cancel: noop, trigger: noop, }
調(diào)用call方法時第一個參數(shù)是指定用什么命令調(diào)用分享組件。目前支持6個命令。分別是
default 默認,調(diào)用起底部的分享組件,當其他命令不支持的時候也會調(diào)用該命令
wechatTimeline 分享到朋友圈
wechatFriend 分享給微信好友
qqFriend 分享給QQ好友
qZone 分享到QQ空間
weibo 分享到微博
交流如果你是瀏覽器開發(fā)者或者你知道其他瀏覽器調(diào)用分享的方式,請務必一定要告訴我。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/87032.html
摘要:首先,有自己的配置,可以直接調(diào)起右上角的自帶分享,,轉(zhuǎn)成微信或手百小程序都可用。其次,如果頁面內(nèi)想通過按鈕調(diào)用分享功能的話,的組件可以將,這個值轉(zhuǎn)為微信小程序和手百小程序都適用。 最近在做小程序項目,選用的京東的taro框架,一套代碼可編譯多個環(huán)境,不需要一個環(huán)境寫一套代碼,用著還不錯。現(xiàn)在分享已經(jīng)成為一個日常操作,下面就來簡單說下我最近調(diào)研的分享功能。 首先,taro有自己的配置,可...
摘要:本文對單點登錄有一個初步介紹,重點敘述前端開發(fā)者使用單點登錄可能遇到的問題,以及問題分析方案全部來源于用友建筑云,本文僅用于內(nèi)部分享,所以不過多介紹方案實現(xiàn)。 本文對單點登錄有一個初步介紹,重點敘述前端開發(fā)者使用單點登錄可能遇到的問題,以及問題分析!方案全部來源于用友建筑云,本文僅用于內(nèi)部分享,所以不過多介紹方案實現(xiàn)。原文來自博客 單點登錄介紹 showImg(https://seg...
摘要:起因一天在群里面朋友問了一個這么一個問題看了之后自己梳理了一遍,在此和大家分享一下,這個就要從客戶端開發(fā)的過程來講了原生開發(fā)在移動互聯(lián)網(wǎng)剛興起的時候,最初的開發(fā)模式是通過或開發(fā)原生應用,有一些網(wǎng)頁跳轉(zhuǎn)的處理,使用之后增加了,安卓使用的是這個 起因 一天在群里面朋友問了一個這么一個問題: showImg(https://segmentfault.com/img/bVbiopb); 看了之...
閱讀 1426·2021-11-22 09:34
閱讀 1389·2021-09-22 14:57
閱讀 3422·2021-09-10 10:50
閱讀 1410·2019-08-30 15:54
閱讀 3703·2019-08-29 17:02
閱讀 3485·2019-08-29 12:54
閱讀 2627·2019-08-27 10:57
閱讀 3328·2019-08-26 12:24