微信、qq二次分享
阿新 • • 發佈:2018-08-08
二次 can 微信 itl 鏈接 script signature UNC 取消
前言
我們平時做微信分享的時候,一般分享出來的頁面都是一個簡單的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 + ‘×tamp=‘ + timestamp + ‘&url=‘ + url;
return {
nonceStr: noncestr, // 生成簽名的的隨機字符串
signature: hex_sha1(str), // 簽名
url, // 生成簽名的的 URL
timestamp // 生成簽名的時間戳
};
}
微信、qq二次分享