这章主要记录下调用微信JS-SDK中的扫一扫踩到的坑
一、引入JS文件首先我们先引入js文件，地址为 ，当然你也可以下载到本地，使用本地路径进行引入
如果是前后端分离的项目，可以用npm来安装相关依赖，具体命令为 npm install weixin-js-sdk，然后在相应页面引入即可，具体命令为 import wx from ‘weixin-js-sdk’
二、往服务端传入当前页面url这里需要往服务端传入当前页面的url，包括’http(s)://’部分，以及’？’后面的GET参数部分，但不包括’#’hash后面的部分，此外该url需要经过 encodeURIComponent 处理，由于我只在一个页面调用了扫一扫的功能，所以我的页面url直接写死了，但如果你需要调用分享等功能，则页面的url需要通过 location.href.split(‘#’)[0] 动态获取，具体的见官方文档
我的页面url参数为 var url = encodeURIComponent(‘https://www.baidu.com/‘)，注意，这里我碰到一个很坑的事，后期在页面上调用扫一扫时，该url和扫一扫所在页面的url必须保持一致，我都填对了，可还是报错，最后才查出来，扫一扫所在的页面url末尾多了一个/，所以在往服务端传的url后面也加上一个/，就没问题了
三、在微信公众平台设置JS接口安全域名该域名必须与第二步中url的域名相同
还需要下载 MP_verify_xyPkykStkhZUf7ya.txt 文件，并将其上传至项目的根目录下，也就是说通过 域名 + /MP_verify_xyPkykStkhZUf7ya.txt 的形式能直接访问到该文件
四、获取jsapi_ticket用于调用微信JS接口的临时票据，有效期为7200s，由于调用次数十分有限，所有我们需要全局缓存jsapi_ticket，可以通过 redis 来缓存，在获取 jsapi_ticket 时需要先获取 access_token，不清楚怎么获取的小伙伴可以点击看我以前的博客
public static String getWXJsapiTicket(String accessToken) { // 此处accessToken为请求微信接口获取到的access_token String jsapiTicketUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?" + "access_token=" + accessToken + "&type=jsapi"; JSONObject jsonObject = HttpUtils.httpsRequest(jsapiTicketUrl, "GET", null); return (String) jsonObject.get("ticket"); } 五、服务端生成签名生成签名需要四个参数，分别为 noncestr，jsapi_ticket，timestamp，url
noncestr
随机字符串
jsapi_ticket
用于调用微信JS接口的临时票据，即第三步获取到的jsapi_ticket
timestamp
当前时间戳，单位为秒
url
当前页面url，即第二步由页面传递给服务端的url参数
WXPayUtils
public static String generateNonceStr() { return UUID.randomUUID().toString().replaceAll("-", ""); } public static long getCurrentTimestamp() { return System.currentTimeMillis()/1000; }用SHA1加密生成签名
@RequestMapping("xxxxxxxxxxxxx") @ResponseBody public Map<String, Object> getSignature(HttpServletRequest request) { String nonceStr = WXPayUtils.generateNonceStr(); String timestamp = WXPayUtils.getCurrentTimestamp() + ""; // returnMap为返回给页面的数据 Map<String, Object> returnMap = new HashMap<>(); // 此处填写你自己公众号的appid map.put("appId", WXConstants.APPID); map.put("timestamp", timestamp); map.put("nonceStr", nonceStr); // map为用于生成签名的数据 Map<String, Object> map = new HashMap<>(); map.put("timestamp", timestamp); map.put("noncestr", nonceStr); map.put("jsapi_ticket", jsapiTicket); map.put("url", request.getParameter("url")); String signature = SHA1.getJsSHA1(map); if (null != signature) { returnMap.put("signature", signature); } return returnMap; }