微信qq二次分享

Posted 2020-12-28 你假装没察觉

前言

我们平时做微信分享的时候，一般分享出来的页面都是一个简单的html页面，不会加入框架之类的东西。所以当我们在分享出来的页面里面再次进行分享的时候，由于我们没有配置分享的标题、描述这些东西，分享出去的卡片会是默认的样式。很显然对于产品和测试来说，如果我们分享出去的卡片不是定制化的，肯定是不行的，这种情况我们就需要在分享出来的这个页面里面单独配置微信和qq分享。

在分享页引入WxjsSDK和QQjsSDK

<script type="text/javascript" src="//open.mobile.qq.com/sdk/qqapi.js?_bid=152"></script>  //引入QQjsSDK
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>    //引入WxjsSDK

引入这两个jsSDK后会在window上面挂载jWeixin对象和mqq对象，通过这两个对象就可以使用wx和qq提供的配置分享的方法。

在分享页配置手机qq分享

    mqq.data.setShareInfo({
        share_url: encodeURI(window.location.href),
        title: ‘分享的标题‘,
        desc : ‘分享的描述‘,
        image_url : ‘分享的图片‘
    }, function () {
        // 成功回调函数
    });

注意share_url的长度不能超过120个字节，不然在安卓手机上qq在分享页二次分享的时候会发送失败（虽然分享后qq提示分享成功），但是在ios上面就不会出现这个问题。

在分享页配置微信分享

jWeixin.config({
    debug: false,
    appId: res.data.appId, // 必填，公众号的唯一标识
    timestamp: signatureObj.timestamp, // 必填，生成签名的时间戳
    nonceStr: signatureObj.nonceStr, // 必填，生成签名的随机串
    signature: signatureObj.signature, // 必填，签名
    jsApiList: [‘onMenuShareTimeline‘, ‘onMenuShareAppMessage‘, ‘onMenuShareQQ‘, ‘onMenuShareWeibo‘, ‘onMenuShareQZone‘, ‘openLocation‘] // 必填，需要使用的JS接口列表
});

jWeixin.ready(function () {
    _setShare(
        ‘分享的标题‘,
        ‘分享的描述‘,
        encodeURI(location.href),
        location.origin + ‘/static/imgs/logo.jpg‘,
        function () {
        });
});

function _setShare(title, desc, url, image, callBack) {
    //分享到朋友圈
    jWeixin.onMenuShareTimeline({
        title: title, // 分享标题
        link: url, // 分享链接
        imgUrl: image, // 分享图标
        success: function () {
            callBack(true);
        },
        cancel: function () {
            callBack(false);
        }
    });
    //分享给朋友
    jWeixin.onMenuShareAppMessage({
        title: title, // 分享标题
        desc: desc, // 分享描述
        link: url, // 分享链接
        imgUrl: image, // 分享图标
        type: "link", // 分享类型,music、video或link，不填默认为link
        dataUrl: ‘‘, // 如果type是music或video，则要提供数据链接，默认为空
        success: function () {
            callBack(true);
        },
        cancel: function () {
            callBack(false);
        }
    });
    //分享到qq
    jWeixin.onMenuShareQQ({
        title: title, // 分享标题
        desc: desc, // 分享描述
        link: url, // 分享链接
        imgUrl: image, // 分享图标
        success: function () {
            callBack(true);
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });
    //分享到腾讯微博
    jWeixin.onMenuShareWeibo({
        title: title, // 分享标题
        desc: desc, // 分享描述
        link: url, // 分享链接
        imgUrl: image, // 分享图标
        success: function () {
            callBack(true);
        },
        cancel: function () {
            callBack(false);
        }
    });
    //分享到qq空间
    jWeixin.onMenuShareQZone({
        title: title, // 分享标题
        desc: desc, // 分享描述
        link: url, // 分享链接
        imgUrl: image, // 分享图标
        success: function () {
            callBack(true);
        },
        cancel: function () {
            callBack(false);
        }
    });
    jWeixin.showOptionMenu();//打开分享功能
}

在我的这个项目中后端只给了我appId和jsapi_ticket，所以需要我们前端自己生成signature签名和随机字符串和时间戳

function createSignature(ticket) { // 传入的参数为后端返回的jsapi_ticket
    var $chars = ‘ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678‘;
    var maxPos = $chars.length;
    var noncestr = ‘‘;  
    var timestamp = Math.ceil(new Date().valueOf() / 1000);  
    var url = location.href.split(‘#‘)[0];
    for (var i = 0; i < 32; i++) {
        noncestr += $chars.charAt(Math.floor(Math.random() * maxPos));
    }
    var str = ‘jsapi_ticket=‘ + ticket + ‘&noncestr=‘ + noncestr + ‘&timestamp=‘ + timestamp + ‘&url=‘ + url;
    return {
        nonceStr: noncestr, // 生成签名的的随机字符串
        signature: hex_sha1(str), // 签名
        url, // 生成签名的的 URL
        timestamp // 生成签名的时间戳
    };
}