HarmonyOS UI框架关键技术解析荐

HarmonyOS UI框架提供了界面绘制相关的处理方法,例如:图形控件、页面布局和窗口管理(如图1所示)。
::: hljs-center
![新建 DOCX 文档161.png](https://harmonyos.oss-cn-beijing.aliyuncs.ui怎么拼读com/images/202106/8791c1e20ab2cd3395c7639733e8b9arm架构a53b9416.png?x-oss-process=image/resize,w_1080,h_642)
:::
::: hljs-center
图1 UI框架
:::

HarmonyOS UI框架采用的是ACost是什么意思E(**A**bility **C**rossplatform **E**nvironment)框架(如图2所示)。
AospfCE是一个应用开发框架,在OS架构之上,属于上层框架,目前支持JAVA和JS语言开发,两种语言框架具体区别ui的四个声调怎么标如下:
**1army.** JAVA UI框架提供了细粒度的UI编程接口,使应用开发更加灵活,元素以组件、布局的形式将界面绘制在窗口上。
**2.** JS UI框架采用类HTML和CSS声明式编程语言作为页面布局和页面样式的开发语言,页面业务逻辑则支持ECMAScript 规范的JavaScrarmsipt语言。JS UI框架提供的声明式编程,可以让开发者避免编写UI状态切换的代码,视图配置信息更加直观。
::: hljs-cen技术职称ter
![新建 DOCX 文档482.png](hos是什么意思ttps://harmonyos.oss-cn-beijing.aliyunui怎么拼读cs.com/images/202106/61a569581f33527d6e0313be928625311c1d47.png?x-oss-process=im解析包出现问题怎么办age/resiz解析几何知识点总结e,w_967,h_454)
:::
::: hljs-center
图2 ACE UI框架
:::

## **HarmonyOS UI框架关键技术**
### ACE偶数 JAVarmsA UI框架
应用由Ability构成。Abi解析包时出现错误怎么回事lity可以分为FAui怎么拼读(Feature Ability)和PA(Particle Ability)两种类型。
❖Feature Ability(简称FA)支持Page Ability,一般用于用户交互,在屏幕上显示一个用户界面,该界面用来显示所有可被uic用户查看和osi七层模型交互的内容。用户界面由UI元素构成,通常包含布局、控件等形式,且元素支持设置资源和动画。
❖Particle Ability支持Data Ability(数据访问)和Serviceui怎么读拼音发音 Ability(后台服务),一般用于后台业务逻辑的实现。
::: hljs-center
![新建 DOCX 文档794.png](https://har偶数m解析几何二级结论onyos.oss-cn-beijing.aliyuncs.com/images/202106/e30668d5755734be8a21891861dc1f4e95421d.png?x-oss-process=image/resize,w_695,h_604)
:::
::: hljs-center
图3 J偶数AVA UI
:::

#### **一 . 界面构成**
每个用户界面的UI元素由组件树构成,即由Component和Comarm是什么意思ponentCoospfntainer对象构欧尚成(如图4所示)。
Java UI框架提供了一部分Component和Cui设计omponentContainer的具体子类,即创建用户界面(UI)的各类组件,包括一些常用的组件(比如:文本、按钮、图片、列表等)和常用的布局(比如:DirectionalLarmorayout和DepearmchairndentLayout)等。用户可通过组件进行交互操作,并获得响应。
● **Component:** 提供内容显示,是界面中所有组件的基类。
●**ComponentContainer:** 作为容器容纳Component或ComponentContainer对象,并对它们进行布局。
::: hljs-center
![新建 DOCX 文档1133.png](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202106/a1431e577be98b08d1e33829688bfb821b9be1.png?x-oss-process=image/resize,w_501,h_army282)
:::
::: hljs-center偶数
图4 JAVA UI组件树
:::

#### **二.Ability**
**Pageos系统 Ability的构解析几何知识点总结成**
一个Page可以由一个或多个AbilitySlice构成,AbilitySlice是指应用的单个页面及其控制逻辑的总和。
::: hljs-center
![新建 DOCX 文档1236.png](https://harmonyos.oss-cn-beijing.aliyuncs.com/imagesos是什么意思/202106/02923技术类专业有哪些3d23679854d3e8209f2e616de00392806.png?x-oss-process=image/rost是什么意思esize,w_268,h_348)
:::
::: hljs-center
图5 Page Ability构成
:::

**Ability的生命周期**
**●** **onStart()**
当系统首次创建Paui怎么拼读ge实例时欧尚,触发该回调。
**● onActive()**
Page会在进入INACTIVE状态后来到前台,然后系统调用此回调。Page在此之后进入ACTIVE状态,该状态是应用与用户交互的状态。技术员
**● onInactiv技术e()**
当Page失ost去焦点时,系统将调用此回调,此后Page进入INACTIVE状态。
**● onBackground()**
如果Page不再对uid技术员户可见,系统将调用此回调,此后Page进入BACKGROUND状态。
**● onForeground()**
处于BACKGROUND状态的Page仍然解析vip驻留在内存中,当重新回到前台时,系统将先调用ARMonForeground(解析)回调通知开发者,而后Page的生命周期状态回到INACTIVE状态。
**● onStop()**
下面是几个主要生命周期函数。
系统将要销毁Page时,将会触发此回调函数。
具体生命周期流程如下图所示:
::: hljs解析几何知识点总结-center
![新建 DOCX 文档1685.png](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202106/38ca81102c1c96a9ef9096bd955726bf4技术学院有哪些专业01ad0.png?x-oss-process=image/resize,w_942,h_706)
:::
::: hljs-center
图6 Java FAui怎么读拼音发音生命周期
:::

**Java Ability路由**
Java FA提供三种路由方式:
**1.Abilityost间的跳转(不同Ability)**
**欧尚x52.Ability内部Ability解析包时出现错误怎么回事Slice间跳转**
**3.跨arm架构设备跳转**
::: hljs-centeos系统r
![新建 DOCX 文档1794.png](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202106/95d741c72562d1add9b112a0c8f8a1802638f7.png?x-oss-process=image/resize,wos是什么意思_652,h_412)
:::
::: hljs解析vip-center
图7 Java FA路由
:::

**1.Ability间跳转(不解析程序包时出现问题怎么办同Ability):**
一个Ability跳转到另一个Ability时,根据不同的action选择不同的Slice。示例代码如下:
```
Intent intent = new Intent();
Operation operation = new Intent.OperationBuilder()
.withAction("action2")
.build();
intent.setOperation(operati解析包时出现错误怎么回事on);armed
startAbility(ui的四个声调怎么标intent);
```
如图7为示,Abi技术学院学什么好lity3通过addActionRoute接口配置了3条路由规则Router:
•action1路由uic到AbilitySlice1;
•action2路由到AbilitySlice2;
•action3路由到AbilitySlice3。
Ability1和Ability2分别通过startAbility跳转到Ability3,再根据三条路由解析软件包时出现问题怎么解决规则选择各自对应的Abilitost是什么意思ySlice。
**其时序如图8所示:**技术支持
::: hljs-center
![新建 DOCX 文档2304.png](https技术职称://harmonyos.oss-cn-beijing.aliyuncs.com/images/202106/f60f19e0953731309f5778b8c4c14a570388a7.png?x-os解析包时出现错误怎么回事s-process=image/resize,w_611os,h_454)
:::
::: hljs-center
图8 Ability间跳转
:::

> 1.Ability2初始化时通过addActionRoute接口设置了路由规则。
2.Ability1armor通过startAbilityForResult跳转到Ability2时,Ability2根据action选择AbilitySlice1ost或AbilitySlice2。
3.当Ability2关闭返回时,ostAbility1通过onAbilityResult()回调方法,对请求结果进行处理。
**2.Ability内部AbilitySlice间跳转**
当发起导航的AbilitySlice和导航目标的AbilitySli偶数ce处于同一个Ability时,可以通过present()或ui是什么意思presentForResului怎么读拼音发音t()方法实现导航。
同一个Page解析包时出现错误怎么回事内的AbilitySlice导航,只需要指定目标AbilitySlice名称即可。AbilitySlice1arms通过present方法发起跳转,并指定目标名为AbilitySlice2,则跳转结果为显示AbilitySlice2。示例代码如下:
```
present(new AbilitySlice2(), new Intent());
```
**其时序如图9所示:**
::: hljs-center
![新建 DOCX 文档2827.png](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202106/223e8885680c57b5bbd026fc3d40163b0f4467.png?x-oss-process=image/resize,w_603,h_381)
:::
::: hljs-center
图9 AbilitySlice间跳ost是什么意思
:::

> 1.Ability3包含AbilitySlice1、AbilitySlice2、AbilitySlice3三个AbilitySlice,初始化时通过setMaiarmchairnRoute方法设置了默认界面ui怎么读拼音发音为AbilitySui设计师lic技术派侧福晋e1。
2.解析AbilitySlice1可通过presenui怎么拼读t()发起导航到AbilitySui设计lice2,导航完成后界面显示AbilitySlice2。
3.若AbilitySlice1希望从导航目标Abiliui设计师tySost是什么意思lice3返回时,能够获得其返回结果,则可使用presentForResult(技术类专业有哪些)实现导航。当AbilitySlice3返回时,系统将回调onResult()给AbilitySlice1来接收和处理返arma3回结果,其中返回结果由AbilitySlice3在其生命周期内通过seui设计tResult()进行设置。
*UI*3.跨设备跳转**
Ability也支持跨设备的路由,即目标Ability即可以是本地设备的Ability,亦可以是同一用户的不同设备,只需在startAbility进行路由时通过withDeviceId指定对端的设备id即可。
如图10所示:Ability1通过action选择到Ability2的路由,且通过withDeviceId指定了目标设备B,则最终结果为设备B上Ability2的对应界面被拉起显示。
::: hljs-center
![新建 DOCX 文档3415.png](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202解析几何106/15技术英语8d16c813be30a418242934746dd5875b1bd3.png?x-oss-process=image/reuiksize,w_591,h_172)
:::
::: hljs-center
图10 跨设备os路由
:::

#### **3.技术职称资源管理**
JAVA UI框架下的资源管理目录如下:
::: hljs-center
![新建 DOCX 文档3455.png](https://hospfarmonyos.oss-cn-beijing.a偶数liyuncs.com/images/202106/498e606207解析包出现问题怎么办3af4b212c400a475b解析76c73637earm架构ee.png?x-oss-process=image/resiz解析包出现错误无法安装怎么办e,w_498,h_294)
:::
::: hljs-center
解析软件包时出现问题怎么解决12 JAVA UI下资源目录结构
::技术英语:

::: hljs-center
![新建 DOCX 文档3476.png](https://harmonyos.oss-cn-beijing.aliyuncs.uiccom/images/202106/b56decarm是什么意思e478bfe7986b2689aa72624a0c57fbcb.png?x-oss-process=image/resize,w_1080,h_388)
:::
::: hljs-carmchairenter
![新建 DOCX 文档3478.png](https://ha解析包出现错误无法安装怎么办rmonyos.oss-cn-beijing.aliyuncs.com/images/202106/141ddfe486687a41d576615dARM3fa55d7d54310b.png?x-oss-process=iosi七层模型mage/resizeos,w_1080,h_505)
:::
示例代码如下:
Java文件中,引用string.json文件中类型为“String”、名称为“app_name”的资源:
```
ohos.global.resource.ResourceManager resManager = this.getosi七层模型ResourceManager();
String resuARMlt = resMarmoranager.getElement(ResourceTable.String_app_name).getString();
```
XML文件中,引用string解析几何.json文件中类型为“ui设计主要学什么内容String”、名称为“技术职称app_name”的资源:
`技术支持``

```
### **ACE JS UI框架**
JS UI框架是一种跨设备的高性能UI开发框架,支持声明式编程和跨设备多态UI。它包括应用层(Application)、前端框架层(Framework)、引擎层(Engine)和平台适配层(Porting Layer)。
::: hljs-center
![新建 DOCX 文档4174.png](技术支持https://harmonyos.os技术学校s-cn-beijing.aliARMyuncs.com/images/202106/82ca4453474a0de4348327ac4d80d8d32技术9osi七层模型ac13.png?x-os是什么意思oss-process=image/resize,w_832,h_478)
:解析vip::
::: hljs-center
图13 JS UI框架
:::

**❖ Application**
应用层表示开发者使用JS UI框架开发的FA应用。os是什么意思
**❖ Framework**
前端框架层主要完成前端页面解析,以及提供MVVM(ModelViewViewModel)开发模式、页面路由机制和自定义组件等能力。
**❖ Engine**
引擎层主要提供动画解析、DOM(解析vipDocument Object Model)树构建、布局计算、渲染命令构建与绘制、事技术学院有哪些专业件管理和平台channel机制等能力。
**❖ Porting Layer**
适配层主要完成对平台层进行抽象,提供具体抽象接口,可以对接到不同系统平台。比如:事件对接、渲染管线对接和系统生命周期对接等。
#### **1.界面构成**
每个用户界面的 UI布局由HML+CSS文件完成,响应及业务逻辑由JS文件arm怎么读完成。
::: hljs-center
![新建 DOCX 文档4522.png](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202106/3841cc3640775cf91c94689de9a032be1e3a25.png?x-ossarmed-proospfcess=image/resize,w_523,h_228)
:::
::: hljs-center
图14 JuidS应用构成
:::

● HML(HarmonyOS Markup Language)是一套类HTui是什么意思ML的标记语言,通过组件,事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染和逻辑解析几何知识点总结控制等高级能力。
● CSS是描述arma3HML页面结构的样式语言。osi七层模型
ui怎么拼读 JS文件用来定义HML页面的业务逻辑,支持ECMA规范的JavaScript语言。
示例代码如下:
::: hljs-cenui设计主要学什么内容ter
![新建 DOCX 文档4707.png](https://harmonyos.oss-cn-beijing.aliyuncs.com/imaarm是什么意思ges/202106/77a27cd453技术导航671b656eb486346496eb4276b773.png?x-oss-解析几何process=image/resize,w_631,h_4解析式60)
:::
::: hljs-center
图15 JS UI代ost是什么意思码示例
:::

**其中技术学院学什么好,UI布局由HML和CSS完成:**
HML里

页签设置了界面组件,组件样式由container类定义,组件中包含文本控件text,文本技术派侧福晋内容由{{title}}填充,并给该文本控件设置了点击响应事件onclick,在控件被点击时执行change方法。
CSS里声明了样式,如container类设置了HML里

页签组件的方向和元素对齐方式。
**对应的业务逻辑在JavaScript完成:**
初始化时,将title设置为“hello world”,即刷新了文本控件text的填充内容{{title}}。
组件(uikComponent)是构arma3建页面的核心,每个组件通过对数据和方法的简单封装,实现独立的可视、可交互功能单元。
::: hljs-center
![新建 DOCX 文档5037.png](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202106/95c498b4076cd4f487c6771b00fc27102bf218.png?x-oss-process=image/resize,w_887,h_280)
:::
:解析软件包时出现问题怎么解决:: hljs-c技术学校enter
图16 组件分类
:::

关于【组件详情】,请参考官网资ui的四个声调怎么标料:
**● 组件详情ui设计**
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-js-building-ui-os系统component-0000000000500580
#### **2.Ability**
**JS UI的Ability生命周期**
下面是几个主要生命周期函数。
**● onCreate ()**
当应用创建时调用。(应用的生命周期)
**● onInit ()**
页面数据初始化完成时触发,只触发一次。
**● onReady ()**
页面创建完成时触发,只触发一次。
**● onShow ()**
页面显示时触发。
**● onHide ()**
页面消失时触发。
**● onDestroy ()**
页面销毁时触发技术员
具体生命周期欧尚x5流程如下图所示:
::: hljs-cente技术导航r
![新建 DOCX 文档5540.png](https://harmonyos.oss-cn-beijing.aliyuncs.com/imag欧尚x7es/202106/599解析几何b01c34b11d2ea57a058a48f04270d02d3ab.png?x-oss-process=image/resize,w_683,h_66技术类专业有哪些1)
::技术英语:
::: hljs解析vip-center
图17 JS FA页面生命周期
:armchair::

**JS Ability路由**army
JS FA也提供了三种路由方式:
**1.Ability间的跳转**
**2.Ability内部JS pa技术职称ge间跳转**
**armor3.跨设备跳转**
::: hl技术派侧福晋js-center
![新建 DOCX 文档5632.png](harmorttps://harmonyos.oss-cn-beijing.aliUIyuncs.com/images/202106/75d0fdf68b技术职称9eb22e2b7860bd089bd38d018c7e.png?x-oss-process=image/resize,w_509,h_190)
:::
::: hljs-center
图18 JS FA路由
:::

**1.Ability间的跳转**
JS中的Ability继承自AceAbilitarmory。
AceAbilost是什么意思ity间的跳转JS接口通过FeatureAbility.startAbility完成:
```arm是什么意思
let actionData = {
uri: 'www.huawei.com'
};
let target = {
bundleName: "com.example.harmonydevsaosmplose",
abilityName: "com.example.harmonydevsample.EntryJSApiAbility",os
data: actionData
};
let result = await FeatureAbilit解析包时出现错误怎么回事y.star解析几何t解析vipAbility(target);
let ret = JSON.par技术学院有哪些专业se(result);
if (ret.code == 0) {
console.log('success');
} else {
console.log('cannotos系统 s偶数tart browing service, rea偶数son:技术学校 ' + ret.datui设计师a);
}
```
**2.Ability内部JS page间跳转**
JS的Abi解析lity中可有多个不解析几何二级结论同页面,每个界面是一个Js Page(在pages目录下定义),如下面的a解析vipbility包含了index和detail 2个页面:os是什么意思
```
{
...
"pages": [
"pages/index/index",
"pages/detail/detail"
]
...
}
```
J解析式S Page间可通过router跳转,例如跳转到detail的页面:
```
import router from '@system.router';
router.push({
uri: "pages/detail/detail",
params: {
eventId: item,
}
});
```
**3.跨设备跳转**
跨设备跳转路由原理同Java UI上跨设备一样,只是JS UI中提供的是对应JS的接口:
```
FeatureAbility.startAbility(OBJECT)
FeatureAbility.startAbilityForResult(OBJECT)
```
#### **三.资源管理**
JS UI框架下的资源管理目录如下:
::: hljs-center
![新建 DOCX 文档6800.png](https://harmonyos.oss-cnui是什么意思-barmchaireijing.aliyuncs.com/im技术导航ages/202106/697fb4a068f48133d9d178640d94d46f9032b1.png?x-oss-process=image/resize,wARM_306,h_619)
:::
::: hljsui是什么意思-center
图19 JS UI下资源目录结构
:::

● aui是什么意思pp.js文件用于全局JavaScript逻辑和应用生命周期管理。
● pages目录用于ui的四个声调怎么标存放所有组件页面。
● commonost目录用于存放公共资源文件解析,比如:媒体资源,自定义组件和JS文件。
● resources目录用于存放资源配置文件,比如:全局样式、多分辨率加载等配置文件。
● i18n目录用于配置不同语言场景资源内容,比如:应用文本词条,图片路径等资源。资源文件命名为“语言地区.json”格式。
其中,
● .hml结尾的HML模板文件,这个文件用来描述当前页面的文件布局结构。
● .css结尾的CSS样式文件,这个文件用于描述页面样式。
● .js结尾的JS文件,这个文件用于处理页面和用户的交互。
资源引用:
![新建 DOCX 文档7137.png](https://harmonyos.oss-cn-beijing.aliyuncs.com/images/202106/b56235b67技术学院学什么好f5c54348fc261eb2d94解析式9bef6arm架构7f914.png?x-oss-process=image/resize,w_1080,h_37解析几何二级结论4)
❖ $t方法引用资源,$t既可以在hml中使用,也可以在js中使用,$t参数说明如下:
![新建 DOCX 文档7183.png](httosps://harmonyos.oss-cn-beijing.aliyuncs.com/images/202106/d183a09749de142ui设计师b31f5076arm怎么读99aeef5903df9a6.png?x-oss-process=image/re技术支持size,w_1080,h_os系统101)
示例代码如下:
**• enUS.json中定义:**
```
{
"strings": {
"hello": "Hello world!",
……
},
}
```
**• HML中引用:**
```

{{ $t('strings.hello解析几何') }}

```
**• JS中引用:**
```
export default {
data: {
hello: '',
},
onIniarm什么意思英语t() {
this.hello = this.$t('string技术s.hello');
},
}
```
❖ 单复数通过$tc引用资源,定义单复数资源的内容通解析几何过json格式的key为“zero”、“one”、“two”、“few”、“many”和“other”区分,$tc参数说明如下:欧尚x5
![新建 DOCX 文档7633.png](https://harmonyos.oss-cn-osb技术员eijing.aliyuncs.com/images/202106/0683f0c21f1dd157b487748093706cfb97a0de.png?x-oss-proces欧尚s=image/resiui的四个声调怎么标ze,w_1080,h_89)
示例代码例如下:
**• enUS欧尚x5.json中定义:**
```
{
"strings": {
"people": {
"one": "one person",
"other": "{count} people"
}
}
}
```
**• HML中引用:**
```

{{ $tc('strings.people', 2) }}

```
**• JS中引欧尚x5用:**
```
export default {
data: {
people: '',
},
onInit() {
this. people = thosis.$tc('s解析viptrinarm是什么意思gs.people', 2);
},
}
```
❖ $r方法引用资源,$r既可以在hml中使用,也可以在js中使用,$r参数说明arm架构如下:
![新建 DOCX 文档8126.png](https://harmonyos.oss-cn-beijing.aliyuncsosi七层模型.com/images/202106/b63a163038b5074a3d077494b欧尚4f22arm是什么意思e4460c0b2.png?x-oss-process=image/resize,w_1080,h_arma365)
示例代码如下:
**• resldpi.json中定技术员义:**
```
{
"image": {
"wearable": "common/wearable.png",arma3
……
}
}
```
**• HML中引用:**
```

```
*技术学院学什么好*• JS中引用:**
```
export default {
private: {
wearable: '',
},
onInit() {
// 资源格式化:
this. wearable= this.$r('image. wearable');
},
}
```
最后,本文描述的HarmonyOS应用解析程序包时出现问题怎么办UI开发方法可以覆盖大部分简单业务,开发者可以根据需求自由选择JS或者JAVA框架来完成。
作者解析包出现错误无法安装怎么办:zhenyu,华为软件开发工程师
[想了解更多关于鸿蒙的内容,请访问:](https://harmonyo技术学校s.51cto.com/#bkwz)
[51CTO和华为官方战略合作共建的鸿蒙技术社区](https://harmonyos.51cto.com/#bkwz)
https://harmonyos.51cto.com/#bkwos系统z