初学鸿蒙OS之JS-UI框架中提供了哪些组件

简介: 初学鸿蒙OS之JS-UI框架中提供了哪些组件

写在前面


上篇我们介绍了鸿蒙OS提供了哪些UI框架,而且根据我自身的情况,也选择了JS-UI框架,其实都是差不多的,该有的组件都有,就是不同方式去实现而已,大家也可以去看看其他UI框架。


介绍一下鸿蒙OS中JS-UI框架的组件分类


迄今为止,鸿蒙OS,JS-UI框架一共提供了六大类组件,分别是容器组件、基础组件、媒体组件、画布组件、栅格组件、svg组件。


下面分别与大家说一下这几类组件中提供的功能。


容器组件:


容器组件中提供了一些关键性的组件,比如list、form、div、tabs等一系列的容器类组件,如果你使用过HTML,那么理解这些并不难。


基础组件:


基础组件,也是我们最熟悉的组件,比如input、select、span、options、button等等等,都是属于基础组件,这些也是我们真正与内容相结合的组件。


媒体组件:


媒体组件就比较少了,只有video、camera两种组件,这个后期我们细说吧,这类组件不一定所有人都用过,只有看到效果才知道两者具体有哪些区别。


画布组件:


画布组件,canvas,够熟悉吧,后端开发人员尽管可能使用少些,但也是有过一些认知的。


栅格组件:


栅格组件,鸿蒙OS中提供的也不是很多种,就只有grid-container、grid-row、grid-col三种,分别代表着栅格容器,栅格列,栅格行。


SVG组件:


SVG组件,这个种类就多了,这个我也了解不多,后期也需要精进恶补一下才行。


总结


JS-UI框架中,提供的这些组件,已经足以让我们进行一些基础的开发了,然而,为了能在更复杂的场景中去使用,鸿蒙OS还提供了自定义组件,可以让我们去自行实现一些组件。


这点能让我们在开发过程中更加灵活,随着鸿蒙OS的开发人员越来越多,相信陆续的也会有很多人贡献自己写的自定义组件的。


相关文章
|
8天前
|
移动开发 JavaScript 前端开发
HarmonyOS鸿蒙应用开发——探索原生与H5通信框架DSBridge
HarmonyOS版DSBridge是一个桥梁库,允许鸿蒙原生环境与JavaScript交互。它兼容Android和iOS的第三方DSBridge核心功能,支持同步和异步调用、命名空间API管理、进度回调及页面关闭监听等功能。主要特性包括适配鸿蒙NEXT版本、支持串行异步并发任务、兼容DSBridge 2.0与3.0版本JS脚本,并提供类形式集中管理API及自定义页面组件注册。源码仓库:HarmonyOS版 - DSBridge-HarmonyOS。安装命令为`ohpm install @hzw/ohos-dsbridge`。通过该库,开发者可以方便地在鸿蒙系统中实现原生与JS的高效交互。
71 1
|
6天前
|
JSON 前端开发 网络架构
鸿蒙开发:一文探究Navigation路由组件
如果你还在使用router做为页面跳转,建议切换Navigation组件作为应用路由框架,不为别的,因为官方目前针对router已不在推荐。
140 101
鸿蒙开发:一文探究Navigation路由组件
|
10天前
「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
本篇将带你实现一个虚拟音乐控制台。用户可以通过界面控制音乐的播放、暂停、切换歌曲,并查看当前播放的歌曲信息。页面还支持调整音量和动态显示播放进度,是音乐播放器界面开发的基础功能示例。
167 80
|
4天前
|
流计算 UED
「Mac畅玩鸿蒙与硬件48」UI互动应用篇25 - 简易购物车功能实现
本篇教程将带你实现一个简易购物车功能。通过使用接口定义商品结构,我们将创建一个动态购物车,支持商品的添加、移除以及实时总价计算。
90 69
|
3天前
|
前端开发
「Mac畅玩鸿蒙与硬件49」UI互动应用篇26 - 数字填色游戏
本篇教程将带你实现一个数字填色小游戏,通过简单的交互逻辑,学习如何使用鸿蒙开发组件创建趣味性强的应用。
40 20
|
3天前
|
存储 开发者
鸿蒙元服务项目实战:备忘录UI页面开发
UI页面绘制没什么好说的,就是组件的位置摆放,和组件的显示逻辑,有很多的属性并没有文章记录,大家可以去仓库中查看即可,文章中用到了我的一个标题栏组件,如果大家不想用,可以使用自己写的即可。
鸿蒙元服务项目实战:备忘录UI页面开发
|
4天前
|
人工智能 开发框架 JavaScript
LowCodeEngine:阿里开源的企业级低代码开发平台,提供预制的 UI 组件和模板,覆盖完整的研发周期
LowCodeEngine 是阿里巴巴开源的低代码开发框架,旨在通过拖拽、配置等简单操作,帮助开发者快速构建复杂的系统页面,提升开发效率和质量。
41 4
LowCodeEngine:阿里开源的企业级低代码开发平台,提供预制的 UI 组件和模板,覆盖完整的研发周期
|
4天前
鸿蒙开发:组件样式的复用
如果要实现多页面之间的组件属性样式复用,建议使用AttributeModifier,如果是单页面,通用属性可以使用@Styles,组件自有属性可以使用@Extend。
鸿蒙开发:组件样式的复用
|
7天前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
91 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
9天前
鸿蒙开发:一个轻盈的上拉下拉刷新组件
在和可滑动组件使用的时候,记得一定要和nestedScroll属性配合使用,用于解决滑动冲突,除此之外,还需要传递滑动组件的scroller属性,用于手势操作。
鸿蒙开发:一个轻盈的上拉下拉刷新组件