鸿蒙HarmonyOS 开辟简介

鸿蒙开辟入门教程
一、技能简介

鸿蒙利用体系（HarmonyOS）是面向万物互联期间的全场景分布式利用体系，具备分布式软总线、分布式数据管理、分布式使命调治等核心本事，能让装备间实现无缝毗连与协同，为用户提供同一、流畅的交互体验。
开辟语言方面，ArkTS 是专门为鸿蒙开辟计划的语言，联合了 TypeScript 的范例体系与声明式编程范式，提升了开辟服从和代码的可维护性。值得一提的是功能写法也和前端VUE框架颇为相似，信赖在我国具有大基数的前端开辟者会很容易上手吧
二、工具安装

• 下载 DevEco Studio
  访问 华为开辟者官网，在官网找到 DevEco Studio 的下载链接，依据自身利用体系（Windows、Mac 或 Linux）选择符合版本下载。
  
• 安装 DevEco Studio
  运行下载好的安装步调，按照提示完成安装。安装过程中可按需选择安装路径和组件。
  
• 设置 SDK
  打开 DevEco Studio，选择 “Tools” -> “SDK Manager”，在 “SDK Platforms” 中选择所需的鸿蒙 SDK 版本举行下载安装；在 “SDK Tools” 中安装须要工具，如 Build Tools、Platform - Tools 等。
  
• 创建项目
  打开 DevEco Studio，点击 “File” -> “New” -> “New Project”，选择基于 ArkTS 的项目模板（如 “Empty Ability (ArkTS)”），点击 “Next”，设置项目信息（项目名称、生存位置、包名等），末了点击 “Finish” 完成项目创建。
  

三、核心单元先容

• Ability
  Ability 是鸿蒙应用的根本功能单元，负责处理惩罚应用的各种本事和业务逻辑。分为 FA（Feature Ability）和 PA（Particle Ability）。
  FA（Feature Ability）
  用于实现具有用户界面的功能，雷同于 Android 中的 Activity。通常用于展示界面、与用户交互等。
  

1. // 在 pages 目录下创建 Index.ets 文件
2. @Entry
3. @Component
4. struct Index {
5.   build() {
6.     Column({ space: 50 }) {
7.       Text('This is a Feature Ability page.')
8.         .fontSize(30)
9.         .width('100%')
10.         .textAlign(TextAlign.Center)
11.     }
12.     .width('100%')
13.   }
14. }

复制代码

PA（Particle Ability）

用于实现无用户界面的功能，如配景服务、数据处理惩罚等，雷同于 Android 中的 Service。

1. // 在 service 目录下创建 MyService.ets 文件
2. @Service
3. @Component
4. struct MyService {
5.   onStart() {
6.     console.log('MyService started.')
7.     // 在这里可以执行后台任务，如数据同步、定时任务等
8.   }
10.   onStop() {
11.     console.log('MyService stopped.')
12.   }
13. }

复制代码

2. Module

Module 是对 Ability 的进一步封装，包罗多个 Ability 以及干系的资源和设置信息，便于对应勤奋能举行模块化管理。在 config.json 中可以对 Module 举行设置，比方指定 Module 的名称、包罗的 Ability 等。

1. {
2.   "module": {
3.     "name": "entry",
4.     "reqPermissions": [
5.       {
6.         "name": "ohos.permission.INTERNET",
7.         "reason": "Need internet access to fetch data",
8.         "usedScene": {
9.           "ability": [
10.             "com.example.myapp.MainAbility"
11.           ],
12.           "when": "always"
13.         }
14.       }
15.     ],
16.     "abilities": [
17.       {
18.         "name": "com.example.myapp.MainAbility",
19.         "icon": "$media:icon",
20.         "label": "$string:mainability_label",
21.         "srcEntrance": "pages/Index.ets",
22.         "description": "$string:mainability_description",
23.         "type": "page",
24.         "launchType": "standard"
25.       },
26.       {
27.         "name": "com.example.myapp.MyService",
28.         "srcEntrance": "service/MyService.ets",
29.         "description": "$string:myservice_description",
30.         "type": "service"
31.       }
32.     ]
33.   }
34. }

复制代码

四、告急 UI 组件

• Text
  用于表现文本内容。
  

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Text('Hello, HarmonyOS!')
6.       .fontSize(30)
7.       .fontWeight(FontWeight.Bold)
8.       .textAlign(TextAlign.Center)
9.   }
10. }

复制代码

2. Button

用于触发利用。

1. @Entry
2. @Component
3. struct Index {
4.   @State clickCount: number = 0
6.   build() {
7.     Column({ space: 50 }) {
8.       Text(`Button clicked ${this.clickCount} times.`)
9.         .fontSize(20)
10.         .width('100%')
11.         .textAlign(TextAlign.Center)
12.       Button('Click me')
13.         .onClick(() => {
14.           this.clickCount++
15.         })
16.         .width('50%')
17.         .margin({ left: '25%' })
18.     }
19.     .width('100%')
20.   }
21. }

复制代码

3. Image

用于表现图片。

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Image($r('app.media.sample_image'))
6.       .width(200)
7.       .height(200)
8.       .objectFit(ImageFit.Contain)
9.       .margin({ top: 100 })
10.       .width('100%')
11.       .imageAlign(ImageAlign.Center)
12.   }
13. }

复制代码

4. Column 和 Row

用于结构组件，Column 实现垂直结构，Row 实现程度结构。

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Column({ space: 20 }) {
6.       Text('Vertical Item 1')
7.       Text('Vertical Item 2')
8.       Row({ space: 20 }) {
9.         Text('Horizontal Item 1')
10.         Text('Horizontal Item 2')
11.       }
12.     }
13.     .width('100%')
14.   }
15. }

复制代码

五、常勤奋能

1. 条件渲染

根据条件决定是否渲染组件。

1. @Entry
2. @Component
3. struct Index {
4.   @State showText: boolean = false
6.   build() {
7.     Column({ space: 50 }) {
8.       Button(this.showText? 'Hide Text' : 'Show Text')
9.         .onClick(() => {
10.           this.showText =!this.showText
11.         })
12.         .width('50%')
13.         .margin({ left: '25%' })
14.       if (this.showText) {
15.         Text('This text is conditionally rendered.')
16.           .fontSize(20)
17.           .width('100%')
18.           .textAlign(TextAlign.Center)
19.       }
20.     }
21.     .width('100%')
22.   }
23. }

复制代码

2. 列表渲染

使用 ForEach 组件渲染列表数据。

1. @Entry
2. @Component
3. struct Index {
4.   private fruits: string[] = ['Apple', 'Banana', 'Cherry']
6.   build() {
7.     Column({ space: 20 }) {
8.       ForEach(this.fruits, (fruit) => {
9.         Text(fruit)
10.           .fontSize(20)
11.           .width('100%')
12.           .textAlign(TextAlign.Center)
13.       }, (fruit) => fruit)
14.     }
15.     .width('100%')
16.   }
17. }

复制代码

3. 页面导航

在差别页面间举行导航。

1. // 在 pages 目录下创建 SecondPage.ets 文件
2. @Component
3. struct SecondPage {
4.   build() {
5.     Column({ space: 50 }) {
6.       Text('This is the second page.')
7.         .fontSize(30)
8.         .width('100%')
9.         .textAlign(TextAlign.Center)
10.       Button('Go back to first page')
11.         .onClick(() => {
12.           router.back()
13.         })
14.         .width('50%')
15.         .margin({ left: '25%' })
16.     }
17.     .width('100%')
18.   }
19. }
21. // 在 Index.ets 中添加导航按钮
22. @Entry
23. @Component
24. struct Index {
25.   build() {
26.     Column({ space: 50 }) {
27.       Text('This is the first page.')
28.         .fontSize(30)
29.         .width('100%')
30.         .textAlign(TextAlign.Center)
31.       Button('Go to second page')
32.         .onClick(() => {
33.           router.pushUrl({ url: 'pages/SecondPage' })
34.         })
35.         .width('50%')
36.         .margin({ left: '25%' })
37.     }
38.     .width('100%')
39.   }
40. }

复制代码

六、常用函数

1. onClick

用于绑定按钮等组件的点击变乱。

1. @Entry
2. @Component
3. struct Index {
4.   @State message: string = 'Button not clicked'
6.   build() {
7.     Button('Click me')
8.       .onClick(() => {
9.         this.message = 'Button clicked!'
10.       })
11.     Text(this.message)
12.       .fontSize(20)
13.       .width('100%')
14.       .textAlign(TextAlign.Center)
15.   }
16. }

复制代码

2. onChange

用于绑定输入框等组件的值变革变乱。

1. @Entry
2. @Component
3. struct Index {
4.   @State inputValue: string = ''
6.   build() {
7.     Column({ space: 20 }) {
8.       Input({ placeholder: 'Enter text' })
9.         .onChange((value: string) => {
10.           this.inputValue = value
11.         })
12.       Text(`You entered: ${this.inputValue}`)
13.         .fontSize(20)
14.         .width('100%')
15.         .textAlign(TextAlign.Center)
16.     }
17.     .width('100%')
18.   }
19. }

复制代码

3. router.pushUrl 和 router.back

用于页面导航，router.pushUrl 用于跳转到指定页面，router.back 用于返回上一页，如前面页面导航示例所示。

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

继续阅读请点击广告