鸿蒙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页面展示。

onCreate(want, launchParam) {}
1

• 应用完全不可见
  onBackground回调，在UIAbility的UI页面完全不可见之后，即UIAbility切换至后台时候触发。可以在onBackground回调中释放UI页面不可见时无用的资源，或者在此回调中执行较为耗时的操作，例如状态保存等。

onBackground() {}
1

• 应用可见之前
  nForeground回调，在UIAbility的UI页面可见之前，即UIAbility切换至前台时触发。
  可以在onForeground回调中申请系统需要的资源，或者重新申请在onBackground中释放的资源。

onForeground() {}
1

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

onWindowStageDestroy() {}
1

• 应用销毁

在UIAbility销毁时触发。可以在onDestroy回调中进行系统资源的释放、数据的保存等操作。

onDestroy() {}
1

5.2、页面生命周期

• 页面每次显示

页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效。

onPageShow() {}
1

• 页面每次隐藏

页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景，仅@Entry装饰的自定义组件生效。

onPageHide() {}
1

• 点击返回按钮

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

onBackPress() {}
1

5.3、组件生命周期

• 组件创建后

aboutToAppear函数在创建自定义组件的新实例后，在执行其build()函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build()函数中生效。

aboutToAppear() {}
1

• 组件销毁前

aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。

aboutToDisappear() {}
1

6、条件渲染

if/else：

• 支持if、else和else if语句。
• if、else if后跟随的条件语句可以使用状态变量。
• 允许在容器组件内使用，通过条件渲染语句构建不同的子组件。
• 当if、else if后跟随的状态判断中使用的状态变量值变化时，条件渲染语句会进行更新。
• 条件可以包括Typescript表达式。

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

1
2
3
4
5
6

例如：

@Entry
@Component
struct Branch {
  @State isStudy: boolean = false

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

7、列表渲染

ForEach：

ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。

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

例如：

@Entry
@Component
struct Index {
  @State list: number[] = [1,2,3,4,5,6,7,8,9]

  build() {
    Column() {
      List({space:10}){
        ForEach(this.list,item=>{
          ListItem(){
            Text(`${item}`).textAlign(TextAlign.Center)
              .width('100%')
              .height(50)
              .fontSize(20)
          }
        })
      }.padding(10)
      .divider({
        strokeWidth:2,
        color:Color.Red
      })
    }
    .width('100%')
    .height('100%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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组件支持加载网络图片，将图片地址换成网络图片地址进行加载。

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

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

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

8.2、本地资源

将本地图片放入ets文件夹下的任意位置，Image组件引入本地图片路径，即可显示图片（根目录为ets文件夹）。

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

8.3、Resource资源

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

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

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

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

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

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

9、页面路由

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块，通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面 。

Router模块提供了两种跳转模式，分别是router.pushUrl()和router.replaceUrl()。这两种模式决定了目标页是否会替换当前页。

• router.pushUrl()：目标页不会替换当前页，而是压入页面栈。这样可以保留当前页的状态，并且可以通过返回键或者调用router.back()方法返回到当前页。

• router.replaceUrl()：目标页会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。

提示：页面栈的最大容量为32个页面。如果超过这个限制，可以调用router.clear()方法清空历史页面栈，释放内存空间。

在使用页面路由Router相关功能之前，需要在代码中先导入Router模块。

import router from '@ohos.router';
1

9.1、路由跳转

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

9.2、路由跳转传值

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

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

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

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

9.3、页面返回

当用户在一个页面完成操作后，通常需要返回到上一个页面或者指定页面，这就需要用到页面返回功能。在返回的过程中，可能需要将数据传递给目标页，这就需要用到数据传递功能。

• 返回到上一个页面

router.back();
1

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

• 返回到指定页面

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

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

• 返回到指定页面，并传递自定义参数信息

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

这种方式不仅可以返回到指定页面，还可以在返回的同时传递自定义参数信息。这些参数信息可以在目标页中通过调用router.getParams()方法进行获取和解析。

在目标页中，在需要获取参数的位置调用router.getParams()方法即可，例如在onPageShow()生命周期回调中：

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

1
2
3
4
5
6

• 页面返回前增加一个询问框

在开发应用时，为了避免用户误操作或者丢失数据，有时候需要在用户从一个页面返回到另一个页面之前，弹出一个询问框，让用户确认是否要执行这个操作。

如果想要在目标界面开启页面返回询问框，需要在调用router.back()方法之前，通过调用router.showAlertBeforeBackPage()方法设置返回询问框的信息。例如，在支付页面中定义一个返回按钮的点击事件处理函数：

// 定义一个返回按钮的点击事件处理函数

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();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

其中，router.showAlertBeforeBackPage()方法接收一个对象作为参数，该对象包含以下属性：

message：string类型，表示询问框的内容。

如果调用成功，则会在目标界面开启页面返回询问框；如果调用失败，则会抛出异常，并通过err.code和err.message获取错误码和错误信息。

当用户点击“返回”按钮时，会弹出确认对话框，询问用户是否确认返回。选择“取消”将停留在当前页目标页；选择“确认”将触发router.back()方法，并根据参数决定如何执行跳转。

10、自定义组件

在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。

自定义组件具有以下特点：

• 可组合：允许开发者组合使用系统组件、及其属性和方法。

• 可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用。

• 数据驱动UI更新：通过状态变量的改变，来驱动UI的刷新。

10.1、基本结构

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

• struct：自定义组件基于struct实现，struct + 自定义组件名 + {…}的组合构成自定义组件，不能有继承关系。对于struct的实例化，可以省略new。

• @Component：@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，需要实现build方法描述UI，一个struct只能被一个@Component装饰。

• build()函数：build()函数用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数。

10.2、参数规定

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

@Component
struct MyComponent {
  private countDownFrom: number = 0;
  private color: Color = Color.Blue;

  build() {
  }
}

@Entry
@Component
struct ParentComponent {
  private someColor: Color = Color.Pink;

  build() {
    Column() {
      // 创建MyComponent实例，并将创建MyComponent成员变量countDownFrom初始化为10，将成员变量color初始化为this.someColor
      MyComponent({ countDownFrom: 10, color: this.someColor })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

10.3、示例演示

@Entry
@Component
struct CustomComponents {
  @State message: string = '诗词学习'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        itemComponent()
        itemComponent({ content: '二十四桥明月夜，玉人何处教吹箫？' })
        itemComponent({ content: '荷尽已无擎雨盖，菊残犹有傲霜枝。' })
        itemComponent({ content: '一年好景君须记，最是橙黄橘绿时。' })
      }
      .width('100%')
    }
    .height('100%')
  }
}


@Component
struct itemComponent {
  // 自定义组件可以使用变量(都是私有化的) 传递参数
  content: string = '青山隐隐水迢迢，秋尽江南草未凋。'
  // 哪种情况可以驱动UI更新。@state
  @State isDone: boolean = false

  build() {
    //   必须有一个根组件。
    Row() {
      Image(this.isDone ? $r('app.media.todo_ok') : $r('app.media.todo_default'))
        .width(20)
        .height(20)
        .margin(15)
      Text(this.content)
        .decoration({ type: this.isDone ? TextDecorationType.LineThrough : TextDecorationType.None })
    }
    .backgroundColor(Color.Pink)
    .borderRadius(25)
    .margin({
      top: 15
    })
    .onClick(() => {
      this.isDone = !this.isDone
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51