微信公众号，JS-SDK调用微信扫一扫

清疚 2022-05-28 04:36 296阅读 0赞

微信公众号关联网页调用微信扫一扫功能，可以参照《[微信公众平台技术文档][Link 1]》-> 微信JS-SDK说明文档，官方链接地址：https://mp.weixin.qq.com/wiki?t=resource/res\_main&id=mp1421141115

#### 步骤一：绑定域名 ####

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。**注：该域名不包括端口号，并且必须是备案过的域名。**

备注：登录后可在“开发者中心”查看对应的接口权限。

#### 步骤二：引入JS文件 ####

在需要调用JS接口的页面引入如下JS文件，（支持https）：[http://res.wx.qq.com/open/js/jweixin-1.2.0.js][http_res.wx.qq.com_open_js_jweixin-1.2.0.js]

备注：支持使用 AMD/CMD 标准模块加载方法加载

#### 步骤三：通过config接口注入权限验证配置 ####

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。签名算法见文末的[附录1][1]，所有JS接口列表见文末的[附录2][2]

wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '', // 必填，公众号的唯一标识
        timestamp: , // 必填，生成签名的时间戳
        nonceStr: '', // 必填，生成签名的随机串
        signature: '',// 必填，签名
        jsApiList: [] // 必填，需要使用的JS接口列表
    });

#### 步骤四：通过ready接口处理成功验证 ####

wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    });

#### 步骤五：通过error接口处理失败验证 ####

wx.error(function(res){
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    });

### 调起微信扫一扫接口 ###

wx.scanQRCode({
    needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
    success: function (res) {
    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
    }
    });

**示例代码：**

tokenmanager管理类

package com.wx.util;
    
    /**
     * AccessToken Manager
     * 
     * @author Administrator
     * 
     */
    public class TokenManager {
    	
    	// access_token
    	private static String accessToken = "";
    	// expires_in,有效时间
    	private static int expiresIn = 0;
    	// 获取access_token时的时间
    	private static long recordTime = 0;
    
    	/**
    	 * 获取token
    	 */
    	public static void init() throws Exception {
    		String appId = AppString.getAppid();
    		String appSecret = AppString.getAppsecret();
    		String url = "https://api.weixin.qq.com/cgi-bin/token";
    		String para = "grant_type=client_credential&appid=%s&secret=%s";
    		String param = String.format(Locale.ENGLISH, para, appId, appSecret);
    		String result = new HttpSender().sendGet(url, param);
    		Logger.getLogger(TokenManager.class.getName()).info(result);
    		JSONObject jResult = JSONObject.parseObject(result);
    		if (jResult.containsKey("errmsg")) {
    			String msg = jResult.getString("errmsg");
    			throw new Exception(msg);
    		} else {
    			accessToken = jResult.getString("access_token");
    			expiresIn = jResult.getIntValue("expires_in");
    			recordTime = System.currentTimeMillis();
    		}
    	}
    
    	/**
    	 * token是否过期，到期前10分钟内，更新token
    	 * 
    	 * @return
    	 */
    	public static boolean isTokenExpired() {
    		long currTime = System.currentTimeMillis();
    		if ((expiresIn - ((currTime - recordTime) / 1000)) < 600) {
    			return true;
    		} else {
    			return false;
    		}
    	}
    
    	public static String getAccessToken() {
    		return accessToken;
    	}
    
    	public static void setAccessToken(String accessToken) {
    		TokenManager.accessToken = accessToken;
    	}
    
    	public static int getExpiresIn() {
    		return expiresIn;
    	}
    
    	public static void setExpiresIn(int expiresIn) {
    		TokenManager.expiresIn = expiresIn;
    	}
    
    	public static long getRecordTime() {
    		return recordTime;
    	}
    
    	public static void setRecordTime(long recordTime) {
    		TokenManager.recordTime = recordTime;
    	}
    
    }

TicketManager管理类

package com.wx.util;
    
    /**
     * jsapi_ticket
     * 
     * @author Administrator
     * 
     */
    public class TicketManager {
    
    	// jsapi_ticket
    	private static String apiTicket = "";
    	// expires_in有效时间
    	private static int expiresIn = 0;
    
    	/**
    	 * 获取ticket
    	 * 
    	 * @throws Exception
    	 */
    	public static void init() throws Exception {
    		String token = TokenManager.getAccessToken();
    		String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket";
    		String para = "access_token=%s&type=jsapi";
    		String param = String.format(Locale.ENGLISH, para, token);
    		String result = new HttpSender().sendGet(url, param);
    		Logger.getLogger(TokenManager.class.getName()).info(result);
    		JSONObject jResult = JSONObject.parseObject(result);
    		if (jResult.containsKey("errcode")
    				&& (jResult.getIntValue("errcode") == 0)) {
    			apiTicket = jResult.getString("ticket");
    			expiresIn = jResult.getIntValue("expires_in");
    		} else {
    			throw new Exception(jResult.getString("errmsg"));
    		}
    	}
    
    	public static String getApiTicket() {
    		return apiTicket;
    	}
    
    	public static void setApiTicket(String apiTicket) {
    		TicketManager.apiTicket = apiTicket;
    	}
    
    	public static int getExpiresIn() {
    		return expiresIn;
    	}
    
    	public static void setExpiresIn(int expiresIn) {
    		TicketManager.expiresIn = expiresIn;
    	}
    
    }

签名工具类JsSignUtil

package com.wx.util

/**
     * 签名工具类
     * 
     * @author Administrator
     * 
     */
    public class JsSignUtil {
    
    	/**
    	 * 签名工具
    	 * 
    	 * @param url
    	 * @return
    	 */
    	public static Map<String, String> sign(String url) {
    		Map<String, String> ret = new HashMap<String, String>();
    		if (TokenManager.getAccessToken().equals("")
    				|| TokenManager.isTokenExpired()) {
    			try {
    				TokenManager.init();
    				TicketManager.init();
    			} catch (Exception e) {
    				e.printStackTrace();
    			}
    		}
    		String jsApiTicket = TicketManager.getApiTicket();
    		String nonceStr = create_nonce_str();
    		String timeStamp = create_timestamp();
    		String signature = "";
    		// 注意这里参数名必须全部小写，且必须有序
    		String str = "jsapi_ticket=" + jsApiTicket + "&noncestr=" + nonceStr
    				+ "×tamp=" + timeStamp + "&url=" + url;
    		Logger.getLogger(TokenManager.class.getName()).info(str);
    		try {
    			MessageDigest crypt = MessageDigest.getInstance("SHA-1");
    			crypt.reset();
    			crypt.update(str.getBytes("UTF-8"));
    			signature = byteToHex(crypt.digest());
    		} catch (NoSuchAlgorithmException e) {
    			e.printStackTrace();
    		} catch (UnsupportedEncodingException e) {
    			e.printStackTrace();
    		}
    		ret.put("url", url);
    		ret.put("jsapi_ticket", jsApiTicket);
    		ret.put("nonceStr", nonceStr);
    		ret.put("timestamp", timeStamp);
    		ret.put("signature", signature);
    		ret.put("appId", AppString.getAppid());
    		Logger.getLogger(TokenManager.class.getName()).info(ret.toString());
    		return ret;
    	}
    
    	/**
    	 * 签名工具，二维码
    	 * 
    	 * @param url
    	 * @return
    	 */
    	public static Map<String, String> sign(HttpServletRequest req) {
    		Map<String, String> ret = new HashMap<String, String>();
    		if (TokenManager.getAccessToken().equals("")
    				|| TokenManager.isTokenExpired()) {
    			try {
    				TokenManager.init();
    				TicketManager.init();
    			} catch (Exception e) {
    				e.printStackTrace();
    			}
    		}
    		String jsApiTicket = TicketManager.getApiTicket();
    		String nonceStr = create_nonce_str();
    		String timeStamp = create_timestamp();
    		String signature = "";
    		String url = req.getScheme() + "://" + req.getServerName() + "/main"; // 二维码扫描页
    		// 注意这里参数名必须全部小写，且必须有序
    		String str = "jsapi_ticket=" + jsApiTicket + "&noncestr=" + nonceStr
    				+ "×tamp=" + timeStamp + "&url=" + url;
    		Logger.getLogger(TokenManager.class.getName()).info(str);
    		try {
    			MessageDigest crypt = MessageDigest.getInstance("SHA-1");
    			crypt.reset();
    			crypt.update(str.getBytes("UTF-8"));
    			signature = byteToHex(crypt.digest());
    		} catch (NoSuchAlgorithmException e) {
    			e.printStackTrace();
    		} catch (UnsupportedEncodingException e) {
    			e.printStackTrace();
    		}
    		ret.put("url", url);
    		ret.put("jsapi_ticket", jsApiTicket);
    		ret.put("nonceStr", nonceStr);
    		ret.put("timestamp", timeStamp);
    		ret.put("signature", signature);
    		ret.put("appId", AppString.getAppid());
    		Logger.getLogger(TokenManager.class.getName()).info(ret.toString());
    		return ret;
    	}
    
    	/**
    	 * 随机加密
    	 * 
    	 * @param hash
    	 * @return
    	 */
    	private static String byteToHex(final byte[] hash) {
    		Formatter formatter = new Formatter();
    		for (byte b : hash) {
    			formatter.format("%02x", b);
    		}
    		String result = formatter.toString();
    		formatter.close();
    		return result;
    	}
    
    	/**
    	 * 产生随机串--由程序自己随机产生
    	 * 
    	 * @return
    	 */
    	private static String create_nonce_str() {
    		return UUID.randomUUID().toString();
    	}
    
    	/**
    	 * 由程序自己获取当前时间
    	 * 
    	 * @return
    	 */
    	private static String create_timestamp() {
    		return Long.toString(System.currentTimeMillis() / 1000);
    	}
    
    }

调用二维码扫描jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*,com.wx.util.*"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>微信扫一扫</title>
    <link href="<%=request.getContextPath()%>/css/app_comm.css" rel="stylesheet" type="text/css" />
    <link href="<%=request.getContextPath()%>/css/app_style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/app_comm.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/common.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    
    <%  
    //UserManager.init(request);
    Map<String, String> ret = new HashMap<String, String>();  
    //ret = JsSignUtil.sign(request.getRequestURL().toString());
    ret = JsSignUtil.sign(request); 
    %>
    
    <script type="text/javascript">  
        wx.config({  
            debug: false,  
            appId: '<%=ret.get("appId")%>',  
            timestamp:'<%=ret.get("timestamp")%>',  
            nonceStr:'<%=ret.get("nonceStr")%>',  
            signature:'<%=ret.get("signature")%>',  
            jsApiList : [ 'checkJsApi', 'scanQRCode' ]  
        });//end_config  
      
        wx.error(function(res) {  
            alert("出错了：" + res.errMsg);  
        });  
      
        wx.ready(function() {  
            wx.checkJsApi({  
                jsApiList : ['scanQRCode'],  
                success : function(res) {  
                }  
            });             
        });//end_ready  
        
        //扫描二维码  
        function qrscan(){      
            wx.scanQRCode({  
                    needResult : 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，  
                    scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码，默认二者都有  
                    success : function(res) {  
                        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果  
                        document.getElementById("qrresult").value = result;//将扫描的结果赋予到jsp对应值上   
                        //将扫描结果放入input页
                        var url = "wx/handleQR?result=" + result;
                        window.location.href = url;                                        
                    }  
            });
        } 
        
        //扫码
        function scancd(){
    	  qrscan();   
        }
    
    </script>
    </head>
    
    <body>
    
    <div class="w_all app_main">
    	<div class="app_ch">
        	<ul>
            	<li><a href="javascript:void(0);" οnclick="scancd()"><b class="ico_app_c1"></b><i>扫码</i></a></li>
            </ul>
            <input type="hidden" id="qrresult" value=""/>
        </div>
    </div>
    </body>
    </html>

完！！！

[Link 1]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
[http_res.wx.qq.com_open_js_jweixin-1.2.0.js]: http://res.wx.qq.com/open/js/jweixin-1.2.0.js
[1]: https://mp.weixin.qq.com/wiki?action=doc&id=mp1421141115&t=0.9257447447429006#62
[2]: https://mp.weixin.qq.com/wiki?action=doc&id=mp1421141115&t=0.9257447447429006#63