最近开发微信公众号H5页面遇到个问题,使用微信sdk配置config一直报签名错误,导致分享到好友/朋友圈失效,搞了很久终于找到问题了,原因是配置的URL不一致,所以导致获取到的签名有问题,具体备注请看下面代码
首先安装sdk,cnpm install weixin-js-sdk -S
在当前页面引入
import wx from 'weixin-js-sdk';
页面代码
created() {
// 使用这个api来隐藏按钮,如果需要放开可以不写
document.addEventListener('WeixinJSBridgeReady',function onBridgeReady() {
WeixinJSBridge.call('hideOptionMenu');
});
this.ConfigFun();
}
// 分享
ConfigFun() {
let url = window.location.href; // 链接一定要获取当前页面的完整链接,否则会一直报签名错误导致分享失败
Config({url: url}).then(res => { // 后端返回的配置信息
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.appId, // 必填,公众号的唯一标识
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature, // 必填,签名
jsApiList: res.jsApiList
// 必填,需要使用的JS接口列表,所有JS接口列表见附录2,(此处接口列表为后端传过来,直接使用,要注意的是前端使用了的接口需要后端配置里有,否则会因为没有权限导致签名错误而失效)
});
// 隐藏右上角菜单接口,如果需要放开可以不写
// wx.hideOptionMenu();
// 隐藏所有基础类,如果需要放开可以不写
// wx.hideAllNonBaseMenuItem();
wx.ready(() => {
wx.checkJsApi({ // 检验接口是否有效
jsApiList: res.jsApiList,
success(res) {
if (res.checkResult.getLocation == false){
alert('你的微信版本太低,不支持微信JS接口,请升级到最新的微信版本!');
return;
}
}
});
wx.onMenuShareAppMessage({ // 分享给朋友(即将废弃)
title: this.goodsInfo.title,// 分享标题
desc: this.goodsInfo.subtitle, // 分享描述
link: this.url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: this.goodsInfo.cover, // 分享图标
type: 'link', // 分享类型,music、video或link,不填默认为link
success(res) {
// 设置成功
console.log('朋友成功');
}
});
wx.onMenuShareTimeline({ // 分享到朋友圈(即将废弃)
title: this.goodsInfo.title,// 分享标题
desc: this.goodsInfo.subtitle, // 分享描述
link: this.url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: this.goodsInfo.cover, // 分享图标
type: 'link', // 分享类型,music、video或link,不填默认为link
success(res) {
// 设置成功
console.log('朋友成功');
}
});
wx.updateTimelineShareData({ // 分享到朋友圈
title: this.goodsInfo.title,// 分享标题
desc: this.goodsInfo.subtitle, // 分享描述
link: this.url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: this.goodsInfo.cover, // 分享图标
type: 'link', // 分享类型,music、video或link,不填默认为link
success(res) {
// 设置成功
console.log('朋友成功');
}
});
wx.updateAppMessageShareData({ // 分享给朋友
title: this.goodsInfo.title,// 分享标题
desc: this.goodsInfo.subtitle, // 分享描述
link: this.url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: this.goodsInfo.cover, // 分享图标
type: 'link', // 分享类型,music、video或link,不填默认为link
success(res) {
// 设置成功
console.log('朋友成功');
}
});
wx.hideMenuItems({ // 需要隐藏的菜单
menuList: ["menuItem:share:email"]
});
wx.error(function(res){ // 返回错误信息
console.log(res);
});
});
}).catch(err => {
this.$toast(err.errmsg);
});
},
我想请问一下在微信浏览器中进行了刷新操作后分享点击无效问题,再次刷新(第二次刷新)就好了,这个问题遇到过吗?
非常感谢,解决了我的问题
您好 目前我正在做一个类似于这样的项目 需求也是在H5上增加一个按钮点击它分享到朋友圈 而不通过右上角三个点点击分享 请问也是通过WeixinJSBridge去调起吗
"img_url":imgUrl,
//"img_width":"640",
//"img_height":"640",
"link":link,
"desc": desc,
"title":title
});
通过这个方法可以调起