华为鸿蒙HarmonyOS Next基础开发教程

1. 开发环境准备

安装DevEco Studio

DevEco Studio是华为为HarmonyOS应用开发提供的集成开发环境（IDE）。您可以从华为的官方网站下载并安装DevEco Studio。

配置开发环境

确保您的计算机上安装了以下软件：

JDK：Java开发工具包，用于支持Java语言开发。
Node.js：JavaScript运行环境，用于支持Node.js开发。

创建新项目

打开DevEco Studio，创建一个新的HarmonyOS项目，选择相应的模板和配置。

2. 创建第一个页面

我们将创建一个简单的页面，包含文本和按钮组件。

@Entry
@Component
struct Index {
  @State message: string = '你好，HarmonyOS!'
  @State count: number = 0

  build() {
    Column() {
      Text(this.message)
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20 })

      Button('点击我') {
        type: ButtonType.Capsule
      }
      .onClick(() => {
        this.count++
        this.message = `点击次数: ${this.count}`
      })
      .margin({ top: 20 })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

3. 代码解析

装饰器说明

@Entry：声明这是一个入口组件。
@Component：声明这是一个自定义组件。
@State：声明组件的状态变量，当状态变更时会触发UI更新。

主要组件说明

Column：垂直布局容器。
Text：文本显示组件。
Button：按钮组件。

4. 样式设置

在鸿蒙中，我们使用链式调用来设置组件样式：

Text('示例文本')
  .fontSize(20)       // 设置字体大小
  .fontColor('#333')  // 设置字体颜色
  .margin(10)         // 设置外边距

5. 常用布局示例

@Entry
@Component
struct LayoutExample {
  build() {
    Row() {
      Column() {
        Text('左侧')
          .fontSize(16)
      }
      .width('50%')
      
      Column() {
        Text('右侧')
          .fontSize(16)
      }
      .width('50%')
    }
    .width('100%')
    .height('100%')
  }
}

6. 生命周期

@Entry
@Component
struct LifecycleExample {
  aboutToAppear() {
    // 组件即将出现时调用
    console.info('组件即将出现')
  }

  aboutToDisappear() {
    // 组件即将消失时调用
    console.info('组件即将消失')
  }

  build() {
    Column() {
      Text('生命周期示例')
    }
  }
}

7. 状态管理

@Entry
@Component
struct StateExample {
  @State count: number = 0
  @Link parentCount: number  // 与父组件数据绑定
  @Prop message: string      // 父组件传递的只读数据

  build() {
    Column() {
      Text(`计数: ${this.count}`)
      Button('增加')
        .onClick(() => {
          this.count++
        })
    }
  }
}

8. 网络请求示例

import http from '@ohos.net.http'

@Entry
@Component
struct NetworkExample {
  @State data: string = ''

  fetchData() {
    let httpRequest = http.createHttp()
    httpRequest.request(
      'https://api.example.com/data', 
      {
        method: http.RequestMethod.GET,
        header: {
          'Content-Type': 'application/json'
        }
      },
      (err, data) => {
        if (!err) {
          this.data = JSON.stringify(data)
        }
      }
    )
  }

  build() {
    Column() {
      Button('获取数据')
        .onClick(() => this.fetchData())
      Text(this.data)
    }
  }
}