本文将详细介绍如何在Vue3+TypeScript项目中安装和配置企业微信JS-SDK,并通过ww.getCurExternalContact接口获取当前客户ID。

一、企业微信JS-SDK概述

企业微信JS-SDK是企业微信提供给网页开发者的工具包,允许开发者在网页中使用企业微信的原生功能,如获取外部联系人信息、分享内容到会话等。

二、安装

通过 npm 引入

npm install @wecom/jssdk

安装完成后即可在应用中使用 SDK:

import * as ww from '@wecom/jssdk'

三、应用身份注册

参考:JS-SDK注册官方文档应用身份注册

调用要求

所有的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;
    },
  });
}

更多推荐