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

Posted 2023-04-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了把企业微信侧边栏的 JS-SDK 封装了，还加上了所有 TS 类型相关的知识，希望对你有一定的参考价值。

参考技术A

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

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

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

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

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

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

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

它提供了以下功能：

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

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

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

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

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

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

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

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

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

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

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

微信企业号 JS-SDK：上传图片

微信的JS-SDK提供了微信客户端相关的功能，如：拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫等微信特有的能力，为微信用户提供更优质的网页体验。这里将会介绍如何通过调用JS-SDK接口从手机摄像头或相册内上传图片。

1. 介绍

1.1 流程说明

首先看下整个Demo的流程：

①微信客户端访问页面

说明：想使用具体的操作都要在操作之前申请相关JS-SDK权限，这里将要申请图像接口。

③微信客户端选择图片

API：JS-SDK 图像接口：从手机选择图片

说明：在这一步中微信客户端只是选中了手机中的图片并且没有上传到微信服务器，每一个选中的图片都会生成个localId。

④上传图片到微信服务器获取serverId

API：JS-SDK 图像接口：上传图片到微信服务器

说明：上传localId到微信服务器，成功后返回每个图片的serverId。

⑤页面存储此serverId并提交到业务服务器

说明：页面存储上一步图片serverId并提交到业务服务器。

⑥业务服务器根据serverId获取从微信服务器获取指定图片

API：http://qydev.weixin.qq.com/wiki/index.php?title=获取临时素材文件

说明：业务服务器根据得到的serverId(media_id)请求微信服务器获取图片并存储到本地。

1.2 流程图

2.代码示例

2.1 前端HTML页面

在页面加载完毕后会请求获取JS-SDK的图像接口：

window.addEventListener(\'load\', function() {
    // reg wxconfig
    Ak.Http.get({
        url: \'/WeChat/ImageTest/GetImageJsSdk\',
        params: {
            url: location.href.split(\'#\')[0] // 要包含 code=XXXX&state 等信息
        },
        isHideLoading: true,
        successCallback: function(res) {
            wx.config(res.data);
        }
    });
});