> 文档中心 > openHarmony子系统之JS-UI框架子系统

openHarmony子系统之JS-UI框架子系统

openHarmony子系统之JS-UI框架子系统

    • 一、前言
    • 二、简介
      • 1.类Web范式编程
      • 2. Application
      • 3. Framework
      • 4. Engine
      • 5. Porting Layer
    • 三、系统的目录
    • 四、创建项目的目录
      • 1.pages 目录下的 css,hml,js
      • 2.i18n
      • 3.resources
      • 4.app.js
    • 五、总结

一、前言

前天学习了openHarmony下如何创建一个组件,可能原理讲的还不是很好,今天就来聊聊背后的子系统,开始了~~

二、简介

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

在这里插入图片描述

1.类Web范式编程

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

2. Application

应用层表示开发者使用JS UI框架开发的FA应用,这里的FA应用特指JS FA应用。FA 即 FeatureAbility,面向用户的具有界面UI的,其他ability各具特点,这里不一一进行介绍了,可以参考官网ability框架介绍

3. Framework

这部分采用主流的框架MVVM即Model-View-ViewModel,视图和处理逻辑分离的优秀架构,目前还是谷歌安卓官方推荐的架构

4. Engine

引擎层主要提供动画解析、DOM(Document Object Model)树构建、布局计算、渲染命令构建与绘制、事件管理等能力。这部分平时开发的时候涉及的比较少,属于基础领域的开发,主要用于提高用户体验和整体的性能改善。

5. Porting Layer

适配层主要完成对平台层进行抽象,提供抽象接口,可以对接到系统平台。比如:事件对接、渲染管线对接和系统生命周期对接等。这部分主要用于系统之间的通信部分,算是一个应用和系统交互的一个桥梁。

三、系统的目录

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

/foundation/ace├── ace_engine  # JS UI框架├── ace_engine_lite    # 轻量级JS UI框架└── napi # JS API扩展Native开发模块

这部分感兴趣的可以去翻翻源码具体感受子系统的设计部分

四、创建项目的目录

这部分就是开发应用的时候经常会看到的,即空项目的目录,JS-UI子系统主要负责界面部分,以下即任何界面都必备的三种格式的文件,以及每个项目都具有的app.js进行协调各个界面的JS文件

在这里插入图片描述

1.pages 目录下的 css,hml,js

这部分在昨天已经详细的讲述过了,这里再次简单的介绍一下,css用于界面的渲染,hml负责各种组件等的声明,js负责具体逻辑

2.i18n

这部分主要用于存放各个语言的js文件,主要是配合实现不同国家语言的适配和差异化

3.resources

这部分主要存放一下图片资源等等

4.app.js

这个是全局的application,作用于全部的界面,可以编写一些基础逻辑,方便各个界面之间的协调

五、总结

简单的叙述了平时接触的比较多的子系统,加深对于构建一个openHarmony应用的理解,其他子系统的学习具体可以参考官网openHarmony子系统,下一篇见~~