Vue怒踩微信JS-SDK中配置的坑 - 签名错误
前言这几天公司需要做微信端h5项目,需要用到微信扫一扫功能,就需要涉及到配置微信JS-SDK的问题,怎么配置怎么生成签名这边就不说了官方文档(https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)都说的比较详细,按照官方使用接口签名校验工具(https://mp.weixin.qq.com/debug/c
前言
每天领外卖打车红包等
这几天公司需要做微信端h5项目,需要用到微信扫一扫功能,就需要涉及到配置微信JS-SDK的问题,怎么配置怎么生成签名这边就不说了官方文档(概述 | 微信开放文档)都说的比较详细,按照官方使用接口签名校验工具(微信 JS 接口签名校验工具)一步步检查下来发现并没什么错误,结果还是出现了签名错误,让人蛋疼,经过一段时间摸索才发现了问题所在,话不多说看代码
wx.config({
debug: false,
appId: appId,
timestamp: timestamp,
nonceStr: noncestr,
signature: signature,
jsApiList: ['scanQRCode']
});
上面代码主要是配置JS-SDK的代码文档都有说,下面介绍这些参数的功能,和容易引起出错的注意事项
1、debug : 为true开启调试模式,微信每一步执行的回调信息会自动alert出来,方便调试
2、appId : 这个没啥好说的微信的appId,不要和其他参数弄混就好,开发者工具可以查
3、timestamp : 时间戳,和生成签名时候拼接的时间戳一样
//js获取当前时间戳
new Date().getTime();
4、nonceStr : 随机的字符串,这个倒是比较无所谓可以直接copy官网的Wm3WZYTPz0wzccnW,和时间戳一样要和生成签名时候拼接的一样,而且在提交时候nonceStr变量名S要大写
5、(重点,下面会详细讲)signature : 签名, 由后台返回的jsapi_ticket、刚才的随机字符串noncestr、刚才的时间戳timestamp、以及当前页面的url拼接之后通过SHA1方式加密(js的SHA1加密网上一搜很多)
6、jsApiList : 要调用的SDK方法,官网可以查,这里用的是扫码功能
jsApiList: ['scanQRCode']
上面说的签名是最容易出错的地方,大部分出错的地方在拼接的url上,不要误解成回调地址,这边填写的是当前页面的地址这里分为Android和IOS的url规则,附上js代码
//Android的url
let url = location.href;
//IOS的url(IOS比较坑需要去掉锚点)
let url = location.href.replace(location.hash, '');
更多推荐
所有评论(0)