微信、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 // 生成簽名的時間戳
    };
}