在此之前需要申请 “微信测试号”
1.修改JS接口安全域名为自己的花生壳,这里我用的是花生壳
2.往下拉会有一个“网页帐号”的点击右侧修改,将这个也设置为自己的域名
项目中新建properties文件
1 AppId=XXXXX 2 AppSecret=XXXXX 3 4 token=ilasweixin 5 6 wechatDomain=http://XXXX/ 7 8 notice.content=u60A8u597DuFF0Cu60A8u9884u7EA6{DATE}u7684u7A7Au95F4[{SPACE_NAME}]uFF0Cu901Au8FC7u5BA1u6838u65F6u95F4u6BB5u4E3AuFF1A{PASS_TIME}uFF0Cu672Au901Au8FC7u5BA1u6838u65F6u95F4u6BB5u4E3AuFF1A{REFUSE_TIME}uFF0Cu539Fu56E0u3010{REASON}u3011
主要的配置是AppId、AppSecret、wechatDomain
然后生成二维码,需要用到一个工具类 “QrCodeUtil”
接下来就是生成二维码的代码,这里我是向二维码中存了一个Json串,如果比较个性也可以向二维码中加入图片,像微信那样
public Object getBookLendQrCode(HttpServletRequest request) { //获取参数 int lendId = Integer.parseInt(request.getParameter("lendId")); int readerId = Integer.parseInt(request.getParameter("readerId")); int bookId = Integer.parseInt(request.getParameter("bookId")); Map<String,Object> param = new HashMap<>(); param.put("lendId", lendId); param.put("readerId", readerId); param.put("bookId", bookId); param.put("createTime", new Date().getTime()); String str = JsonUtils.toJson(param); Map<String, String> map = new HashMap<>(); String qrCodeEncode = QrCodeUtil.qrCodeEncode(str); if (StringUtils.isNotBlank(qrCodeEncode)) { map.put("img", qrCodeEncode); } return map; }
二维码已经生成,接下来就是调用微信摄像头了
调用微信摄像头就比较简单,但是前提一定要扫一扫微信测试号中的二维码关注
另外一个比较容易错的就是配置文件中的三个参数是否和微信测试号中的一样,不一样会导致摄像头调取失败
第一步需要读取配置文件中的信息,这里需要一个改工具类 “WechatSign”
接着上java代码
@Value("${AppId}") private String appId; @Value("${token}") private String token; /** * 获取JSSDK签名信息 * @param request * @return */ @RequestMapping(value={"signInfo.do"}) @ResponseBody public ResultEntity signInfo(HttpServletRequest request){ ResultEntity result=new ResultEntity(); String url=request.getParameter("url"); Map<String,String> signMap= WechatSign.sign(url); signMap.put("appId",appId); result.setResult(signMap); result.setState(true); return result; }
已经拿到配置信息了,其他的就是页面的处理了
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
两个JS文件,一个是微信摄像头的,另一个是可以看到摄像头调用中的报错信息
下面是读取配置信息的方法
var url = window.location.href; //var vConsole = new VConsole(); $(function () { $.ajax({ url: "${pageContext.request.contextPath}/wechatInterface/signInfo.do", type: "GET", data: {"url": url}, success: function (data) { if (data && data.state == true) { var nonceStr = data.result.nonceStr; var timestamp = data.result.timestamp; var signature = data.result.signature; var appId = data.result.appId; //alert("appId:"+appId+"</br>timestamp:"+timestamp+"</br>signature:"+signature+"</br>nonceStr:"+nonceStr); wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: appId, // 必填,公众号的唯一标识 timestamp: timestamp, // 必填,生成签名的时间戳 nonceStr: nonceStr, // 必填,生成签名的随机串 signature: signature,// 必填,签名,见附录1 needResult: 1,// 默认为 0 ,扫描结果由微信处理, 1 则直接返回扫描结果, jsApiList: [ "scanQRCode", ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); } } }); })
接着是调用摄像头扫码病处理数据的方法
function scanQRCode() { console.log('beginScan'); console.log(wx); wx.scanQRCode({ // 默认为0,扫描结果由微信处理,1则直接返回扫描结果 needResult: 1, desc: 'scanQRCode desc', success: function (res) { console.log(res) if (res.errMsg === 'scanQRCode:ok') { console.log("into....")
//res.resultStr 这个是获取微信里封装的数据信息 console.log(res.resultStr) //window.location.replace(res.resultStr); var parse = JSON.parse(res.resultStr) var time = parse.createTime; //var now = new Date().getTime(); //if (now - time > 300000) { //alert("二维码过期,请重新生成") //return; //} $.post('${ctx}/web/bookLend/BookLending', { lendId: parse.lendId, readerId: parse.readerId, bookId: parse.bookId }, function (data) { if (data.state){ alert(data.message) window.reload(); } else { alert(data.message) window.reload(); } }) } } }); };
上面代码中有一个时间的判断,这个是防止用户将二维码保存相册再去给别人扫,
这个并不强制,看个人需求,这里我就先注释掉。
那么微信生成二维码并且扫码就是这样,不明白的可以评论区留言