- 可以再分享的页面中写上分享文案
<!-- 分享文案 -->
<div style="display: none">
<p id="shareTittle">分享的主标题</p>
<p id="shareDesc">分享的副标题</p>
</div>
- 单独建一个js文件用来写分享相关的代码
// 获取微信配置
var wxUrl = window.location.href.split('#')[0];
$.ajax({
type: "GET",
url: 'http://.......' + '?url=' + wxUrl,//微信分享的接口（后台给）
dataType: 'json',
success: (function(wxMsg) {
if (wxMsg.retResult == null || wxMsg.retResult == '') {
return;
} else {
console.log(wxMsg);
console.log(JSON.parse(wxMsg.retResult));
var wxInformation = JSON.parse(wxMsg.retResult);
var appId = wxInformation.appId;
var timestamp = wxInformation.timestamp;
var nonceStr = wxInformation.noncestr;
var signature = wxInformation.signature;
wx.config({
debug: false,//提示的开关，true的时候在手机上可以看到正确或错误的提示
appId: appId,
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
]
});
}
}),
error: (function() {
})
});
// 获取微信配置
var wxSUrl = location.origin+"/giftsNeimeng/enrollNeiMeng/index.html";//当前页面的路径
console.log(wxSUrl)
var iconImg = location.origin+'/giftsNeimeng/enrollNeiMeng/images/icon.png'; // 分享的图标
var shareTit = $('#shareTittle').text(); // 当前页面标题
var shareContent=$('#shareDesc').text(); // 当前分享摘要
console.log(shareContent)
wx.ready(function() {
// 1 判断当前版本是否支持指定 JS 接口，支持批量判断
wx.checkJsApi({
jsApiList: [
'checkJsApi',
'onMenuShareAppMessage',
'onMenuShareTimeline',
'onMenuShareQQ',
'onMenuShareWeibo'
],
success: function(res) {
}
});
// 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareAppMessage({
title: shareTit,
desc:shareContent,
link: wxSUrl,
imgUrl: iconImg,
trigger: function(res) {
// alert('用户点击发送给朋友');
},
success: function(res) {
// alert('已分享');
},
cancel: function(res) {
// alert('已取消');
},
fail: function(res) {
// alert(JSON.stringify(res));
}
});
// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareTimeline({
title: shareTit,
desc: shareContent,
link: wxSUrl,
imgUrl: iconImg,
trigger: function(res) {
// alert('用户点击分享到朋友圈');
},
success: function(res) {
// alert('已分享');
},
cancel: function(res) {
// alert('已取消');
},
fail: function(res) {
// alert(JSON.stringify(res));
}
});
// 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareQQ({
title: shareTit,
desc:shareContent,
link: wxSUrl,
imgUrl: iconImg,
trigger: function(res) {
// alert('用户点击分享到QQ');
},
complete: function(res) {
// alert(JSON.stringify(res));
},
success: function(res) {
// alert('已分享');
},
cancel: function(res) {
// alert('已取消');
},
fail: function(res) {
// alert(JSON.stringify(res));
}
});
// 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareWeibo({
title: shareTit,
desc: shareContent,
link: wxSUrl,
imgUrl: iconImg,
trigger: function(res) {
// alert('用户点击分享到微博');
},
complete: function(res) {
// alert(JSON.stringify(res));
},
success: function(res) {
// alert('已分享');
},
cancel: function(res) {
// alert('已取消');
},
fail: function(res) {
// alert(JSON.stringify(res));
}
});
});
wx.error(function(res) {
});
当然，微信分享很容易出现以下分享不成功的时候，各位大佬可以观看这位简书作者写的关于微信回调不成功的问题
https://www.jianshu.com/p/beb48eafc06c
