h5实现分享链接到社交媒体

一、前言

最近在调研分享功能，有一些心得，在此总结一下

二、开发

在浏览器点击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的情况下，引入这个插件，配置参数，这个可能对于其他产品来说不太适用，目前只支持百度域的。

三、总结

总之，实现浏览器分享采坑无数啊，不可能支持所有浏览器的，只能在有限的时间选择适合的方案，并做一些取舍，nativeshare插件真心好用，而且在不断更新，会持续关注的，大家如果有什么好的调起分享的方式，也可以一起分享哈~