Share massacre triggered a demand

        Recently made a demand, to make himself anxious eyes, silently looked at the phone today in this picture, think twice after, Ray decided depressed ......
11247228-2bdd66a95bcbc344.jpg
We are all civilized people -

        The story goes on to share the needs, oh no, a share of the optimization, the transfer over the code (this is not to write thrown pot, I took over I am responsible! But it is a fact that, at the fact that I need to express ~ ), sharing platform into three categories: App, micro-channel, and the other, the other is due to outline blow Sting, because Sina microblogging client, QQ client, QQ browser, the major browser platform, Alipay was all under the umbrella of this "other", before the PM does not know coder and have no respect for the views over major platforms.
QQ upset: "I have a QQ client, a QQ browser, it was also not as a micro-channel client?!"
Sina Weibo, said: "Alipay not even told my father what we stand shoulder to shoulder, not frozen chicken! "
the major browser platforms, said:" QQ browser Bibi what you blind, you did not see I got you carry from 'major platform browser' out what this phrase alone, Mayday "contentment" to give you, take away ! Do not mention it, "
Alipay father said:" it did not take medicine, the medicine, and Taobao 'brain fragments' buy one get one understand under "
......
        Here we look at the share of these platforms under , especially in the end it's how to do it!

Micro-channel sharing

        Micro letter written document Best of a platform to do a small program from before when he found out, I would like to see such excellent documentation, do not mention it away: https://mp.weixin.qq.com/wiki ? t = resource / res_main & id
= mp1421141115 let's open 3-point interfaces to share, wow, I also need to say what I do not understand, I can copy and paste, I'm sorry you, if you do not understand, then, to re-learn the primary language it ~ ~

         Step one: binding domain

        Log into the micro-channel public platform: public number is set to fill in JS interface security domain

         步骤二:引入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(因为看不懂文档,所以我不会用,哈哈哈哈哈哈,但是文档说这样可以用,我持保留意见)

        步骤一:引入文档

<script src="//open.mobile.qq.com/sdk/qqapi.js"></script>

        步骤二:设置分享内容

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标签

<meta itemprop="name" content="分享的标题"/>
<meta itemprop="image" content="分享的图片地址" />
<meta name="description" itemprop="description" content="分享的描述" />

        Pro-test! excellent! Solve the problem of compatibility of various ios, Android, QQ client, QQ browser

Weibo Share

Click the button to share

 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')

The results show that for such

11247228-3c29d6ae27cefd1e.jpg
Weibo share button

This can also increase appKey argument, which appears to share the source, corresponding to the application name appKey corresponding application may https://open.weibo.com/ registration, this share will be when just entering the interface Jump, so this is front and said initialization will not be a problem page change. So the question is, how to solve it? !

Share via API

        And micro letter as a document: https://open.weibo.com/wiki/%E8%BD%BB%E5%BA%94%E7%94%A8H5%E6%96%B0%E7%89%88JS because the micro hair and a letter of the same, no nonsense, documentation see you.

Alipay share

        Alipay also offered his own developer documentation http://myjsapi.alipay.com/alipayjsapi/index.html , however, document quality, a bit ... about sharing documents is displayed:

11247228-97d7f47e966529ce.png
Wordless Book legendary
Suffice it to say, are u kidding me? On the Internet looking at a number of other documents looked great God, who is so written, to be verified ......
11247228-4b97672b055eb83f.png
2young2simple

Continuously updated, it is not, continue to step on mine in ......

Guess you like

Origin blog.csdn.net/weixin_34281477/article/details/90859485