华为鸿蒙 HarmonyOS 94 个 JS / eTS 开源组件初次上新
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
源码下载地点：
2. VCard
VCard，即电子名片，是互联网中一种标准的文件传布花样，它要紧是将古代纸质贸易名片上的消息以一种标准花样在互联网上传布。VCard 应用局限很宽泛，可作为种种应用或体系之间的互换花样。用户在互联网上干脆行使电子邮件等途径，便放松转发和阅读 VCard 中的消息。
本次上新的是 eTS 版本的 VCard 组件，支撑 VCard 标准 2.0 和 3.0，供应的接口有：爱称、名字、电话、邮件、地点、社群对象、网站地点、构造、照片地点、备注、群组、事务和关系。
通过此 VCard 组件可以放松分析和生成 VCard 文件，以下图所示：
图 4 VCard
（留意：应用此 VCard 组件，需配套 OpenHarmony API version 8 及以上版本。）
源码下载地点：
3. Co毫米onsCompressEts
Co毫米onsCompressEts 是基于 eTS 说话开发的 API 库，供应十多种文件花样的压缩和解压缩功效。文件花样包含：zip、gzip、xz、z、zstd、ar、brotli、bzip2、lz4、lzma（seven7）、tar、snappy、dump、deflate、cpio。
以 zip 花样为例，演示压缩和解压缩功效以下：
图 5 Co毫米onsCompressEts
源码下载地点：
图 6 文件上传
图 7 图片预览
图 8 网页要求
源码下载地点：
除了上头说明的四个典范组件，另有其余许多组件，好比：功效壮大的 eTS 图表视图库 ohos-MPChart，供应富厚多样的选定器的 ohos-PickerView 等等。更多好用的组件等你去发现哦，底下就来看看怎样获取这些组件。
三、怎样获取开源组件？
开发者可以干脆通过 OpenHarmony 三方组件库（OpenHarmony-TPC）下载源码或从 HarmonyOS 开发者资源中间（DevEco Marketplace）获取关联组件。
1. OpenHarmony-TPC
OpenHarmony 三方组件库（OpenHarmony-TPC）汇总了各类曾经开源的三方组件资源。新增的组件带
前缀，开发者可以凭据本身需求参考和应用。
图 9 三方组件资源汇总
OpenHarmony-TPC 地点：
2. DevEco Marketplace
HarmonyOS 开发者资源中间（DevEco Marketplace），聚合了富厚的鸿蒙生态开发资源包，利便开发者一站式获取所需资源，放松实现鸿蒙智联硬件、原子化服无和应用的开发。开发者可以凭据本身需求盘问和下载组件。
图 10 DevEco Marketplace
DevEco Marketplace 地点：
四、怎样应用 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 文件夹，组件库就被留存在此文件夹下。
图 14node_modules
3.接下来，便在代码文件中导入和应用组件了。
图 15导入和应用组件