vue 项目引入企业微信sdk接口

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

官网地址：https://work.weixin.qq.com/api/doc#90000/90136/90514

1. 调用后台接口，获取config接口所需要的信息。（签名、时间戳。。。。）

2. wx.config注入权限验证配置(注入的是企业的身份与权限)

3.通过ready接口处理成功验证

4.在creatd()或mounted()里面放代码

getWxJsJdk(){
    this.$axios.get(\'端口地址url\', {
      params:{
        url:  location.href.split(\'#\')[0]
      }
    })
      .then(res => {
        if(res.data.errorCode === \'10001\') {
          this.signature = res.data.resultData.signature;
          this.appId = res.data.resultData.appId;
          this.noncestr =  res.data.resultData.noncestr;
          this.timestamp= res.data.resultData.timestamp;
          wx.config({
              beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: this.appId, // 必填，企业微信的corpID
              timestamp: this.timestamp, // 必填，生成签名的时间戳
              nonceStr: this.noncestr, // 必填，生成签名的随机串
              signature: this.signature,// 必填，签名，见附录1
              jsApiList: [\'hideOptionMenu\'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
          wx.ready(function () {
              wx.hideOptionMenu();
          });
        wx.error(function(res){//通过error接口处理失败验证
          // config信息验证失败会执行error
         console.log(\'执行失败\');
        });
        } else {
          console.log(res.data.errorCode)
        }
      }).catch(err => {
      console.log(err);
    })
  },

 注意：

这里要注意的就是url的问题，如果url没有正确传递，后端也会返回信息，但是签名信息会是错误的。

上面提到的完整url指的是：\'http(s)://\'部分，以及\'？\'后面的GET参数部分,但不包括\'#\'hash后面的部分。可以通过 location.href 来获取。

如果你的vue项目" title="vue项目">vue项目，路由没有开启history 模式,也就是你的url上面包含“#”，这个时候要从后端正确获取签名，就需要 去掉url上#后面的字符 。（url去掉\'#\'hash部分，可用 location.href.split(\'#\')[0] ）

以上是 vue 项目引入企业微信sdk接口 的全部内容， 来源链接： utcz.com/z/376989.html

回到顶部