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

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

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

​        HarmonyOS提供了一套UI开发框架，即方舟开发框架（ArkUI框架）。方舟开发框架可为开发者提供应用UI开发所必需的能力，比如多种组件、布局计算、动画能力、UI交互、绘制等。
​        方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于ArkTS的声明式开发范式（简称“声明式开发范式”）和兼容JS的类Web开发范式（简称“类Web开发范式”）。以下是两种开发范式的简单对比。
开发范式名称语言生态UI更新方式适用场景适用人群声明式开发范式ArkTS语言数据驱动更新复杂度较大、团队合作度较高的程序移动系统应用开发人员、系统应用开发人员类Web开发范式JS语言数据驱动更新界面较为简单的程序应用和卡片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管理，渲染更新链路更为精简，占用内存更少，应用性能更佳。
  

  图 方舟开发框架示意图

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

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

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

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

• ArkTS
  ArkTS是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 整体架构

声明式开发范式整体架构

• 声明式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，工具会自动生成示例代码和相关资源，等待工程创建完成。

ArkTS工程目录结构（Stage模型）目录含义解释：

• 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”文件的示例如下：

1. // Index.ets
2. @Entry
3. @Component
4. struct Index {
5.   @State message: string = 'Hello World'
7.   build() {
8.     Row() {
9.       Column() {
10.         Text(this.message)
11.           .fontSize(50)
12.           .fontWeight(FontWeight.Bold)
13.       }
14.       .width('100%')
15.     }
16.     .height('100%')
17.   }
18. }

复制代码

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

1. // Index.ets
2. @Entry
3. @Component
4. struct Index {
5.   @State message: string = 'Hello World'
7.   build() {
8.     Row() {
9.       Column() {
10.         Text(this.message)
11.           .fontSize(50)
12.           .fontWeight(FontWeight.Bold)
13.         // 添加按钮，以响应用户点击
14.         Button() {
15.           Text('Next')
16.             .fontSize(30)
17.             .fontWeight(FontWeight.Bold)
18.         }
19.         .type(ButtonType.Capsule)
20.         .margin({
21.           top: 20
22.         })
23.         .backgroundColor('#0D9FFB')
24.         .width('40%')
25.         .height('5%')
26.       }
27.       .width('100%')
28.     }
29.     .height('100%')
30.   }
31. }

复制代码

(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”。示例如下：

1. {
2.   "src": [
3.     "pages/Index",
4.     "pages/Second"
5.   ]
6. }

复制代码

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

1. // Second.ets
2. @Entry
3. @Component
4. struct Second {
5.   @State message: string = 'Hi there'
7.   build() {
8.     Row() {
9.       Column() {
10.         Text(this.message)
11.           .fontSize(50)
12.           .fontWeight(FontWeight.Bold)
13.         Button() {
14.           Text('Back')
15.             .fontSize(25)
16.             .fontWeight(FontWeight.Bold)
17.         }
18.         .type(ButtonType.Capsule)
19.         .margin({
20.           top: 20
21.         })
22.         .backgroundColor('#0D9FFB')
23.         .width('40%')
24.         .height('5%')
25.       }
26.       .width('100%')
27.     }
28.     .height('100%')
29.   }
30. }

复制代码

2.4.4 实现页面间的跳转

页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。
（1）第一个页面跳转到第二个页面
在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。“Index.ets”文件的示例如下：

1. // Index.ets
2. // 导入页面路由模块
3. import router from '@ohos.router';
5. @Entry
6. @Component
7. struct Index {
8.   @State message: string = 'Hello World'
10.   build() {
11.     Row() {
12.       Column() {
13.         Text(this.message)
14.           .fontSize(50)
15.           .fontWeight(FontWeight.Bold)
16.         // 添加按钮，以响应用户点击
17.         Button() {
18.           Text('Next')
19.             .fontSize(30)
20.             .fontWeight(FontWeight.Bold)
21.         }
22.         .type(ButtonType.Capsule)
23.         .margin({
24.           top: 20
25.         })
26.         .backgroundColor('#0D9FFB')
27.         .width('40%')
28.         .height('5%')
29.         // 跳转按钮绑定onClick事件，点击时跳转到第二页
30.         .onClick(() => {
31.           console.info(`Succeeded in clicking the 'Next' button.`)
32.           // 跳转到第二页
33.           router.pushUrl({ url: 'pages/Second' }).then(() => {
34.             console.info('Succeeded in jumping to the second page.')
35.           }).catch((err) => {
36.             console.error(`Failed to jump to the second page.Code is ${err.code}, message is ${err.message}`)
37.           })
38.         })
39.       }
40.       .width('100%')
41.     }
42.     .height('100%')
43.   }
44. }

复制代码

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

1. // Second.ets
2. // 导入页面路由模块
3. import router from '@ohos.router';
5. @Entry
6. @Component
7. struct Second {
8.   @State message: string = 'Hi there'
10.   build() {
11.     Row() {
12.       Column() {
13.         Text(this.message)
14.           .fontSize(50)
15.           .fontWeight(FontWeight.Bold)
16.         Button() {
17.           Text('Back')
18.             .fontSize(25)
19.             .fontWeight(FontWeight.Bold)
20.         }
21.         .type(ButtonType.Capsule)
22.         .margin({
23.           top: 20
24.         })
25.         .backgroundColor('#0D9FFB')
26.         .width('40%')
27.         .height('5%')
28.         // 返回按钮绑定onClick事件，点击按钮时返回到第一页
29.         .onClick(() => {
30.           console.info(`Succeeded in clicking the 'Back' button.`)
31.           try {
32.             // 返回第一页
33.             router.back()
34.             console.info('Succeeded in returning to the first page.')
35.           } catch (err) {
36.             console.error(`Failed to return to the first page.Code is ${err.code}, message is ${err.message}`)
37.           }
38.         })
39.       }
40.       .width('100%')
41.     }
42.     .height('100%')
43.   }
44. }

复制代码

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

除了采用预览方式外，还可以按前面章节讲解的通过模拟器或真机进行调试。
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！