html 页面分享到微信转发朋友及朋友圈显示标题,描述,及图片。
<script src="javascript/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
$.ajax({
async: false,
url: "请求接口",
data: {
url: location.href.split("#")[0] // 当前页面地址
},
success: function(res) {
var json = res.data
wx.config({
appId: '填写appId',
timestamp: json.timestamp,
nonceStr: json.noncestr,
signature: json.signature,
jsApiList: [
"onMenuShareAppMessage",
"onMenuShareTimeline",
"updateAppMessageShareData",
"updateTimelineShareData"
]
});
}
})
wx.ready(function () {
let imgUrl = document.querySelector(`link[rel='icon']`) ||
document.querySelector(`link[rel='shortcut icon']`);
var shareData = {
title: document.title,//标题
desc: document.querySelector('meta[name="Description"]').content, //描述 这里请特别注意是要去除html
link: location.href.split("#")[0], //域名必须JS安全域名
imgUrl:imgUrl.href,//封面图片
success: function () {
console.log('分享成功')
}
};
if(wx.onMenuShareAppMessage){
//微信文档中提到这两个接口即将弃用,故判断
wx.onMenuShareAppMessage(
shareData
);
wx.onMenuShareTimeline(
shareData
);
}else{
wx.updateAppMessageShareData(shareData); //1.4 分享到朋友
wx.updateTimelineShareData(shareData); //1.4分享到朋友圈
}
});
wx.error(function(res){
console.log(res)
});
</script>