在微信实现链接的分享

微信分享会使用到微信JS-SDK,所以需要再微信公众号后台配置JS接口安全域名

微信官方关于分享接口开发文档

实现代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信分享</title>
</head>
<body>

<script src="../static/lib/jquery/1.12.4/jquery.min.js" crossorigin="anonymous"></script>
<!-- 引入jweixin js文件 -->
<script src="//res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
$(function () {
function getWxConfig () { // 获取微信配置参数
return new Promise((resolve, reject)=> {
// 当前网页的URL,不包含#及其后面部分,要注意当前URL一定是正确的且已经在 JS接口安全域名 配置过
let url = window.location.href.split('#')[0];

$.ajax({
type: "POST",
url: "获取微信签名等其他配置参数的链接,自行处理",
dataType: "json",
data: {url: url},
success: function (response) {
if (response.errorCode == 0) {
resolve(response.data);
} else {
reject(response.msg);
}
},
error: function (e) {
console.log(e);
reject(e.statusText);
}
});
})
}

async function wxShare() {
let res = await getSignature();
let {timestamp, nonceStr, appId, signature} = res;
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: appId, // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名
jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填,需要使用的JS接口列表
});

wx.ready(() => {
wx.onMenuShareTimeline({
title: '测试分享朋友圈', // 分享标题
link: url,// 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'logo.jpg',// 分享图标
success: function () {
// 设置成功
console.log('用户点击了分享后执行的回调函数1');
}
});
wx.onMenuShareAppMessage({
title: '测试分享朋友', // 分享标题
desc: '一个测试的分享', // 分享描述
link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'logo.jpg', // 分享图标
type: "", // 分享类型,music、video或link,不填默认为link
dataUrl: "", // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 设置成功
console.log('用户点击了分享后执行的回调函数2');
}
});
});
}

wxShare();
});
</script>
</body>
</html>
坚持原创技术分享,您的支持将鼓励我继续创作!
0%