_ 问题已解决 _
_ 问题:vue项目如何引入企业微信sdk开发???wx.agentConfig undefined是什么原因??? _
需求:vue项目引入企业微信sdk开发。想要在企业微信的外部客户群,加入侧边栏应用,然后点击按钮,获取到当前外部群的群id
看企业微信开发文档后,我是在vue项目的index.html里,通过 script 引入了对应的企业微信的sdk。
<!-- 企业微信开发 引入 jwxwork sdk -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>
我的开发思路:
1.先获取token,然后 获取企业的ticket,然后调用 wx.config(),然后在wx.ready()里 先获取应用的ticket,然后再调用wx.agentConfig()
2.把每一步骤的结果alert出来,这样在企业微信内就可以看到了。
3.配置获取企业微信外部群id的权限
以下是获取ticket和初始化的代码 大家看了可能清晰点:
// ---------------------------------通过后端接口获取token和秘钥进行初始化鉴权---------------------------------
import {
MyPost,
MyGet
} from 'common/js/request'
// import wx from 'weixin-jsapi' //使用html和依赖包 两者共用引入sdk
let obj = {
ticket1: '', //获取企业的ticket --- 对应config注入的是企业的身份与权限
ticket2: '', // 获取应用的ticket --- 对应agentConfig注入的是应用的身份与权限
access_token: '', // 登录凭证
code: '', // 随机code
userId: '' // 用户唯一标识
}
let corpidVal = ''
let agentidVal = ''
let _this = this
let sha1 = require('js-sha1')
import axios from 'axios'
// 先获取企业的ticket
export function getAuthTicket(corpid, agentid) {
corpidVal = corpid
agentidVal = agentid
MyGet('/chc-shop/api/v1/qywechat/jsapiticket/corp', {
// url: window.location.href.split('#')[0]
}).then(res => {
console.log('先获取企业的ticket', res);
if (res.success) {
obj.ticket1 = res.data;
const ticket1 = res.data // 很重要!!!!
let nonceStr = 'Y7a8KkqX041bsSwT' // 随机字符串
let timeStamp = new Date().getTime() // 时间戳
let newTimeStamp = String(timeStamp).substr(0, 10) // 10位数的时间戳
// 当前网页的 URL(可以为本地局域网网址),不包含 # 及其后面部分
let url = String(location.href.split('#')[0])
let verifyStr = `jsapi_ticket=${ticket1}&noncestr=${nonceStr}×tamp=${newTimeStamp}&url=${url}`
let signature = sha1(verifyStr)
console.log('签名1', signature)
wx.config({
beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
// 上线的时候记得将 debug 关掉哦!!!!!
debug: process.env.NODE_ENV === "development" ? true : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: corpid, // 必填,企业微信的corpid
timestamp: newTimeStamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
jsApiList: [
'agentConfig',
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getLocalImgData',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
});
wx && wx.ready(function () {
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,
// 所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。
// 对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
alert('ready')
getAuthTicket2(corpid, agentid)
});
wx && wx.error(function (res) {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
console.log('wx.error', res)
alert(res.errMsg)
});
// getAuthTicket2(corpid, agentid)
} else {
alert(res.return_message)
}
})
}
// 先获取应用的ticket
export function getAuthTicket2(corpid, agentid) {
MyGet('/chc-shop/api/v1/qywechat/jsapiticket/app', {
// url: window.location.href.split('#')[0]
}).then(res2 => {
console.log('先获取应用的ticket', res2);
alert('先获取应用的ticket')
alert(res2)
if (res2.success) {
alert('进入success')
obj.ticket2 = res2.data
const ticket2 = obj.ticket2 // 很重要!!!!
let nonceStr = 'Y7a8KkqX041bsSwT' // 随机字符串
let timeStamp = new Date().getTime() // 时间戳
let newTimeStamp = String(timeStamp).substr(0, 10) // 10位数的时间戳
// 当前网页的 URL(可以为本地局域网网址),不包含 # 及其后面部分
let url = String(location.href.split('#')[0])
let verifyStr = `jsapi_ticket=${ticket2}&noncestr=${nonceStr}×tamp=${newTimeStamp}&url=${url}`
let signature = sha1(verifyStr)
console.log('签名2', signature)
alert('签名2:' + signature)
alert(wx)
console.log('wx', wx);
alert(wx.agentConfig)
// 企业微信ios/mac 端如果出现 "wx.agentConfig undefined" 的报错,可将调用放在异步操作中进行,例如使用:setTimeout 包裹
setTimeout(() => {
alert('进入定时器')
wx.agentConfig({
corpid: corpid, // 必填,企业微信的corpid,必须与当前登录的企业一致 https://developer.work.weixin.qq.com/document/path/90665#agentid
agentid: agentid, // 必填,企业微信的应用id (e.g. 1000247) https://developer.work.weixin.qq.com/document/path/90665#agentid
// timestamp: +new Date(), // 必填,生成签名的时间戳
// nonceStr: +new Date(), // 必填,生成签名的随机串
timestamp: newTimeStamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法 https://developer.work.weixin.qq.com/document/path/90506
jsApiList: [
'getCurExternalChat',
'chooseCard',
], // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
success: function (res2) {
// 回调
console.log('success==', res2)
alert('success==' + res2)
// _this.$message.warning(res2)
wx.invoke('getCurExternalChat', {}, function (res) {
console.log('获取群id==', res)
if (res.err_msg == "getCurExternalChat:ok") {
// _this.chatId = res.chatId //返回当前外部群的群聊ID
alert('群ID:' + res.chatId)
} else {
//错误处理
// _this.$message.warning(res.err_msg)
alert('fail===' + res.err_msg)
}
})
return true
},
fail: function (res2) {
console.log('fail===', res2)
alert('fail===' + res2.errMsg)
// _this.$message.warning(res2.errMsg)
if (res2.errMsg.indexOf('function not exist') > -1) {
alert('版本过低请升级')
return false
}
return false
}
})
}, 1000);
} else {
alert(res2.return_message)
return false
}
})
}