vue项⽬中企业使⽤js-sdk时config和agentConfig配置
1.如果只使⽤config配置的相关js接⼝可采⽤如下⽅式引⼊
执⾏ npm weixin-sdk-js --save
局部引⼊在vue页⾯中 import wx from 'weixin-sdk-js';
全局引⼊在vue 的main.js 页⾯中引⼊后编写到vue原型链上，然后全局调⽤
import wx from "weixin-sdk-js";
Vue.prototype.$wx = wx;
2.如果要使⽤agentConfig配置的相关接⼝⼀定不要执⾏npm命令引⼊，如果执⾏了npm 命令，请执⾏卸载指令 npm uninstall weixin-sdk-js --save ，然后在vue项⽬中的index.html页⾯中引⼊官⽹相关sdk-js的js
原因：因为agentConfig 使⽤的js 没有npm对应的指令(只是因为我没到..)。
说明: 第⼀个js（上⾯的js）链接为config配置⽤到的js
第⼆个js（下⾯的js）链接为agentconfig配置⽤的到js
3.引⼊sdk-js中的wx 使⽤相关⽅法引⼊⽅式分全局引⼊和局部引⼊
a.局部引⼊在要想调⽤ wx sdk相关接⼝的页⾯（本⼈使⽤的局部，因为就⼀个页⾯使⽤）
b.全局引⼊在main.js⽂件中引⼊写⼊到vue原型链上⽅便全局调⽤
然后再要使⽤的页⾯的script区域代码中使⽤ this.$wx 即可调⽤ ($wx 为你⾃定义的变量名)
设置了相关参数，如果验证通过会⽴即执⾏wx.ready()⽅法了。这时整个页⾯就可以调⽤jsApiList中的相关接⼝⽅法了。
5.agentConfig 配置验证参数⾃⾏设置
注⼊相关配置参数，执⾏逻辑同config⼀样
需要注意的是如果想使⽤有agentConfig验证的相关接⼝⽅法，最好在config配置认证通过后的ready()函数中执⾏agentConfig 配置认证这样做的原因：
然后整个页⾯也就可以调⽤agentConfig配置中 jsApiList ⾥的所有接⼝⽅法了。
注意：jsApiList中的⽅法不⼀定可⽤，因为跟后台配置有⼀定关系。详情参考官⽹说明。所以最好是校验⼀下jsApiList中哪些⽅法是可⽤的.
6. 附上本⼈编写的前端代码，以及后端获取相关配置参数的java代码
前端 vue ：
<script>
import axios from "axios";
let wx = window.wx;
export default {
name: "Home",
data() {
return {
config: "",
agent_config: ""
};
},
methods: {
//获取相关验证配置信息
getConfig(type) {
let url = "获取config或agentConfig配置的参数接⼝";
//该paramUrl 为你使⽤sdk-js相关接⼝的页⾯地址该地址需要配置到应⽤后台的可信域名下
let paramUrl = window.location.href.split("#")[0];
let that = this;
let param = { url: paramUrl };
if (type === "agent_config") {
}
axios
.get(url, {
params: param
})
.then(function (rsp) {
if (rsp.data.success) {
that[type] = rsp.data.data;
if (type === "config") {
thatpanyConfigInit(that[type]);
} else {
that.appConfigInit(that[type]);
}
}
})
.catch(function (err) {
console.log(err);
});
},
//企业验证配置
companyConfigInit(config) {
let that = this;
beta: true, // 必须这么写，否则wx.invoke调⽤形式的jsapi会有问题
debug: false, // 开启调试模式，调⽤的所有api的返回值会在客户端alert出来，若要查看传⼊的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: config.appId, // 必填，企业的corpID
timestamp: config.timestamp, // 必填，⽣成签名的时间戳
nonceStr: Str, // 必填，⽣成签名的随机串
signature: config.signature, // 必填，签名，见附录-JS-SDK使⽤权限签名算法
jsApiList: [], //你要调⽤的sdk接⼝
必填，需要使⽤的JS接⼝列表，凡是要调⽤的接⼝都需要传进来
});
// config信息验证后会执⾏ready⽅法，所有接⼝调⽤都必须在config接⼝获得结果之后，
// config是⼀个客户端的异步操作，所以如果需要在页⾯加载时就调⽤相关接⼝，
// 则须把相关接⼝放在ready函数中调⽤来确保正确执⾏。
// 对于⽤户触发时才调⽤的接⼝，则可以直接调⽤，不需要放在ready函数中。
//执⾏你的业务逻辑代码
//......
//如果要使⽤到agent_config相关接⼝初始化agentConfig配置
});
<(function (res) {
console.log(res);
// config信息验证失败会执⾏error函数，如签名过期导致验证失败
// ，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，
// 对于SPA可以在这⾥更新签名。
});
},
//应⽤验证配置
appConfigInit(config) {
let that = this;
wx.agentConfig({
corpid: pid, // 必填，企业的corpid，必须与当前登录的企业⼀致
agentid: config.agentid, // 必填，企业的应⽤id （e.g. 1000247）
timestamp: config.timestamp, // 必填，⽣成签名的时间戳
nonceStr: Str, // 必填，⽣成签名的随机串
signature: config.signature, // 必填，签名，见附录-JS-SDK使⽤权限签名算法
jsApiList: [], //你要调⽤的sdk接⼝必填
success: function () {
//查看相关接⼝是否可以调⽤
//that.checkJsApi();
},
fail: function (res) {
if (Msg.indexOf("function not exist") > -1) {
alert("版本过低请升级");
}
},
});
},
//查看可调⽤的接⼝
checkJsApi() {
wx.checkJsApi({
网络连接失败jsApiList: [
], // 需要检测的JS接⼝列表
success: function (res) {
// 以键值对的形式返回，可⽤的api值true，不可⽤为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
let obj = res.checkResult;
alert(
obj["getCurExternalContact"] +
"," +
obj["getContext"] +
"," +
obj["agentConfig"] +
"," +
obj["selectExternalContact"] +
","
);
},
});
}
},
created() {
},
};
</script>
后端java代码 controller ：
Logger logger = Class());
/**
* 应⽤secret
*/
private final String secretId = "";
/**
* 应⽤ID
*/
private final String agentId = "";
/
**
* 企业ID
*/
private final String corpId = ""
@GetMapping(value = "/getConfig")
public Result getWeiXinPermissionsValidationConfig(@RequestParam("url") String url,
@RequestParam(value = "type", required = false) String type) { if (StringUtils.isEmpty(url)) {
return new Result().fail().put("msg", "参数⾮法");
}
Map<String, Object> data = new HashMap<>();
//临时票据
String ticket;
if (ObjectUtils.isEmpty(type)) {
ticket = JsApiTicket(secretId, null);
data.put("appId", corpId);
logger.info("get company temp ticket is ："+ticket);
} else {
ticket = JsApiTicket(secretId, type);
data.put("agentid", agentId);
data.put("corpid", corpId);
logger.info("get app temp ticket is ："+ticket);
}
if (StringUtils.isEmpty(ticket)) {
return new Result().fail().put("msg", "获取临时票据失败!");
}
//当前时间戳转成秒
long timestamp = System.currentTimeMillis() / 1000;
//随机字符串
String nonceStr = "Wm3WZYTPz0wzccnW";
String signature = getSignature(ticket, nonceStr, timestamp, url);
data.put("timestamp", timestamp);
data.put("nonceStr", nonceStr);
data.put("signature", signature);
return new Result().put("data", data);
}
private String getSignature(String ticket, String nonceStr, long timestamp, String url) {
try {
String unEncryptStr = "jsapi_ticket=" + ticket + "&noncestr=" + nonceStr + "×tamp=" + timestamp + "&url=" + url; MessageDigest sha = Instance("SHA");
// 调⽤digest⽅法，进⾏加密操作
byte[] cipherBytes = sha.Bytes());
String encryptStr = deHexString(cipherBytes);
return encryptStr;
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
}
return null;
}
WeChatApiUtil⼯具类获取ticket
/**
* 存放ticket的容器
*/
private static Map<String, Ticket> ticketMap = new HashMap<>();
@Data
private static class Ticket {
private String ticket;
private Long valid;
}
/**
* 获取ticket
* @paran type
* @param accessToken
* @return
*/
public static String getJsApiTicket(String secretId,String type) {
//getAccessToken()获取accessToken 请参考官⽹⾃⾏实现就不贴代码了
// work.weixin.qq/api/doc/90000/90135/91039
String accessToken = getAccessToken(secretId);
String key =accessToken;
if (!StringUtils.isEmpty(accessToken)) {
if ("agent_config".equals(type)){
key=type+"_"+accessToken;
}
Ticket ticket = (key);
long now = Instance().getTime().getTime();
if (!ObjectUtils.isEmpty(ticket)) {
Long valid = Valid();
//有效期内的ticket 直接返回
if (valid - now > 0) {
Ticket();
}
}
ticket = getJsApiTicketFromWeChatPlatform(accessToken,type);
if (ticket != null) {
ticketMap.put(key, ticket);
Ticket();
}
}
return null;
}
public static Ticket getJsApiTicketFromWeChatPlatform(String accessToken, String type) {
String url;
if ("agent_config".equals(type)) {
url = "qyapi.weixin.qq/cgi-bin/ticket/get?access_token=" + accessToken+ "&type=" + type;
} else {
url = "qyapi.weixin.qq/cgi-bin/get_jsapi_ticket?access_token=" + accessToken;
}
Long now = System.currentTimeMillis();
if (!StringUtils.isEmpty(accessToken)) {
String body = HttpUtil.doGet(url);
if (!StringUtils.isEmpty(body)) {
JSONObject object = JSON.parseObject(body);
if (IntValue("errcode") == 0) {
Ticket ticket = new Ticket();
ticket.String("ticket"));
ticket.setValid(now + 7200L);
return ticket;
}
}
}
return null;
}
HttpUtil⼯具类
/**
* 发起get请求
* @param url
* @return
*/
public static String doGet(String url) {
CloseableHttpClient httpClient = null;
CloseableHttpResponse response = null;
String body = "";
try {
// 通过址默认配置创建⼀个httpClient实例
httpClient = ateDefault();
// 创建httpGet远程连接实例
URL newUrl = new URL(url);
HttpGet httpGet = new HttpGet(String.valueOf(newUrl));
// 设置请求头信息，鉴权 httpGet.setHeader("Authorization", "Bearer da3efcbf-0845-4fe3-8aba-ee040be542c0") // 设置配置请求参数
RequestConfig requestConfig = RequestConfig.custom()
// 连接主机服务超时时间
.setConnectTimeout(35000)
// 请求超时时间
.setConnectionRequestTimeout(35000)
// 数据读取超时时间
.setSocketTimeout(60000)
.build();
// 为httpGet实例设置配置
httpGet.setConfig(requestConfig);
// 执⾏get请求得到返回对象
response = ute(httpGet);
// 通过返回对象获取返回数据
HttpEntity entity = Entity();
// 通过EntityUtils中的toString⽅法将结果转换为字符串
if (entity != null) {
//按指定编码转换结果实体为String类型
body = String(entity,"utf-8");
}
} catch (Exception e) {
e.printStackTrace();
} finally {
close(response, httpClient);
}
return body;
}
发布评论