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

2023-01-29 20:50:58

概述

　　微信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的初始化工作就已经完成了。

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

码农公寓

相关文章