关于鸿蒙系统的JS UI框架组件相关介绍

发布于 2021-9-13 19:06
浏览
0收藏

简介

JS UI框架是OpenHarmony UI开发框架,提供基础类、容器类、画布类等UI组件和标准CSS动画能力,支持类Web范式编程。

  • 类Web范式编程

    JS UI框架采用类HTML和CSS Web编程语言作为页面布局和页面样式的开发语言,页面业务逻辑则支持ECMAScript规范的JavaScript语言。JS UI框架提供的类Web编程范式,可以让开发者避免编写UI状态切换的代码,视图配置信息更加直观。

图 1 JS UI框架架构
关于鸿蒙系统的JS UI框架组件相关介绍-开源基础软件社区

JS UI框架包括应用层(Application)、前端框架层(Framework)、引擎层(Engine)和平台适配层(Porting Layer)。

  • Application

    应用层表示开发者使用JS UI框架开发的FA应用,这里的FA应用特指JS FA应用。

  • Framework

    前端框架层主要完成前端页面解析,以及提供MVVM(Model-View-ViewModel)开发模式、页面路由机制和自定义组件等能力。

  • Engine

    引擎层主要提供动画解析、DOM(Document Object Model)树构建、布局计算、渲染命令构建与绘制、事件管理等能力。

  • Porting Layer

    适配层主要完成对平台层进行抽象,提供抽象接口,可以对接到系统平台。比如:事件对接、渲染管线对接和系统生命周期对接等。

目录

JS UI开发框架源代码在/foundation/ace/ace_engine下,目录结构如下图所示:

/foundation/ace/ace_engine
├── adapter                       # 平台适配目录
│   ├── common
│   └── ohos
├── frameworks                    # 框架代码
│   ├── base                      # 基础库
│   ├── bridge                    # 前后端组件对接层
│   └── core                      # 核心组件目录

使用场景

JS UI框架提供了丰富的、功能强大的UI组件、样式定义,组件之间相互独立,随取随用,也可以在需求相同的地方重复使用。开发者还可以通过组件间合理的搭配定义满足业务需求的新组件,减少开发量。

接口说明

表 1 组件介绍

组件类型 主要组件
基础组件 button、text、input、label、image、progress、rating、span、marquee、image-animator、divider、menu、chart、option、picker、picker-view、piece、qrcode、select、slider、switch、toolbar、toolbar-item、toggle
容器组件 div、list、list-item、list-item-group、stack、swiper、tabs、tab-bar、tab-content、refresh、dialog、badge、panel、popup、stepper、stepper-item
画布组件 canvas
栅格组件 grid-container、grid-row、grid-col

涉及仓

JS UI框架子系统

ace_ace_engine

ace_engine_lite

ace_napi

ace_ace_engine-master.zip 10.43M 16次下载
已于2021-9-13 19:06:26修改
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐