微信公众号调起扫码功能

朱雀 2022-05-15 00:37 456阅读 0赞

偶然接触到了公众号开发。说需要调起微信扫一扫。便查看了公众号开发文档

![70][]

看完文档后，发现js是相对简单的。唯一的难点是在java后台编写的秘钥生成代码。

![70 1][]

也就是说。首先需要获取access\_token，然后在根据access\_token生成签名并返回。

以下是代码

private static String GAPPID = "XXXXXXXXX";
    	private static String GSECRET = "XXXXXXXXXXXXXX";
    	private static String GRANTTYPE2 = "client_credential";// 获取 access-token 的
    
      
    	@RequestMapping("/api/wx/getWxJsKey")
    	@ResponseBody
    	public String getWxJsKey(HttpServletRequest request) {
    		HttpSession session = request.getSession();
    		Map<String, Object> map = new HashMap<>();
    		map.put("code", "1");
    		map.put("errorMsg", "请求成功");
    		String access_token = null;
    		String jsapi_ticket = null;
    		String timestamp = Long.toString(System.currentTimeMillis() / 1000);
    		String noncestr = UUID.randomUUID().toString();
    		System.out.println("timestamp:" + timestamp);
    		System.out.println("noncestr:" + noncestr);
    		// 获取 access_token
    		{
    			Object val = session.getAttribute("wx_access_token");
    			if (val == null) {
    				String requestUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type="
    						+ GRANTTYPE2 + "&appid=" + GAPPID + "&secret="
    						+ GSECRET;
    				JSONObject json = CommonUtil.httpsRequest(requestUrl, "GET",
    						null);
    				logger.info(json);
    				access_token = json.getString("access_token");
    				session.setAttribute("wx_access_token", access_token);
    				session.setMaxInactiveInterval(7200);
    			} else {
    				access_token = val.toString();
    			}
    		}
    		// 获取 ticket
    		{
    			Object val = session.getAttribute("jsapi_ticket");
    			if (val == null) {
    				String requestUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="
    						+ access_token + "&type=jsapi";
    				JSONObject json = CommonUtil.httpsRequest(requestUrl, "GET",
    						null);
    				jsapi_ticket = json.getString("ticket");
    				session.setAttribute("jsapi_ticket", jsapi_ticket);
    				session.setMaxInactiveInterval(7200);
    			} else {
    				jsapi_ticket = val.toString();
    			}
    			System.out.println("jsapi_ticket:" + jsapi_ticket);
    		}
    		// 签名
    		String jsKey = new StringBuffer()//
    				.append("jsapi_ticket=").append(jsapi_ticket)//
    				.append("&noncestr=").append(noncestr)//
    				.append("&timestamp=").append(timestamp).append("&url=")//
    				.append("https://hktest.ricepon.com/member-web/preOrderMeal/html/pre_order_meal.html")//
    				.toString();
    		// 加密 生成签名
    		jsKey = DigestUtils.shaHex(jsKey);
    		// 返回值
    		Map<String, Object> param = new HashMap<>();
    		param.put("jsKey", jsKey);
    		param.put("timestamp", timestamp);
    		param.put("noncestr", noncestr);
    		param.put("appId", GAPPID);
    		map.put("data", param);
    		return JSONObject.fromObject(map).toString();
    	}

然后在js中用ajax请求接口，处理即可。

var jsKey, noncestr, timestamp, appId, ajaxHeader = {};
    
    $(document).ready(function () {
    
    	//组装头部信息
    	ajaxHeader = {
    		Accept: "application/json; charset=utf-8",
    	}
    
    	// 获取 秘钥
    	$.ajax({
    		url: "../api/wx/getWxJsKey",
    		type: "POST",
    		headers: ajaxHeader,
    		success: function (res) {
    			if (res.code == 1) {
    				var data = res.data;
    				jsKey = data.jsKey; // 签名
    				noncestr = data.noncestr; // 随机字符串
    				timestamp = data.timestamp; // 时间戳
    				appId = data.appId; // 小程序apId
    				wx.config({
    					debug: false,
    					appId: appId,
    					timestamp: timestamp,
    					nonceStr: noncestr,
    					signature: jsKey,
    					jsApiList: ['scanQRCode']
    				})
    			} else {
    				layer.msg(res.errorMsg);
    			}
    		},
    		error: function (res) {
    			layer.msg('error');
    			layer.msg(res);
    		}
    	})
    });
    
    wx.error(function (res) {
    	layer.msg(res.errorMsg);
    });
    
    wx.ready(function () {
    	wx.checkJsApi({
    		jsApiList: ['scanQRCode'],
    		success: function (res) {}
    	});
    });
    
    //调起扫码
    function openScanDialog() {
    	wx.scanQRCode({
    		needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
    		scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
    		success: function (res) {
    			//自行处理
    		}
    	});
    }

就是这样！

[70]: /images/20220515/5a485a9a077e4e77a438ba8264f35557.png
[70 1]: /images/20220515/746dc6d39fbb469384e47ff03171582a.png