- 概述
微信JS的使用方法，官方文档已经描述得比较清楚了，这里我就不重复介绍了，本文意在提供现成的代码，供大家快速迭代开发，以及补充一下官方文档描述得不够清楚的地方，避免大家踩相同的坑。
- 微信JS初始化所需参数
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});- JS-SDK使用权限签名算法
签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。
通过上述的签名生成规则可以看出，要想获得签名，必须先获得jsapi_ticket，而jsapi_ticket的获取则需要通过access_token（获取access_token的方法后续文章进行说明）获得。由于jsapi_ticket的有效期为7200秒，因此必须缓存起来，一旦过期就要重新获取。获取jsapi_ticket的代码如下：
private boolean checkJsapiTicketEffective(){
Long currentTime = new Date().getTime();
if(weixinGetJsapiTicketResult==null
|| StringUtil.isEmpty(weixinGetJsapiTicketResult.getTicket())
|| currentTime>weixinGetJsapiTicketEffectiveTime){
return false;//失效
}else{
return true;//有效
}
}
@Override
public String getJsapiTicket() {
if(checkJsapiTicketEffective()){//有效
return weixinGetJsapiTicketResult.getTicket();
}else{//失效
Map<String, String> param = new HashMap<String, String>();
param.put("access_token", getAccessToken().trim());
param.put("type", "jsapi");
String responseJson= null;
try {
responseJson = WeixinWebUtil.doGet("https://api.weixin.qq.com/cgi-bin/ticket/getticket", param, "UTF-8", 3000, 3000);
if(StringUtil.isEmpty(responseJson)){
logger.error("获取 jsapi_ticket 失败");
throw new BusinessException(ResGlobal.ERRORS_USER_DEFINED, new String[]{"获取 jsapi_ticket 失败"});
}
weixinGetJsapiTicketResult = JsonBinder.buildNormalBinder().toBean(responseJson, WeixinGetJsapiTicketResult.class);
if(weixinGetJsapiTicketResult.getErrcode()!=0){
logger.error("获取 jsapi_ticket 失败, responseJson: " + responseJson);
throw new BusinessException(ResGlobal.ERRORS_USER_DEFINED, new String[]{"获取 jsapi_ticket 失败"});
}
Long currentTime = new Date().getTime();
weixinGetJsapiTicketEffectiveTime = currentTime + weixinGetJsapiTicketResult.getExpires_in() * 1000;
return weixinGetJsapiTicketResult.getTicket();
} catch (IOException e) {
logger.error("获取 jsapi_ticket 失败");
throw new BusinessException(ResGlobal.ERRORS_USER_DEFINED, new String[]{e.getMessage()});
}
}
}在获得jsapi_ticket后，可以根据签名生成规则生成签名，具体代码如下：
@Override
public WeixinJsSdkConfigVO getWeixinJsConfig(String signUrl) {
try {
signUrl = URLDecoder.decode(signUrl, "UTF-8");
WeixinConfig weixinConfig = ServiceManager.objectEnginService.getObject(ObjectEngineTypeCodeEnum.VMALL_BASE_CONFIG, Global.OBJECT_ENGIN_WEIXIN_BASE_INFO_ID, WeixinConfig.class);
String ticket = ServiceManager.weixinApiService.getJsapiTicket();
WeixinJsSdkConfigVO weixinJsSdkConfigVO = new WeixinJsSdkConfigVO();
weixinJsSdkConfigVO.setAppId(weixinConfig.getAppId());
weixinJsSdkConfigVO.setNonceStr(UUID.randomUUID().toString());
weixinJsSdkConfigVO.setTimestamp(Long.toString(System.currentTimeMillis() / 1000)); StringBuffer signature = new StringBuffer("");
signature.append("jsapi_ticket=");
signature.append(ticket);
signature.append("&noncestr=");
signature.append(weixinJsSdkConfigVO.getNonceStr());
signature.append("×tamp=");
signature.append(weixinJsSdkConfigVO.getTimestamp());
signature.append("&url=");
signature.append(signUrl); MessageDigest crypt = MessageDigest.getInstance("SHA-1");
crypt.reset();
crypt.update(signature.toString().getBytes("UTF-8"));
weixinJsSdkConfigVO.setSignature(byteToHex(crypt.digest()));
return weixinJsSdkConfigVO;
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
logger.error(e.getMessage());
throw new BusinessException(ResGlobal.ERRORS_USER_DEFINED, new String[]{"获取JsSDK初始化参数异常"});
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
logger.error(e.getMessage());
throw new BusinessException(ResGlobal.ERRORS_USER_DEFINED, new String[]{"获取JsSDK初始化参数异常"});
}
}
- 页面微信JS初始化
//引入JS文件
<script type="text/javascript" src="${webRoot}/template/green/wap/statics/js/jweixin-1.0.0.js"></script>
$(function(){
var signUrl = location.href.split('#')[0];
signUrl = encodeURIComponent(signUrl);
$.ajax({
type:"POST",
url: webPath.webRoot + "/wxsdk/getWeixinJsConfig.json",
data:{'signUrl':signUrl},
dataType:'json',
success:function(msg) {
if(msg.result == "success"){
var weixinJsSdkConfig = msg.weixinJsSdkConfig;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: weixinJsSdkConfig.appId, // 必填，公众号的唯一标识
timestamp: weixinJsSdkConfig.timestamp, // 必填，生成签名的时间戳
nonceStr: weixinJsSdkConfig.nonceStr, // 必填，生成签名的随机串
signature: weixinJsSdkConfig.signature,// 必填，签名，见附录1
jsApiList: ['chooseImage', 'uploadImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
}else{
showError("初始化失败，请稍后再试。");
}
},
error:function(XMLHttpRequest, textStatus) {
if (XMLHttpRequest.status == 500) {
var result = eval("(" + XMLHttpRequest.responseText + ")");
showError(result.errorObject.errorText);
return false;
}
}
});
});特别需要注意的地方是页面链接的获取方式，以及在把页面链接传递到后台前，必须要先编码，后台生成签名前再进行解码，避免乱码的情况。至此，微信JS的初始化工作就已经完成了。