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 <String,Object> 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("&timestamp=" + 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方法。
如果控制台打印“验证通过”说明接口通过。

<template>
	<view>
		<button type="primary" @tap="sharetoWx">分享按钮</button>
	</view>
</template>

<script>
	export default {
		onLoad() {
		 this.$http.get('wxaccount/portal/authJSSDK').then(e => {
			console.log("e: " + JSON.stringify(e));
			this.init(e);
		 }) 
		},
		data() {
			return {
				wxconfig:''
			}
		},
		methods: {
			init(e){
				let _this = this;
				this.$wx.config({
				   debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				   appId: 'xxxx', // 必填，公众号的唯一标识
				   timestamp: e.timestamp, // 必填，生成签名的时间戳
				   nonceStr: e.nonceStr, // 必填，生成签名的随机串
				   signature: e.signature,// 必填，签名
				   jsApiList: ["chooseImage"] // 必填，需要使用的JS接口列表
				 });
				this.$wx.ready(function(){
					console.log("验证通过")
				  _this.$wx.checkJsApi({
					  jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
					  success: function(res) {
						console.log("res: " + res);
					  }
					});
				});
				this.$wx.error(function(res){
					console.log("验证失败")
				});
			},
			sharetoWx(){
				 this.$wx.updateAppMessageShareData({ 
					title: '我的分享测试', // 分享标题
					desc: '分享的内容', // 分享描述
					link: 'www.baidu.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: '', // 分享图标
					success: function () {
						toast("分享成功")
					}
				  })

			}
		}
	}
</script>

<style>

</style>