IT之家 5 月 7 日消息，2021 年的華為開發(fā)者大會（HDC2021）上，華為發(fā)布了新一代的聲明式 UI 框架 —— 方舟開發(fā)框架（ArkUI）。ArkUI 框架引入了基于 TS 擴展的聲明式開發(fā)范式。自此，越來越多的開發(fā)者加入到 JS / eTS 的開發(fā)隊伍中，華為也收到不少開發(fā)者對 JS / eTS 組件的需求，比如：
在廣大組件貢獻者的共同努力下，華為又迎來了新一批組件開源，其中就有很多 JS / eTS 組件。
一、新增開源組件概覽
本次上新，共計新增 94 個開源組件。組件涉及工具、網(wǎng)絡、UI、圖形、音視頻等多種功能。
按開發(fā)語言分類，新增組件的分布詳情如下：
圖 1 按開發(fā)語言分類
從上圖可知，上新的組件大部分采用 JS / TS / eTS 語言，這為 JS / eTS 開發(fā)者的開發(fā)之旅增添很大助力。
二、典型組件效果展示
下面為大家介紹四個典型的組件，也期待大家自己去發(fā)現(xiàn)更多好用的組件~
1. zxing
接觸過二維碼相關開發(fā)的開發(fā)者應該對 zxing 庫不陌生。zxing 庫是一個開源的條形碼處理類庫，用于解析多種格式的 1D / 2D 條形碼。
華為之前只開源了 Java 版的 zxing 庫（Zxing-Embedded），此次上新 TS 版的 zxing 庫，讓 eTS 開發(fā)者也能使用 zxing 庫進行二維碼相關的應用開發(fā)。
zxing 庫支持解析以下 1D / 2D 條形碼格式：
圖 2 支持的條形碼格式
圖 3 展示了使用此 zxing 庫生成和解析二維碼的開發(fā)示例。此示例中，解析二維碼時還展示了 jsQr 庫的解析結果，對比驗證 zxing 庫解析二維碼的正確性。
圖 3 zxing
源碼下載地址：
https://gitee.com/openharmony-tpc/zxing
2. VCard
VCard，即電子名片，是互聯(lián)網(wǎng)中一種規(guī)范的文件傳播格式，它主要是將傳統(tǒng)紙質(zhì)商業(yè)名片上的信息以一種標準格式在互聯(lián)網(wǎng)上傳播。VCard 應用范圍非常廣泛，可作為各種應用或系統(tǒng)之間的交換格式。用戶在互聯(lián)網(wǎng)上直接利用電子郵件等途徑，就可以輕松轉(zhuǎn)發(fā)和閱讀 VCard 中的信息。
本次上新的是 eTS 版本的 VCard 組件，支持 VCard 標準 2.0 和 3.0，提供的接口有：昵稱、名字、電話、郵件、地址、社交工具、網(wǎng)站地址、組織、照片地址、備注、群組、事件和關系。
通過此 VCard 組件可以輕松解析和生成 VCard 文件，如下圖所示：
圖 4 VCard
（注意：使用此 VCard 組件，需配套 OpenHarmony API version 8 及以上版本。）
源碼下載地址：
https://gitee.com/openharmony-tpc/VCard
3. CommonsCompressEts
CommonsCompressEts 是基于 eTS 語言開發(fā)的 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 客戶端），以人們耳熟能詳?shù)?okhttp 為基礎，整合 android-async-http、AutobahnAndroid、OkGo 等庫的功能特性，致力于打造一款高效易用、功能全面的網(wǎng)絡請求庫。使用此 httpcilent，可以使您的內(nèi)容加載更快，且節(jié)省帶寬。
當前，httpclient 依托系統(tǒng)提供的網(wǎng)絡請求能力和上傳下載能力，已完成如下功能：
全局配置調(diào)試開關、超時時間、公共請求頭和請求參數(shù)等，支持鏈式調(diào)用。
配合 okio 庫優(yōu)化 IO，配合 retrofit 使用注解定義接口。
支持自定義任務調(diào)度器維護任務隊列來處理同步異步請求，還支持 tag 取消請求。
支持設置自定義攔截器。
支持重定向。
支持客戶端 gzip 解壓縮。
支持文件上傳和下載。
支持 cookie 管理等。
圖 6、圖 7、圖 8 為使用 httpclient 實現(xiàn)的三個開發(fā)示例，分別實現(xiàn)了文件上傳、圖片預覽以及網(wǎng)絡請求（GET 和 POST）的功能。
圖 6 文件上傳
圖 7 圖片預覽
圖 8 網(wǎng)絡請求
源碼下載地址：
https://gitee.com/openharmony-tpc/httpclient
除了上面介紹的四個典型組件，還有其他很多組件，比如：功能強大的 eTS 圖表視圖庫 ohos-MPChart，提供豐富多樣的選擇器的 ohos-PickerView 等等。更多好用的組件等你去發(fā)現(xiàn)哦，下面就來看看如何獲取這些組件。
三、如何獲取開源組件？
開發(fā)者可以直接通過 OpenHarmony 三方組件庫（OpenHarmony-TPC）下載源碼或從 HarmonyOS 開發(fā)者資源中心（DevEco Marketplace）獲取相關組件。
1. OpenHarmony-TPC
OpenHarmony 三方組件庫（OpenHarmony-TPC）匯總了各類已經(jīng)開源的三方組件資源。新增的組件帶前綴，開發(fā)者可以根據(jù)自身需求參考和使用。
圖 9 三方組件資源匯總
OpenHarmony-TPC 地址：
https://gitee.com/openharmony-tpc/tpc_resource
2. DevEco Marketplace
HarmonyOS 開發(fā)者資源中心（DevEco Marketplace），聚合了豐富的鴻蒙生態(tài)開發(fā)資源包，方便開發(fā)者一站式獲取所需資源，輕松完成鴻蒙智聯(lián)硬件、原子化服務和應用的開發(fā)。開發(fā)者可以根據(jù)自身需求查詢和下載組件。
圖 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 中執(zhí)行 scope 配置命令和 npm 命令。
圖 13 執(zhí)行命令
執(zhí)行以上命令后，工具自動下載和安裝組件庫。下載和安裝完成后，會在工程文件下自動生成 node_modules 文件夾，組件庫就被保存在此文件夾下。
圖 14 node_modules
3. 接下來，就可以在代碼文件中導入和使用組件了。
圖 15 導入和使用組件
廣告聲明：文內(nèi)含有的對外跳轉(zhuǎn)鏈接（包括不限于超鏈接、二維碼、口令等形式），用于傳遞更多信息，節(jié)省甄選時間，結果僅供參考，IT之家所有文章均包含本聲明。