【企业微信新版sdk】

ops/2024/11/2 13:11:44/

wecom 的引入使用

一、引入wecom
二、封装函数
三、使用测试

一、引入wecom

1、企业微信 WECOM-JSSDK提供了 npm 和 cdn 两种引入途径。
1.1、 npm 引入

npm install @wecom/jssdk

1.2、安装后引入

import * as ww from '@wecom/jssdk'

通过 script 标签引入

<script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-2.0.2.js"></script>

注：详见: 企业微信

二、封装函数

制作全局工具函数

import {jssdk} from '../api/approval/approval';
import * as ww from '@wecom/jssdk'
/***** 作者: Lenovo-【Lindon】*** 文件名称: weChat*** 文件创建日期: 2024/4/10 14:11****/
const wwChatMixin = {data() {return {};},methods: {async wwRegister(sysAgentId, url, callback) {debugger;const res = await jssdk({sysAgentId: sysAgentId, url: url});ww.register({corpId: res.config.appId,jsApiList: ['selectExternalContact'],getConfigSignature() {console.log('ww.getSignature',ww);return ww.getSignature(res.config.signature);},});if (callback && typeof callback === 'function') {callback(ww);}},},
};export default wwChatMixin;

2.通过后端接口 api/approval/approval 后去企业微信的相关数据
3. ww.register 进行注册，获取签名
4. 暴露出去使用
5. 在这里插入图片描述

三、使用测试

<template><div><!--    wecom--><van-button @click="getwxAgentConfig">使用</van-button></div>
</template><script>
import wwChatMixin from '../../mixin/weChat';export default {/***** 作者: Lenovo-【Lindon】*** 文件名称: wecom*** 文件创建日期: 2024/4/10 14:21****/name: 'Wecom',components: {},mixins: [wwChatMixin],props: {},data() {return {};},created() {},mounted() {},methods: {// 使用// const url = window.location.href.split('#')[0];getwxAgentConfig() {this.wwRegister(1, window.location.href.split('#')[0], ww => {debugger;ww.selectExternalContact({success(res) {console.log('666',res);alert(JSON.stringify(res));},});});},},
};
</script><style scoped></style>