微信JS初始化--微信JS系列文章（一）

• 概述

　　微信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("&timestamp=");
        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的初始化工作就已经完成了。

欢迎转载，转载必须标明出处