IT之家2021年5月7日，在华为开发者大会(HDC2021)上，华为发布了新一代声明式UI框架3354 Ark开发框架(ArkUI)。ArkUI框架引入了基于TS扩展的声明式开发范式。此后，越来越多的开发者加入了JS/eTS开发团队，华为也收到了很多开发者对JS/eTS组件的需求，比如：
在组件贡献者的共同努力下，华为迎来了新一批开源组件，其中包括很多JS/eTS组件。
这一次，总共添加了94个开源组件。涉及工具、UI、图形、音视频等功能。
根据开发语言，新组件的分布细节如下：
图1按开发语言分类
从上图可以看出，世界上绝大多数的新组件都使用了JS/TS/eTS语言，这对JS/eTS开发者的开发之旅有很大的帮助。
下面是二、典型组件效果展示,介绍的四个典型组件，希望你能自己找到更多有用的组件~
1. zxing
接触过二维码相关开发的开发者应该对zxing库比较熟悉。Zxing库是一个用于条形码处理的开源类库，用于分析各种格式的1D/2D条形码。
华为此前只开放了zxing-Embedded的Java版本，而这次zxing-Embedded的新TS版本允许eTS开发者使用Zxing-Embedded开发与二维码相关的应用。
Zxing库支持解析以下1D/2D条形码格式：
图2支持的条形码格式
图3展示了使用这个zxing库生成和解析QR码的开发示例。本例通过对比jsQr库的分析结果，验证zxing库分析二维码的正确性。
图3 zxing
2. VCard
VCard，即电子名片，格式，主要是将传统纸质名片上的信息标准化。VCard应用广泛，可以作为各种应用或系统之间的交换格式。方式，您可以轻松地转发和阅读VCard中的信息。
这次新增的是eTS版本的VCard组件，支持VCard标准2.0和3.0。提供的界面有：昵称，名字，电话，邮件，地址，社交工具，组织，照片地址，备注，群，事件，关系。
该VCard组件可以轻松解析并生成VCard文件，如下图所示：
图4电子名片
(注意：使用该VCard组件需要OpenHarmony API版本8及以上。)
3. CommonsCompressEts
CommonsCompressEts是基于Ets语言开发的API库，提供了十多种文件格式的压缩和解压缩功能。文件格式包括：zip、gzip、xz、z、zstd、ar、brotli、bzip2、lz4、lzma(seven7)、tar、snappy、dump、deflate、cpio。
以zip格式为例，演示压缩和解压缩功能如下：
图5常见挤压件
下载源地址：
4. httpclient
客户端(HTTPclient)，基于大家熟悉的okhttp，集成了android-async-http、AutobahnAndroid、OkGo等库的功能和特性，致力于打造一个高效易用的。使用这个httpcilent，您可以更快地加载内容并节省带宽。
目前，httpclient基于其能力完成了以下功能：
配置全局调试开关、公共请求头和请求参数，支持链式调用。
用okio库优化IO，用改造的注解定义接口。
支持自定义任务调度器来维护任务队列，以处理同步和异步请求，还支持标签取消请求。
支持设置自定义拦截器。
支持重定向。
支持客户端gzip解压缩。
支持文件上传和下载。
支持cookie管理等。
图6、图7和图8是使用httpclient实现的三个开发实例，分别实现了文件上传和映射(GET和POST)的功能。
图6文件上传
图8
下载源地址：
除了上面介绍的四个典型组件，还有很多其他的组件，比如ohos-MPChart，一个强大的eTS图表库，ohos-PickerView，它提供了多种选择器等等。更多有用的组件等着你去发现。以下是获得它们的方法。
三、如何获取开源组件？的开发者可以直接从OpenHarmony-TPC下载源代码，或者从鸿蒙系统开发者资源中心(DevEco Marketplace)获得相关组件。
1. OpenHarmony-TPC
OpenHarmony三方组件库(OpenHarmony-TPC)总结了各种开源的三方组件资源。新增的组件都有前缀，开发者可以根据自己的需求参考使用。
图9三方资源汇总
OpenHarmony-TPC地址：
2. DevEco Marketplace
鸿蒙系统开发者资源中心(DevEco Marketplace)，聚合了丰富的鸿蒙系统生态开发资源包，方便开发者一站式获取所需资源，轻松完成鸿蒙系统智联的硬件、原子化服务、应用的开发。开发者可以根据自己的需求查询和下载组件。
图10 DevEco市场
DevEco市场地址：
四、如何使用 JS / eTS 开源组件？获得开源组件后，如何使用它们？下面介绍一下JS/eTS开源组件的使用。
1.获取组件的范围配置命令和npm命令。
DevEco Marketplace提供了组件的安装命令，下面将以此为例进行介绍。
(1)找到DevEco Marketplace中需要使用的JS/eTS开源组件。
图11查找组件
(2)单击组件以在“安装”选项卡中查看范围配置命令和npm命令。
图12组件的“安装”选项卡
2.在DevEco Studio工具中打开需要引用组件的项目，在终端中执行scope configuration命令和npm命令。
图13执行命令
执行上述命令后，该工具会自动下载并安装组件库。下载安装后，项目文件下会自动生成node_modules文件夹，组件库会保存在这个文件夹中。
图14节点模块
3.接下来，您可以导入和使用代码文件中的组件。
图15导入和使用组件
