方舟開發(fā)框架新增開源組件及其使用方法介紹

2021年的華為開發(fā)者大會（HDC2021）上，我們發(fā)布了新一代的聲明式UI框架——方舟開發(fā)框架（ArkUI）。ArkUI框架引入了基于TS擴展的聲明式開發(fā)范式。自此，越來越多的開發(fā)者加入到JS/eTS的開發(fā)隊伍中，我們也收到不少開發(fā)者對JS/eTS組件的需求。

在廣大組件貢獻者的共同努力下，我們又迎來了新一批組件開源，其中就有很多JS/eTS組件。趕緊來一睹為快吧！

一、新增開源組件概覽

本次上新，共計新增94個開源組件。組件涉及工具、網(wǎng)絡(luò)、UI、圖形、音視頻等多種功能。

按開發(fā)語言分類，新增組件的分布詳情如下

從上圖可知，上新的組件大部分采用JS/TS/eTS語言，這為JS/eTS開發(fā)者的開發(fā)之旅增添很大助力。

二、典型組件效果展示

下面為大家介紹四個典型的組件，也期待大家自己去發(fā)現(xiàn)更多好用的組件~

1. zxing

接觸過二維碼相關(guān)開發(fā)的開發(fā)者應(yīng)該對zxing庫不陌生。zxing庫是一個開源的條形碼處理類庫，用于解析多種格式的1D/2D條形碼。

我們之前只開源了Java版的zxing庫（Zxing-Embedded），此次上新TS版的zxing庫，讓eTS開發(fā)者也能使用zxing庫進行二維碼相關(guān)的應(yīng)用開發(fā)。

zxing庫支持解析以下1D/2D條形碼格式：

圖3展示了使用此zxing庫生成和解析二維碼的開發(fā)示例。此示例中，解析二維碼時還展示了jsQr庫的解析結(jié)果，對比驗證zxing庫解析二維碼的正確性。

源碼下載地址：https://gitee.com/openharmony-tpc/zxing

2. VCard

VCard，即電子名片，是互聯(lián)網(wǎng)中一種規(guī)范的文件傳播格式，它主要是將傳統(tǒng)紙質(zhì)商業(yè)名片上的信息以一種標準格式在互聯(lián)網(wǎng)上傳播。VCard應(yīng)用范圍非常廣泛，可作為各種應(yīng)用或系統(tǒng)之間的交換格式。用戶在互聯(lián)網(wǎng)上直接利用電子郵件等途徑，就可以輕松轉(zhuǎn)發(fā)和閱讀VCard中的信息。

本次上新的是eTS版本的VCard組件，支持VCard標準2.0和3.0，提供的接口有：昵稱、名字、電話、郵件、地址、社交工具、網(wǎng)站地址、組織、照片地址、備注、群組、事件和關(guān)系。

通過此VCard組件可以輕松解析和生成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格式為例，演示壓縮和解壓縮功能如下：

源碼下載地址：https://gitee.com/openharmony-tpc/CommonsCompressEts

4. httpclient

httpclient（即HTTP客戶端），以人們耳熟能詳?shù)膐khttp為基礎(chǔ)，整合android-async-http、AutobahnAndroid、OkGo等庫的功能特性，致力于打造一款高效易用、功能全面的網(wǎng)絡(luò)請求庫。使用此httpcilent，可以使您的內(nèi)容加載更快，且節(jié)省帶寬。

當前，httpclient依托系統(tǒng)提供的網(wǎng)絡(luò)請求能力和上傳下載能力，已完成如下功能：

全局配置調(diào)試開關(guān)、超時時間、公共請求頭和請求參數(shù)等，支持鏈式調(diào)用。

配合okio庫優(yōu)化IO，配合retrofit使用注解定義接口。

支持自定義任務(wù)調(diào)度器維護任務(wù)隊列來處理同步異步請求，還支持tag取消請求。

支持設(shè)置自定義攔截器。

支持重定向。

支持客戶端gzip解壓縮。

支持文件上傳和下載。

支持cookie管理等。

圖6、圖7、圖8為使用httpclient實現(xiàn)的三個開發(fā)示例，分別實現(xiàn)了文件上傳、圖片預(yù)覽以及網(wǎng)絡(luò)請求（GET和POST）的功能。

源碼下載地址：https://gitee.com/openharmony-tpc/httpclient

除了上面介紹的四個典型組件，還有其他很多組件，比如：功能強大的eTS圖表視圖庫ohos-MPChart，提供豐富多樣的選擇器的ohos-PickerView等等。更多好用的組件等你去發(fā)現(xiàn)哦，下面我們就來看看如何獲取這些組件。

三、如何獲取開源組件？

開發(fā)者可以直接通過OpenHarmony三方組件庫（OpenHarmony-TPC）下載源碼或從HarmonyOS開發(fā)者資源中心（DevEco Marketplace）獲取相關(guān)組件。

1. OpenHarmony-TPC

OpenHarmony三方組件庫（OpenHarmony-TPC）匯總了各類已經(jīng)開源的三方組件資源。新增的組件帶NEW

前綴，開發(fā)者可以根據(jù)自身需求參考和使用。

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

2. DevEco Marketplace

HarmonyOS開發(fā)者資源中心（DevEco Marketplace），聚合了豐富的OpenHarmony生態(tài)開發(fā)資源包，方便開發(fā)者一站式獲取所需資源，輕松完成OpenHarmony智聯(lián)硬件、原子化服務(wù)和應(yīng)用的開發(fā)。開發(fā)者可以根據(jù)自身需求查詢和下載組件。

DevEco Marketplace地址：https://repo.harmonyos.com/#/cn/application/atomService

四、如何使用JS/eTS開源組件？

獲取了開源組件后，要如何使用呢？下面就為大家介紹JS/eTS開源組件的使用。

1. 獲取組件的scope配置命令和npm命令。

DevEco Marketplace提供了組件的安裝命令，下面以此為例來介紹。

（1）在DevEco Marketplace查找需要使用的JS/eTS開源組件。

（2）點擊組件，在“安裝”頁簽中查看scope配置命令和npm命令。

2. 在DevEco Studio工具中打開需要引用組件的工程，在Terminal中執(zhí)行scope配置命令和npm命令。

執(zhí)行以上命令后，工具自動下載和安裝組件庫。下載和安裝完成后，會在工程文件下自動生成node_modules文件夾，組件庫就被保存在此文件夾下。

3. 接下來，就可以在代碼文件中導(dǎo)入和使用組件了。

來源：HarmonyOS開發(fā)者