华为鸿蒙HarmonyOS94个JS/eTS开源组件首发上新

感谢本站网友肖恩肖提供的线索！

在2021年华为开发者大会上，华为发布了新一代声明式UI框架——方舟开发框架ArkUI框架引入了基于TS扩展的声明式开发范式

在组件贡献者的共同努力下，华为迎来了新一批开源组件，其中包括很多JS/eTS组件。

一.新的开放源码组件概述

这一次，总共添加了94个开源组件涉及工具，网络，UI，图形，音视频等功能

根据开发语言，新组件的分布细节如下:

图1按开发语言分类

从上图可以看出，世界上绝大多数的新组件都使用了JS/TS/eTS语言，这对JS/eTS开发者的开发之旅有很大的帮助。

二，典型组件效果展示

下面给你介绍四个典型的组件，希望你自己也能找到更多有用的组件~

1.一维码

Zxing库支持解析以下1D/2D条形码格式:

图2支持的条形码格式

图3 zxing

下载源地址:

2.VCard

VCard，即电子名片，是互联网中的标准文件传输格式它主要是将传统纸质名片上的信息以标准格式在互联网上传输VCard应用广泛，可以作为各种应用或系统之间的交换格式用户可以直接使用电子邮件和互联网上的其他渠道轻松转发和阅读VCard中的信息

该VCard组件可以轻松解析并生成VCard文件，如下图所示:

图4电子名片

下载源地址:

3.常见新闻

CommonsCompressEts是基于Ets语言开发的API库，提供了十多种文件格式的压缩和解压缩功能文件格式包括:zip，gzip，xz，z，zstd，ar，brotli，bzip2，lz4，lzma，tar，snappy，dump，deflate，cpio

以zip格式为例，演示压缩和解压缩功能如下:

图5常见挤压件

下载源地址:

配置全局调试开关，超时，公共请求头和请求参数，支持链调用。

用okio库优化IO，用改造的注解定义接口。

支持自定义任务调度器来维护任务队列，以处理同步和异步请求，还支持标签取消请求。

支持设置自定义拦截器。

支持重定向。

支持客户端gzip解压缩。

支持文件上传和下载。

支持cookie管理等。

图6文件上传

图8网络请求

下载源地址:

除了上面介绍的四个典型组件，还有很多其他的组件，比如ohos—MPChart，一个强大的eTS图表库，ohos—PickerView，它提供了多种选择器等等更多有用的组件等着你去发现以下是获得它们的方法

三如何获取开源组件

开发者可以通过OpenHarmony三方组件库直接下载源代码，或者从鸿蒙系统开发者资源中心获取相关组件。

1.OpenHarmony—TPC

OpenHarmony三方组件库总结了各种开源的三方组件资源新增的组件都有前缀，开发者可以根据自己的需求参考使用

图9三方资源汇总

OpenHarmony—TPC地址:

2.德弗科市场

鸿蒙系统开发者资源中心，聚合了丰富的鸿蒙系统生态开发资源包，方便开发者一站式获取所需资源，轻松完成鸿蒙系统智联的硬件，原子化服务，应用的开发开发者可以根据自己的需求查询和下载组件

图10 DevEco市场

DevEco市场地址:

四如何使用JS/eTS开源组件

获得开源组件后，如何使用下面介绍一下JS/eTS开源组件的使用

1.获取组件的范围配置命令和npm命令。

DevEco Marketplace提供了组件的安装命令，下面将以此为例进行介绍。

在DevEco Marketplace找到你需要的JS/eTS开源组件。

图11查找组件

单击组件以在安装选项卡中查看范围配置命令和npm命令。

图12组件的安装选项卡

2.在DevEco Studio工具中打开需要引用组件的项目，在终端中执行scope configuration命令和npm命令。

图13执行命令

执行上述命令后，该工具会自动下载并安装组件库下载安装后，项目文件下会自动生成node_modules文件夹，组件库会保存在这个文件夹中

图14节点模块

3.接下来，您可以导入和使用代码文件中的组件。

图15导入和使用组件