微信开发调用JS-SDK某些页面报config:fail,invalid signature
注意,是某些页面才会报这个错误,导致 wx.config 失败
百思不得解
看了几遍文档
确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)://'部分,以及'?'后面的GET参数部分,但不包括'#'hash后面的部分
后来想了下,我用了nginx 代理,可能是代理设置的不对,然后打开了调试模式
查看参数,果然是有问题的,发现 动态获取url的时候,将我的项目名带上了,实际上,我用了nginx是忽略了这个项目名
出现这种情况,多看下实际访问地址
动态获取URL 代码如下
public static String getHttpValue(HttpServletRequest request) {
String url = "http://" + request.getServerName() //服务器地址
+ request.getContextPath() //项目名称
+ request.getServletPath() //请求页面或其他地址
+ (request.getQueryString() == null ? "" : "?" + request.getQueryString()); //参数
return url;
}
附录1,Ajax 获取微信js-sdk配置
<script type="text/javascript">
var data = {
url: location.href
};
$.ajax({
url: $.httpRootPath()+'share/getJsapiSignature',
type: 'GET',
data:data,
dataType: 'json',
timeout: 15000,
success: function (r) {
r = r.wxConfig;
$(".loading").hide();
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: r.appId, // 必填,公众号的唯一标识
timestamp: r.timestamp, // 必填,生成签名的时间戳
nonceStr: r.nonceStr, // 必填,生成签名的随机串
signature: r.signature, //必填,签名,见附录1
jsApiList: ['checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
// 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function(){
console.log("errorToast(\"获取分享参数完成\",1);");
wx.onMenuShareAppMessage({
title: '电话群录微信公众号-轻松找到那个她', // 分享标题
desc: '电话群录,致力于团体之间成员的通讯信息的在线管理、查找、分享,可选择使用学号、邮箱、手机号码登录', // 分享描述
link: $.httpRootPath() + 'share/introduce', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://sta.haois.me/common/img/3.jpg', // 分享图标
type: 'link', // 分享类型,music、video或link,不填默认为link
success: function () {
// 用户确认分享后执行的回调函数
console.log("用户分享")
},
cancel: function () {
// 用户取消分享后执行的回调函数
console.log("用户取消分享")
}
});
wx.onMenuShareTimeline({
title: '电话群录微信公众号-轻松找到那个她', // 分享标题
link: $.httpRootPath() + 'share/introduce',// 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://sta.haois.me/common/img/3.jpg', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
});
});
},
error: function (e) {
$(".loading").hide();
ajaxErrorEvent(e);
}
});
</script>
附录2 java 后台获取微信js-sdk参数
/**
* 前端获取url签名
*
* @throws WxErrorException
*/
@RequestMapping("/getJsapiSignature")
@ResponseBody
public Map getJsapiSignature(
HttpServletRequest request,String url)
throws RuntimeException, WxErrorException {
logger.info("请求wxJsapiSignature的url为:{}",url);
WxJsapiSignature wxJsapiSignature = wxMpService.createJsapiSignature(url);
Map map = new HashMap();
map.put("wxConfig", wxJsapiSignature);
return map;
}
wxMpService 为 班纳睿 的 weixin-java-tools