微信公众号扫一扫

步骤

根据微信JS-JDK文档说明，实现扫一扫主要有以下几大步骤：

1. 绑定域名
2. 引入JS文件
3. 通过config接口注入权限验证配置
4. 通过ready接口处理成功验证
5. 通过error接口处理失败验证

绑定域名

在JS接口安全域名填入域名，注意不带http，如图：

引入JS文件

通过config接口注入权限验证配置

$.ajax({
    url: "${pageContext.request.contextPath}/wechat/jsapisign",
    type: "post",
    data: {
        url: location.href.split('#')[0]
    },
    contentType: 'application/x-www-form-urlencoded;charset=utf-8',
    async: true,
    success: function (data) {
        wx.config({
            debug: false,
            appId: data.appid, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名，见附录1
            jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
    }
});

微信jsapi验签

public Map jsApiSign(String url) {
    Map ret = new HashMap(16);
    String nonce_str = CheckUtil.create_nonce_str();
    String timestamp = CheckUtil.create_timestamp();
    String string1;
    String signature = "";

    String jsapi_ticket = wechatAccessTokenService.getJsApiTicket();
    //注意这里参数名必须全部小写，且必须有序
    string1 = "jsapi_ticket=" + jsapi_ticket +
            "&noncestr=" + nonce_str +
            "×tamp=" + timestamp +
            "&url=" + url;
    logger.info("jsApiSign===" + string1);

    try {
        MessageDigest crypt = MessageDigest.getInstance("SHA-1");
        crypt.reset();
        crypt.update(string1.getBytes("UTF-8"));
        signature = CheckUtil.byteToHex(crypt.digest());
    } catch (NoSuchAlgorithmException | UnsupportedEncodingException e) {
        e.printStackTrace();
    }

    ret.put("appid", appid);
    ret.put("url", url);
    ret.put("jsapi_ticket", jsapi_ticket);
    ret.put("nonceStr", nonce_str);
    ret.put("timestamp", timestamp);
    ret.put("signature", signature);
    logger.info("jsApiSign===url=" + url + "==jsapi_ticket" + jsapi_ticket + "==nonce_str" + nonce_str + "==timestamp" + timestamp + "==signature" + signature);
    return ret;
}

Controller层代码

@RequestMapping(value = "/jsapisign", method = {RequestMethod.GET, RequestMethod.POST}, produces = MEDIATYPE_CHARSET_JSON_UTF8)
@ResponseBody
public String jsApiSign(String url) {
    //添加微信js签名信息
    Map signMap = wechatService.jsApiSign(url);

    return JSON.toJSONString(signMap);
}

前台JSP页面完整代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>






    
    
    
    
    
    





    
    

        
    

注：开发中容易出现的有signature验签错误，我们可以透过前后端url一致性来判断。其次就是注意有时候的错误是由于accessToken没有刷新的缘故，需要重新刷新。