企业微信 agentConfig踩坑记录

嗷呜小熊熊
3,599 阅读4分钟

今天公司有个需求是需要接入企微的‘分享消息到当前会话’功能，本来信心满满不就接入一个sdk嘛，结果熬了2天踩坑无数才做了出来，特此记录下遇到的问题

1. 引入JSSDK, 然后注册config

官方文档是引用

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

或者npm安装wexin-js-sdk, 那么这里的坑来了，npm安装的时候，在window机器上wx.config会找不到，js引入会和下面引入的agentConfig赋值window.wx冲突,所以这里推荐使用的是一个另一个官方文档都找不到的链接 这个还能解决引入agentConfig的问题，否者按照官网的描述使用agentConfig还得再单独引入一个js.

另外提一句，我们项目是qiankun微前端项目，引入这个js有两种方法，正常的在主程序中引入即可，如果是想子程序单独打开的时候才生效，那么加个location.host条件判断即可。否则的话会导致子程序白屏

    <script src=https://res.wx.qq.com/wwopen/js/jsapi/jweixin-1.0.0.js></script>

然后在按照官网的配置使用config官网链接

window.wx.config({
  beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 
  appId: '', // 必填，企业微信的corpID timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名，见 附录-JS-SDK使用权限签名算法
  jsApiList: [] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来 
});

成功回调可以用:

window.wx.ready(function(){ 
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 
});

失败回调可以用:

window.wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
});

2. 调用agentConfig

agentConfig的作用
config注入的是企业的身份与权限，而agentConfig注入的是应用的身份与权限。尤其是当调用者为第三方服务商时，通过config无法准确区分出调用者是哪个第三方应用，而在部分场景下，又必须严谨区分出第三方应用的身份，此时即需要通过agentConfig来注入应用的身份信息。

解释：
企业的身份与权限：用于帮助企业微信客户端了解当前是 哪个企业 正在申请接口调用权限
应用的身份与权限：用于帮助企业微信客户端了解当前是 哪个第三方应用 正在申请接口调用权限

调用agentConfig前，需要先成功调用config,所以可以吧agentConfig的调用写在wx.ready里面 官网文档 官方文档里也写要单独引用一个js

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

但是这个js在window情况下也会出现agentCofig undefined的情况，所以推荐就用本文上面写的这个

  <script src=https://res.wx.qq.com/wwopen/js/jsapi/jweixin-1.0.0.js></script>

引用一次config和agentConfig的问题全都解决了， windows和mac也都能兼容

然后就是按照官网的方法使用

window.wx.agentConfig({
 corpid: '', // 必填，企业微信的corpid，必须与当前登录的企业一致
 agentid: '', // 必填，企业微信的应用id （e.g. 1000247
 timestamp: , // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串
 signature: '',// 必填，签名，见附录-JS-SDK使用权限签名算法
 jsApiList: ['selectExternalContact'], //必填，传入需要使用的接口名称
 success: function(res) {
  // 回调
 },
 fail: function(res) {
     if(res.errMsg.indexOf('function not exist') > -1){ alert('版本过低请升级')
    }
 }
});

3. 实现分享消息到当前会话功能

在config 和 agentConfig 都调用成功以后，就可以调用wx.invoke了(sendChatMessage) 官网链接

wx.invoke('sendChatMessage',{
    msgtype:"text", //消息类型，必填
    enterChat: true, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
    text: { content:"你好", //文本内容 },
    image: { mediaid: "", //图片的素材id },
    video: { mediaid: "", //视频的素材id },
    file: { mediaid: "", //文件的素材id },
    news: {
        link: "", //H5消息页面url 必填
        title: "", //H5消息标题 desc: "", //H5消息摘要
        imgUrl: "", //H5消息封面图片URL
    },
    miniprogram: {
        appid: "wx8bd80126147df384",//小程序的appid，企业已关联的任一个小程序
        title: "this is title", //小程序消息的title
        imgUrl:"https://search-operate.cdn.bcebos.com/d054b8892a7ab572cb296d62ec7f97b6.png",//小程序消息的封面图。必须带http或者https协议头，否则报错 $apiName$:fail invalid imgUrl 
        page:"/index/page.html", //小程序消息打开后的路径，注意要以.html作为后缀，否则在微信端打开会提示找不到页面
    },
},
function(res) {
    if (res.err_msg == 'sendChatMessage:ok') {
    //发送成功
    }
})
avatar
文章
阅读
粉丝