【Vue3+TypeScript】H5项目集成企业微信JS-SDK实现获取客户信息功能、分享消息到当前会话
·
本文将详细介绍如何在Vue3+TypeScript项目中安装和配置企业微信JS-SDK,并通过ww.getCurExternalContact接口获取当前客户ID。
一、企业微信JS-SDK概述
企业微信JS-SDK是企业微信提供给网页开发者的工具包,允许开发者在网页中使用企业微信的原生功能,如获取外部联系人信息、分享内容到会话等。
二、安装
通过 npm 引入
npm install @wecom/jssdk
安装完成后即可在应用中使用 SDK:
import * as ww from '@wecom/jssdk'
三、应用身份注册
调用要求
所有的JS接口只能在企业微信应用的可信域名下调用(包括子域名),且可信域名必须有ICP备案且在管理端验证域名归属。
验证域名归属的方法在企业微信的管理后台“我的应用”里,进入应用,设置应用可信域名。 在调用 JSAPI 前,需要先通过
ww.register 注册当前页面的身份信息。身份信息分为两种: 1) 企业身份与权限,通过企业签名获得。 2)
应用(自建/待开发/第三方应用等)身份与权限,通过应用签名获得。 使用者可根据具体调用的JSAPI所要求的身份权限进行注册即可,应用身份权限 > 企业身份权限
使用获取当前客户ID接口必须以应用身份注册,示例代码是应用身份注册
ww.register({
corpId: WEWORK_CONFIG.CORP_ID,
agentId: WEWORK_CONFIG.AGENT_ID,
jsApiList: ["getCurExternalContact", "getCurExternalChat", "sendChatMessage"],
getConfigSignature: async (url: string) => {
//调用后端接口获取企业签名 后端返回 { ticket, timestamp, nonceStr, signature }
// 根据 url 生成企业签名
// 生成方法参考 https://developer.work.weixin.qq.com/document/14924
const res = await getSignature({ url });
return {
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
};
},
getAgentConfigSignature: async (url) => {
//调用后端获取应用签名接口
// 根据 url 生成应用签名,生成方法同上,但需要使用应用的 jsapi_ticket
const res = await getAgentSignature({ url });
return {
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
};
},
});
四、获取当前客户ID
本接口必须使用应用身份进行注册
async function getCustomId() {
ww.getCurExternalContact({
success: (res) => {
externalUserId.value = res.userId;
},
fail: (err) => {
console.log(err);
},
});
}
五、分享消息到当前会话
//发送图文消息
async function sendNews(tagId: string, videoId: string, tagName: string) {
linkLoading.value = true;
ww.sendChatMessage({
msgtype: "news",
news: {
link: "页面 URL",
title: "卡片标题",
desc: "卡片摘要",
imgUrl: "封面图片URL",
},
success(result) {
ElMessage.success("发送成功");
linkLoading.value = false;
},
fail(result) {
ElMessage.error("发送失败" + result.errMsg);
linkLoading.value = false;
},
});
}
//发送文字消息
async function sendText(content: string) {
linkLoading.value = true;
ww.sendChatMessage({
msgtype: "text",
text: {
content: content,
},
success(result) {
linkLoading.value = false;
ElMessage.success("发送成功");
},
fail(result) {
ElMessage.error("发送失败" + result.errMsg);
linkLoading.value = false;
},
});
}
更多推荐
所有评论(0)