vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解


Posted in Vue.js onDecember 15, 2020

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对应的指令(只是因为我没找到..)。

vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

说明: 第一个js(上面的js)链接为config配置用到的js

第二个js(下面的js)链接为agentconfig配置用的到js

3.引入sdk-js中的wx 使用相关方法 引入方式分全局引入和局部引入

a.局部引入 在要想调用 wx sdk相关接口的页面 (本人使用的局部,因为就一个页面使用)

vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

b.全局引入 在main.js文件中引入 写入到vue原型链上 方便全局调用

vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

然后再要使用的页面的script区域代码中使用 this.$wx 即可 调用 ($wx 为你自定义的变量名)

4.config配置验证 参照官网例子自行设置相关参数 (如果是全局配置的 wx用this.$wx 代替)

vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

设置了相关参数,如果验证通过会立即执行wx.ready()方法了。这时整个页面就可以调用jsApiList中的相关接口方法了。

vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

5.agentConfig 配置验证 参数自行设置

vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

注入相关配置参数,执行逻辑同config一样

需要注意的是如果想使用有agentConfig验证的相关接口方法,最好在config配置认证通过后的ready()函数中执行agentConfig 配置认证 这样做的原因:

vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

然后整个页面也就可以调用agentConfig配置中jsApiList 里的所有接口方法了。

注意:jsApiList中的方法不一定可用,因为跟后台配置有一定关系。详情参考官网说明。所以最好是校验一下jsApiList中哪些方法是可用的.

vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

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") {
    param.type = type;
   }
   axios
    .get(url, {
     params: param
    })
    .then(function (rsp) {
     if (rsp.data.success) {
      that[type] = rsp.data.data;
      if (type === "config") {
       that.companyConfigInit(that[type]);
      } else {
       that.appConfigInit(that[type]);
      }
     }
    })
    .catch(function (err) {
     console.log(err);
    });
  },

  //企业验证配置
  companyConfigInit(config) {
   let that = this;
   wx.config({
    beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: config.appId, // 必填,企业微信的corpID
    timestamp: config.timestamp, // 必填,生成签名的时间戳
    nonceStr: config.nonceStr, // 必填,生成签名的随机串
    signature: config.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
    jsApiList: [], //你要调用的sdk接口
必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
   });
    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,
    // config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,
    // 则须把相关接口放在ready函数中调用来确保正确执行。
    // 对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

   wx.ready(function () {
//执行你的业务逻辑代码
    //......
    //如果要使用到agent_config相关接口 初始化agentConfig配置
    that.getConfig("agent_config");
   });
   wx.error(function (res) {
    console.log(res);
    // config信息验证失败会执行error函数,如签名过期导致验证失败
    // ,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,
    // 对于SPA可以在这里更新签名。
   });
  },
  //应用验证配置
  appConfigInit(config) {
   let that = this;
   wx.agentConfig({
    corpid: config.corpid, // 必填,企业微信的corpid,必须与当前登录的企业一致
    agentid: config.agentid, // 必填,企业微信的应用id (e.g. 1000247)
    timestamp: config.timestamp, // 必填,生成签名的时间戳
    nonceStr: config.nonceStr, // 必填,生成签名的随机串
    signature: config.signature, // 必填,签名,见附录-JS-SDK使用权限签名算法
    jsApiList: [], //你要调用的sdk接口必填
   
    success: function () {
     //查看相关接口是否可以调用
     //that.checkJsApi();
    },
    fail: function (res) {
     if (res.errMsg.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() {
  this.getConfig("config");
 },
};
</script>

后端java代码 controller :

Logger logger = LoggerFactory.getLogger(this.getClass());
/**
 * 应用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 = WeChatApiUtil.getJsApiTicket(secretId, null);
    data.put("appId", corpId);
    logger.info("get company temp ticket is :"+ticket);
  } else {
    ticket = WeChatApiUtil.getJsApiTicket(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 = MessageDigest.getInstance("SHA");
    // 调用digest方法,进行加密操作
    byte[] cipherBytes = sha.digest(unEncryptStr.getBytes());
    String encryptStr = Hex.encodeHexString(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 请参考官网自行实现就不贴代码了
  // https://work.weixin.qq.com/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 = ticketMap.get(key);
    long now = Calendar.getInstance().getTime().getTime();
    if (!ObjectUtils.isEmpty(ticket)) {
      Long valid = ticket.getValid();
      //有效期内的ticket 直接返回
      if (valid - now > 0) {
        return ticket.getTicket();
      }
    }
    ticket = getJsApiTicketFromWeChatPlatform(accessToken,type);
    if (ticket != null) {
      ticketMap.put(key, ticket);
      return ticket.getTicket();
    }
  }
  return null;
}

public static Ticket getJsApiTicketFromWeChatPlatform(String accessToken, String type) {
  String url;
  if ("agent_config".equals(type)) {
    url = "https://qyapi.weixin.qq.com/cgi-bin/ticket/get?access_token=" + accessToken+ "&type=" + type;
  } else {
    url = "https://qyapi.weixin.qq.com/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 (object.getIntValue("errcode") == 0) {
        Ticket ticket = new Ticket();
        ticket.setTicket(object.getString("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 = HttpClients.createDefault();
    // 创建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 = httpClient.execute(httpGet);
    // 通过返回对象获取返回数据
    HttpEntity entity = response.getEntity();
    // 通过EntityUtils中的toString方法将结果转换为字符串
    if (entity != null) {
      //按指定编码转换结果实体为String类型
      body = EntityUtils.toString(entity,"utf-8");
    }
  } catch (Exception e) {
    e.printStackTrace();
  } finally {
    close(response, httpClient);
  }
  return body;
}

到此这篇关于vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解的文章就介绍到这了,更多相关vue项目企业微信使用js-sdk时config和agentConfig配置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 #Vue.js
8个非常实用的Vue自定义指令
Dec 15 #Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 #Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 #Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 #Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 #Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 #Vue.js
You might like
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python连接mongodb密码认证实例
2018/10/16 Python
python实现小球弹跳效果
2019/05/10 Python
Python如何访问字符串中的值
2020/02/09 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
Django视图类型总结
2021/02/17 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
先进单位事迹材料
2014/12/25 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
java基础——多线程
2021/07/03 Java/Android
关于 Python json中load和loads区别
2021/11/07 Python
详解JS数组方法
2021/11/20 Javascript