一个分享需求引发的血案

        最近做了一个需求,把自己给做急眼了,今天默默看了一眼手机里的这张图,三思后,决定踩下雷......
我们都是文明人~

        事情起源于一个分享的需求,哦不,一个分享的优化,在交接过来的代码里(写这个并不是为了甩锅,我接手的我负责!但这是一个事实,我需要表达下这个事实~),分享平台分为三类: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,但是,文档质量,就有点...关于分享的文档,是这样显示的:

传说中的无字天书
我只想说,are u kidding me?在网上找了其他一些大神的文档看了下,他们是这么写的,有待考证......
2young2simple

持续更新中,不,持续踩雷中......

你可能感兴趣的:(一个分享需求引发的血案)