微信、QQ分享-自定义标题、icon、描述、url

# 微信、QQ分享-自定义标题、icon、描述

1、QQ自定义分享

通过meta设置
标题:itemprop=name ;
描述:name=”description” ;
图标:itemprop=”image”;

<meta itemprop="name" content="发现野生彭于晏,点击捕捉!"/>
<meta name="description" content="注意,注意~前方发现野生彭于晏一只,速速将他拿下带回家!"  />
<meta itemprop="image" content="http://w.910app.com/act/h5xianlingwaizhuan/img/share.jpg" />

QQ内置浏览器分享 特定的链接

//判断加载js成功之后设置
  loadScript('http://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js', function () {
      setShareInfo({
        title: title,
        summary: desc,
        pic: imgUrl,
        url: link,
      });
    });
    //动态加载js
function loadScript(url, callback) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  if (typeof (callback) != "undefined") {
    if (script.readyState) {
      script.onreadystatechange = function () {
        if (script.readyState == "loaded" || script.readyState == "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {
      script.onload = function () {
        callback();
      };
    }
  };
  script.src = url;
  document.body.appendChild(script);
}

2、微信自定义分享
参考微信公众平台技术文档:
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

1)引入微信js-sdk

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2)通过接口获取后端的config配置字段: http://w.910app.com/share/js_sdk_config (服务端返回数据:根据app_id,app_secret)

{
code: 0,
message: "OK",
    data: {
    appId: "wx04dad08cc64fafdf",
    timestamp: 1500986130,
    nonceStr: "94629ee66d927fd8",
    signature: "1d2f47ca0fd478b6a10841568b553d082596d922"
    }
}

3)设置微信的config

wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId:data.appId, // 必填,公众号的唯一标识
        timestamp: data.timestamp, // 必填,生成签名的时间戳
        nonceStr: data.nonceStr, // 必填,生成签名的随机串
        signature:data.signature,// 必填,签名,见附录1
        jsApiList: [
            // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone'
        ]
})

4)最后在ready里面写

var title="发现野生彭于晏,点击捕捉!";
var link="http://w.910app.com/act/h5xianlingwaizhuan/";
var imgUrl="http://w.910app.com/act/h5xianlingwaizhuan/img/share.jpg";
var desc=" 注意,注意~前方发现野生彭于晏一只,速速将他拿下带回家!";
 wx.ready(function(){
            //分享到朋友圈
            wx.onMenuShareTimeline({
                title:title, // 分享标题
                link:link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl:imgUrl, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
//                分享给朋友
            wx.onMenuShareAppMessage({
                title: title, // 分享标题
                desc: desc, // 分享描述
                link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: imgUrl, // 分享图标
                type: '', // 分享类型,music、video或link,不填默认为link
                dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
//                分享到qq
            wx.onMenuShareQQ({
                title: title, // 分享标题
                desc: desc, // 分享描述
                link: link, // 分享链接
                imgUrl:imgUrl, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
//                分享到微博
            wx.onMenuShareWeibo({
                title:title, // 分享标题
                desc: desc, // 分享描述
                link:link, // 分享链接
                imgUrl:imgUrl, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
//                分享到qq空间
            wx.onMenuShareQZone({
                title:title, // 分享标题
                desc: desc, // 分享描述
                link: link, // 分享链接
                imgUrl:imgUrl, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });

            wx.error(function(res){
                // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
//                alert(res)
            });
        });

发表评论

邮箱地址不会被公开。 必填项已用*标注