• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 概述
2
3兼容JS的类Web开发范式的方舟开发框架,采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建,使用CSS文件进行样式描述,使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联,当数据发生变化时,UI界面自动触发更新。此种开发方式,更接近Web前端开发者的使用习惯,快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。
4
5请参考[兼容JS的类Web开发范式API](../reference/arkui-js/js-components-common-attributes.md)文档,全面地了解组件,更好地开发应用。
6
7
8## 整体架构
9
10使用兼容JS的类Web开发范式的方舟开发框架,包括应用层(Application)、前端框架层(Framework)、引擎层(Engine)和平台适配层(Porting Layer)。
11
12
13
14![zh-cn_image_0000001117452952](figures/zh-cn_image_0000001117452952.png)
15
16- **Application**
17
18  应用层表示开发者开发的FA应用,这里的FA应用特指JS FA应用。
19
20- **Framework**
21
22  前端框架层主要完成前端页面解析,以及提供MVVM(Model-View-ViewModel)开发模式、页面路由机制和自定义组件等能力。
23
24- **Engine**
25
26  引擎层主要提供动画解析、DOM(Document Object Model)树构建、布局计算、渲染命令构建与绘制、事件管理等能力。
27
28- **Porting Layer**
29
30  适配层主要完成对平台层进行抽象,提供抽象接口,可以对接到系统平台。比如:事件对接、渲染管线对接和系统生命周期对接等。
31
32
33## 相关实例
34
35兼容JS的类Web开发范式的方舟开发框架,有以下相关实例可供参考:
36
37- [`JsAdaptivePortalPage`:多设备自适应的FA页面(JS)(API8)](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/code/SuperFeature/MultiDeviceAppDev/JsAdaptivePortalPage)
38