前言
哈喽,大家好,我是海怪。
在之前几个月,我陆陆续续地写了很多关于企业微信侧边栏的内容:
在前端方面,我已经出了 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 进行封装的。
它提供了以下功能:
TS Ready
这个库将所有的 API 的类型都写全了(3.1.20)(如果有新的我可能也不知道,你可以提交一个 Issue 让我再加上)。
所以说,就算你不想用这个库的提供的 API,这个库的 TS 类型声明也能带给你很好的开发体验:
当然,你能用我自带的 API 是更好了:
上手
说那么多,不如先给大家看个示例:
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 版本。