uni-app接入JSSDK小白指南（前端+后端）

参考文档

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#54

前提说明

对于很多人来讲如何记入jssdk是困难的，这里讲一下uniapp接入jssdk的过程，并给出一个简单实例。

后端提供JS-SDK使用权限签名

下面代码基于附录1做成：

注：getAccessToken就是获取公众号的AccessToken，代码是一样的，我不贴出来了。

    /**
     * 获取微信JS-SDK调用唯一凭证jsapi_ticket,有效期2小时。
     * @return
     */
    public  String getJsapiTicket() {
        String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+getAccessToken()+"&type=jsapi";
        String jsapiTicket=null;
        String ticket = (String) redisTemplate.opsForValue().get(appid+"jsapi_ticket");
        if(!StringUtils.isEmpty(ticket)){
            jsapiTicket =ticket; //redis获取token
        }else {
            JSONObject jsonObject = restTemplate.getForObject(url,JSONObject.class);
            // 如果请求成功
            if (null != jsonObject && jsonObject.containsKey("ticket")) {
                jsapiTicket = jsonObject.getString("ticket"); //从微信客户端获取token
                redisTemplate.opsForValue().set(appid+"jsapi_ticket",jsapiTicket,jsonObject.getInteger("expires_in"), TimeUnit.SECONDS);
            }else {
                logger.error(jsonObject.toJSONString());
                throw new CommonException(999,"jsapi_ticket获取失败");
            }
        }
        logger.info("获取wx jsapiTicket 结果",jsapiTicket);
        return jsapiTicket;
    }

获取签名，并返回给前端

@Override
public AjaxResult authJSSDK() {
    String jsapi_ticket = getJsapiTicket();
    String noncestr = WXPayUtil.generateNonceStr();
    Long timestamp = WXPayUtil.getCurrentTimestamp();
    String url="https://xxx.xxx.com/index.html/";
    String signature = genSignatureJSSDK( noncestr,jsapi_ticket,timestamp, url);
    Map  map = new HashMap();
    map.put("noncestr",noncestr);
    map.put("timestamp",timestamp);
    map.put("signature",signature);
    return AjaxResult.success(map);
}


private String genSignatureJSSDK(String noncestr,String jsapi_ticket,Long timestamp,String url) {
    StringBuffer sb = new StringBuffer();
    sb.append("jsapi_ticket=" +jsapi_ticket)
      .append("&noncestr=" + noncestr)
      .append("×tamp=" + timestamp)
      .append("&url=" + "1558626281");
      logger.info("genSignatureJSSDK：" + sb.toString());
    return WXPayUtil.sha1(sb.toString().trim());
}


    /**
     * sha1签名算法
     * @param decript
     * @return
     */
    public static String sha1(String decript) {
        try {
            MessageDigest digest = java.security.MessageDigest.getInstance("SHA-1");
            digest.update(decript.getBytes());
            byte messageDigest[] = digest.digest();
            // Create Hex String
            StringBuffer hexString = new StringBuffer();
            // 字节数组转换为 十六进制 数
            for (int i = 0; i < messageDigest.length; i++) {
                String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);
                if (shaHex.length() < 2) {
                    hexString.append(0);
                }
                hexString.append(shaHex);
            }
            return hexString.toString();

        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        }
        return "";
    }

Uni-app接入

上面接口返回样式

{"signature":"385b44e0fdbb4e6850dc0ecf96252005fb579bf0","noncestr":"ePBnez5SEPrqKalrNGtTu9KNmBWWzauZ","timestamp":1572066612}

安装npm包

1. npm init 生成package.json文件
2. npm install jweixin-module --save 导入jssdk包
   

main.js中引入

Vue.prototype.$wx 设置全局变量，在VUE的任何地方可以通过 $wx直接引入wx实例。

let jweixin = require('jweixin-module')  

Vue.prototype.$wx = jweixin


const app = new Vue({
    ...App
})
app.$mount()

页面使用

this.$wx.config 用来接收后端接口的签名，如果成功调用 wx.ready方法，失败调用wx.error方法。
如果控制台打印“验证通过”说明接口通过。