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