企业微信—JS-SDK使用
参考官方文档:https://developer.work.weixin.qq.com/document/path/90514
一、引入JS文件
在.html文件中引入:
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
二、后端获取
JS-SDK使用权限签名算法
三、前端调用接口处理
1.定义handleWxConfig 方法:通过config接口注入权限验证配置
export const handleWxConfig = () => {
let url = location.href;
console.log(url, 'url');
// 从接口获取微信签名,需要后端同学提供
getSdkSign.get({
url // 注意:location.href最后如果有'/',必须保留
}).then((res: any) => {
console.log(res, 'res');
let { code, data, msg } = res;
if (code == 200) {
// 步骤二:通过config接口注入权限验证配置
window.wx.config({
beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
appId: data.appId, // 必填,企业微信的corpID
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串,这里用的是自定义方法
signature: data.signature, // 必填,签名,见附录-JS-SDK使用权限签名算法
jsApiList: ["previewFile"] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来。所有JS接口列表见附录2
});
// 步骤三:通过ready接口处理成功验证。没有需要立即调用的api,可以不写
window.wx.ready(() => { });
// 步骤四:通过error接口处理失败验证
window.wx.error((err: any) => { });
} else {
drNotify(msg);
}
})
}
2.引用:在需要使用JS-SDK的地方引入
// 在需要使用JS-SDK的页面引入
onMounted(async () => {
handleWxConfig();
})
四、实例:
以预览下载文件为例:
1.定义方法handlePreviewFile:
// 预览文件接口
export const handlePreviewFile = (file: any) => {
window.wx.previewFile({
// 文件访问地址
url: handleImgSrc(file.group, file.filepath),
name: file.filename,
size: file.filesize
})
}
2.使用文件预览,在需要使用预览下载的方法中直接调用 handlePreviewFile(file)
例:
// 下载附件 适配PC Iphone Android
const handleDownFile = (file: any) => {
// 不是企业微信
if (!isWxWork()) {
return drNotify('请用企业微信打开');
}
isMobile() ?
(isAndroid() ? window.open(handleImgSrc(file.group, file.filepath)) : handlePreviewFile(file))
:
PCpreview(file);
}