微信分享需要注意的点有哪些?
涉及到推广的页面中我们一般会使用微信分享,那么微信分享有哪些坑你知道吗?
下面我们先贴一段微信分享的代码:
引用的微信js库是:
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
js内容代码是:
// 微信分享
function wxShare() {
// 验证配置
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: appId, // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature,// 必填,签名
jsApiList: [ // 必填,需要使用的JS接口列表
"updateAppMessageShareData",
"updateTimelineShareData",
"onMenuShareTimeline",
"onMenuShareAppMessage",
"onMenuShareQQ",
"onMenuShareWeibo",
"onMenuShareQZone"
]
});
// 成功验证
wx.ready(function () {
wx.checkJsApi({
jsApiList: [
"updateAppMessageShareData",
"updateTimelineShareData",
"onMenuShareTimeline",
"onMenuShareAppMessage",
"onMenuShareQQ",
"onMenuShareAppMessage",
"onMenuShareQZone"
], //分享到朋友圈,
success: function (res) { }
});
// 分享朋友 & QQ
wx.updateAppMessageShareData({
title: '分享标题分享标题', // 分享标题
desc: '分享描述分享描述!', // 分享描述
link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '你的微信分享图标地址', // 分享图标
success: function () {
// 设置成功
}
})
// 分享朋友圈 & QQ空间
wx.updateTimelineShareData({
title: '中核集团漫画推理', // 分享标题
link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '你的微信分享图标地址', // 分享图标
success: function () {
// 设置成功
}
})
//分享微博
wx.onMenuShareWeibo({
title: '分享标题分享标题', // 分享标题
desc: '分享描述分享描述', // 分享描述
link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '你的微信分享图标地址', // 分享图标
success: function () {
// 设置成功
}
});
});
// 失败验证
wx.error(function (res) {
});
}
需要注意的是:上面的代码只适用于jweixin-1.6.0.js,版本对不上的话分享会失效!!!
进入正题,具体我踩过的坑有以下情况:
1、设置正确的安全域名和白名单,很多时候的错误并不是前端方法或者sdk等问题,而是后台有没有设置正确的安全域名和白名。
2、域名一定要外网可访问
3、上线的域名和认证的域名不一致时也分享失败
4、安全域名必须与获取域名完全一致
假设分享链接是htts://m.tt.com/h5和htts://m.tt.com/h5/exam
此时配置的域名一定得是htts://m.tt.com/和htts://m.tt.com/h5/
若配置错误会导致签名失效,报config:invalid signature