参考文档
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("×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包
- npm init 生成package.json文件
- 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>