微信企业号开发七：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可以在这里更新签名。

});