步骤
根据微信JS-JDK文档说明，实现扫一扫主要有以下几大步骤：
- 绑定域名
- 引入JS文件
- 通过config接口注入权限验证配置
- 通过ready接口处理成功验证
- 通过error接口处理失败验证
绑定域名
在JS接口安全域名填入域名，注意不带http，如图：
引入JS文件
1 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
通过config接口注入权限验证配置
1 $.ajax({ 2 url: "${pageContext.request.contextPath}/wechat/jsapisign", 3 type: "post", 4 data: { 5 url: location.href.split('#')[0] 6 }, 7 contentType: 'application/x-www-form-urlencoded;charset=utf-8', 8 async: true, 9 success: function (data) { 10 wx.config({ 11 debug: false, 12 appId: data.appid, // 必填，公众号的唯一标识 13 timestamp: data.timestamp, // 必填，生成签名的时间戳 14 nonceStr: data.nonceStr, // 必填，生成签名的随机串 15 signature: data.signature,// 必填，签名，见附录1 16 jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 17 }); 18 } 19 });
微信jsapi验签
1 public Map<String, String> jsApiSign(String url) { 2 Map<String, String> ret = new HashMap<String, String>(16); 3 String nonce_str = CheckUtil.create_nonce_str(); 4 String timestamp = CheckUtil.create_timestamp(); 5 String string1; 6 String signature = ""; 7 8 String jsapi_ticket = wechatAccessTokenService.getJsApiTicket(); 9 //注意这里参数名必须全部小写，且必须有序 10 string1 = "jsapi_ticket=" + jsapi_ticket + 11 "&noncestr=" + nonce_str + 12 "×tamp=" + timestamp + 13 "&url=" + url; 14 logger.info("jsApiSign===" + string1); 15 16 try { 17 MessageDigest crypt = MessageDigest.getInstance("SHA-1"); 18 crypt.reset(); 19 crypt.update(string1.getBytes("UTF-8")); 20 signature = CheckUtil.byteToHex(crypt.digest()); 21 } catch (NoSuchAlgorithmException | UnsupportedEncodingException e) { 22 e.printStackTrace(); 23 } 24 25 ret.put("appid", appid); 26 ret.put("url", url); 27 ret.put("jsapi_ticket", jsapi_ticket); 28 ret.put("nonceStr", nonce_str); 29 ret.put("timestamp", timestamp); 30 ret.put("signature", signature); 31 logger.info("jsApiSign===url=" + url + "==jsapi_ticket" + jsapi_ticket + "==nonce_str" + nonce_str + "==timestamp" + timestamp + "==signature" + signature); 32 return ret; 33 }
1 public String getJsApiTicket() { 2 AugeWechatAccessToken wechatAccesstoken = augeWechatAccessTokenMapper.selectByPrimaryKey(jsApiTicketId); 3 logger.info("getJsApiTicket===" + wechatAccesstoken.getAccessToken()); 4 if (Strings.isNullOrEmpty(wechatAccesstoken.getAccessToken()) || wechatAccesstoken.getExpiresIn() - 100 * 1000 < System.currentTimeMillis()) { 5 //空或者过期，刷新 6 return refreshJsApiTicket(); 7 } else { 8 return wechatAccesstoken.getAccessToken(); 9 } 10 }
Controller层代码
1 @RequestMapping(value = "/jsapisign", method = {RequestMethod.GET, RequestMethod.POST}, produces = MEDIATYPE_CHARSET_JSON_UTF8) 2 @ResponseBody 3 public String jsApiSign(String url) { 4 //添加微信js签名信息 5 Map<String, String> signMap = wechatService.jsApiSign(url); 6 7 return JSON.toJSONString(signMap); 8 }
前台JSP页面完整代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="zh-CN"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <head> <base href="<%=basePath%>"> <title>扫码还书</title> <link rel="stylesheet" href="http://203.195.235.76/jssdk/css/style.css"/> <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <link rel="stylesheet" type="text/css" href="../../../resources/css/bookdetail.css"> </head> <body> <div class="wrap" style=" 100% ;height: 100%"> <img src="../../../resources/images/borrow/return.png" alt="" style=" 100% ;height: 75%"> <div style="text-align: center; background-color: #f5f5f5; "> <img src="../../../resources/images/borrow/scanReturn.png" alt="" style=" 40% ;height: 25%;" id="scanQRCode1"> </div> </div> <script type="text/javascript"> $.ajax({ url: "${pageContext.request.contextPath}/wechat/jsapisign", type: "post", data: { url: location.href.split('#')[0] }, contentType: 'application/x-www-form-urlencoded;charset=utf-8', async: true, success: function (data) { wx.config({ debug: false, appId: data.appid, // 必填，公众号的唯一标识 timestamp: data.timestamp, // 必填，生成签名的时间戳 nonceStr: data.nonceStr, // 必填，生成签名的随机串 signature: data.signature,// 必填，签名，见附录1 jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表 }); } }); wx.ready(function () { // 9.1.2 扫描二维码并返回结果 document.querySelector('#scanQRCode1').onclick = function () { wx.scanQRCode({ needResult: 1, desc: 'scanQRCode desc', success: function (res) { //扫码后获取结果参数赋值给Input var url = res.resultStr; //商品条形码，取","后面的 if (url.indexOf(",") >= 0) { var tempArray = url.split(','); var barCode = tempArray[1]; window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx96668744efc2b2de&redirect_uri=http://cx.ngrok.xiaomiqiu.cn/wechat/toReturnDetail?barCode=" + barCode + "&response_type=code&scope=snsapi_base&state=BINDFACE#wechat_redirect"; } else { alert("请对准条形码扫码!"); } } }); }; }); //初始化jsapi接口 状态 wx.error(function (res) { alert("调用微信jsapi返回的状态:" + res.errMsg); }); </script> </body> </html>
注：开发中容易出现的有signature验签错误，我们可以透过前后端url一致性来判断。其次就是注意有时候的错误是由于accessToken没有刷新的缘故，需要重新刷新。