微信公众号之H5页面调用微信扫一扫

热身

微信官方API

1. 登录微信公众平台配置好所需的环境，如：JS接口安全域名
2. 引入微信JS文件

前端实现

1>初始化加载微信配置并获取相关参数

$(function () {
        $.ajax({
            type: 'get',
            url: baseUrl+'/getSign',
            data: {
                'tokenUrl': location.href
            },
            async: false,
            dataType: 'JSON',
            success: function (res) {
                // 配置微信转发、扫码等基本参数
                wx.config({
                    debug: false,
                    appId: res.appId,
                    timestamp: res.timestamp, //todo later
                    nonceStr: res.nonceStr,
                    signature: res.signature,
                    jsApiList: [
                        // 所有要调用的 API 都要加到这个列表中
                        'scanQRCode'
                    ]
                })
            },
            error: function () {
                console.log('config fail')
            }
        })
	}

2>点击“扫一扫”按钮调用微信扫一扫接口

//访问相机，扫描二维码
$('.scanPic').click(function () {
	wx.scanQRCode({
		desc: 'scanQRCode desc',
		needResult : 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
		scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码，默认二者都有
		success : function(res) {
			// console.log("调用扫描成功",res.resultStr)
			var result = res.resultStr;
			var barCode = getBarCode(result);
		},
		error:function(res){
			console.log(res)
		}
	});
})

后台实现

1. 获取accessToken，通过accessToken获取ticket

/**
* 获得jsapi_ticket
*/

public static String getJsApiTicket(String token) {
    String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket"
            + "?access_token=" + token
            + "&type=jsapi";
    String response = HttpClientUtil.doGet(url);
    if (StringUtils.isBlank(response)) {
        return null;
    }
    JSONObject jsonObject = JSONObject.parseObject(response);
    System.out.println(response);
    String ticket = jsonObject.getString("ticket");
    return ticket;
}

2. 获取其它参数，如：nonceStr，timestamp，signature等计算签名

public Map<String, String> sign(String url) throws Exception {
Map<String, String> map = new HashMap<>(16);

    //获取jsapi_ticket。
    String jsapiTicket = this.getJsApiTicket();
    //nonceStr要与前端页面config中的nonceStr一致，获取并生成签名之后，将其值回传至前端
    String nonceStr = createNonceStr();
    String timestamp = createTimestamp();
    String signature = "";
    String urlPath = "jsapi_ticket=" + jsapiTicket +
            "&noncestr=" + nonceStr +
            "&timestamp=" + timestamp +
            "&url=" + url;
    try {
        MessageDigest crypt = MessageDigest.getInstance("SHA-1");
        crypt.reset();
        crypt.update(urlPath.getBytes("UTF-8"));
        signature = byteToHex(crypt.digest());
    } catch (NoSuchAlgorithmException e) {
        e.printStackTrace();
    } catch (UnsupportedEncodingException e) {
        e.printStackTrace();
    }
    map.put("url", url);
    map.put("jsapi_ticket", jsapiTicket);
    map.put("nonceStr", nonceStr);
    map.put("timestamp", timestamp);
    map.put("signature", signature);
    map.put("appId", appID);
    return map;
}

注意事项

1. 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。