乐趣区

关于harmonyos:94个JSeTS开源组件首发上新肯定有你要用的一款

jiezi

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…

  1. VCard

VCard，即电子名片，是互联网中一种标准的文件流传格局，它次要是将传统纸质商业名片上的信息以一种规范格局在互联网上流传。VCard 利用范畴十分宽泛，可作为各种利用或零碎之间的替换格局。用户在互联网上间接利用电子邮件等路径，就能够轻松转发和浏览 VCard 中的信息。

本次上新的是 eTS 版本的 VCard 组件，反对 VCard 规范 2.0 和 3.0，提供的接口有：昵称、名字、电话、邮件、地址、社交工具、网站地址、组织、照片地址、备注、群组、事件和关系。

通过此 VCard 组件能够轻松解析和生成 VCard 文件，如下图所示：

图 4 VCard
（留神：应用此 VCard 组件，需配套 OpenHarmony API version 8 及以上版本。）
源码下载地址：
https://gitee.com/openharmony…

  1. 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…

  1. 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）获取相干组件。

  1. OpenHarmony-TPC

OpenHarmony 三方组件库（OpenHarmony-TPC）汇总了各类曾经开源的三方组件资源。新增的组件带图片前缀，开发者能够依据本身需要参考和应用。

$$
图 9 三方组件资源汇总
$$

OpenHarmony-TPC 地址：
https://gitee.com/openharmony…

  1. DevEco Marketplace

HarmonyOS 开发者资源核心（DevEco Marketplace），聚合了丰盛的鸿蒙生态开发资源包，不便开发者一站式获取所需资源，轻松实现鸿蒙智联硬件、原子化服务和利用的开发。开发者能够依据本身需要查问和下载组件。

$$
图 10 DevEco Marketplace
$$

DevEco Marketplace 地址：
https://repo.harmonyos.com/#/…

四、如何应用 JS/eTS 开源组件？
获取了开源组件后，要如何应用呢？上面就为大家介绍 JS/eTS 开源组件的应用。

  1. 获取组件的 scope 配置命令和 npm 命令。
    DevEco Marketplace 提供了组件的装置命令，上面以此为例来介绍。
    （1）在 DevEco Marketplace 查找须要应用的 JS/eTS 开源组件。

    $$
    图 11 查找组件
    $$

（2）点击组件，在“装置”页签中查看 scope 配置命令和 npm 命令。

$$
图 12 组件的“装置”页签
$$

  1. 在 DevEco Studio 工具中关上须要援用组件的工程，在 Terminal 中执行 scope 配置命令和 npm 命令。

$$
图 13 执行命令
$$

执行以上命令后，工具主动下载和装置组件库。下载和装置实现后，会在工程文件下主动生成 node_modules 文件夹，组件库就被保留在此文件夹下。

$$
图 14 node_modules
$$

  1. 接下来，就能够在代码文件中导入和应用组件了。

$$
图 15 导入和应用组件
$$

以上就是本期全部内容，点击 https://gitee.com/openharmony…，可跳转到 OpenHarmony 三方组件库，理解更多上新组件！

退出移动版