在此之前需要申請 “微信測試號”
1.修改JS接口安全域名為自己的花生殼,這里我用的是花生殼
2.往下拉會有一個“網頁帳號”的點擊右側修改,將這個也設置為自己的域名
項目中新建properties文件
1 AppId=XXXXX 2 AppSecret=XXXXX 3 4 token=ilasweixin 5 6 wechatDomain=http://XXXX/ 7 8 notice.content=\u60A8\u597D\uFF0C\u60A8\u9884\u7EA6{DATE}\u7684\u7A7A\u95F4[{SPACE_NAME}]\uFF0C\u901A\u8FC7\u5BA1\u6838\u65F6\u95F4\u6BB5\u4E3A\uFF1A{PASS_TIME}\uFF0C\u672A\u901A\u8FC7\u5BA1\u6838\u65F6\u95F4\u6BB5\u4E3A\uFF1A{REFUSE_TIME}\uFF0C\u539F\u56E0\u3010{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(); } }) } } }); };
上面代碼中有一個時間的判斷,這個是防止用戶將二維碼保存相冊再去給別人掃,
這個並不強制,看個人需求,這里我就先注釋掉。
那么微信生成二維碼並且掃碼就是這樣,不明白的可以評論區留言