1、vue引入weixin-js-sdk(yarn或npm)
一、有说url参数出的问题,事实上location.href.split('#')[0]是不会骗人的vue
要在公众号调试,参数会多code和state,state是空值的
二、还有说后端签名错误,要是后端代码写错了那都太好排查了,能够在这里验证nginx
http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 结果咱们后端的签名的算法验证没有问题
三、最后怀疑是服务器域名配置的问题,运维查了一下是https的证书错了
想必这个问题你们通常不会遇到,证书未及时替换掉
除此以外,先后端的域名映射不能太复杂,nginx配置太复杂也会致使前面出错ajax
代码的写法都是同样的(网上随便找一个,例如https://www.jb51.net/article/...)
jsApiList里必需要写上本身要调用的接口名,例如算法
wx.config({ debug: true, // 开启调试模式 appId: '.......', timestamp: response.data.timestamp, // 必填,生成签名的时间戳 nonceStr: response.data.nonceStr, // 必填,生成签名的随机串 signature: response.data.signature, // 必填,签名 jsApiList: ['scanQRCode'] // jsApiList: ['getLocation', 'chooseImage', 'hideOptionMenu', 'checkJsApi', 'chooseWXPay', 'closeWindow', 'scanQRCode'] // 必填,须要使用的JS接口列表 })
2、你们能够尝试下官方的案例http://demo.open.weixin.qq.co...,把这个地址的代码扒下来尝试一下npm
出现config:invalid signature分析:
一、jq和sdk的引入最好放到页面加载比较早的位置,如head标签里
二、ajax异步改成同步就能够了(async: false)json
$.ajax({ type: "get", url: basePath + config, //后端接口 async: false, dataType: "json", data: { page: location.href.split('#')[0] }, success: function (datas) { var datas=JSON.parse(datas); if (datas.status == 100) { var req = datas.data; var signature = req.signature; var timestamp = req.timestamp; var nonceStr = req.nonceStr; wx.config({ debug: true, appId: 'wxa9f902f87a88c0df', timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'translateVoice', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'onVoicePlayEnd', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseCard', 'openCard' ] }); // 经过ready接口处理成功验证 wx.ready(function () { alert("初始化成功!"); }); wx.error(function () { alert("初始化失败!"); }); } } });