鸿蒙学习高效开发与测试-ArkUI 框架(2)

ArkUI 是鸿蒙生态原生的 UI 开发框架。主体结构如下图所示：

ArkUI 框架提供给开发者两种开发方式：基于 ArkTS 的声明式开发范式和基于 JS 扩展的类 Web 开发范式。声明式开发范式更加简洁高效，类 Web 开发范式对 Web 及前端开发者更友爱。
1、声明式开发范式

在声明式开发范式模式下，通过语言增强、渲染管线扁平化，最小化更新等本领，在功能和性能方面对比类 Web 开发范式有了全面提拔。采用声明式开发范式进行应用开发，雷同场景下，对比类 Web 开发范式代码更为精简，并且在性能、内存方面进一步优化提拔。
另外 ArkUI 框架还提供了 API 扩展机制，通过此种机制进行封装风格统一的 JS 接口。下面针对重点功能进行分别介绍阐明。

• 状态管理
  声明式开发范式的焦点思想是数据驱动 UI 变化，通过提供的状态进行数据管理，这里状态管理指的是，管理数据发生变化时，框架能自动更新这些数据关联的最小范围的 UI。
  
• 布局
  布局指用特定的组件大概属性来管理用户页面所放置 UI 组件的大小和位置。在实际的开发过程中，需要遵守以下流程保证团体的布局效果：
   确定页面的布局结构。
   分析页面中的元素构成。
   选用得当的布局容器组件或属性控制页面中各个元素的位置和大小束缚。ArkUI 框架支持多种布局方式，如弹性布局、列表、宫格、栅格布局等。
  
• 组件化
  组件是 ArkUI 框架中的基础表现单位，一切 UI 表现的内容都是组件。ArkUI 框架提供多种开箱即用的 UI 组件，如文本表现、图片表现、按键等，并提供了面向多种设备形态的多态 UI 能力。另外，ArkUI 框架还提供了组合式扩展相应 UI 组件的机制，由 ArkUI 框架直接提供的称为预置组件，由开发者定义的称为自定义组件，其具有以下特点：
   可组合：允许开发人员组合利用内置组件、其他组件、公共属性和方法；
   可重用：自定义组件可以被其他组件重用，并作为差别的实例在差别的父组件或容器中利用；
   配置化生命周期回调：生命周期的回调方法可以在组件中配置，用于业务逻辑处理惩罚；
   数据驱动更新：由状态变量的数据驱动，实现 UI 自动更新。
  
• 装饰器
  自定义组件的场景中，通常会遇到需要动态传入差别的 UI 元素的情况，为了满足该场景 ArkUI 框架同时提供了动态构建 UI 元素的能力。
   @Builder：可通过 @Builder 装饰器进行描述，该装饰器可以修饰一个函数，此函数可以在 build() 函数之外声明，并在 build() 函数中或其他 @Builder 修饰的函数中利用，在一个自定义组件内快速天生多个布局内容。
   @Style：声明式范式为了避免开发者对重复样式的设置，通过@Styles 装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置利用。@Styles 装饰器将新的属性函数添加到根本组件上，如 Text、Column、Button 等，当前@Styles 仅支持通用属性。通过@Styles 装饰器可以快速定义并复用组件的自定义样式。
  @Styles 可以定义在组件内或组件外，在组件外定义时需在方法前添加 function 关键字，组件内定义时不需要添加 function 关键字。
   @Extend：为了满足开发者拓展原生组件的诉求，提供了@Extend 装饰器，可以将新的属性函数添加到内置组件上，如 Text、Column、Button 等。通过@Extend装饰器可以快速地扩展原生组件。
  
• 动效
  声明式范式中一大特点体现在动效的利用上，与传统开发方式差别，声明式的动画是由数据变化驱动动画启动，而不再是直接控制动画的播放。UI 框架根据开发者的配置，自动地进办法画实行，根据动画场景差别进行如下分类：
   属性动画：组件的某些通用属性变化时，可以通过属性动画实现渐变效果，提拔用户体验。
   显式动画：全局 animateTo 显式动画接口，指定由于闭包代码导致的状态变化插入过渡动效，开发者可以在事件回调中通过显式动画对指定命据变化增加动画效果。
   转场动画：转场动画包括页面间转场、组件内过渡转场和共享元素转场三种，通过路由接口进行页面路由时，会触发动画的实行。
  
• 事件交互
  ArkUI 框架提供了很多交互事件，这些事件提供了差别的信息用于处理惩罚相关程序交互逻辑，现在提供了 UI 组件事件以下几类事件：
   UI 组件事件：由 UI 组件内置交互逻辑触发，差别的 UI 组件有差别的 UI 组件事件，好比 TextInput 输入框产生的 onEditChange 输入文本变更事件，List 列表组件产生的 onScrollIndex 列表项滚动事件，这类事件属于非冒泡事件（非冒泡事件指的是当一个组件上的事件被触发后，该事件不会向父节点传递）；挂载卸载事件，当UI 组件挂载到 UI 组件树大概从 UI 组件树上卸载时触发，典型的场景好比通过 if 渲染语法控制 UI 组件的显隐状态，该事件属于非冒泡事件。
   交互事件：点击事件，拖拽事件，焦点事件，触摸事件，按键事件，鼠标事件，手势事件等。
  
• 绘制能力
  ArkUI 框架提供两种 2D 自定义绘制能力。一种是通过图形组合的方式，利用布局、绝对定位和各种图形进行组合实现；另一种是通过绘制 API 在 Canvas 画布上进行绘制。
  
• 肴杂开发
  应用的场景是多样的，部门场景直接采用 UI 组件组合无法满足诉求，比方游戏、舆图这种需要依赖 C++ SDK 进行独立渲染，又大概开发相机、视频播放器这种需要独立纹理添补的场景，因此需要框架提供一种能够在 C++侧进行自定义绘制的组件。ArkUI 框架提供了XComponent 组件，支持加载应用动态库、NAPI 跨语言调用，进行 C++绘制能力的开发。
  
• 跨平台
  鸿蒙生态构建了 ArkUI 跨平台框架的焦点设施，将相应的能力扩展到 iOS 和 Android 平台上，后续会进一步拓展到更多的平台。开发者可以通过一份代码，结合相应的工具链，同时天生多个 OS 平台的应用工程，并可编译出相应的应用程序，在相应的平台上高效的运行。
  
• 分层能力开放
  鸿蒙生态中，除了原生页面和框架本身跨平台能力外，应用还有很多场景是基于三方框架构建。因此，ArkUI 框架提供了 ArkTS 声明式范式、FrameNode 机制和 C-API 多层次开放的接口。此中根本应用界面可直接利用 ArkTS 声明式范式进行开发；三方框架可以利用C-API 接口和 FrameNode 框架进行开发。针对差别框架特性，接纳差别机制，达到更良好的性能效果。具体差异如下图所示：
  
  
  
  针对图中两种差别类型框架对接，提供 C-API 和 FrameNode 两种机制，进行框架接入。当接入的三方框架存在 C 层数据处理惩罚情况或需要进行样式布局计算等逻辑操纵时，针对该场景，ArkUI 框架提供了 C-API 接口，以减少跨语言带来的性能损失。
  

图中左侧适用 C-API 进行接入的框架具备以下特性：
 具有独立的开发范式和运行情况
 框架自行管理 UI 树形结构，具有假造组件节点对接系统原生组件进行渲染基于 ArkUI 框架进行页面开发时，存在需要进行页面内容的动态变化的情况，根据 XML大概 JSON 动态天生页面。针对该场景，ArkUI 框架提供了 FrameNode 接口，满足动态创建、修改、删除组件的诉求。如图中右侧适用 FrameNode 进行接入的框架具备以下特性：
 动态创建、添加子节点、删除、属性修改
 支持内容自定义绘制
应 用 仅 通 过 DSL 解 析 后 ， 直 接 对 接 原 生 组 件 进 行 渲 染 ， 该 场 景 可 以 优 先 选 用
FrameNode 进行页面构建。利用上述机制，可以更细粒度的进行组件控制和减少跨语言带来的性能开销，保障三方框架高性能接入。
2、类 Web 开发范式

利用 HML 标签文件进行布局搭建，利用 CSS 文件进行样式描述，利用 JS 文件进行逻辑处理惩罚。UI 组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI 界面自动触发更新。此种开发范式，对 Web 前端开发者更为友爱。类 Web 范式的团体接口采用与传统 Web 页面开发相似的设计理念，采用 HML、CSS与 JS 三种类型的文件进行页面开发，开发者可以基于此范式方便地进行 UI 构建，同时提供数据绑定机制，支持通过 JS 进行数据更新，进而更新 UI。
 HML 语法：是一套类 HTML 的标志语言，通过组件、事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染和逻辑控制等高级能力。在 HML 文件中不但可以进行架构描述，也可以进行数据绑定，通过{{}}方式进行数据绑定后，也需要在 JS 文件中进行数据的定义，运行时将利用 JS 文件中提供的数据 content进行替换。
 CSS 语法：CSS 是描述 HML 页面结构的样式语言。所有组件均存在系统默认样式，也可在页面 CSS 样式文件中对组件、页面自定义差别的样式。ArkUI 开发框架提供尺度 CSS 语法的焦点功能集，满足应用开发者的诉求。
 JS 语法：在类 Web 开发范式中，提供了一系列的全局方法与全局对象，进行数据操纵与逻辑处理惩罚。框架后端采用 C++开发语言实现，提拔了框架的运行性能，利用方舟编译器运行时作为 JS 引擎，具有更优的 JS 实行性能，同时还提供了一套完备的包罗 UI 组件、布局机制、动画能力的渲染框架，通过渲染引擎对 UI 元素进行绘制。
类 Web 范式实现层面可以进一步部署到轻量化的设备上。通过轻量化设计的思路，将JS Framework 下沉到 C++层，以减小 JS 的内存占用，利用 C++进行更为严格的内存分配管理，并采用更为轻量的 JS 引擎，UI 部门采用轻量的 UIKit 并结合轻量图形引擎最终实现百 K 级别设备的支持，从而在轻量化设备上可实行的应用，也可以在硬件规格更高的设备上实行，而无需重新开发。这也就是采用类 Web 开发范式的优势地点，采用统一的开发范式，开发者无需关心具体运行时的前端框架、JS 引擎与后端 UI 组件，系统会根据运行平台差别，采用最佳的模块，保障应用在差别平台都可具有精彩的运行性能。具体的实现原理如下图所示：

3、可视可说

可视可说框架提供“系统级”和“应用级”两种实现方式。此中，“系统级”无需应用适配自动支持尺度控件文本的语音操控功能；“应用级”接入方式允许开发者对控件场景、角标、别名、个性化播报等元素进行适配，从而提供良好的用户体验。应用级和系统级两种实现是互补关系，应用级优化用户体验，系统级保证覆盖率。

1. 系统级
应用利用尺度控件开发，无需额外适配，自动辨认尺度控件界面文本和位置实行，天然支持界面文本可视可说基础体验。
2. 应用级
系统级基础体验无法满足体验目的时，应用可以按照业务特性进行灵活定制适配，以此得到可视可说良好体验。
3. 语音交互生命周期
可视可说分为信息获取和辨认实行，信息获取模块基于界面变化用户监听界面变化获取信息热词，辨认实行模块将信息热词传递到语音系统进行 AI 辨认。

语音叫醒：语音助手叫醒后，发送建立毗连给前台应用，应用收到哀求后启动可视可说初始化。
信息获取
 分副角标（可选）：应用反馈界面需要展示的角标数量给智慧语音。
 更新角标（可选）：界面变化时，自行管理展示角标刷新。
 获取信息：智慧语音获取界面热词信息，包括文本，图标和角标信息。
辨认实行
 语音辨认：智慧语音系统根据用户语音和界面信息热词，辨认出可视可说意图和指令。
 实行指令：收到可视可说意图和指令触发实行。
隐藏角标：通知应用隐藏界面角标（隐藏角标动作也由适配应用自己完成）。
语音结束：语音助手释放可视可说，发送解除绑定给前台应用，应用收到解除毗连后停止可视可说相关动作（好比角标未隐藏则隐藏角标信息）。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。