华为鸿蒙 HarmonyOS 94 个 JS / eTS 开源组件首发上新
消息来源:baojiabao.com 作者: 发布时间:2024-05-09
最新 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 导入和使用组件
2022-05-08 09:07:22相关文章
- 美国法院裁定阿里须为Squishmallows玩具侵权案答辩
2023-12-28 19:59:34
- 小米汽车传员工3700人 雷军称小米汽车不可能卖9万9
2023-12-28 19:41:57
- 国家新闻出版署:认真研究《网络游戏管理办法(草桉徵求意见稿)》关切 实行前进一步完善
2023-12-28 19:14:56
- 天猫新规可以无条件申请“仅退款”了?淘宝天猫又离狗多多零元购近了一步
2023-12-28 18:57:55
- 印度以打击金融犯罪为由逮捕了两名 vivo 高管
2023-12-26 16:49:01
- 在国外微信收不到国内信息?微信和WeChat将被拆分
2023-12-15 10:40:15
- 苹果iPhone15 系列手机发布最新消息 预计上市发布时间9月
2023-08-06 23:21:02
- 华为将发布鸿蒙HarmonyOS4操作系统 功能五大升级支持设备清单
2023-08-06 23:17:37
- 整治自媒体网红账号 400万粉丝网红发布擦边视频被无限期封禁
2023-07-12 09:56:09
- 网传微信文件传输助手是真人是真的吗?微信官方回应
2023-06-27 15:53:32
- 电信移动送手机成了“信用购”?你上了运营商的贷款套路了吗?
2023-06-12 17:18:55
- 中国电信广东地区崩了无信号 客服回应已在核实处理
2023-06-08 15:39:04
- 消息称小米新能源汽车价格表正讨论定价区间:双版本不同配置,高配或超 35 万元
2023-03-06 12:56:03
- 华为因制裁被传或分拆剥离手机业务? 内部人士回应:可能性不大.
2023-03-05 23:26:41
- OPPO正式发布安第斯智能云,让终端更智能
2023-02-24 16:02:27
- 华为与OPPO签订全球专利交叉许可协议 包括5G蜂窝通信专利
2023-02-24 16:02:26
- 老蛙将推MINI镜头新品:目前未知具体规格 官宣将于12月20日发布
2023-02-24 16:02:26
- 首发全新35mm定制光学系统 努比亚Z50性能同样强悍
2023-02-24 16:02:25
- Redmi K60屏幕细节曝光:全系标配2K护眼柔性直屏+5000mAh大容量电池
2023-02-24 16:02:25
- OPPO Find N2今天发 合金金属折叠屏更轻了
2023-02-24 16:02:24