前言

每天领外卖打车红包等

这几天公司需要做微信端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, '');

Logo

前往低代码交流专区

更多推荐