微信公众平台开发历程（四）

微信JSSDK调用

微信jssdk调用和授权一样，需要配置接口域名。

在每个需要调用sdk的页面上都加上一个外联的js：<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

并且要注入一下权限的验证配置：

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

参数解读

    signature签名

   其他的参数其实很好搞定，这个签名参数生成是：

   1、首先你要有一个参数，叫做 jsapi_ticket，前文中在accesstoken获取的地方我有提到过，这个参数和accesstoken一样，每天的调用次数有限，所以要和accesstoken一样使用线程去调用它，全局缓存这个参数，需要的时候调用，获取方式请看微信官方api。

   2、签名算法官方给出的是：

微信官方也给了一个算法的demo（ http://demo.open.weixin.qq.com/jssdk/sample.zip），可以自行下载。

校验是否正确的页面

还有一个校验加密是否正确的页面：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

这个加密很多被坑的地方就是获取当前网页的url，我这里试了很多种方法都加密不正确，最后用了微信给的脚本方法：

var url = location.href.split('#')[0];

获取到这个以后所有的参数用ajax传到后台加密，然后再传回前台脚本中。

调起接口

我们这里先讲一个调起扫码的接口：

签名加密有了之后，jsApiList里面加入你需要的及接口名称，例如：

wx.config({
	debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	appId: '<%=Configure.appId %>', 
	timestamp: timestamp, 
	nonceStr: nonceStr, 
	signature: signature,
	jsApiList: ['chooseWXPay', 'scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

如何调起接口：

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

给某一个按钮或者超链接加上这个click时间，就可以调起扫码接口了。

附上注入配置的脚本

$(function() {
	var url = location.href.split('#')[0];
  	var timestamp, nonceStr, signature;
  	$.ajax({
                type : "post",
		url : "<%=basePath %>/pay/ajax.jsp",
		data : {
			"jsapi_ticket" : '<%=TokenThread.jsapi_ticket %>',
			"url" : url
		},
		dataType : "json",
		async: false,
		success : function(data) {
			timestamp = data.timestamp;
			nonceStr = data.nonceStr;
			signature = data.signature;
		},
		error : function(XMLHttpRequest) {
		},
	});
	wx.config({
	    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	    appId: '<%=Configure.appId %>', 
	    timestamp: timestamp, 
	    nonceStr: nonceStr, 
	    signature: signature,
	    jsApiList: ['chooseWXPay', 'scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});
});

ajax.jsp

request.setCharacterEncoding("UTF-8");

String jsapi_ticket = request.getParameter("jsapi_ticket");
String url = request.getParameter("url");

Map<String, String> ret = SignUtil.sign(jsapi_ticket, url);

JSONObject object = new JSONObject();

for (Map.Entry entry : ret.entrySet()) {
	object.put(entry.getKey(), entry.getValue());
}

out.println(object);
out.flush();
out = pageContext.pushBody();

SignUtil.java的sign方法

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;
	System.out.println(string1);
	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;
}