h5實現分享連接到社交媒體

1、前言

最近在調研分享功能，有一些心得，在此總結一下

2、開發

在瀏覽器點擊dom元素調起分享到微信朋友，朋友圈，qq等功能若是一個一個來寫，是很是麻煩的，因此在github上找了一個很好用的插件nativeshare

雖然每個瀏覽器都有分享到微信的能力，但不是每一個都提供接口供網頁來調用。及時有提供，瀏覽器暴露出的api也各不相同，NativeShare的目的只是爲前端開發者提供一致的api來調用瀏覽器的原生分享組件。

這個插件能夠實現UC瀏覽器，qq瀏覽器，安卓的百度APP，中的調起瀏覽器自帶的分享面板功能，這就已經解決了大半問題，如今還須要解決的是iOS的百度APP，微信自帶瀏覽器的分享功能，因爲咱們作的頁面是掃碼進入的，考慮到使用微信和手機百度掃碼的人會相對於瀏覽器多一些，因此其餘不支持的瀏覽器就彈出一個toast提示不支持分享請到其餘瀏覽器打開就OK了。

下面重點描述下微信瀏覽器和iOS手百APP是怎麼處理的：

1.微信

微信自帶瀏覽器有一個很好的辦法，仍是使用上述的nativeshare插件，配置一些微信須要的參數，這須要開發者申請公衆號，而後須要後端配合支持，用獲得的appid和Appsecret祕鑰來獲取一系列接口最後得到一串帶有所需參數的字符串，經過排序算法最終得到這幾個參數，詳情可見微信公衆平臺開發文檔,獲取到參數後在前端代碼中加入便可，須要必定的後端開發量。
因爲上線時間比較緊急，最終咱們沒有采用這種方式，而是選擇了一個降級的方法，點擊分享跳轉到要分享的頁面，彈出一個toast，提示請點擊右上角分享，讓用戶使用微信自帶的右上角的三個點進行分享。

固然這種方式是不建議的，一是有誘導分享嫌疑，二是用戶體驗不是很好，因此時間條件容許的話仍是使用第一種方法。

2.iOS手機百度APP

這個問題是用手百內部的調用端能力的插件box-invoke完成的，判斷環境在手百且是iOS的狀況下，引入這個插件，配置參數，這個可能對於其餘產品來講不太適用，目前只支持百度域的。

3、總結

總之，實現瀏覽器分享採坑無數啊，不可能支持全部瀏覽器的，只能在有限的時間選擇適合的方案，並作一些取捨，nativeshare插件真心好用，並且在不斷更新，會持續關注的，你們若是有什麼好的調起分享的方式，也能夠一塊兒分享哈~