我們經常可以在一些 app上看到分享到朋友圈、微信好友、qq好友等功能，例如 餓了麽、美團等 app，下單之後就會彈出給好友發紅包的 modal窗，這在 app上很常見，app的權限可以很大，甚至連啟動手機上其他關聯軟件的權限都可以有，分享到什麽朋友圈簡直是小菜一碟，而相比之下瀏覽器的權限就被限制地很小，連讀取粘貼板內容的功能有的瀏覽器都沒有。

但是我們有時候依舊可以在瀏覽器的某些頁面上，例如某條新聞頁面上看到將新聞分享到朋友圈、微信好友、qq好友、qq空間、微博等的按鈕，JS原生肯定是沒辦法實現這種操作的，這其實是調用了瀏覽器自帶的特定接口。

上面說了，基於安全等一系列原因，瀏覽器的權限被限制地很小，分享到朋友圈等目標的接口也只有一小部分瀏覽器自行實現了。

需要給瀏覽器接口傳遞參數，並且在 Android 和 iphone系統上傳遞的參數是不一樣的：

{
  sinaWeibo: [‘kSinaWeibo‘, ‘SinaWeibo‘, 11, ‘新浪微博‘],
  weixin: [‘kWeixin‘, ‘WechatFriends‘, 1, ‘微信好友‘],
  weixinFriend: [‘kWeixinFriend‘, ‘WechatTimeline‘, ‘8‘, ‘微信朋友圈‘],
  QQ: [‘kQQ‘, ‘QQ‘, ‘4‘, ‘QQ好友‘],
  QZone: [‘kQZone‘, ‘QZone‘, ‘3‘, ‘QQ空間‘]
}
 

QQ瀏覽器中，需要多調用兩個接口：

http://3gimg.qq.com/html5/js/qb.js
http://jsapi.qq.com/get?api=app.setShareInfo,app.share

初始化方法兩個瀏覽器基本上一致，最關鍵的則是調用分享接口的幾行代碼

如果是 QQ瀏覽器，則：

// 1. 高版本 QQ瀏覽器調用的接口
browser.app.share(shareConfig)
// 2. 低版本 QQ瀏覽器調用的接口
window.qb.share(shareConfig)

其中，需要根據 QQ瀏覽器的版本高低調用不同的接口來實現，這裏可以看到，實際上是調用了 browser

至於 UC瀏覽器，則是另外的接口：

// 1.第一種接口
ucweb.startRequest(‘shell.page_share‘, [title, img, url, to_app, ‘‘, ‘‘, ‘‘])

// 2. 第二種接口
web_share(title, img, url, to_app, ‘‘, ‘@‘ + from, ‘‘)

ucweb和 web_share就是 UC瀏覽器自行封裝的瀏覽器接口，根據瀏覽器版本的不同，兩個封裝接口應該只會同時出現一個，需要判斷到底哪一個接口存在，自行判斷一下即可，例如 typeof ucweb === ‘undefined‘

註：最新版的 UC瀏覽器，這兩個接口似乎都沒用了

各瀏覽器接口不一致不統一，實現的瀏覽器也很少，而且還很復雜，想要在瀏覽器中實現分享功能沒點時間和耐心很難完成，究其原因，我估計應該是瀏覽器都自帶了分享的按鈕，想培養用戶使用自帶功能的習慣，提供對外的接口可能還有安全之類的因素，所以幹脆就不提供了。

例如百度瀏覽器的右上角就有一個系統級的按鈕，點擊後底部彈窗中就有分享的按鈕：

如果真的想要實現移動端網頁內的分享功能， Github 上有個項目做得很不錯，可以嘗試用一下。

另外，PC端雖然無法調起 微信 和 QQ這些 APP，但也可以進行分享到微博、豆瓣、WebQQ等的操作，同樣有個可以開箱即用的項目 share.js

最後，如果你只是想把當前頁面分享出去，不用管什麽網站數據之類的東西，也不想管分享功能到底怎麽使用，最好復制粘貼就 ok，那麽可以看看這個 網站，就是下面這個效果，大家應該都見過：

移動端以及 PC瀏覽器頁面分享到朋友圈等的功能實現