《HarmonyOS NEXT应用开发实践（视频教学版）（编程与应用开发丛书）》(王树生)【摘要 书评 试读】- 京东图书

目录

5.2  ArkTS声明式开发范式

5.2.1  声明式开发范式的基本组成

5.2.2  声明式开发范式的特点

5.2.3  声明式开发范式的整体架构

5.2.4  声明式开发范式的开发流程

5.2.5  声明式开发范式的通用规则

---

5.1  ArkUI  概  述

ArkUI（方舟UI框架）为应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。ArkUI框架示意如图5-1所示。

图5-1  ArkUI框架

1. ArkUI的基本概念

• UI：即用户界面。开发者可以将应用的用户界面设计为多个功能页面，每个页面进行单独的文件管理，并通过页面路由API完成页面间的调度管理（如跳转、回退等操作），以实现应用内的功能解耦。
• 组件：UI构建与显示的最小单位，如列表、网格、按钮、单选按钮、进度条、文本等。开发者通过多种组件的组合，构建出满足应用需求的完整界面。

2. 两种开发范式

针对不同的应用场景及技术背景，方舟UI框架提供了两种开发范式，分别是基于ArkTS的声明式开发范式（简称“声明式开发范式”）和兼容JavaScript的类Web开发范式（简称“类Web开发范式”）。

• 声明式开发范式：采用基于TypeScript声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供UI绘制能力。
• 类Web开发范式：采用经典的HML、CSS、JavaScript三段式开发方式，即使用HML标签文件搭建布局，使用CSS文件描述样式，使用JavaScript文件处理逻辑。该范式更符合Web前端开发者的使用习惯，便于快速将已有的Web应用改造成方舟UI框架应用。

在开发一款新应用时，推荐采用声明式开发范式来构建UI，主要基于以下几点考虑：

• 开发效率：声明式开发范式更接近自然语义的编程方式，开发者可以直观地描述UI，无须关心如何实现UI绘制和渲染，开发高效简捷。
• 应用性能：两种开发范式的UI后端引擎和语言运行时是共用的，但是相比类Web开发范式，声明式开发范式无须JavaScript框架进行页面DOM管理，渲染更新链路更为精简，占用内存更少，应用性能更佳。
• 发展趋势：声明式开发范式后续会作为主推的开发范式持续演进，为开发者提供更丰富、强大的能力。

3. 不同应用类型支持的开发范式

根据所选用的应用模型（Stage模型、FA模型）和页面形态（应用或服务的普通页面、卡片）的不同，对应支持的UI开发范式也有所差异，如表5-1所示。

5.2  ArkTS声明式开发范式

5.2.1  声明式开发范式的基本组成

基于ArkTS的声明式开发范式的方舟开发框架（ArkUI）是一套开发极简、高性能、支持跨设备的UI开发框架，提供了构建应用UI所必需的能力。方舟开发框架主要包括以下组成部分。

1. ArkTS

ArkTS是优选的主力应用开发语言，围绕应用开发在TypeScript生态基础上做了进一步扩展。扩展能力包含声明式UI描述、自定义组件、动态扩展UI元素、状态管理和渲染控制。状态管理作为基于ArkTS的声明式开发范式的特色，通过功能不同的装饰器为开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态管理和应用程序状态管理，两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染。ArkTS语言的基础知识请参考第3章“学习ArkTS语言”。

2. 布局

布局是UI的必要元素，它定义了组件在界面中的位置。ArkUI框架提供了多种布局方式，除了基础的线性布局、层叠布局、弹性布局、相对布局、栅格布局外，还提供了相对复杂的列表、宫格、       轮播。

3. 组件

组件是UI的必要元素，包括界面设计常用的系统组件和自定义组件。由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。系统内置组件包括按钮、单选按钮、进度条、文本等。开发者可以通过链式调用的方式设置系统内置组件的渲染效果。开发者还可以将系统内置组件组合为自定义组件，通过这种方式将页面组件化为一个个独立的UI单元，实现页面不同单元的独立创建、开发和复用，具有更强的工程性。

4. 页面路由和组件导航

应用可能包含多个页面，可通过页面路由实现页面间的跳转。一个页面内可能存在组件间的导航，比如典型的分栏，可通过导航组件实现组件间的导航。

5. 图形

方舟开发框架提供了多种类型图片的显示能力和多种自定义图形绘制的能力，以满足开发者的自定义绘图需求，支持绘制形状、填充颜色、绘制文本、变形与裁剪、嵌入图片等。

6. 动画

动画是UI的重要元素之一，优秀的动画设计能够极大地提升用户体验。方舟开发框架提供了丰富的动画能力，除了组件内置动画效果外，还包括属性动画、显式动画、自定义转场动画以及动画API等。开发者可以通过封装的物理模型或者调用动画能力API来实现自定义动画轨迹。

7. 交互事件

交互事件是UI和用户交互的必要元素。方舟开发框架提供了多种交互事件，除了触摸事件、鼠标事件、键盘按键事件、焦点事件等通用事件外，还包括基于通用事件进行进一步识别的手势事件。手势事件有单一手势事件，如单击手势、长按手势、拖动手势、捏合手势、旋转手势、滑动手势等，以及通过单一手势事件进行组合的组合手势事件。

8. 自定义能力

自定义能力是UI开发框架提供给开发者对UI界面进行开发和定制化的能力，包括自定义组合、自定义扩展、自定义节点和自定义渲染。

5.2.2  声明式开发范式的特点

1. 开发效率高，开发体验好

• 代码简洁：通过接近自然语义的方式描述UI，不必关心框架如何实现UI绘制和渲染。
• 数据驱动UI变化：让开发者更专注于自身业务逻辑的处理。当UI发生变化时，开发者无须编写在不同的UI之间进行切换的UI代码，仅需要编写引起界面变化的数据，具体UI如何变化交给框架。
• 开发体验好：界面也是代码，让开发者的编程体验得到提升。

2. 性能优越

• 声明式UI前端和后端分层：UI后端采用C++语言构建，提供对应前端的基础组件、布局、动效、交互事件、组件状态管理和渲染管线。
• 语言编译器和运行时的优化：统一字节码、高效FFI（Foreign Function Interface）、AOT（Ahead Of Time）、引擎极小化、类型优化等。

3. 生态容易快速推进

能够借力主流语言生态快速推进，语言相对中立友好，有相应的标准组织，可以逐步演进。

5.2.3  声明式开发范式的整体架构

声明式开发规范的整体架构如图5-2所示。

1. 声明式UI前端

提供了UI开发范式的基础语言规范，并提供内置的UI组件、布局、动画，以及多种状态管理机制，为应用开发者提供一系列接口支持。

2. 语言运行时

选用方舟语言运行时，提供了针对UI范式语法的解析能力、跨语言调用支持的能力和TypeScript语言高性能运行环境。

3. 声明式UI后端引擎

后端引擎提供了兼容不同开发范式的UI渲染管线，并提供多种基础组件、布局计算、动效、交互事件，以及状态管理和绘制能力。

图5-2  声明式开发规范整体架构

4. 渲染引擎

提供了高效的绘制能力，具备将渲染管线收集的渲染指令绘制到屏幕的能力。

5. 平台适配层

提供了对系统平台的抽象接口，具备接入不同系统的能力，如系统渲染管线、生命周期调度等。

5.2.4  声明式开发范式的开发流程

使用UI开发框架开发应用时，主要涉及的开发过程如表5-2所示。

5.2.5  声明式开发范式的通用规则

1. 默认单位

表示长度的入参单位默认为vp（虚拟像素），即入参为number类型。Length和Dimension类型中的number单位为vp。

2. 异常值处理

输入的参数为异常（undefined、null或无效值）时，处理规则如下：

（1）如果对应参数有默认值，则按默认值处理。

（2）如果对应参数无默认值，则该参数对应的属性或接口不生效。