鸿蒙HarmonyOS开辟：零根本也能成为开辟者

1、HarmonyOS

HarmonyOS就是我们说的华为鸿蒙体系，HarmonyOS是一款全新的面向全场景的分布式使用系
统。在传统的单装备体系本领根本上，HarmonyOS 提出了基于同一套体系本领、适配多种终端形态的分布式理念，可以大概支持手机、平板、智能穿着、聪明屏、车机等多种终端装备，提供全场景（移动办公、运动康健、交际通讯、媒体娱乐等）业务本领。
以下是可搭载HarmonyOS的装备。

• 移动装备：HarmonyOS可以用于开辟基于Android体系的移动装备，如智能手机、平板电脑等。
  
• 智能家居装备：HarmonyOS可以用于开辟智能家电、智能音响、智能门锁等智能家居装备。
  
• 智能手表：HarmonyOS可以用于开辟智能手表、智能手环等智能可穿着装备。
  
• 车载体系：HarmonyOS可以用于开辟车载娱乐体系、车载导航体系等车载应用。
  
• 工业控制：HarmonyOS可以用于工业主动化、呆板人控制等嵌入式范畴。
  

2、ArkTS语言

HarmonyOS 4.0以后可以使用ArkTS大概Html css js技能来开辟HarmonyOS应用,
ArkTS是鸿蒙生态的应用开辟语言。它在保持TypeScript（简称TS）根本语法风格的根本上，对TS的动态范例特性施加更严酷的束缚，引入静态范例。同时，提供了声明式UI、状态管理等相应的本领，让开辟者可以以更简便、更天然的方式开辟高性能应用。

• js：JavaScript
  
• ts：TypeScript
  
• ets: extend TypeScript
  

3、ArkTS的根本构成

3.1、项目目次先容

3.2、ArkTS的根本构成

装饰器： 用于装饰类、结构、方法以及变量，并赋予其特殊的寄义。如上述示例中@Entry、@Component和@State都是装饰器，@Component体现自界说组件，@Entry体现该自界说组件为入口组件，@State体现组件中的状态变量，状态变量变革会触发UI革新。
UI形貌：以声明式的方式来形貌UI的结构，比方build()方法中的代码块。
自界说组件：可复用的UI单位，可组合其他组件，如上述被@Component装饰的struct Hello。
体系组件：ArkUI框架中默认内置的根本和容器组件，可直接被开辟者调用，好比示例中的Column、Text、Divider、Button。
属性方法：组件可以通过链式调用设置多项属性，如fontSize()、width()、height()、backgroundColor()等。
变乱方法：组件可以通过链式调用设置多个变乱的相应逻辑，如跟随在Button背面的onClick()。
4、组件先容

组件（Component）是界面搭建与体现的最小单位，HarmonyOS ArkUI声明式开辟范式为开辟者提供了丰富多样的UI组件，我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。
组件根据功能可以分为以下五大类：根本组件、容器组件、媒体组件、绘制组件、画布组件。此中根本组件是视图层的根本构成单位，包罗Text、Image、TextInput、Button、LoadingProgress等。
组件是构建页面的核心，每个组件通过对数据和方法的简朴封装，实现独立的可视、可交互功能单位。组件之间相互独立，随取随用，也可以在需求类似的地方重复使用。
5、生命周期

5.1、应用生命周期

src/main/ets/entryability/EntryAbility.ts

• 应用创建
  

Create状态，在UIAbility实例创建时触发，体系会调用onCreate回调。可以在onCreate回调中举行相干初始化使用。比方用户打开电池管理应用，在应用加载过程中，在UI页面可见之前，可以在onCreate回调中读取当前体系的电量环境，用于后续的UI页面展示。

1. onCreate(want, launchParam) {}

复制代码

• 应用完全不可见
  onBackground回调，在UIAbility的UI页面完全不可见之后，即UIAbility切换至背景时间触发。可以在onBackground回调中开释UI页面不可见时无用的资源，大概在此回调中实行较为耗时的使用，比方状态生存等。
  

1. onBackground() {}

复制代码

• 应用可见之前
  nForeground回调，在UIAbility的UI页面可见之前，即UIAbility切换至前台时触发。
  可以在onForeground回调中申请体系必要的资源，大概重新申请在onBackground中开释的资源。
  

1. onForeground() {}

复制代码

• 实例创建
  在UIAbility实例创建时被调用，可在该函数中设置应用加载的初始页面。
  

1. onWindowStageCreate() {}

复制代码

• 实例烧毁之前
  在UIAbility实例烧毁之前，则会先辈入onWindowStageDestroy回调，我们可以在该回调中开释UI页面资源。
  

1. onWindowStageDestroy() {}

复制代码

• 应用烧毁
  

在UIAbility烧毁时触发。可以在onDestroy回调中举行体系资源的开释、数据的生存等使用。

1. onDestroy() {}

复制代码

5.2、页面生命周期

• 页面每次体现
  

页面每次体现时触发一次，包罗路由过程、应用进入前台等场景，仅@Entry装饰的自界说组件见效。

1. onPageShow() {}

复制代码

• 页面每次潜伏
  

页面每次潜伏时触发一次，包罗路由过程、应用进入背景等场景，仅@Entry装饰的自界说组件见效。

1. onPageHide() {}

复制代码

• 点击返回按钮
  

当用户点击返回按钮时触发，仅@Entry装饰的自界说组件见效。

1. onBackPress() {}

复制代码

5.3、组件生命周期

• 组件创建后
  

aboutToAppear函数在创建自界说组件的新实例后，在实行其build()函数之前实行。答应在aboutToAppear函数中改变状态变量，更改将在后续实行build()函数中见效。

1. aboutToAppear() {}

复制代码

• 组件烧毁前
  

aboutToDisappear函数在自界说组件析构烧毁之前实行。不答应在aboutToDisappear函数中改变状态变量，特殊是@Link变量的修改大概会导致应用步调举动不稳固。

1. aboutToDisappear() {}

复制代码

6、条件渲染

if/else：

• 支持if、else和else if语句。
  
• if、else if后跟随的条件语句可以使用状态变量。
  
• 答应在容器组件内使用，通过条件渲染语句构建差异的子组件。
  
• 当if、else if后跟随的状态判定中使用的状态变量值变革时，条件渲染语句会举行更新。
  
• 条件可以包罗Typescript表达式。
  

1. if(条件表达式){
2. 组件内容1
3. }else{
4. 组件内容2
5. }

复制代码

比方：

1. @Entry
2. @Component
3. struct Branch {
4.   @State isStudy: boolean = false
6.   build() {
7.     Row() {
8.       Column() {
9.         Button('toggle').fontSize(50).margin({ top: 20 })
10.           .onClick(() => {
11.             this.isStudy = !this.isStudy
12.           })
13.         if (this.isStudy) {
14.           Image($r("app.media.icon4"))
15.                 .width(28)
16.                 .height(28)
17.         } else {
18.           Image($r("app.media.icon5"))
19.                 .width(28)
20.                 .height(28)
21.         }
22.       }
23.       .width('100%')
24.     }
25.     .height('100%')
26.   }
27. }

复制代码

7、列表渲染

ForEach：
ForEach接口基于数组范例数据来举行循环渲染，必要与容器组件共同使用，且接口返回的组件应当是答应包罗在ForEach父容器组件中的子组件。

1. ForEach(
2. arr: Array,
3. itemGenerator: (item: Array, index?: number) => void,
4. keyGenerator?: (item: Array, index?: number): string => string
5. )

复制代码

参数名参数范例必填参数形貌arrArray是    数据源，为Array范例的数组。
分析：
- 可以设置为空数组，此时不会创建子组件。
- 可以设置返回值为数组范例的函数，比方arr.slice(1, 3)，但设置的函数不应改变包罗数组自己在内的任何状态变量，比方不应使用Array.splice(),Array.sort()或Array.reverse()这些会改变原数组的函数。itemGenerator(item: any, index?: number) => void是组件天生函数。
- 为数组中的每个元素创建对应的组件。
- item参数：arr数组中的数据项。
- index参数（可选）：arr数组中的数据项索引。
分析：
- 组件的范例必须是ForEach的父容器所答应的。比方，ListItem组件要求ForEach的父容器组件必须为List组件。keyGenerator(item: any, index?: number) => string否键值天生函数。
- 为数据源arr的每个数组项天生唯一且恒久的键值。函数返回值为开辟者自界说的键值天生规则。
- item参数：arr数组中的数据项。
- index参数（可选）：arr数组中的数据项索引。
分析：
- 如果函数缺省，框架默认的键值天生函数为(item: T, index: number) => { return index + ‘__’ + JSON.stringify(index); }- 键值天生函数不应改变任何组件状态。比方：

1. @Entry
2. @Component
3. struct Index {
4.   @State list: number[] = [1,2,3,4,5,6,7,8,9]
6.   build() {
7.     Column() {
8.       List({space:10}){
9.         ForEach(this.list,item=>{
10.           ListItem(){
11.             Text(`${item}`).textAlign(TextAlign.Center)
12.               .width('100%')
13.               .height(50)
14.               .fontSize(20)
15.           }
16.         })
17.       }.padding(10)
18.       .divider({
19.         strokeWidth:2,
20.         color:Color.Red
21.       })
22.     }
23.     .width('100%')
24.     .height('100%')
25.   }
26. }

复制代码

  ForEach的itemGenerator函数可以包罗if/else条件渲染逻辑。别的，也可以在if/else条件渲染语句中使用ForEach组件。
  8、Image图片组件

Image组件用来渲染展示图片，它可以让界面变得更加丰富多彩。只必要给Image组件设置图片所在、宽和高，图片就能加载出来。

• 支持的图片格式包罗png、jpg、bmp、svg和gif。
  
• 支持Base64字符串。
  
• 支持dataability://路径前缀的字符串，用于访问通过data ability提供的图片路径。
  

8.1、网络资源

好比欣赏消息的时间，图片一样平常从网络加载而来，Image组件支持加载网络图片，将图片所在换成网络图片所在举行加载。

1. Image('https://www.example.com/xxx.png').width(100).height(100)

复制代码

为了乐成加载网络图片，您必要在module.json5文件中说明网络访问权限。

1. "requestPermissions": [
2. {
3.    "name": "ohos.permission.INTERNET"
4. }
5. ]

复制代码

8.2、本地资源

将本舆图片放入ets文件夹下的恣意位置，Image组件引入本舆图片路径，即可体现图片（根目次为ets文件夹）。

1. Image("/images/1.jpg").width(100).height(100)

复制代码

8.3、Resource资源

• media
  使用资源格式可以跨包/跨模块引入图片，resources文件夹下的图片都可以通过$r资源接口读取到并转换到Resource格式。
  
  
  
  

1. Image($r('app.media.icon')).width(100).height(100)

复制代码

• rawfile
  将图片放在rawfile文件夹下。
  
  
  
  

1. Image($rawfile('icon.png')).width(100).height(100)

复制代码

• base64
  格式data:image/[png|jpeg|bmp|webp];base64,[base64 data], 此中[base64 data]为Base64字符串数据。
  

1. Image("data:image/png;base64,[base64 data]").width(100).height(100)

复制代码

9、页面路由

页面路由指在应用步调中实现差异页面之间的跳转和数据转达。HarmonyOS提供了Router模块，通过差异的url所在，可以方便地举行页面路由，轻松地访问差异的页面 。
Router模块提供了两种跳转模式，分别是router.pushUrl()和router.replaceUrl()。这两种模式决定了目标页是否会更换当前页。

• router.pushUrl()：目标页不会更换当前页，而是压入页面栈。如许可以保存当前页的状态，而且可以通过返回键大概调用router.back()方法返回到当前页。
  
• router.replaceUrl()：目标页会更换当前页，并烧毁当前页。如许可以开释当前页的资源，而且无法返回到当前页。
  

   提示：页面栈的最大容量为32个页面。如果凌驾这个限定，可以调用router.clear()方法清空汗青页面栈，开释内存空间。
  在使用页面路由Router相干功能之前，必要在代码中先导入Router模块。

1. import router from '@ohos.router';

复制代码

9.1、路由跳转

1. Button("跳转到首页").onClick(() => {
2.     router.pushUrl({
3.       url:'pages/index'
4.     })
5.   })

复制代码

9.2、路由跳转传值

如果必要在跳转时转达一些数据给目标页，则可以在调用Router模块的方法时，添加一个params属性，并指定一个对象作为参数。比方：

1. Button("跳转到新闻列表页").onClick(() => {
2.     router.pushUrl({
3.       url:'pages/newList',
4.       params:{
5.         pId:1,
6.         cId:2
7.       }
8.     })
9.   })

复制代码

在目标页中，可以通过调用Router模块的getParams()方法来获取转达过来的参数。比方：

1. aboutToAppear(){
2.     const params = router.getParams(); // 获取传递过来的参数对象
3.     const pId = params['pId']; // 获取pId属性的值
4.     const cId = params['cId']; // 获取cId属性的值
5. }

复制代码

9.3、页面返回

当用户在一个页面完成使用后，通常必要返回到上一个页面大概指定页面，这就必要用到页面返回功能。在返回的过程中，大概必要将数据转达给目标页，这就必要用到数据转达功能。

• 返回到上一个页面
  

1. router.back();

复制代码

这种方式会返回到上一个页面，即上一个页面在页面栈中的位置。上一个页面必须存在于页面栈中才可以大概返回，否则该方法将无效。

• 返回到指定页面
  

1. router.back({ url: 'pages/Home'});

复制代码

这种方式可以返回到指定页面，必要指定目标页的路径。目标页必须存在于页面栈中才可以大概返回。

• 返回到指定页面，并转达自界说参数信息
  

1. router.back({
2.     url: 'pages/Home',
3.     params: {
4.         info: '来自Home页'
5.     }
6. });

复制代码

这种方式不但可以返回到指定页面，还可以在返回的同时转达自界说参数信息。这些参数信息可以在目标页中通过调用router.getParams()方法举行获取和分析。
在目标页中，在必要获取参数的位置调用router.getParams()方法即可，比方在onPageShow()生命周期回调中：

1. onPageShow() {
2. const params = router.getParams();
3. // 获取传递过来的参数对象
4. const info = params['info']; //获取info属性的值
5. }

复制代码

• 页面返回前增长一个扣问框
  

在开辟应用时，为了制止用户误使用大概丢失数据，偶然候必要在用户从一个页面返回到另一个页面之前，弹出一个扣问框，让用户确认是否要实行这个使用。
如果想要在目标界面开启页面返回扣问框，必要在调用router.back()方法之前，通过调用router.showAlertBeforeBackPage()方法设置返回扣问框的信息。比方，在付出页面中界说一个返回按钮的点击变乱处置惩罚函数：

1. // 界说一个返回按钮的点击变乱处置惩罚函数function onBackClick(): void { // 调用router.showAlertBeforeBackPage()方法，设置返回扣问框的信息 try {  router.showAlertBeforeBackPage({     message: '您还没有完成付出，确定要返回吗？' // 设置扣问框的内容  }); } catch (err) {  console.error(`Invoke showAlertBeforeBackPage failed, code is ${err.code}, message is ${err.message}`); } // 调用router.back()方法，返回上一个页面 router.back();
2. }

复制代码

此中，router.showAlertBeforeBackPage()方法吸收一个对象作为参数，该对象包罗以部属性：
message：string范例，体现扣问框的内容。
如果调用乐成，则会在目标界面开启页面返回扣问框；如果调用失败，则会抛出非常，并通过err.code和err.message获取错误码和错误信息。
当用户点击“返回”按钮时，会弹出确认对话框，扣问用户是否确认返回。选择“取消”将停顿在当前页目标页；选择“确认”将触发router.back()方法，并根据参数决定怎样实行跳转。
10、自界说组件

在ArkUI中，UI体现的内容均为组件，由框架直接提供的称为体系组件，由开辟者界说的称为自界说组件。在举行 UI 界面开辟时，通常不是简朴的将体系组件举行组合使用，而是必要思量代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自界说组件是不可或缺的本领。
自界说组件具有以下特点：

• 可组合：答应开辟者组合使用体系组件、及其属性和方法。
  
• 可重用：自界说组件可以被其他组件重用，并作为差异的实例在差异的父组件或容器中使用。
  
• 数据驱动UI更新：通过状态变量的改变，来驱动UI的革新。
  

10.1、根本结构

1. @Component
2. struct MyComponent {
3.   build() {
4.   }
5. }

复制代码

• struct：自界说组件基于struct实现，struct + 自界说组件名 + {…}的组合构成自界说组件，不能有继续关系。对于struct的实例化，可以省略new。
  
• @Component：@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的本领，必要实现build方法形貌UI，一个struct只能被一个@Component装饰。
  
• build()函数：build()函数用于界说自界说组件的声明式UI形貌，自界说组件必须界说build()函数。
  

10.2、参数规定

可以在build方法大概@Builder装饰的函数里创建自界说组件，在创建自界说组件的过程中，根据装饰器的规则来初始化自界说组件的参数。

1. @Component
2. struct MyComponent {
3.   private countDownFrom: number = 0;
4.   private color: Color = Color.Blue;
6.   build() {
7.   }
8. }
10. @Entry
11. @Component
12. struct ParentComponent {
13.   private someColor: Color = Color.Pink;
15.   build() {
16.     Column() {
17.       // 创建MyComponent实例，并将创建MyComponent成员变量countDownFrom初始化为10，将成员变量color初始化为this.someColor
18.       MyComponent({ countDownFrom: 10, color: this.someColor })
19.     }
20.   }
21. }

复制代码

10.3、示例演示

1. @Entry
2. @Component
3. struct CustomComponents {
4.   @State message: string = '诗词学习'
6.   build() {
7.     Row() {
8.       Column() {
9.         Text(this.message)
10.           .fontSize(50)
11.           .fontWeight(FontWeight.Bold)
13.         itemComponent()
14.         itemComponent({ content: '二十四桥明月夜，玉人何处教吹箫？' })
15.         itemComponent({ content: '荷尽已无擎雨盖，菊残犹有傲霜枝。' })
16.         itemComponent({ content: '一年好景君须记，最是橙黄橘绿时。' })
17.       }
18.       .width('100%')
19.     }
20.     .height('100%')
21.   }
22. }
25. @Component
26. struct itemComponent {
27.   // 自定义组件可以使用变量(都是私有化的) 传递参数
28.   content: string = '青山隐隐水迢迢，秋尽江南草未凋。'
29.   // 哪种情况可以驱动UI更新。@state
30.   @State isDone: boolean = false
32.   build() {
33.     //   必须有一个根组件。
34.     Row() {
35.       Image(this.isDone ? $r('app.media.todo_ok') : $r('app.media.todo_default'))
36.         .width(20)
37.         .height(20)
38.         .margin(15)
39.       Text(this.content)
40.         .decoration({ type: this.isDone ? TextDecorationType.LineThrough : TextDecorationType.None })
41.     }
42.     .backgroundColor(Color.Pink)
43.     .borderRadius(25)
44.     .margin({
45.       top: 15
46.     })
47.     .onClick(() => {
48.       this.isDone = !this.isDone
49.     })
50.   }
51. }

复制代码

一键三连+关注，你的支持是我创作的动力。在这里，我乐于倾囊相授。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金