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

hhzzcc_

已于 2024-05-20 16:18:25 修改

阅读量7.1k

点赞数 3

文章标签： Vue 微信签名错误微信JS-SDK配置微信扫一扫 Vue配置微信JS-SDK

于 2018-10-09 14:05:54 首次发布

本文链接：https://blog.youkuaiyun.com/hhzzcc_/article/details/82981461

版权

前言

每天领外卖打车红包等

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