2021年的华为开发者大会（HDC2021）上，咱们公布了新一代的申明式UI框架——方舟开发框架（ArkUI）。ArkUI框架引入了基于TS扩大的申明式开发范式。自此，越来越多的开发者退出到JS/eTS的开发队伍中，咱们也收到不少开发者对JS/eTS组件的需要，比方：
在宽广组件贡献者的共同努力下，咱们又迎来了新一批组件开源，其中就有很多JS/eTS组件。连忙来一睹为快吧！
一、新增开源组件概览
本次上新，共计新增94个开源组件。组件波及工具、网络、UI、图形、音视频等多种性能。
按开发语言分类，新增组件的散布详情如下：
$$图1 按开发语言分类$$
从上图可知，上新的组件大部分采纳JS/TS/eTS语言，这为JS/eTS开发者的开发之旅削减很大助力。
二、典型组件成果展现
上面为大家介绍四个典型的组件，也期待大家本人去发现更多好用的组件~
- zxing
接触过二维码相干开发的开发者应该对zxing库不生疏。zxing库是一个开源的条形码解决类库，用于解析多种格局的1D/2D条形码。
咱们之前只开源了Java版的zxing库（Zxing-Embedded），此次上新TS版的zxing库，让eTS开发者也能应用zxing库进行二维码相干的利用开发。
zxing库反对解析以下1D/2D条形码格局：
$$图2 反对的条形码格局$$
图3展现了应用此zxing库生成和解析二维码的开发示例。此示例中，解析二维码时还展现了jsQr库的解析后果，比照验证zxing库解析二维码的正确性。
$$图3 zxing$$
源码下载地址：
https://gitee.com/openharmony...
- VCard
VCard，即电子名片，是互联网中一种标准的文件流传格局，它次要是将传统纸质商业名片上的信息以一种规范格局在互联网上流传。VCard利用范畴十分宽泛，可作为各种利用或零碎之间的替换格局。用户在互联网上间接利用电子邮件等路径，就能够轻松转发和浏览VCard中的信息。
本次上新的是eTS版本的VCard组件，反对VCard规范2.0和3.0，提供的接口有：昵称、名字、电话、邮件、地址、社交工具、网站地址、组织、照片地址、备注、群组、事件和关系。
通过此VCard组件能够轻松解析和生成VCard文件，如下图所示：
图4 VCard
（留神：应用此VCard组件，需配套OpenHarmony API version 8及以上版本。）
源码下载地址：
https://gitee.com/openharmony...
- CommonsCompressEts
CommonsCompressEts是基于eTS语言开发的API库，提供十多种文件格式的压缩和解压缩性能。文件格式包含：zip、gzip、xz、z、zstd、ar、brotli、bzip2、lz4、lzma（seven7）、tar、snappy、dump、deflate、cpio。
以zip格局为例，演示压缩和解压缩性能如下：
$$图5 CommonsCompressEts$$
源码下载地址：
https://gitee.com/openharmony...
- httpclient
httpclient（即HTTP客户端），以人们耳熟能详的okhttp为根底，整合android-async-http、AutobahnAndroid、OkGo等库的性能个性，致力于打造一款高效易用、性能全面的网络申请库。应用此httpcilent，能够使您的内容加载更快，且节俭带宽。
以后，httpclient依靠零碎提供的网络申请能力和上传下载能力，已实现如下性能：
全局配置调试开关、超时工夫、公共申请头和申请参数等，反对链式调用。
配合okio库优化IO，配合retrofit应用注解定义接口。
反对自定义任务调度器保护工作队列来解决同步异步申请，还反对tag勾销申请。
反对设置自定义拦截器。
反对重定向。
反对客户端gzip解压缩。
反对文件上传和下载。
反对cookie治理等。
图6、图7、图8为应用httpclient实现的三个开发示例，别离实现了文件上传、图片预览以及网络申请（GET和POST）的性能。
$$图6 文件上传$$
$$图7 图片预览$$
$$图8 网络申请$$
源码下载地址：
https://gitee.com/openharmony...
除了下面介绍的四个典型组件，还有其余很多组件，比方：功能强大的eTS图表视图库ohos-MPChart，提供丰盛多样的选择器的ohos-PickerView等等。更多好用的组件等你去发现哦，上面咱们就来看看如何获取这些组件。
三、如何获取开源组件？
开发者能够间接通过OpenHarmony三方组件库（OpenHarmony-TPC）下载源码或从HarmonyOS开发者资源核心（DevEco Marketplace）获取相干组件。
- OpenHarmony-TPC
OpenHarmony三方组件库（OpenHarmony-TPC）汇总了各类曾经开源的三方组件资源。新增的组件带图片前缀，开发者能够依据本身需要参考和应用。
$$图9 三方组件资源汇总$$
OpenHarmony-TPC地址：
https://gitee.com/openharmony...
- DevEco Marketplace
HarmonyOS开发者资源核心（DevEco Marketplace），聚合了丰盛的鸿蒙生态开发资源包，不便开发者一站式获取所需资源，轻松实现鸿蒙智联硬件、原子化服务和利用的开发。开发者能够依据本身需要查问和下载组件。
$$图10 DevEco Marketplace$$
DevEco Marketplace地址：
https://repo.harmonyos.com/#/...
四、如何应用JS/eTS开源组件？
获取了开源组件后，要如何应用呢？上面就为大家介绍JS/eTS开源组件的应用。
获取组件的scope配置命令和npm命令。
DevEco Marketplace提供了组件的装置命令，上面以此为例来介绍。
（1）在DevEco Marketplace查找须要应用的JS/eTS开源组件。$$图11 查找组件$$
（2）点击组件，在“装置”页签中查看scope配置命令和npm命令。
$$图12 组件的“装置”页签$$
- 在DevEco Studio工具中关上须要援用组件的工程，在Terminal中执行scope配置命令和npm命令。
$$图13 执行命令$$
执行以上命令后，工具主动下载和装置组件库。下载和装置实现后，会在工程文件下主动生成node_modules文件夹，组件库就被保留在此文件夹下。
$$图14 node_modules$$
- 接下来，就能够在代码文件中导入和应用组件了。
$$图15 导入和应用组件$$
以上就是本期全部内容，点击https://gitee.com/openharmony...，可跳转到OpenHarmony三方组件库，理解更多上新组件！