微信分享网页时自定义标题、描述和图片
用微信打开一个网页,选择右上角的“发送给朋友”后,分享出去的东西有标题有图片
如图:
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script type="text/javascript" src="./jquery-1.9.0.min.js"></script> <title>战“疫”关键节点xxx</title> </head> <body> </body> </html>
<script>
var signature = {};
var con = {};
con["appTag"] = 'ZXB';
con["url"] = window.location.href;
var json = JSON.stringify(con);
$.ajax({
url: 'http://xxxxxx/policy/orderShare/logoConfig',
timeout: 10000, // 超时时间 10 秒
type: 'post',
data: { jsonData: json },
async: false,
cache: false,
dataType: 'json',
success: function (data) {
if (data.code == 'success') {
signature = data.result;
}
},
error: function (data) {
}
});
wx.config({
debug: false,
appId: signature.appId, // 必填,公众号的唯一标识
timestamp: signature.timestamp, // 必填,生成签名的时间戳<?= $data['timestamp']?>
nonceStr: signature.nonceStr,// 必填,生成签名的随机串<?= $data['noncestr']?>
signature: signature.signature,// 必填,签名<?= $data['signature']?>
jsApiList: ['onMenuShareTimeline',
'onMenuShareAppMessage'
]// 必填,需要使用的JS接口列表
});
wx.ready(function () {
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
wx.checkJsApi({
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage'
], // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: function (res) {
// 以键值对的形式返回,可用的api值true,不可用为false
// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
console.log(res);
}
});
wx.onMenuShareAppMessage({
title: '战“疫”关键节点', // 分享标题
desc: '自新冠病毒爆发以来xxxxx', // 分享描述
link: 'http://base.xxx.com/base/regulations/fesco/20200228/', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://base.xxx.com/base/regulations/fesco/20200228/logo.jpg', // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户点击了分享后执行的回调函数
}
});
wx.onMenuShareTimeline({
title: '战“疫”关键节点:新冠病xxx', // 分享标题
link: 'http://base.xxx.com/base/regulations/fesco/20200228/', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://base.xxx.com/base/regulations/fesco/20200228/logo.jpg', // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
}
});
});
</script>
自己试过的,按照上面这样可以很简单实现啦~