94个JS/eTS开源组件首发上新,肯定有你要用的一款
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
源码下载地址:OpenHarmony-TPC/zxing
2. VCard
VCard,即电子名片,是互联网中一种规范的文件传播格式,它主要是将传统纸质商业名片上的信息以一种标准格式在互联网上传播。VCard应用范围非常广泛,可作为各种应用或系统之间的交换格式。用户在互联网上直接利用电子邮件等途径,就可以轻松转发和阅读VCard中的信息。
本次上新的是eTS版本的VCard组件,支持VCard标准2.0和3.0,提供的接口有:昵称、名字、电话、邮件、地址、社交工具、网站地址、组织、照片地址、备注、群组、事件和关系。
通过此VCard组件可以轻松解析和生成VCard文件,如下图所示:
图4 VCard
(注意:使用此VCard组件,需配套OpenHarmony API version 8及以上版本)
源码下载地址:VCard: 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
源码下载地址: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 网络请求
源码下载地址:OpenHarmony-TPC/httpclient
除了上面介绍的四个典型组件,还有其他很多组件,比如:功能强大的eTS图表视图库ohos-MPChart,提供丰富多样的选择器的ohos-PickerView等等。更多好用的组件等你去发现哦,下面我们就来看看如何获取这些组件。
三、如何获取开源组件?
开发者可以直接通过OpenHarmony三方组件库(OpenHarmony-TPC)下载源码或从HarmonyOS开发者资源中心(DevEco Marketplace)获取相关组件。
1. OpenHarmony-TPC
OpenHarmony三方组件库(OpenHarmony-TPC)汇总了各类已经开源的三方组件资源。新增的组件带图片前缀,开发者可以根据自身需求参考和使用。
图9 三方组件资源汇总
OpenHarmony-TPC地址:tpc_resource: 三方组件资源汇总
2. DevEco Marketplace
HarmonyOS开发者资源中心(DevEco Marketplace),聚合了丰富的鸿蒙生态开发资源包,方便开发者一站式获取所需资源,轻松完成鸿蒙智联硬件、原子化服务和应用的开发。开发者可以根据自身需求查询和下载组件。
图10 DevEco Marketplace
DevEco Marketplace地址:DevEco Marketplace
四、如何使用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 导入和使用组件
以上就是本期全部内容,点击链接(tpc_resource: 三方组件资源汇总),可跳转到OpenHarmony三方组件库,了解更多上新组件!
94个JS/eTS开源组件首发上新,肯定有你要用的一款相关推荐
- 组件用.vue还是.js_一个Vue.js 2.0组件,用于生成首字母缩写或基于图像的头像
组件用.vue还是.js Vue头像组件 (vue-avatar-component) This vue.js component provide a simple way to generate r ...
- 百度开源业内首个口罩人脸检测及分类模型,携手开发者共同抗疫
2020-02-13 15:33:32 允中 发自 凹非寺 量子位 编辑 | 公众号 QbitAI 抗击疫情,众志成城,人工智能技术正被应用到疫情防控中来. 2月13日,百度宣布免费开源业内首个口罩人 ...
- java去掉rn,React Native删除第三方开源组件的依赖包
最近项目即将上线,但是遇到了一个问题,安装之后第一次打开时,在有的Android手机上崩溃,之后再次运行就好了,好多Android机型都遇到这种情况,定位问题,发现是之前加载的第三方开源控件:reac ...
- 用开源组件构建属于你的 PHP 框架
为什么要构建自己的 PHP 框架? 现在的 PHP 框架很多,当然不止 PHP ,即使是其他编程语言也有很多框架,这篇文章讲 PHP 框架构建是因为我对 PHP 的生态最为熟悉,但这个方法同样也适用于 ...
- 百度开源业内首个口罩人脸检测及分类模型,携手开发者共同“抗疫”
点击我爱计算机视觉标星,更快获取CVML新技术 允中 发自 凹非寺 量子位 编辑 | 公众号 QbitAI 抗击疫情,众志成城,人工智能技术正被应用到疫情防控中来. 2月13日,百度宣布免费开源业内首 ...
- npm 私有库开源组件_苹果的ResearchKit,npm私有模块以及更多开源新闻
npm 私有库开源组件 在本周的开源新闻摘要中,我们介绍了Apple ResearchKit的发布,npm私有模块的发布,Docker新闻以及更多开源新闻. 2015年4月11日至17日的开源新闻摘要 ...
- Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计 ...
- 腾讯开源业界首个云原生标准的一站式微服务管理框架Femas
作者 | Femas开源技术团队 责编 | 梦依丹 企业数字化向云原生演进过程面临诸多痛点,微服务框架不统一.协议多样化.语言异构,纷繁复杂的微服务技术栈,基础组件之间像一座座孤岛,各个基础组件的控制 ...
- 开源组件 Ehcache中被曝严重漏洞,影响多款Jira产品
聚焦源代码安全,网罗国内外最新资讯! 编译:奇安信代码卫士 Atlassian 公司督促企业客户修复其 Jira Data Center 和 Jira Service Management Data ...
- 【组件篇】ionic3开源组件
原文出处:https://blog.csdn.net/df981011512/article/details/79473405 來源:简书https://www.jianshu.com/p/3e156 ...
最新文章
- html5表单验证没有效果,HTML5表单验证特性(知识点小结)
- (0108)iOS开发之Xcode11: 删除默认Main.storyBoard、自定义根控制器
- MacOS sublime-text-removal
- 【Pycharm】专业版连接xshell 远程服务器
- struts2+extjs文件上传完整实现(攻克了上传中的各种问题)
- python opencv报错_OpenCV in Python 入门问题,python报错
-问答-阿里云开发者社区-阿里云...
- C++ 类的行为 | 行为像值的类、行为像指针的类、swap函数处理自赋值
- C#LeetCode刷题-字典树
- Git学习第三课 使用github创建一个新的项目
- AcWing285. 没有上司的舞会(树形DP)题解
- Javaweb技术的校运会报名及比赛管理系统
- 大数据发展的根基是什么?
- java中word转pdf/word转图片/word转html/html转word等操作
- MTK6577+Android4.0之增加重启功能
- Photoshop(PS)CC2020安装教程【64位】
- [BZOJ5109/CodePlus2017]大吉大利,晚上吃鸡!
- android 触摸屏干扰,如何解决电容触摸屏的抗干扰问题?
- 网站域名过期后还能买回来吗?
- 欧洲十大电动摩托车市场-Part one
- 2018最新vue.js2.0完整视频教程12套
热门文章
- php加壳,文件加壳实现(三) —— ZwUnmapViewOfSection
- apifox设置全局header
- Java 8 stream的使用示例
- 明光杂感之四:足球与情境觉知(上)
- java坦克大战 需求分析,Java版坦克大战游戏的设计与实现(含录像)_JAVA
- vsftp虚拟账户登录失败331 Please specify the password.
- 【Arduino】VC0706(中星微串口摄像头)
- 【翻译】CRAFT:Character Region Awareness for Text Detection
- T32添加Toolbar按钮
- c语言choice的用法,名词choice的用法与搭配