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解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
PHP常用的小程序代码段
2015/11/14 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
简单的js计算器实现
2016/10/26 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
新闻专业个人自我评价
2013/09/21 职场文书
高考备战决心书
2014/03/11 职场文书
公关活动策划方案
2014/05/25 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
名人演讲稿范文
2014/09/16 职场文书
城管个人总结
2015/02/28 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle