【企业微信新版sdk】

LinDon_2024-10-30 8:37

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 后去企业微信的相关数据

ww.register 进行注册，获取签名
暴露出去使用

三、使用测试

复制代码

<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>