企业微信自建应用----JS-SDK配置

最新推荐文章于 2025-03-02 01:04:14 发布

小丸子灬

最新推荐文章于 2025-03-02 01:04:14 发布

阅读量1.2k

点赞数 23

分类专栏：工作中遇见的问题文章标签：企业微信

本文链接：https://blog.csdn.net/hanhanbeibeiya/article/details/143227055

版权

工作中遇见的问题专栏收录该内容

6 篇文章

订阅专栏

前言：由于公司要在企业微信里面做一个自建应用----向外部群发送消息，需要用到企业微信的获取当前客户群的群ID。选择可下载的文件 - 接口文档 - 企业微信开发者中心获取当前客户群的群ID - 接口文档 - 企业微信开发者中心

下面就是相关JS-SDK配置代码：

 getChatId() {
      const vm = this; // 保存当前上下文
      let url = location.href.replace(location.hash, '');
      // 这里可以使用 wx 对象
      let ip = '由后端提供的生成签名字段的接口';
      this.$http.get(ip, {
        params: {
          appId: 'xxx', // 新建企业微信自建应用时会有
          agentId: 'xxx', // 新建企业微信自建应用时会有
          url: url,
        }
      })
      .then((res) => {
        window.wx.config({
          // 这里填入企业微信的相关配置
          beta: true,
          // debug: true, // 开启调试模式
          appId: 'xxxxxx', // 企业微信的应用ID
          timestamp: res.data.result.timestamp, // 后端接口返回的生成签名的时间戳
          nonceStr: res.data.result.noncestr, // 后端接口返回的生成签名的随机串
          signature: res.data.result.signature, // 后端接口返回的签名
          jsApiList: ['agentConfig','getCurExternalChat'], // 需要调用的API
        });
        window.wx.ready(function() {
            //开启调试之后，如果成功页面会出现弹窗agentConfig：OK，getCurExternalChat： OK的字样
          window.wx.checkJsApi({
            jsApiList: ['agentConfig', 'getCurExternalChat'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            success: () => {
              // 以键值对的形式返回，可用的api值true，不可用为false
              // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
              let ips = '由后端提供的生成签名字段的接口';//这个接口和上一个接口不一样
              vm.$http.get(ips, {
                params: {
                  appId: 'xxxxxx', // 新建企业微信自建应用时会有
                  agentId: 'xxxxx', // 新建企业微信自建应用时会有
                  url: url,
                }
              })
              .then((res) => {
                vm.agentTimestamp = res.data.result.timestamp;
                vm.agentNonceStr = res.data.result.noncestr;
                vm.agentSignature = res.data.result.signature;
                window.wx.agentConfig({
                  corpid: 'xxxxx', // 必填，企业微信的corpid，必须与当前登录的企业一致
                  agentid: 'xxxxx', // 必填，企业微信的应用id （e.g. 1000247）
                  timestamp: res.data.result.timestamp, // 生成签名的时间戳
                  nonceStr: res.data.result.noncestr, // 生成签名的随机串
                  signature: res.data.result.signature, // 签名
                  jsApiList: ['getCurExternalChat'], //必填
                  success: () => {
                    // 回调
                    window.wx.invoke('getCurExternalChat', {}, function(res){
                      if(res.err_msg == "getCurExternalChat:ok"){
                        console.log(res,'群聊id');
                        vm.chatId = res.chatId;
                      }else {
                        //错误处理
                        console.log('获取群聊id失败');
                      }
                    });
                  },
                  fail: (res) => {
                    if (res.errMsg.indexOf('function not exist') > -1) {
                      console.log('获取群聊id失败');
                    }
                  },
                  complete: (res) => {
                    console.log('complete',res);
                  }
                })
              })
            }
          })
        });

        window.wx.error(function(res) {
          console.error('wx.config调用失败', res);
        });
      })
    },

下面说重点：如何成功获取到群聊id

1.首先一定一定一定要先调通wx.config，先注入企业微信的权限，然后再注入wx.agentConfig的企业微信应用权限，注意：这俩个权限是不一样的，必须都有！！！

（这里讲一下，为什么我的代码是window.wx,因为我单写wx,打印出来是获取不到的，如果跟我有同样问题，就可以在前面加上window）；

2.解释一下为什么写const vm = this；因为在wx方法的内部，this是获取不到的，所以必须转换一下；

3. 必须在public/index.html中引入几个文件，保险起见，以下三个文件都引入，否则会提示签名没有权限

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
<script src="https://res.wx.qq.com/wwopen/js/jsapi/jweixin-1.0.0.js"></script>

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>xxx</title>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
    <script src="https://res.wx.qq.com/wwopen/js/jsapi/jweixin-1.0.0.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

4.拼接的url，不要误解成回调地址，这边填写的是当前页面的地址这里分为Android和IOS的url规则，附上js代码

//Android的url
let url = location.href;
 
//IOS的url（IOS比较坑需要去掉锚点）
let url = location.href.replace(location.hash, '');

5.报错 wx.invoke is not a function。
解决办法：页面调试必须在企业微信上调试，其他在微信开发者工具或者直接网页调试都是会报这个错误的。
在这里插入图片描述
6. 报错：no permission
解决办法：这就是你没有注入，调用方法就会报错，先注入agentConfig才可以。

如果有其他问题，可以参考下面官方调用agentConfig的注意事项排查：

agentConfig与config的签名算法完全一样，但是jsapi_ticket的获取方法不一样，请特别注意，查看"获取应用身份的ticket".
企业微信3.0.24以前的老版本（可通过企业微信UA判断版本号），在调用wx.agentConfig之前，必须确保先成功调用wx.config
当前页面url中的域名必须是在该应用中设置的可信域名。
agentConfig仅在企业微信2.5.0及以后版本支持，微信客户端不支持（微信开发者工具也不支持）
仅部分接口才需要调用agentConfig，需注意每个接口的说明
企业微信ios/mac 端如果出现 "wx.agentConfig undefined" 的报错，可将调用放在异步操作中进行，例如使用：setTimeout 包裹

选择可下载的文件 - 接口文档 - 企业微信开发者中心