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插件真心好用，并且在不断更新，会持续关注的，你们若是有什么好的调起分享的方式，也能够一块儿分享哈~