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 + '×tamp=' + timestamp + '&url=' + url;return {nonceStr: noncestr, // 生成签名的的随机字符串signature: hex_sha1(str), // 签名url, // 生成签名的的 URLtimestamp // 生成签名的时间戳};
}
转载于:.html
更多推荐
微信、qq二次分享
发布评论