把企业微信侧边栏的 JS-SDK 封装了，还加上了所有 TS 类型

前言

哈喽，大家好，我是海怪。

在之前几个月，我陆陆续续地写了很多关于企业微信侧边栏的内容：

• 侧边栏开发指南
• 侧边栏 React 开发模板
• 侧边栏 Vue 开发模板
• 侧边栏服务端转发的 Exprress 开发模板
• 侧边栏 x qiankun 的开发实践

在前端方面，我已经出了 3 个模板了，每个项目都有一个 /lib 的文件夹专门放置 JS-SDK 的一些封装内容。

这个 /lib 其实也只是封装了一些常见的操作，并没有非常健全的 TS 类型以及其它 API 的封装，当时的想法是 API 太多了，一个个封装太烦了（主要是懒）。

但是，这就导致了每个项目都要复制粘贴一次这个 /lib 文件夹。

wecom-sidebar-jssdk

所以，我最近又想到了一些 idea，把侧边栏 JS-SDK 里的 API 的 TS 类型（入参、返回）都写了一遍，然后使用简单几个 API 来封装和调用原来的 wx.fn 以及 wx.invoke('xxx')。

整个封装的最终效果就是今天要说的 wecom-sidebar-jssdk，此 SDK 是专门针对企业微信侧边栏的 JS-SDK 进行封装的。

• Github
• 文档

它提供了以下功能：

[图片上传失败...(image-2540a0-1639715215034)]

TS Ready

这个库将所有的 API 的类型都写全了（3.1.20）（如果有新的我可能也不知道，你可以提交一个 Issue 让我再加上）。

所以说，就算你不想用这个库的提供的 API，这个库的 TS 类型声明也能带给你很好的开发体验：

[图片上传失败...(image-ac95c2-1639715215035)]

当然，你能用我自带的 API 是更好了：

[图片上传失败...(image-ee8584-1639715215035)]

[图片上传失败...(image-43deb2-1639715215035)]

[图片上传失败...(image-64c89d-1639715215035)]

上手

说那么多，不如先给大家看个示例：

import Cookies from 'js-cookie'
import {checkRedirect, initSdk, invoke, asyncCall, call, SignRes} from 'wecom-sidebar-jssdk';

// 侧边栏配置
const config = {
  // 在 https://work.weixin.qq.com/wework_admin/frame#profile 这里可以找到
  corpId: 'xxx',
  // 在 https://work.weixin.qq.com/wework_admin/frame#apps 里的自建应用里可以找到
  agentId: 'yyy'
}

// 获取签名接口（需要后端生成）
export const fetchSignatures = async (): Promise => {
  const response = await axios.request({
    method: 'GET',
    url: '/api/qywx-utils/signatures',
    params: {
      url: window.location.href
    }
  })

  return response.data;
}

// code 换取用户身份（需要后端调用企微服务端 API）
const fetchUserId = async (code: string): Promise => {
  const response = await axios.request({
    method: 'GET',
    url: '/api/qywx-proxy/user/getuserinfo',
    params: {code}
  });
  return response.data.userId;
}

const testApi = async () => {
  try {
    // 获取外部联系人 external_user_id
    const res1 = await invoke('getCurExternalContact');
    console.log(res1.userId);

    // 拍照或从手机相册中选图接口
    const res2 = await asyncCall('chooseImage');
    console.log(res2.localIds);

    // 设置监听
    call('onNetworkStatusChange', (res) => {
      console.log(res.isConnected)
      console.log(res.networkType)
    })
  } catch (e) {
    console.log(e.message);
  }

  // 支持原始调用方式
  wx.invoke('getCurExternalContact', {}, function (res) {
    if (res.err_msg == "getCurExternalContact:ok") {
      userId = res.userId; //返回当前外部联系人userId
    } else {
      //错误处理
    }
  });
}

const render = () => {
  // 渲染 App
}

checkRedirect(config, fetchUserId)
  .then(() => initSdk(config, fetchSignatures))
  .then(() => testApi())
  .then(() => console.log(Cookies.get('userId')))
  .catch(() => console.error('JS-SDK 初始化失败'))
  .finally(() => render());

上面就是 wecom-sidebar-jssdk 的简单使用了。更多内容可见 文档。

以后

如何大家有什么建议或者发现的 Bug 都可以放到 Issue 来，最近一个月会关注这些 Bug 的问题，争取发个 0.1.0 版本。