nativeShare 移動端瀏覽器調用原生分享插件

原文地址 https://github.com/fa-ge/NativeShare/blob/master/README.md

原由

最近有一個活動頁須要在移動端瀏覽器分享網頁到微信，QQ。雖然每個瀏覽器都有分享到微信的能力，但不是每一個都提供接口供網頁來調用。及時有提供，瀏覽器暴露出的api也各不相同，而我寫NativeShare的目的只是爲前端開發者提供一致的api來調用瀏覽器的原生分享組件。大小uglify + gzip = 4k。

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

• 移動端幾乎全部瀏覽器都支持分享到QQ和QQ空間

• QQ瀏覽器

• UC瀏覽器

• 微信自帶瀏覽器(只能設置文案，分享須要用戶手動點擊右上角)

• ios QQ自帶瀏覽器(只能設置文案，分享須要用戶手動點擊右上角)

• QQ空間APP(只能設置文案，分享須要用戶手動點擊右上角)

• android百度瀏覽器

• 支持分享到web微博

• 即將支持(安卓QQ自帶瀏覽器）

存在的問題

• 雖然幾乎全部的瀏覽器都支持分享到QQ和QQ空間，可是webview中基本都會不支持。我也很難判斷當前瀏覽器是否支持，瀏覽器是否喚起QQ APP我也很難判斷，全部除了上述支持的瀏覽器，APP外其餘狀況調用分享到QQ我也會拋出異常。

• 安卓的QQ自帶瀏覽器分享有問題

• UC瀏覽器安卓端不能設置icon

• 百度瀏覽器安卓端不能指定分享

示例

demo

使用

支持ES6模塊,AMD，CMD引入
若是你的項目沒有模塊化。你也能夠直接用script標籤引入NativeShare.js。能夠參考demo

import NativeShare from 'nativeshare'

// 先建立一個實例
var nativeShare = new NativeShare()
// 若是你須要在微信瀏覽器中分享，那麼你須要設置額外的微信配置
// 特別提示一下微信分享有一個坑，不要分享安全域名之外的連接(具體見jssdk文檔)，不然會致使你配置的文案無效
// 建立實例應該帶參數
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是一個整合了各大移動端瀏覽器調用原生分享的插件',
    from: '@fa-ge',
})

// 喚起瀏覽器原生分享組件(若是在微信中不會喚起，此時call方法只會設置文案。相似setShareData)
try {
    nativeShare.call()
    // 若是是分享到微信則須要 nativeShare.call('wechatFriend')
    // 相似的命令下面有介紹
} catch(err) {
  // 若是不支持，你能夠在這裏作降級處理
}

API

NativeShare一共只有三個實例方法

• getShareData() 得到分享的文案

• setShareData() 設置分享的文案

• call(command = 'default', [options]) 調用瀏覽器原生的分享組件

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

調用call方法時第一個參數是指定用什麼命令調用分享組件。目前支持6個命令。分別是

• default 默認，調用起底部的分享組件，當其餘命令不支持的時候也會調用該命令

• wechatTimeline 分享到朋友圈

• wechatFriend 分享給微信好友

• qqFriend 分享給QQ好友

• qZone 分享到QQ空間

• weibo 分享到微博

交流

若是你是瀏覽器開發者或者你知道其餘瀏覽器調用分享的方式，請務必必定要告訴我。