鸿蒙应用开发从入门到实战（五）：ArkUI 概述

​ 大家好，我是潘 Sir，持续分享 IT 技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新 AI+编程、企业级项目实战等原创内容、欢迎关注！

一、HarmonyOS 应用开发相关概念

​ 在具体开发鸿蒙应用之前，需要先了解有关 HarmonyOS 应用的一些基本概念：UI 框架的简单说明、应用模型的基本概念。

1.1 UI 框架

​ HarmonyOS 提供了一套 UI 开发框架，即方舟开发框架（ArkUI 框架）。方舟开发框架可为开发者提供应用 UI 开发所必需的能力，比如多种组件、布局计算、动画能力、UI 交互、绘制等。

​ 方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于 ArkTS 的声明式开发范式（简称“声明式开发范式”）和兼容 JS 的类 Web 开发范式（简称“类 Web 开发范式”）。以下是两种开发范式的简单对比。

1.2 应用模型

​ 应用模型是 HarmonyOS 为开发者提供的应用程序所需能力的抽象提炼，它提供了应用程序必备的组件和运行机制。有了应用模型，开发者可以基于一套统一的模型进行应用开发，使应用开发更简单、高效。

​ 随着系统的演进发展，HarmonyOS 先后提供了两种应用模型：

• FA（Feature Ability）模型： HarmonyOS API 7 开始支持的模型，已经不再主推。

• Stage 模型： HarmonyOS API 9 开始新增的模型，是目前主推且会长期演进的模型。在该模型中，由于提供了 AbilityStage、WindowStage 等类作为应用组件和 Window 窗口的“舞台”，因此称这种应用模型为 Stage 模型。

• 了解鸿蒙应用开发相关概念后，接下来进入 UI 的开发。

二、UI 开发概述

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

1.1 基本概念

UI：

​ 即用户界面。开发者可以将应用的用户界面设计为多个功能页面，每个页面进行单独的文件管理，并通过页面路由 API 完成页面间的调度管理如跳转、回退等操作，以实现应用内的功能解耦。组件：

​ UI 构建与显示的最小单位，如列表、网格、按钮、单选框、进度条、文本等。开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面。

1.2 两种开发范式

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

• 声明式开发范式：

• 采用基于 TypeScript 声明式 UI 语法扩展而来的 ArkTS 语言，从组件、动画和状态管理三个维度提供 UI 绘制能力。

• 类 Web 开发范式：

• 采用经典的 HML、CSS、JavaScript 三段式开发方式，即使用 HML 标签文件搭建布局、使用 CSS 文件描述样式、使用 JavaScript 文件处理逻辑。该范式更符合于 Web 前端开发者的使用习惯，便于快速将已有的 Web 应用改造成方舟开发框架应用。

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

• **开发效率：**声明式开发范式更接近自然语义的编程方式，开发者可以直观地描述 UI，无需关心如何实现 UI 绘制和渲染，开发高效简洁。

• **应用性能：**如下图方舟开发框架示意图所示，两种开发范式的 UI 后端引擎和语言运行时是共用的，但是相比类 Web 开发范式，声明式开发范式无需 JS 框架进行页面 DOM 管理，渲染更新链路更为精简，占用内存更少，应用性能更佳。

• 
  
  

• <center>图 方舟开发框架示意图</center>

• 发展趋势：声明式开发范式后续会作为主推的开发范式持续演进，为开发者提供更丰富、更强大的能力。

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

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

<center>表 支持的 UI 开发范式</center>

三、基于 ArkTS 的声明式开发范式

​ 基于 ArkTS 的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的 UI 开发框架，提供了构建 HarmonyOS 应用 UI 所必需的能力，主要包括：

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

• 布局

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

• 组件

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

• 页面路由和组件导航

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

• 图形

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

• 动画

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

• 交互事件

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

2.1 特点

• 开发效率高，开发体验好

• 代码简洁：通过接近自然语义的方式描述 UI，不必关心框架如何实现 UI 绘制和渲染。

• 数据驱动 UI 变化：让开发者更专注自身业务逻辑的处理。当 UI 发生变化时，开发者无需编写在不同的 UI 之间进行切换的 UI 代码， 开发人员仅需要编写引起界面变化的数据，具体 UI 如何变化交给框架。

• 开发体验好：界面也是代码，让开发者的编程体验得到提升。

• 性能优越

• 声明式 UI 前端和 UI 后端分层：UI 后端采用 C++语言构建，提供对应前端的基础组件、布局、动效、交互事件、组件状态管理和渲染管线。

• 语言编译器和运行时的优化：统一字节码、高效 FFI-Foreign Function Interface、AOT-Ahead Of Time、引擎极小化、类型优化等。

• 生态容易快速推进

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

2.2 整体架构

<center>声明式开发范式整体架构</center>

• 声明式 UI 前端

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

• 语言运行时

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

• 声明式 UI 后端引擎

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

• 渲染引擎

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

• 平台适配层

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

2.3 开发流程

​ 通过构建一个简单的具有页面跳转/返回功能的应用（如下图所示），快速了解工程目录的主要文件，熟悉 HarmonyOS 应用开发流程。

本例演示使用 Stage 模型构建 ArkTS 应用，如果使用 FA 模型请参考官网。当前主推 Stage 模型，所以 FA 模型不再演示。

2.3.1 创建 ArkTS 工程

前面章节一演示创建过第一个 HarmonyOS 应用，按相同方法创建项目：

（1）若首次打开 DevEco Studio，请点击 Create Project 创建工程。如果已经打开了一个工程，请在菜单栏选择 File > New > Create Project 来创建一个新工程。

（2）选择 Application 应用开发（本文以应用开发为例，Atomic Service 对应为元服务开发），选择模板“Empty Ability”，点击 Next 进行下一步配置。

（3）进入配置工程界面，Compile SDK 选择“3.1.0(API 9)”，Model 选择“Stage”，其他参数保持默认设置即可。

支持使用 ArkTS 低代码开方式。

低代码开发方式具有丰富的 UI 界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建 UI 界面的效率。

如需使用低代码开发方式，请打开上图中的 Enable Super Visual 开关。

(4) 点击 Finish，工具会自动生成示例代码和相关资源，等待工程创建完成。

<center>ArkTS 工程目录结构（Stage 模型）</center>

目录含义解释：

• AppScope > app.json5：应用的全局配置信息。

• entry：HarmonyOS 工程模块，编译构建生成一个 HAP 包。

• src > main > ets：用于存放 ArkTS 源码。

• src > main > ets > entryability：应用/服务的入口。

• src > main > ets > pages：应用/服务包含的页面。

• src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。

• src > main > module.json5：Stage 模型模块配置文件。主要包含 HAP 包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。

• build-profile.json5：当前的模块信息、编译信息配置项，包括 buildOption、targets 配置等。其中 targets 中可配置当前运行环境，默认为 HarmonyOS。

• hvigorfile.ts：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。

• oh_modules：用于存放三方库依赖信息。

• build-profile.json5：应用级配置信息，包括签名、产品配置等。

• hvigorfile.ts：应用级编译构建任务脚本。

2.3.2 构建第一个页面

（1）默认界面使用文本组件

工程同步完成后，在“Project”窗口，点击“entry > src > main > ets > pages”，打开“Index.ets”文件，可以看到页面由 Text 组件组成。“Index.ets”文件的示例如下：

// Index.ets@Entry@Componentstruct Index {  @State message: string = 'Hello World'
  build() {    Row() {      Column() {        Text(this.message)          .fontSize(50)          .fontWeight(FontWeight.Bold)      }      .width('100%')    }    .height('100%')  }}

(2) 添加按钮

在默认页面基础上，我们添加一个 Button 组件，作为按钮响应用户点击，从而实现跳转到另一个页面。“Index.ets”文件的示例如下：

// Index.ets@Entry@Componentstruct Index {  @State message: string = 'Hello World'
  build() {    Row() {      Column() {        Text(this.message)          .fontSize(50)          .fontWeight(FontWeight.Bold)        // 添加按钮，以响应用户点击        Button() {          Text('Next')            .fontSize(30)            .fontWeight(FontWeight.Bold)        }        .type(ButtonType.Capsule)        .margin({          top: 20        })        .backgroundColor('#0D9FFB')        .width('40%')        .height('5%')      }      .width('100%')    }    .height('100%')  }}

(3) 在编辑窗口右上角的侧边工具栏，点击 Previewer，打开预览器。第一个页面效果如下图所示：

2.4.3 构建第二个页面

（1）新建第二个页面文件。在“Project”窗口，打开“entry > src > main > ets ”，右键点击“pages”文件夹，选择“New > ArkTS File”，命名为“Second”，点击“Finish”。可以看到文件目录结构如下：

也可以在右键点击“pages”文件夹时，选择“New > Page”，则无需手动配置相关页面路由。

(2) 配置第二个页面的路由。在“Project”窗口，打开“entry > src > main > resources > base > profile”，在 main_pages.json 文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下：

{  "src": [    "pages/Index",    "pages/Second"  ]}

(3) 添加文本及按钮

参照第一个页面，在第二个页面添加 Text 组件、Button 组件等，并设置其样式。“Second.ets”文件的示例如下：

// Second.ets@Entry@Componentstruct Second {  @State message: string = 'Hi there'
  build() {    Row() {      Column() {        Text(this.message)          .fontSize(50)          .fontWeight(FontWeight.Bold)        Button() {          Text('Back')            .fontSize(25)            .fontWeight(FontWeight.Bold)        }        .type(ButtonType.Capsule)        .margin({          top: 20        })        .backgroundColor('#0D9FFB')        .width('40%')        .height('5%')      }      .width('100%')    }    .height('100%')  }}

2.4.4 实现页面间的跳转

页面间的导航可以通过页面路由 router 来实现。页面路由 router 根据页面 url 找到目标页面，从而实现跳转。使用页面路由请导入 router 模块。

（1）第一个页面跳转到第二个页面

在第一个页面中，跳转按钮绑定 onClick 事件，点击按钮时跳转到第二页。“Index.ets”文件的示例如下：

// Index.ets// 导入页面路由模块import router from '@ohos.router';
@Entry@Componentstruct Index {  @State message: string = 'Hello World'
  build() {    Row() {      Column() {        Text(this.message)          .fontSize(50)          .fontWeight(FontWeight.Bold)        // 添加按钮，以响应用户点击        Button() {          Text('Next')            .fontSize(30)            .fontWeight(FontWeight.Bold)        }        .type(ButtonType.Capsule)        .margin({          top: 20        })        .backgroundColor('#0D9FFB')        .width('40%')        .height('5%')        // 跳转按钮绑定onClick事件，点击时跳转到第二页        .onClick(() => {          console.info(`Succeeded in clicking the 'Next' button.`)          // 跳转到第二页          router.pushUrl({ url: 'pages/Second' }).then(() => {            console.info('Succeeded in jumping to the second page.')          }).catch((err) => {            console.error(`Failed to jump to the second page.Code is ${err.code}, message is ${err.message}`)          })        })      }      .width('100%')    }    .height('100%')  }}

(2) 第二个页面返回到第一个页面

在第二个页面中，返回按钮绑定 onClick 事件，点击按钮时返回到第一页。“Second.ets”文件的示例如下：

// Second.ets// 导入页面路由模块import router from '@ohos.router';
@Entry@Componentstruct Second {  @State message: string = 'Hi there'
  build() {    Row() {      Column() {        Text(this.message)          .fontSize(50)          .fontWeight(FontWeight.Bold)        Button() {          Text('Back')            .fontSize(25)            .fontWeight(FontWeight.Bold)        }        .type(ButtonType.Capsule)        .margin({          top: 20        })        .backgroundColor('#0D9FFB')        .width('40%')        .height('5%')        // 返回按钮绑定onClick事件，点击按钮时返回到第一页        .onClick(() => {          console.info(`Succeeded in clicking the 'Back' button.`)          try {            // 返回第一页            router.back()            console.info('Succeeded in returning to the first page.')          } catch (err) {            console.error(`Failed to return to the first page.Code is ${err.code}, message is ${err.message}`)          }        })      }      .width('100%')    }    .height('100%')  }}

(3) 打开“Index.ets”文件，点击预览器中的”Refresh“刷新按钮进行刷新。效果如下图所示

除了采用预览方式外，还可以按前面章节讲解的通过模拟器或真机进行调试。

《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新 AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！