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

热身

微信官方API

登录微信公众平台配置好所需的环境，如：JS接口安全域名引入微信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 laternonceStr: 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./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;}

注意事项

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