版权声明：如需转发，与我联系 https://blog.csdn.net/qq_41473887/article/details/81132180
下图为效果图：上图为没有设置得样式，下图是设置样式分享后的效果，差距甚远。
做的过程也遇到了一些问题，我会在博文最下方标明.
下面是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<p>85844864</p>
<body>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>
<script>
var testurl = window.location.href;
$.ajax({
type: "get",
async: false,
url: "http://111.free.ngrok.cc/wechat/signpackage/",
data: {
url: testurl
},
dataType: "jsonp", //数据类型为jsonp
jsonp: "jsonpCallback", //服务端用于接收callback调用的function名的参数
success(e) {
console.log(1)
}
});
function call(wx_info) {
console.log(wx_info)
wx.config({
debug:true, //调式模式，设置为ture后会直接在网页上弹出调试信息，用于排查问题
appId: wx_info.appId,
timestamp:wx_info.timestamp,
nonceStr: wx_info.nonceStr ,
signature: wx_info.signature ,
jsApiList: [ //需要使用的网页服务接口
'checkJsApi', //判断当前客户端版本是否支持指定JS接口
'onMenuShareTimeline', //分享给好友
'onMenuShareAppMessage', //分享到朋友圈
'onMenuShareQQ', //分享到QQ
'onMenuShareWeibo' //分享到微博
]
});
console.log(wx)
wx.ready(function () { //ready函数用于调用API，如果你的网页在加载后就需要自定义分享和回调功能，需要在此调用分享函数。//如果是微信游戏结束后，需要点击按钮触发得到分值后分享，这里就不需要调用API了，可以在按钮上绑定事件直接调用。因此，微信游戏由于大多需要用户先触发获取分值，此处请不要填写如下所示的分享API
// 1 判断当前版本是否支持指定 JS 接口，支持批量判断
wx.checkJsApi({
jsApiList: [
'onMenuShareAppMessage'
],
success: function (res) {
//alert(JSON.stringify(res));
}
});
wx.onMenuShareTimeline({ //例如分享到朋友圈的API
title: '00.com', // 分享标题
link: 'http://11.free.ngrok.cc/111.html', // 分享链接
imgUrl: 'http://pbs7k3hiu.bkt.clouddn.com/image/Mica_black.png', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
// console.log(1)
alert(4454)
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareAppMessage({
title:'00.com', // 分享标题
desc: '洛杉矶留学生咨询就上CSinLA.com', // 分享描述
link: 'http://11.free.ngrok.cc/111.html', // 分享链接
imgUrl: 'http://pbs7k3hiu.bkt.clouddn.com/image/Mica_black.png', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
alert(4454)
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareQQ({
title: '00a.com', // 分享标题
desc: '000.com', // 分享描述
link: 'http://111.free.ngrok.cc/111.html', // 分享链接
imgUrl: 'http://pbs7k3hiu.bkt.clouddn.com/image/Mica_black.png', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
alert(4454)
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
wx.error(function (res) {
alert(res.errMsg);
//打印错误消息。及把 debug:false,设置为debug:ture就可以直接在网页上看到弹出的错误提示
});
}
</script>
</body>
</html>注意：测试的时候不可以使用ip测试，菜鸟我也不知道为啥
建议：可以使用第三方代理进行测试。