微信企业号开发七：JSAPI模式

微信中的第三个模式就是JSAPI模式，这里面可以查看地理位置、分享qq、扫一扫等功能，这个功能的使用

1、在页面引入js

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>/2、

2、页面增加config()方法，config信息验证后会执行ready方法，所有接口操作写在ready()中

wx.config({
		debug : false, //开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId : 'wxd187a91ce6c62d27', //必填，企业号的唯一标识，此处填写企业号corpid
		timestamp : "${time}", //必填，生成签名的时间戳
		nonceStr : '${nonceStr}', // 必填，生成签名的随机串
		signature : '${str1}',// 必填，签名
		jsApiList : ['hideOptionMenu','getLocation','checkJsApi']// 必填，需要使用的JS接口列表
	});
	
	wx.ready(function(){
		// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
		wx.hideOptionMenu();
		locationAgain();//获取位置
	});

3、在后台获取，js验证信息，在获得验证信息之前需要获得jsapi_ticket，jsapi_ticket也有次数限制，处理方法跟之前的token一样

HttpServletRequest req = ServletActionContext.getRequest();
		//识别微信浏览器
		String userAgent=req.getHeader("User-Agent");//里面包含了设备类型
		if(-1==userAgent.indexOf("MicroMessenger")){
			//如果不是微信浏览器,跳转到安全页
			return "safePage";
		}
		
		//生成微信js授权
		MessageUtil msgUtil=new MessageUtil();
		String jsapi_ticket=msgUtil.getJsapiTicketFromWx();//签名
		String url = MessageUtil.webUrl+"*******Action.do?action=retrieve";
        Map<String, String> ret = MessageUtil.sign(jsapi_ticket, url);
        
		req.setAttribute("str1", ret.get("signature"));
		req.setAttribute("time", ret.get("timestamp"));
		req.setAttribute("nonceStr", ret.get("nonceStr"));

---------------------------------------------------------------------------------------------------------------

--------从微信获得jsapi_ticket

---------------------------------------------------------------------------------------------------------------

/**
	 * 从微信获得jsapi_ticket
	 * @return
	 */
	public  String getJsapiTicketFromWx(){
		String token=getTokenFromWx();//token
		//1、判断jsapi_ticket是否存在，不存在的话直接申请
        //2、判断时间是否过期，过期(>=7200秒)申请，否则不用请求直接返回以后的token
		if(null==jsapi_ticket||"".equals(jsapi_ticket)||(new Date().getTime()-jsapi_ticket_date.getTime())>=(7000*1000)){
		
			CloseableHttpClient httpclient = HttpClients.createDefault();
	        try {
	        	//利用get形式获得token
	            HttpGet httpget = new HttpGet("https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token="+token);
	            // Create a custom response handler
	            ResponseHandler<JSONObject> responseHandler = new ResponseHandler<JSONObject>() {
	
	                public JSONObject handleResponse(
	                        final HttpResponse response) throws ClientProtocolException, IOException {
	                    int status = response.getStatusLine().getStatusCode();
	                    if (status >= 200 && status < 300) {
	                        HttpEntity entity = response.getEntity();
	                        if(null!=entity){
	                        	String result= EntityUtils.toString(entity);
	                            //根据字符串生成JSON对象
	                   		 	JSONObject resultObj = JSONObject.fromObject(result);
	                   		 	return resultObj;
	                        }else{
	                        	return null;
	                        }
	                    } else {
	                        throw new ClientProtocolException("Unexpected response status: " + status);
	                    }
	                }
	
	            };
	            //返回的json对象
	            JSONObject responseBody = httpclient.execute(httpget, responseHandler);
	            if(null!=responseBody){
	            	jsapi_ticket= (String) responseBody.get("ticket");//返回token
	            }
	            jsapi_ticket_date=new Date();
	            httpclient.close();
	        }catch (Exception e) {
				e.printStackTrace();
			} 
		}
		return jsapi_ticket;
	}

---------------------------------------------------------------------------------------------------------------

--------JsApi签名方法

---------------------------------------------------------------------------------------------------------------

/****微信js签名***********************************/
	 
	public static Map<String, String> sign(String jsapi_ticket, String url) {
        Map<String, String> ret = new HashMap<String, String>();
        String nonce_str = create_nonce_str();
        String timestamp = create_timestamp();
        String string1;
        String signature = "";

        //注意这里参数名必须全部小写，且必须有序
        string1 = "jsapi_ticket=" + jsapi_ticket +
                  "&noncestr=" + nonce_str +
                  "×tamp=" + timestamp +
                  "&url=" + url;
        try
        {
            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
            crypt.reset();
            crypt.update(string1.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", jsapi_ticket);
        ret.put("nonceStr", nonce_str);
        ret.put("timestamp", timestamp);
        ret.put("signature", signature);

        return ret;
    }

    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;
    }

    private static String create_nonce_str() {
        return UUID.randomUUID().toString();
    }

    private static String create_timestamp() {
        return Long.toString(System.currentTimeMillis() / 1000);
    }
    /****微信js签名***********************************/

步骤一：引入JS文件

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

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

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

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

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

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

wx.ready(function(){

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

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

wx.error(function(res){

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

});