在详情页ajax获取成功以后在回调函数中
var shareData = { title: '',//分享标题 desc: '',//分享描述 imgUrl:'',//分享图片 } getShare(shareData);
分享html页面中需要添加两个js文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
sha1加密文件https://files.cnblogs.com/files/luoshang/sha1.min.js
前两个步骤前端会有跨域,但微信依然给的json;不好处理最好后台处理
//获取后台取得微信的 ticket 进行签名生成
function getShare(shareData){
var data = ({}); $.ajax({ type: "post", url: '', dataType: 'json', data: { "data": JSON.stringify(data) }, success: function(data) { var timestamp = (new Date).getTime();//时间戳 var nonceStr = data.nonceStr;//随机串 var ticket = data.ticket; var Url = location.href.split('#')[0];//获取分享页面URL var jsapi_ticket = 'jsapi_ticket=' + ticket + '&noncestr=' + nonceStr + '×tamp=' + timestamp + '&url=' + Url; var signature = sha1(jsapi_ticket);//sha1加密生成签名 if(shareData.imgUrl){ shareData.imgUrl = location.origin + shareData.imgUrl;//文章图片 }else{ shareData.imgUrl = location.origin + "";//默认图片 } share(timestamp, nonceStr, signature, Url,shareData) }, beforeSend: function(e) {}, error: function(e) { var t = JSON.stringify(e) } }); } function share(timestamp, nonceStr, signature, Url,shareData) { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,公众号的唯一标识 timestamp: timestamp, // 必填,生成签名的时间戳 nonceStr: nonceStr, // 必填,生成签名的随机串 signature: signature, // 必填,签名,见附录1 jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'chooseWXPay','onMenuShareQZone'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); wx.ready(function() { //分享朋友圈 wx.onMenuShareTimeline({ title: shareData.title, link: Url, imgUrl: shareData.imgUrl, success: function() { // 用户确认分享后执行的回调函数 alert('分享到朋友圈成功'); }, cancel: function() { // 用户取消分享后执行的回调函数 alert('你没有分享到朋友圈'); } }); //分享给好友 wx.onMenuShareAppMessage({ title: shareData.title, desc: shareData.desc, link: Url, imgUrl: shareData.imgUrl, success: function(res) { alert('分享成功'); }, cancel: function(res) { alert('你没有分享'); }, fail: function(res) { alert(JSON.stringify(res)); } }); //分享到QQ wx.onMenuShareQQ({ title: shareData.title, desc: shareData.desc, link: Url, imgUrl: shareData.imgUrl, success: function() { alert('分享成功'); // 用户确认分享后执行的回调函数 }, cancel: function() { alert('你没有分享'); // 用户取消分享后执行的回调函数 } }); //分享到空间 wx.onMenuShareQZone({ title: shareData.title, desc: shareData.desc, link: Url, imgUrl: shareData.imgUrl, success: function() { alert('分享成功');// 用户确认分享后执行的回调函数 }, cancel: function() { alert('你没有分享');// 用户取消分享后执行的回调函数 } }); }); }
微信 JS 接口签名校验工具
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
QQ内置网页中的分享功能:
只要js引入然后设置一下这个值就可以了
QQ分享文档地址:http://open.mobile.qq.com/api/component/share
setShareInfo({
title : wxShareConfig.title,
summary: wxShareConfig.desc,
pic : wxShareConfig.imgUrl,
url : wxShareConfig.link
});
特别提醒:
微信分享以及相关的页面api功能调用,必须要先在公众号后台配置安全域名,具体位置参考微信开发文档