企微使用 @wecom/jssdk 分享消息卡片到会话

前言

继介绍如何使用 weixin-js-sdk 实现 H5 页面分享到微信后，现在带来 @wecom/jssdk 如何实现分享消息卡片到企微会话中。

@wecom/jssdk 是微信官方出的 npm 包，这就减小了不更新的风险，使用方法倒是大同小异。

环境

Vue v2.7.10

@wecom/jssdk v1.4.3

实现

创建企业微信第三方应用

如何创建第三方应用

设置安全域名

开通客户联系权限

注册 JSSDK 对象

获取 jsapi_ticket

获取 access_token

import * as ww from "@wecom/jssdk";

ww.register({
  corpId: "", // 必填，当前用户企业所属企业ID
  agentId: "", // 应用id
  jsApiList: [
    "sendChatMessage", // 分享消息到当前会话
  ], // 必填，需要使用的JSAPI列表
  getConfigSignature, // 必填，根据url生成企业签名的回调函数
  getAgentConfigSignature, // 必填，根据url生成应用签名的回调函数
});

async function getConfigSignature(url) {
  // 根据 url 生成企业签名
  // 生成方法参考 https://developer.work.weixin.qq.com/document/path/90539
  return await getJsApiSignature();
}

async function getAgentConfigSignature(url) {
  // 根据 url 生成应用签名，生成方法同上，但需要使用应用的 jsapi_ticket
  return await getJsApiSignature();
}

async function getJsApiSignature() {
  const res = await getJsApiTicket(); // 获取后端返回的 jsapi_ticket
  return ww.getSignature(res.data || ""); // 只传入 jsapi_ticket 字符串的时候，就会自动获取页面 url，时间戳，唯一标识符
}

调用 sendChatMessage 方法

分享的消息分为 text、image、video、file、news、miniprogram 六种。

发送小程序卡片

ww.invoke(
  "sendChatMessage",
  {
    msgtype: "miniprogram", //消息类型，必填
    enterChat: true, // 为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
    miniprogram: {
      appid: "", // 小程序的appid
      title: "", // 消息标题
      page: "", // 打开小程序后的路径，例子：pages/home/index
    },
  },
  function (res) {
    console.log(res);
  }
);

发送 H5 页面卡片

ww.invoke(
  "sendChatMessage",
  {
    msgtype: "news", //消息类型，必填
    enterChat: true, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
    news: {
      link: "", //H5消息页面url 必填
      title: "", //H5消息标题
      desc: "", //H5消息摘要
      imgUrl: "", //H5消息封面图片URL，这个最好填一个合法有效的，貌似不填会报错
    },
  },
  function (res) {
    console.log(res);
  }
);

效果

总结

@wecom/jssdk 与 weixin-js-sdk 比较而言，做了一些优化，例如注册流程可以只提供 jsapi_ticket 来完成注册。

但在使用中，我发现直接调用方法，如 sendChatMessage，并不会生效，需要通过 invoke 方法间接调用。

以及如果你要使用 sendChatMessage 方法，你需要经过三次授权：

1. 应用的可信域名
2. 客户联系权限
3. 注册 JSSDK

其他的问题还有授权的地方过于分散，而且还有文档老旧、客户联系权限的入口不明显等。

希望以后再继续优化，现在的开发体验只能说可以用。