企业微信侧边栏开发

开发前配置：

1、同系统环境开放平台账号创建的企业账号，为保证开放平台账户下的unionid相同，在企业微信平台下的外部联系人能匹配到系统中的用户

 2、在企业微信管理创建页面，创建应用，并配置可信域名

3、设置页面访问地址

 

 

 4、接口绑定应用

 前端开发：https://developer.work.weixin.qq.com/document/path/90547

• 获取用户userId　　

  • 　　//重新生成带有code的url，根据code换取userid，存到cookie
    let OAuthUrl = common.getOAuthUrl(agentId);
    window.location.replace(OAuthUrl);
    
    method.getOAuthUrl = (agentId) => {
        const [redirectUri] = window.location.href.split("#");
    
        const searchObj = {
            appid: method.config.corpId,
            redirect_uri: encodeURIComponent(redirectUri),
            response_type: "code",
            scope: "snsapi_base",
            agentid: agentId,
            state: "A1",
        };
    
        const search = Object.entries(searchObj)
            .map((entry) => {
                const [key, value] = entry;
                return `${key}=${value}`;
            })
            .join("&");
    
        return `https://open.weixin.qq.com/connect/oauth2/authorize?${search}#wechat_redirect`;
    } 

• 引入js文件

  <script src="https://res.wx.qq.com/wwopen/js/jsapi/jweixin-1.0.0.js"></script>
  <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
  //  jweixin-1.2.0.js   不可用，高版本，暂不支持

• 通过config接口注入权限验证配置
• 通过agentConfig注入应用权限(调用方法不需要，可以不注入)

  initConfig(data) {
        var _this = this;
  
        if (data) {
          wx &&
            wx.config({
              beta: true,
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: data.appId, // 必填，公众号的唯一标识，填自己的！
              timestamp: data.timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
              nonceStr: data.nonceStr, // 必填，生成签名的随机串
              signature: data.signature, // 必填，签名，见附录1
              jsApiList: jsApiList,
            });
          wx &&
            wx.ready(function () {
              let params = {
                url: location.href.split("#")[0],
                agent: true,
                agentId: agentId,
                noncestr: data.nonceStr,
                timestamp: data.timestamp,
              };
              _this.configData(params, (result) => {
                _this.initAgentConfig(result);
              });
            });
          wx &&
            wx.error(function (res) {
              //通过error接口处理失败验证
              // config信息验证失败会执行error
              console.log("执行失败");
            });
        }
      },
      initAgentConfig(data) {
        var _this = this;
        wx.agentConfig({
          corpid: data.appId, // 必填，企业微信的corpid，必须与当前登录的企业一致
          agentid: data.agentId, // 必填，企业微信的应用id （e.g. 1000247）
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
          jsApiList: jsApiList, //必填，传入需要使用的接口名称
          success: function () {
            wx.checkJsApi({
              jsApiList: jsApiList, // 需要检测的JS接口列表
              success: function (res) {
                  let obj = res.checkResult;
                  console.log('obj',obj)
                  
              },
            });
          },
          fail: function (res) {
            if (res.errMsg.indexOf("function not exist") > -1) {
              _this.$toast("版本过低请升级");
            }
          },
        });
      },

  需要注意点就是，wx.agentConfig的参数noncestr和timestamp参数要和wx.config方法的参数保持一致，否则报“no permission”错误