参考微信JS-SDK说明文档 看到网上很多都说微信的说明文档很坑，在我看来，仔细阅读的话，介绍还是很全的。
1.首先在JSP页面引入http://res.wx.qq.com/open/js/jweixin-1.1.0.js
2.通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，企业号的唯一标识，此处填写企业号corpid
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});3.通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});4.通过error接口处理失败验证
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});5.调起微信扫一扫
wx.scanQRCode({
desc: 'scanQRCode desc',
needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
// 回调
}
error: function(res){
if(res.errMsg.indexOf('function_not_exist') > 0){
alert('版本过低请升级')
}
}
});具体代码实现如下：
scanBarcode.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh-CN">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<head>
<link rel="stylesheet" href="http://203.195.235.76/jssdk/css/style.css"/>
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<link rel="stylesheet" href="../../../resources/css/example.css"/>
<link rel="stylesheet" href="../../../resources/css/weui.min.css"/>
<link rel="stylesheet" href="../../../resources/css/borrowScan.css"/>
</head>
<body>
<div class="container" style="text-align: center;">
<div class="body_bd body_fd">
<a class="weui-btn weui-btn-primary weui-btn-zdy" id="scanQRCode1">
<p>扫描条码</p>
</a>
</div>
</div>
<script type="text/javascript">
$.ajax({
url: "${pageContext.request.contextPath}/wechat/jsapisign",
type: "post",
data: {
url: location.href.split('#')[0]
},
contentType: 'application/x-www-form-urlencoded;charset=utf-8',
async: true,
success: function (data) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appid, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature,// 必填，签名，见附录1
jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
}
});
wx.ready(function () {
// 9.1.2 扫描二维码并返回结果
document.querySelector('#scanQRCode1').onclick = function () {
wx.scanQRCode({
needResult: 1,
desc: 'scanQRCode desc',
success: function (res) {
//扫码后获取结果参数赋值给Input
var url = res.resultStr;
//商品条形码，取","后面的
if (url.indexOf(",") >= 0) {
var tempArray = url.split(',');
var barCode = tempArray[1];
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${basePath}/wechat/toBookDetail?barCode=" + barCode + "&response_type=code&scope=snsapi_base&state=BINDFACE#wechat_redirect";
} else {
alert("请对准条形码扫码!");
}
}
});
};
});
//初始化jsapi接口 状态
wx.error(function (res) {
alert("调用微信jsapi返回的状态:" + res.errMsg);
});
</script>
</body>
</html>微信验签代码 WxController.java
/**
* 微信验签
* @param url
* @return
*/
@RequestMapping(value = "/jsapisign", method = {RequestMethod.GET, RequestMethod.POST}, produces = MEDIATYPE_CHARSET_JSON_UTF8)
@ResponseBody
public String jsApiSign(String url) {
//添加微信js签名信息
Map<String, String> signMap = WXJsapiticket.jsApiSign(url);
return JSON.toJSONString(signMap);
}用到的方法类
WXJsapiticket.java
public class WXJsapiticket {
private static Logger logger = LoggerFactory.getLogger(WxController.class);
/**
* 微信jsapi验签
* @param url
* @return
*/
public static Map<String, String> jsApiSign(String url) {
Map<String, String> ret = new HashMap<String, String>();
String nonce_str = CheckUtil.create_nonce_str();
String timestamp = CheckUtil.create_timestamp();
String jsapi_ticket = getJsApiTicket();
String string1 = CheckUtil.getString1(nonce_str,timestamp,jsapi_ticket,url);
String signature = CheckUtil.getSha1(string1);
ret.put("appid", WXConstants.APPID);//取你自己的公众号appid
ret.put("url", url);
ret.put("jsapi_ticket", jsapi_ticket);
ret.put("nonceStr", nonce_str);
ret.put("timestamp", timestamp);
ret.put("signature", signature);
logger.info("jsApiSign------url=" + url + "-----jsapi_ticket=" + jsapi_ticket + "--------nonceStr=" + nonce_str + "--------timestamp=" + timestamp + "-------signature=" + signature);
return ret;
}
public static String getJsApiTicket(){
Map<String,Object> map = JsApiTicketCache.getInstance().getJsApiTicketAndExpiresIn();
return (String) map.get("jsapi_ticket");
}
}CheckUtil.java
public class CheckUtil {
public static final String token = "xiaodou"; //开发者自行定义Token
/**
* 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式 （即 key1=value1&key2=value2…）拼接成字符串string1
* @param nonce_str
* @param timestamp
* @param jsapi_ticket
* @param url
* @return
*/
public static String getString1(String nonce_str,String timestamp,String jsapi_ticket,String url){
//1.定义数组存放nonce_str,timestamp,jsapi_ticket,url
String[] arr = {"noncestr="+nonce_str,"timestamp="+timestamp,"jsapi_ticket="+jsapi_ticket,"url="+url};
//2.对数组进行排序
Arrays.sort(arr);
//3.生成字符串
StringBuffer sb = new StringBuffer();
for(String s : arr){
sb.append(s);
sb.append("&");
}
sb.deleteCharAt(sb.length()-1);
return sb.toString();
}
public static String getSha1(String str){
if(str==null||str.length()==0){
return null;
}
char hexDigits[] = {'0','1','2','3','4','5','6','7','8','9',
'a','b','c','d','e','f'};
try {
MessageDigest mdTemp = MessageDigest.getInstance("SHA1");
mdTemp.update(str.getBytes("UTF-8"));
byte[] md = mdTemp.digest();
int j = md.length;
char buf[] = new char[j*2];
int k = 0;
for (int i = 0; i < j; i++) {
byte byte0 = md[i];
buf[k++] = hexDigits[byte0 >>> 4 & 0xf];
buf[k++] = hexDigits[byte0 & 0xf];
}
return new String(buf);
} catch (Exception e) {
// TODO: handle exception
return null;
}
}
public static String create_nonce_str() {
return UUID.randomUUID().toString();
}
public static String create_timestamp() {
return Long.toString(System.currentTimeMillis() / 1000);
}
}JsApiTicketCatch.java(对jsapi_ticket的缓存可自行设置，redis或者存到数据库都是可行的)
/**
* 缓存ticket
*/
public class JsApiTicketCache {
//缓存jsapi_ticket的Map,map中包含jsapiTicket,expiresIn和缓存的时间戳time
private Map<String, String> map = new HashMap<String,String>();
private static JsApiTicketCache jsApiTicketCache = null;
private JsApiTicketCache() { }
// 静态工厂方法
public static JsApiTicketCache getInstance() {
if (jsApiTicketCache == null) {
jsApiTicketCache = new JsApiTicketCache();
}
return jsApiTicketCache;
}
public Map<String, String> getMap() {
return map;
}
public void setMap(Map<String, String> map) {
this.map = map;
}
/**
* 获取 jsapi_ticket expires_in
* @return
*/
public Map<String,Object> getJsApiTicketAndExpiresIn() {
Map<String,Object> result = new HashMap<String,Object>();
JsApiTicketCache jsApiTicketCache = JsApiTicketCache.getInstance();
Map<String, String> map = jsApiTicketCache.getMap();
String time = map.get("time");
String jsapiTicket = map.get("jsapi_ticket");
String expiresIn = map.get("expires_in");
Long nowDate = new Date().getTime();
if (jsapiTicket != null && time != null && expiresIn!=null) {
//这里设置过期时间为微信规定的过期时间减去5分钟
int outTime = (Integer.parseInt(expiresIn)-300) * 1000;
if (nowDate - Long.parseLong(time) < outTime) {
System.out.println("-----从缓存读取jsapi_ticket：" + jsapiTicket);
//从缓存中拿数据为返回结果赋值
result.put("jsapi_ticket", jsapiTicket);
result.put("expires_in", expiresIn);
}
} else {
JsapiTicket info = WeiXinUtil.getjsapiTicket();//实际中这里要改为你自己调用微信接口去获取jsapi_ticket和expires_in
System.out.println("-----通过调用微信接口获取jsapi_ticket：" + info.getJsapiTicket());
//将信息放置缓存中
map.put("time", nowDate + "");
map.put("jsapi_ticket", info.getJsapiTicket());
map.put("expires_in", info.getExpiresIn()+"");
//为返回结果赋值
result.put("jsapi_ticket", info.getJsapiTicket());
result.put("expires_in", info.getExpiresIn());
}
return result;
}
}WeiXinUtil.java
jsapi_ticket_url="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";//GET方式请求获得jsapi_ticket/**
* 获取jsapi_ticket
* @return
*/
public static JsapiTicket getjsapiTicket() {
JsapiTicket jsapiTicket = null ;
String accessToken = (String) AccessTokenCache.getInstance().getAcessTokenAndExpiresIn().get("access_token");
String requestUrl = WXConstants.jsapi_ticket_url.replace("ACCESS_TOKEN", accessToken);
JSONObject jsonObject = httpRequest(requestUrl, "GET", null);
// 如果请求成功
if (null != jsonObject) {
try {
jsapiTicket = new JsapiTicket();
jsapiTicket.setJsapiTicket(jsonObject.getString("ticket"));
jsapiTicket.setExpiresIn(jsonObject.getInt("expires_in"));
} catch (JSONException e) {
jsapiTicket = null;
// 获取token失败
log.error("获取ticket失败 errcode:{} errmsg:{}", jsonObject.getInt("errcode"), jsonObject.getString("errmsg"));
}
}
return jsapiTicket;
}accessToken的获取参照微信公众号开发之获取access_token，也可根据自己的定义获取。
JsapiTicket.java
public class JsapiTicket {
private String id;
private String jsapiTicket;
private int expiresIn;
public String getJsapiTicket() {
return jsapiTicket;
}
public void setJsapiTicket(String jsapiTicket) {
this.jsapiTicket = jsapiTicket;
}
public int getExpiresIn() {
return expiresIn;
}
public void setExpiresIn(int expiresIn) {
this.expiresIn = expiresIn;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
}在这里总结一下开发中需要注意的地方（我遇到的坑）：
1.确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。
2.在生成string1时，拼接的参数均为小写，特别注意noncestr，而在jsp页面中为nonceStr（所有的参数一定要根据微信接口中的定义，否则会导致验签失败）。
3.验证签名是否正确，可在 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign页面工具进行校验。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
