IT之家 5 月 7 日消息，2021 年的华为开发者大会（HDC2021）上，华为发布了新一代的声明式 UI 框架 —— 方舟开发框架（ArkUI）。ArkUI 框架引入了基于 TS 扩展的声明式开发范式。自此，越来越多的开发者加入到 JS / eTS 的开发队伍中，华为也收到不少开发者对 JS / eTS 组件的需求，比如：
在广大组件贡献者的共同努力下，华为又迎来了新一批组件开源，其中就有很多 JS / eTS 组件。
一、新增开源组件概览
本次上新，共计新增 94 个开源组件。组件涉及工具、网络、UI、图形、音视频等多种功能。
按开发语言分类，新增组件的分布详情如下：
图 1 按开发语言分类
从上图可知，上新的组件大部分采用 JS / TS / eTS 语言，这为 JS / eTS 开发者的开发之旅增添很大助力。
二、典型组件效果展示
下面为大家介绍四个典型的组件，也期待大家自己去发现更多好用的组件~
1. 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-tpc/zxing
2. VCard
VCard，即电子名片，是互联网中一种规范的文件传播格式，它主要是将传统纸质商业名片上的信息以一种标准格式在互联网上传播。VCard 应用范围非常广泛，可作为各种应用或系统之间的交换格式。用户在互联网上直接利用电子邮件等途径，就可以轻松转发和阅读 VCard 中的信息。
本次上新的是 eTS 版本的 VCard 组件，支持 VCard 标准 2.0 和 3.0，提供的接口有：昵称、名字、电话、邮件、地址、社交工具、网站地址、组织、照片地址、备注、群组、事件和关系。
通过此 VCard 组件可以轻松解析和生成 VCard 文件，如下图所示：
图 4 VCard
（注意：使用此 VCard 组件，需配套 OpenHarmony API version 8 及以上版本。）
源码下载地址：
https://gitee.com/openharmony-tpc/VCard
3. 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-tpc/CommonsCompressEts
4. 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-tpc/httpclient
除了上面介绍的四个典型组件，还有其他很多组件，比如：功能强大的 eTS 图表视图库 ohos-MPChart，提供丰富多样的选择器的 ohos-PickerView 等等。更多好用的组件等你去发现哦，下面就来看看如何获取这些组件。
三、如何获取开源组件？
开发者可以直接通过 OpenHarmony 三方组件库（OpenHarmony-TPC）下载源码或从 HarmonyOS 开发者资源中心（DevEco Marketplace）获取相关组件。
1. OpenHarmony-TPC
OpenHarmony 三方组件库（OpenHarmony-TPC）汇总了各类已经开源的三方组件资源。新增的组件带前缀，开发者可以根据自身需求参考和使用。
图 9 三方组件资源汇总
OpenHarmony-TPC 地址：
https://gitee.com/openharmony-tpc/tpc_resource
2. DevEco Marketplace
HarmonyOS 开发者资源中心（DevEco Marketplace），聚合了丰富的鸿蒙生态开发资源包，方便开发者一站式获取所需资源，轻松完成鸿蒙智联硬件、原子化服务和应用的开发。开发者可以根据自身需求查询和下载组件。
图 10 DevEco Marketplace
DevEco Marketplace 地址：
https://repo.harmonyos.com/#/cn/application/atomService
四、如何使用 JS / eTS 开源组件？
获取了开源组件后，要如何使用呢？下面就为大家介绍 JS / eTS 开源组件的使用。
1. 获取组件的 scope 配置命令和 npm 命令。
DevEco Marketplace 提供了组件的安装命令，下面以此为例来介绍。
（1）在 DevEco Marketplace 查找需要使用的 JS / eTS 开源组件。
图 11 查找组件
（2）点击组件，在“安装”页签中查看 scope 配置命令和 npm 命令。
图 12 组件的“安装”页签
2. 在 DevEco Studio 工具中打开需要引用组件的工程，在 Terminal 中执行 scope 配置命令和 npm 命令。
图 13 执行命令
执行以上命令后，工具自动下载和安装组件库。下载和安装完成后，会在工程文件下自动生成 node_modules 文件夹，组件库就被保存在此文件夹下。
图 14 node_modules
3. 接下来，就可以在代码文件中导入和使用组件了。
图 15 导入和使用组件
广告声明：文内含有的对外跳转链接（包括不限于超链接、二维码、口令等形式），用于传递更多信息，节省甄选时间，结果仅供参考，IT之家所有文章均包含本声明。