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

JavaScript030

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

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

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

在前端方面,我已经出了 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 版本。

你可以先给img加一个id如:<img src="#" id='img1'/>,然后js代码可以这样写:

$(function(){

$("#img1").click(function(){

//关闭id=left的div

$("#left").hide()

//显示id=left的div

$("#left").show()

//换id=img1图片的内容

$("#img1").attr("src",imgPath)/*这里的imgPath是你所要更换图片的路径*/

})

}