微信网页开发踩坑
- 开发微信公众号的h5页面时，会碰到一些微信分享之类的功能，这时便需要调用微信的js-jdk实现对应的功能。
- 微信JS-SDK说明文档
- 绑定域名(js接口)以及开发者权限配置
- 页面内引入js文件（http://res.wx.qq.com/open/js/jweixin-1.2.0.js）
- 通过config注入权限验证配置
1
2
3
4
5
6
7
8
9// 配置由后端提供
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名这里有坑，前端分享的url要和后端配置的url一样，因为签名是由这个玩意生成的。
jsApiList: [] // 必填，需要使用的JS接口列表
});
4.通过ready接口处理成功验证1
2
3
4//建议wx接口的调用都放在ready的回调函数中，虽然开发文档说用户行为触发的接口调用不用放在ready中，但亲测不行。
wx.ready(function(){
});
5.分享接口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//分享到朋友圈(据文档说即将废弃)
wx.onMenuShareTimeline({
title: '', // 分享标题
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
},
//分享给朋友(据文档说即将废弃)
wx.onMenuShareAppMessage({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户点击了分享后执行的回调函数
}
});
//分享到QQ
wx.onMenuShareQQ({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
/ / 用户取消分享后执行的回调函数
}
});
//分享到腾讯微博(个人觉得废弃朋友圈的接口还不如废弃这个接口，因为没人用，哈哈哈)
wx.onMenuShareWeibo({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
- 其他接口参考文档(ps:因为我也没用过)
