微信、qq二次分享

前言

我們平時做微信分享的時候，一般分享出來的頁面都是一個簡單的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 // 生成簽名的時間戳
    };
}