初学鸿蒙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的开发人员越来越多,相信陆续的也会有很多人贡献自己写的自定义组件的。


相关文章
|
10天前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实战指南
【9月更文挑战第6天】在数字化时代的潮流中,后端开发作为支撑现代Web和移动应用的核心,其重要性不言而喻。本文将深入浅出地介绍如何使用Node.js及其流行的框架Express来搭建一个高效、可扩展的后端服务。通过具体的代码示例和实践技巧,我们将探索如何利用这两个强大的工具提升开发效率和应用性能。无论你是后端开发的新手还是希望提高现有项目质量的老手,这篇文章都将为你提供有价值的见解和指导。
|
20天前
|
JavaScript 前端开发 中间件
构建高效后端服务:Node.js与Express框架的完美搭档
【8月更文挑战第28天】在追求高性能、可扩展和易维护的后端开发领域,Node.js和Express框架的组合提供了一种轻量级且灵活的解决方案。本文将深入探讨如何利用这一组合打造高效的后端服务,并通过实际代码示例展示其实现过程。
|
21天前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
43 3
|
18天前
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
58 0
|
18天前
|
存储 JavaScript NoSQL
构建高效Web应用:使用Node.js和Express框架
【8月更文挑战第30天】本文将引导你了解如何使用Node.js和Express框架快速搭建一个高效的Web应用。通过实际的代码示例,我们将展示如何创建一个简单的API服务,并讨论如何利用中间件来增强应用功能。无论你是新手还是有经验的开发者,这篇文章都将为你提供有价值的见解。
|
8天前
|
小程序 JavaScript 前端开发
小程序常见的UI框架
小程序常见的UI框架
|
5天前
|
Web App开发 缓存 JavaScript
构建高效后端服务:Node.js与Express框架的完美结合
【9月更文挑战第11天】本文将引导开发者探索如何利用Node.js和Express框架搭建一个高效的后端服务。文章不仅深入讲解了这两个工具的核心概念,还通过实际示例展示了它们的强大功能和易用性。读者将学会如何处理HTTP请求、设计RESTful API以及优化应用性能。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的知识,帮助你在后端开发领域更进一步。
|
10天前
|
Linux C# Android开发
一个开源、跨平台的.NET UI框架 - Avalonia UI
一个开源、跨平台的.NET UI框架 - Avalonia UI
|
19天前
|
存储 搜索推荐 Java
探索安卓开发中的自定义视图:打造个性化UI组件Java中的异常处理:从基础到高级
【8月更文挑战第29天】在安卓应用的海洋中,一个独特的用户界面(UI)能让应用脱颖而出。自定义视图是实现这一目标的强大工具。本文将通过一个简单的自定义计数器视图示例,展示如何从零开始创建一个具有独特风格和功能的安卓UI组件,并讨论在此过程中涉及的设计原则、性能优化和兼容性问题。准备好让你的应用与众不同了吗?让我们开始吧!
|
19天前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。