事情起源于一个分享的需求,哦不,一个分享的优化,在交接过来的代码里(写这个并不是为了甩锅,我接手的我负责!但这是一个事实,我需要表达下这个事实~),分享平台分为三类:App,微信,和其他,其他这个概述很因吹斯汀,因为新浪微博客户端、QQ客户端、QQ浏览器、各大平台的浏览器、支付宝等就被全部归类于这个“其他”,不知道之前的coder和PM有没有尊重过以上各大平台的意见。
QQ不高兴了:“我一个QQ客户端,一个QQ浏览器,我俩还比不上一个微信客户端?!”
新浪微博说:“支付宝爸爸不是还跟咱们肩并肩么,别鸡冻!”
各大平台的浏览器说:“QQ浏览器你瞎比比啥,你没看笔者都把你从‘各大平台浏览器’这个词组单独拎出来了么,五月天的《知足》送给你,拿走不谢!”
支付宝爸爸说:“都没吃药吧,该吃药了,淘宝‘脑残片’买一赠一了解下”
......
下面我们来看下这几个平台下的分享,到底特么的该怎么做!
微信分享
微信是写文档最牛逼的一个平台,从之前做小程序的时候就发现了,我就喜欢看这种优秀的文档,拿走不谢:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
让我们来点开3.分享接口,哇,我还需要说啥,我就不懂了,我只能复制粘贴了,对不起各位,如果看不懂的话,那,就重新学习小学语文吧~~
步骤一:绑定域名
登录微信公众平台进入:公众号设置填写JS接口安全域名
步骤二:引入js文件
在需要调用js接口的h5页面引入如下js文件:http://res.wx.qq.com/open/js/jweixin-1.4.0.js
步骤三: 通过config接口注入权限验证配置
下图中的几个参数都是从后台服务获取的,jsApiList里面是需要调用的接口,这个需要哪个就调哪个,注意接口是否不再支持,这个所有的接口在微信开发文档里也有写,很优秀!
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: cfg.appid, // 必填,公众号的唯一标识
timestamp: cfg.timestamp, // 必填,生成签名的时间戳
nonceStr: cfg.nonce, // 必填,生成签名的随机串
signature: cfg.signature, // 必填,签名
jsApiList: [ // 必填,需要使用的JS接口列表
'chooseWXPay',
'updateAppMessageShareData',
'hideMenuItems',
'updateTimelineShareData',
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
})
步骤四:通过ready接口处理成功验证
wx.ready(function () {
let shareData = {
title: _self.shareMsg.title, //分享出去的标题
desc: _self.shareMsg.desc, //分享出去的描述
link: links.shareUrl, //分享出去的链接
imgUrl: _self.shareMsg.imgUrl, //分享出去的图片地址,这个地址域名必须和公众号的安全域名保持一致
type: 'link', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
},
cancel: function () {
}
}
setTimeout(function () {
wx.updateAppMessageShareData(shareData)
wx.updateTimelineShareData(shareData)
wx.onMenuShareTimeline(shareData)
wx.onMenuShareAppMessage(shareData)
}, 4)
})
设置完成后,就可以在微信进行分享了,这个分享只是进行微信分享的初始化,所以在刚进入页面的时候并不会有什么特殊的变化,为什么要说这个呢,因为,一会就有有变化的了。
QQ分享
这个地方就要吐槽下qq的官方文档了,写的这是个啥,啥?http://open.mobile.qq.com/api/mqq/index#api:%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3(因为看不懂文档,所以我不会用,哈哈哈哈哈哈,但是文档说这样可以用,我持保留意见)
步骤一:引入文档
步骤二:设置分享内容
const share = {
title: '分享标题,最大45字节',
desc: '分享内容,最大60字节',
image_url: '图片URL',
share_url: '分享链接'
};
mqq.data.setShareInfo(share, callback);
注意事项(因为我没有印证,所以这个持保留意见哈,有兴趣大家可以试一下):
分享链接长度不能超过120字节,并且必须跟页面URL同一个域名,否则设置不生效;分享的图片最小需要200 * 200,否则分享到QQ空间时会被过滤掉。
设置完分享内容后,可通过API调用唤起QQ的分享面板,免去引导的过程
mqq.ui.showShareMenu()
你以为这样就没有QQ分享啦!不!有解决方法!!!
直接加meta标签
亲测!优秀!解决了各种ios、Android、QQ客户端、QQ浏览器的兼容性问题
微博分享
点击按钮分享
const share = {
title: '分享的标题',
image_url: '分享的图片地址',
share_url: '分享出去的链接'
}
location.replace('https://service.weibo.com/share/share.php?url=' + share.share_url + '&title=' + share.title + '&pic=' + share.image_url + '&searchPic=true')
结果显示为这样
这个还可以增加appKey参数,这个参数会显示分享来源,对应的是appKey对应的应用名称,应用可以在https://open.weibo.com/中注册,这种分享在刚进入界面的时候就会跳转,所以这就是和前边说的初始化会不会有页面变化的问题。那么问题来了,怎么解决呢?!
通过API分享
和微信一样,上文档:https://open.weibo.com/wiki/%E8%BD%BB%E5%BA%94%E7%94%A8H5%E6%96%B0%E7%89%88JS因为这个和微信的一毛一样,不废话了,文档见吧。
支付宝分享
支付宝也提供了他自身的开发者文档http://myjsapi.alipay.com/alipayjsapi/index.html,但是,文档质量,就有点...关于分享的文档,是这样显示的:
持续更新中,不,持续踩雷中......