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

简介: 我最近又想到了一些 idea,把侧边栏 JS-SDK 里的 API 的 TS 类型(入参、返回)都写了一遍,然后使用简单几个 API 来封装和调用原来的 wx.fn 以及 wx.invoke('xxx')。整个封装的最终效果就是今天要说的 wecom-sidebar-jssdk,此 SDK 是专门针对企业微信侧边栏的 JS-SDK 进行封装的。

image.png


前言


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

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



在前端方面,我已经出了 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 进行封装的。


它提供了以下功能:

image.png


TS Ready


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

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


image.png


当然,你能用我自带的 API 是更好了:

image.pngimage.png

image.png


上手


说那么多,不如先给大家看个示例:

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<SignRes> => {
  const response = await axios.request<SignRes>({
    method: 'GET',
    url: '/api/qywx-utils/signatures',
    params: {
      url: window.location.href
    }
  })
  return response.data;
}
// code 换取用户身份(需要后端调用企微服务端 API)
const fetchUserId = async (code: string): Promise<string> => {
  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 版本。



相关文章
|
2月前
|
前端开发 JavaScript 安全
TypeScript在React Hooks中的应用:提升React开发的类型安全与可维护性
【7月更文挑战第17天】TypeScript在React Hooks中的应用极大地提升了React应用的类型安全性和可维护性。通过为状态、依赖项和自定义Hooks指定明确的类型,开发者可以编写更加健壮、易于理解和维护的代码。随着React和TypeScript的不断发展,结合两者的优势将成为构建现代Web应用的标准做法。
|
22天前
|
Linux 网络安全 API
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
|
30天前
|
JavaScript
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”
26 4
|
11天前
|
JavaScript 前端开发 编译器
Angular 与 TypeScript 强强联手太厉害啦!强类型编程带来巨大开发优势,快来一探究竟!
【8月更文挑战第31天】作为一名前端开发者,我致力于探索各种技术框架以提升开发效率与代码质量。近期深入研究了Angular与TypeScript的结合,体验到强类型编程带来的显著优势。Angular是一款强大的前端框架,而TypeScript则是由微软开发的一种强类型语言,为JavaScript增添了静态类型检查等功能。
20 0
|
1月前
|
JavaScript 编译器
typescript 解决变量多类型访问属性报错--工作随记
typescript 解决变量多类型访问属性报错--工作随记
|
18天前
|
开发工具 数据安全/隐私保护
【Azure Developer】使用MSAL4J 与 ADAL4J 的SDK时候,遇见了类型冲突问题 "java.util.Collections$SingletonList cannot be cast to java.lang.String"
【Azure Developer】使用MSAL4J 与 ADAL4J 的SDK时候,遇见了类型冲突问题 "java.util.Collections$SingletonList cannot be cast to java.lang.String"
|
21天前
|
JavaScript 前端开发 安全
TypeScript:解锁JavaScript的超级英雄模式!类型系统如何化身守护神,拯救你的代码免于崩溃与混乱,戏剧性变革开发体验!
【8月更文挑战第22天】TypeScript作为JavaScript的超集,引入了强大的类型系统,提升了编程的安全性和效率。本文通过案例展示TypeScript如何增强JavaScript:1) 显式类型声明确保函数参数与返回值的准确性;2) 接口和类加强类型检查,保证对象结构符合预期;3) 泛型编程提高代码复用性和灵活性。这些特性共同推动了前端开发的标准化和规模化。
43 0
|
28天前
|
小程序 JavaScript
|
29天前
|
JavaScript
TypeScript——Record类型
TypeScript——Record类型
31 0
|
1月前
|
缓存 JavaScript 前端开发
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)更新时间(2020-10-29)