Vue怒踩微信JS-SDK中配置的坑 - 签名错误

前言

这几天公司需要做微信端h5项目，需要用到微信扫一扫功能，就需要涉及到配置微信JS-SDK的问题，怎么配置怎么生成签名这边就不说了官方文档(https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)都说的比较详细，按照官方使用接口签名校验工具(https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign&token=&lang=zh_CN)一步步检查下来发现并没什么错误,结果还是出现了签名错误，让人蛋疼，经过一段时间摸索才发现了问题所在，话不多说看代码

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, '');