企业微信官方文档
1.登录企业微信后台,管理员可操作,打开应用配置应用可信域名(必须配置,否则无法调用jsapi,可信域名必须有ICP备案且在管理端验证域名归属)
配置部署后的前台域名地址
配置可信域名,部署后的服务器域名(需备案认证)
当域名权限不够时需下载文件效验,将文件放在public文件夹下即可
2.引入js文件(支持https)
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
3.通过config接口注入权限验证配置,所有需要使用JS-SDK的页面必须先注入配置信息
wx.config({
beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,企业微信的corpID
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名,见 附录-JS-SDK使用权限签名算法
jsApiList: [] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
});
成功回调
wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
失败回调
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
4.调用扫码功能
wx.scanQRCode({
desc: 'scanQRCode desc',
needResult: 0, // 默认为0,扫描结果由企业微信处理,1则直接返回扫描结果,
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码(一维码),默认二者都有
success: function(res) {
// 回调
var result = res.resultStr;//当needResult为1时返回处理结果
},
error: function(res) {
if (res.errMsg.indexOf('function_not_exist') > 0) {
alert('版本过低请升级')
}
}
});
5.wx.config参数说明
1.debug
调试时使用,上线后关闭,会将错误信息弹出
2.appId
企业id,如下图
3.timestamp
当前时间戳,10位
4.nonceStr
随机字符串
5.signature
签名效验工具地址
签名,生成规则如下图
6.signature签名获取方式及参数说明
1.获取jsapi_ticket(企业)
获取jsapi_ticket官方文档
2.获取access_token
获取access_token官方文档
corpid企业id获取上面有
corpsecret应用秘钥获取如下图
3.url
当前网页的URL,不包含#及其后面部分。注意:对于没有只有域名没有 path 的 URL ,浏览器会自动加上 / 作为 path,如打开 http://qq.com 则获取到的 URL 为 http://qq.com/(如果前端路由中不包含#需全部传入)
//hash 带#
let url = window.location.href.split('#')[0]
//history 不带#
let url = window.location.href
7.完整逻辑代码
let getwwConfig = async () => {
setLoading(true)
let url = window.location.href.split('#')[0]
let res = await api.getAxiosData('后台地址', { url })
if (res) {
window.ww.config({
beta: true,// 必须这么写,否则ww.invoke调用形式的jsapi会有问题
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.appId, // 必填,企业微信的corpID,必须是本企业的corpID,不允许跨企业使用
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.noncestr, // 必填,生成签名的随机串
signature: res.signature,// 必填,签名,见 附录-JS-SDK使用权限签名算法
jsApiList: ['scanQRCode', 'checkJsApi'] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
})
window.ww.error(function (res) {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
})
window.ww.ready(() => {
window.ww.scanQRCode({
needResult: 1,
scanType: ["qrCode", "barCode"],
success: res => {
console.log(res.resultStr, '---') // 打印扫码结果
},
error: err => {
console.log(err.errMsg, '===')
}
})
})
}
setLoading(false)
}