微信企业号开发七：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', //必填，企业号的唯一标识，此处填写企业号corpidtimestamp : "${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秒)申请，否则不用请求直接返回以后的tokenif(null==jsapi_ticket||"".equals(jsapi_ticket)||(new Date().getTime()-jsapi_ticket_date.getTime())>=(7000*1000)){CloseableHttpClient httpclient = HttpClients.createDefault();try {//利用get形式获得tokenHttpGet httpget = new HttpGet("https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token="+token);// Create a custom response handlerResponseHandler<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: '', // 必填，企业号的唯一标识，此处填写企业号corpidtimestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名，见附录1jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

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

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

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

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