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