微信、qq二次分享

qq二次分享"/>

微信、qq二次分享

前言

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

在分享页引入WxjsSDK和QQjsSDK

<script type="text/javascript" src="//open.mobile.qq/sdk/qqapi.js?_bid=152"></script>  //引入QQjsSDK
<script type="text/javascript" src="//res.wx.qq/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，不填默认为linkdataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空success: function () {callBack(true);},cancel: function () {callBack(false);}});//分享到qqjWeixin.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_ticketvar $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, // 生成签名的的 URLtimestamp // 生成签名的时间戳};
}

转载于:.html