IT之傢 5 月 7 日消息 2021 年的華為開發者大會（HDC2021）上 華為鴻濛 HarmonyOS 94個JS/eTS 開源組件首發上新 - 趣味新聞網

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 導入和使用組件