vue 项目引入企业微信sdk接口
官网地址: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项目,路由没有开启history 模式,也就是你的url上面包含“#”,这个时候要从后端正确获取签名,就需要 去掉url上#后面的字符 。(url去掉'#'hash部分,可用 location.href.split('#')[0] )