企業微信側邊欄開發

開發前配置：

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”錯誤