原文地址 https://github.com/fa-ge/NativeShare/blob/master/README.md
起因
最近有一個活動頁需要在移動端瀏覽器分享網頁到微信，QQ。雖然每一個瀏覽器都有分享到微信的能力，但不是每個都提供接口供網頁來調用。及時有提供，瀏覽器暴露出的api也各不相同，而我寫NativeShare的目的只是爲前端開發者提供一致的api來調用瀏覽器的原生分享組件。大小uglify + gzip = 4k。
兼容性(毫無疑問是兼容瀏覽器最多的插件了)
- 移動端幾乎所有瀏覽器都支持分享到QQ和QQ空間
- QQ瀏覽器
- UC瀏覽器
- 微信自帶瀏覽器(只能設置文案，分享需要用戶手動點擊右上角)
- QQ自帶瀏覽器(只能設置文案，分享需要用戶手動點擊右上角)
- QQ空間APP(只能設置文案，分享需要用戶手動點擊右上角)
- android百度瀏覽器
存在的問題
- UC瀏覽器安卓端不能設置icon
- 百度瀏覽器安卓端不能指定分享
示例
使用
支持ES6模塊,AMD，CMD引入
如果你的項目沒有模塊化。你也可以直接用script標籤引入NativeShare.js。可以參考demo
import NativeShare from 'nativeshare'
// 如果你需要在微信瀏覽器中分享，那麼你需要設置額外的微信配置
// 特別提示一下微信分享有一個坑，不要分享安全域名以外的鏈接(具體見jssdk文檔)，否則會導致你配置的文案無效
var nativeShare = new NativeShare()
// 設置分享文案
nativeShare.setShareData({
icon: 'https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg',
link: 'fa-ge/NativeShare',
title: 'NativeShare',
desc: 'NativeShare是一個整合了各大移動端瀏覽器調用原生分享的插件',
from: '@fa-ge',
})
// 喚起瀏覽器原生分享組件(如果在微信中不會喚起，此時callShare方法只會設置文案。類似setShareData)
try {
NativeShare.call()
} catch(err) {
// 如果不支持，你可以在這裏做降級處理
}
API
NativeShare一共只有三個實例方法
- getShareData() 獲得分享的文案
- setShareData() 設置分享的文案
- call(command = ‘default’, [options]) 調用瀏覽器原生的分享組件
還有就是針對微信的實例方法 setWechatConfig。
setShareData設置文案的格式爲
{
icon: '',
link: '',
title: '',
desc: '',
from: '',
// 以下幾個回調目前只有在微信中支持和QQ中支持
success: noop,
fail: noop,
cancel: noop,
trigger: noop,
}
調用call方法時第一個參數是指定用什麼命令調用分享組件。目前支持6個命令。分別是
- default 默認，調用起底部的分享組件，當其他命令不支持的時候也會調用該命令
- timeline 分享到朋友圈
- appMessage 分享給微信好友
- qq 分享給QQ好友
- qZone 分享到QQ空間
- weiBo 分享到微博
交流
如果你是瀏覽器開發者或者你知道其他瀏覽器調用分享的方式，請務必一定要告訴我。