本文共 4854 字，大约阅读时间需要 16 分钟。

参考文档

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;    }

获取签名，并返回给前端

@Overridepublic 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 = jweixinconst 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>