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

我会带着你远行 2023-06-10 07:23 91阅读 0赞

## 参考文档 ##

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包  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]

### 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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]: /images/20230531/1548eaa39e75418f8f2fd43afdeb4443.png