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 匯入和使用組件
以上就是本期全部內容，點擊鏈接（https://gitee.com/openharmony-tpc/tpc_resource），可跳轉到OpenHarmony三方組件庫，了解更多上新組件！
搜索
復制
<iframe></iframe>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/471860.html
標籤：其他