## 【鸿蒙基础入门】HarmonyOS开发环境IDE和AI编程助手安装配置和默认项目讲解
## 一、华为开发者账号注册
想用华为开发者平台做开发、用它的工具和各种技术服务，直接用就行。

不过得先注册个华为开发者账号，并且完成实名认证，不然很多功能用不了。
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-11572713/c40999aedb1f10a494cc80621897df17.png)

```typescript
注册链接：
https://id1.cloud.huawei.com/CAS/portal/userRegister/regbyemail.html

```

## 二、IDE（DevEco Studio）和AI辅助编程助手下载和安装

安装最新版DevEco Studio（DevEco Studio 6.0.2 Release）和AI辅助编程助手（DevEco CodeGenie 6.0.2 Release）。

mac 系统在终端输入"uname -m"判断系统架构选择对应的开发组件套
如果输出结果是 x86_64，则表示你的系统是x86-64架构 
如果输出结果是 arm64，则表示你的系统是arm64架构
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-11572713/1dd4b47ee9bddce8a063bee4560e771e.png)
IDE滑到下面是AI辅助编程助手。

```typescript
下载链接：
https://developer.huawei.com/consumer/cn/download/

```
下载完成后，会得到zip 压缩包。进行解压，得到exe安装包。双击进行傻瓜式安装。【注意，若有旧版本，已经不再使用，可直接根据提示，进行卸载。一般而言，卸载选项全部勾选进行清理即可。然后选择自定义的位置进行安装 】
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-11572713/2439e780016a232f7c35eba5daf0ff98.png)
现在的IDE已经将HDC SDK，Node，Git等环境都进行了统一管理，不再需要开发人员单独去配置。非常友善。
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-11572713/9a4adf27c4b27997a9e2d189abc5e02b.png)
安装过程中，建议在该步骤都勾选，方便日常使用。安装完成记得重新启动。

AI编程助手，目前最新版IDE是自带该插件功能。若没有，就手动下载插件安装到IDE中。
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-11572713/2db983637ac90b2dad4252b54bf033cf.png)

## 三、开发环境配置（非必选）：
以window为例，在系统搜索框进行 环境变量 搜索，选择系统环境变量配置。在系统path中新建路径即可，需要配置SDK的环境变量，用于便捷的使用hdc命令。
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-11572713/20da927ccf4f38707ff0e40870f398d8.png)

```typescript

...为你的自定义IDE安装位置
...\DevEco Studio\sdk\default\openharmony\toolchains

例如：
D:\HarmonyOS\IDE\devecostudio-windows-5.0.3.806\DevEco Studio\sdk\default\openharmony\toolchains

...为你的自定义IDE安装位置
...\DevEco Studio\tools\node

例如：
D:\HarmonyOS\IDE\devecostudio-windows-5.0.3.806\DevEco Studio\tools\node


```

## 四、模拟器的安装：
我使用的是IDE，new ui模式，界面会和默认的IDE不太一样。但是入口名字是一致。首先找到 Devices模拟器入口，点进入后选择目标API版本，新建模拟器即可。
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-11572713/ab993f23d820b4d2e3c0204947833dc8.png)

## 五、helloworld项目编译和运行：

**ArkUI框架：**
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-11572713/8eb20ef14b957c9c6e7569f9b4e2a8cd.png)

在移动操作系统的发展历程中，UI 开发模式经历了从命令式到声明式的重大变革。

根据华为官方及华为开发者联盟 2026 年第一季度公开数据显示，HarmonyOS 设备激活量已突破8 亿台；其中采用 ArkTS 声明式 UI 框架开发的原生鸿蒙应用占比已超85%，较 2024 年的 68% 持续大幅提升，相关数据均来自华为 2025 年度报告及 2026 春季新品发布会公开披露信息，真实可查。

**这标志着以 ArkTS 为代表的声明式开发范式，正在成为智能终端应用开发的主流选择。**

![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-11572713/d3f48fdab98903faf03c8e6ad55f5941.png)
创建新项目Create Project，勾选Empty Ability。
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-11572713/7144e21146f88821d577b3159922d579.png)


本文将以一个典型的 ArkTS 组件代码为例（代码示例来自IDE示例）。

该代码实现了一个基础的交互界面，包含状态管理、布局设计、事件处理等核心要素，是理解 ArkTS 组件开发的绝佳切入点。
如上图所示，该项目整体结构为HarmonyOS示例空Ability项目结构。一个常规的鸿蒙应用项目，重点需要关心编码的部分，分为三个：

1. AppScope 设置应用的包名，图标等相关信息
2. entry - src - main - ets 只要编码的所在地。entryAbility作为启动初始的入口，需要修改其中的启动页。pages为UI界面和逻辑开发。
3. resource 资源目录下的图标目录 media，页面配置路由main_pages

**（2）ArkTS组件声明与入口标记**

```dart
@Entry
@Component
struct Index {
  // 组件内部逻辑
}
```
**1. @Entry 装饰器：**
标记应用的Ability启动加载的入门，我们可以理解为界面。所以该装饰器修饰，都可以在Ability中加载，作为界面使用。

**2. 下面为EntryAbility代码示例，配置启动页：**
```dart
import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

const DOMAIN = 0x0000;

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);

  }


  onWindowStageCreate(windowStage: window.WindowStage): void {

    // 舞台添加启动页面
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
        return;
      }
      hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
    });
  }

}
```
**3. 下面为路由配置表resource - base - profile - main_pages.json文件：**

```dart
{
  "src": [
    "pages/Index"
  ]
}

```
当我们使用快捷键，创建空的pages时，IDE会自动在该路由表添加信息。若是手动，一定要记得添加页面的信息。
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-11572713/1185c39fa6b95990e905e53c717dfed5.png)

**4. @Component 装饰器：** 代表该类是组建类，可以给其他界面和组件调用，例如：

```dart
// 这里引入
import { Index } from './Index'

@Entry
@Component
struct APage {


  build() {
    RelativeContainer() {
     // 这里使用
      Index()
    }
    .height('100%')
    .width('100%')
  }
}
```
**5. export导出**
但是需要注意的是，我们需要对要引入的组件类，进行export导出标记，其他类才能去导出。所以我们的Index类需要作如下修改：

```dart
@Entry
@Component
export struct Index {
  // 组件内部逻辑
}
```

**（3）build函数是做什么的呢？**

**1. build函数构建概述**

组件构建函数，定义UI结构和布局，从示例代码可以看出，build中进行了鱼鳞排版布局的编写。这也是声明式UI布局编写的一大特写，不管是Flutter还是Android的compose，都是如此。

布局通过嵌入-展开的形式，可以一目了然整个UI布局的结构。并且通过链式调用，非常方便的设置UI属性。

```dart
@Entry // 应用入口组件标识
@Component // 声明为组件
export struct Index {

  // 组件构建函数，定义UI结构和布局
  build() {
    // 创建一个相对容器，占满整个父容器空间
    RelativeContainer() {
      // 显示message状态变量的文本组件
      Text(this.message)
        .id('HelloWorld') // 设置组件ID，用于样式或交互引用
        .fontSize($r('app.float.page_text_font_size')) // 从资源文件获取字体大小
        .fontWeight(FontWeight.Bold) // 设置字体加粗
        .alignRules({ // 设置文本在容器中的对齐规则
          center: { anchor: '__container__', align: VerticalAlign.Center }, // 垂直居中
          middle: { anchor: '__container__', align: HorizontalAlign.Center } // 水平居中
        })

    }
    .height('100%') // 容器高度占满父容器
    .width('100%')  // 容器宽度占满父容器
  }
}
```
**2.RelativeContainer 的定位策略**
HarmonyOS 提供 7 种基础布局容器，RelativeContainer（相对布局）适用于元素需相对于容器或其他元素定位的场景。

根据华为 UX 设计规范，在屏幕适配场景中，相对布局的设备兼容性比绝对布局高 40%，尤其适合折叠屏等多形态设备。

```dart
.alignRules({
  center: { anchor: '__container__', align: VerticalAlign.Center },
  middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
```
**锚点系统：**
__container__表示相对于父容器定位，支持自定义锚点（如子组件 ID）。华为布局引擎数据显示，合理使用锚点可减少 20% 的布局计算时间，避免递归定位导致的性能瓶颈。​

**对齐策略：**
VerticalAlign.Center（垂直居中）与 HorizontalAlign.Center（水平居中）组合使用，实现文本组件的屏幕中心定位。该策略在不同分辨率设备上的定位误差小于 1px（基于 1920x1080 到 4K 分辨率的测试数据）。

**（4）数据交互与事件交互**
**1. 响应式状态管理：@State 装饰器**

```dart
@State message: string = 'Hello World';
```
@State 修饰的变量会被框架自动追踪，当变量值发生变化时，系统会智能识别受影响的 UI 元素并触发局部重绘。与传统命令式 UI 更新（如 Android 的 findViewById+setText）相比，声明式更新减少了 60% 的 DOM 操作量（基于 Chromium 内核性能测试数据）。


**2. 绑定点击事件：**
通过在点击事件中，处理message变量的赋值。ArkUI框架自动处理数值变化后，使用了该数值的UI进行重新渲染刷新。
```dart
.onClick(() => {
  this.message = 'Welcome';
})
```

```dart
      // 显示message状态变量的文本组件
      Text(this.message)
```
**（5）资源文件的管理**

```dart
.fontSize($r('app.float.page_text_font_size'))
```
**$r () 函数：**
从资源文件（resources/base/element/string.json 等）动态获取字体大小，支持多语言、多设备适配。华为开发者平台数据显示，使用资源文件管理样式可使应用包体积减少 15%，避免硬编码导致的维护成本。​

**类型安全：**
DevEco Studio 提供资源引用智能提示，减少 70% 的资源路径拼写错误（基于千次开发测试数据）。

## 三、示例项目源码与详细注释

Index.page
```dart
@Entry // 应用入口组件标识
@Component // 声明为组件
export struct Index {
  // 响应式状态变量，用于存储显示的文本内容
  @State message: string = 'Hello World';

  // 组件构建函数，定义UI结构和布局
  build() {
    // 创建一个相对容器，占满整个父容器空间
    RelativeContainer() {
      // 显示message状态变量的文本组件
      Text(this.message)
        .id('HelloWorld') // 设置组件ID，用于样式或交互引用
        .fontSize($r('app.float.page_text_font_size')) // 从资源文件获取字体大小
        .fontWeight(FontWeight.Bold) // 设置字体加粗
        .alignRules({ // 设置文本在容器中的对齐规则
          center: { anchor: '__container__', align: VerticalAlign.Center }, // 垂直居中
          middle: { anchor: '__container__', align: HorizontalAlign.Center } // 水平居中
        })
        .onClick(() => { // 点击事件处理
          this.message = 'Welcome'; // 点击后更新状态变量，触发UI刷新
        })
    }
    .height('100%') // 容器高度占满父容器
    .width('100%')  // 容器宽度占满父容器
  }
}
```
APage.ets

```dart
import { Index } from './Index'

@Entry
@Component
struct APage {


  build() {
    RelativeContainer() {
      Index()
    }
    .height('100%')
    .width('100%')
  }
}
```


安装最新版DevEco Studio（DevEco Studio 6.0.2 Release）和AI辅助编程助手（DevEco CodeGenie 6.0.2 Release）。

【鸿蒙基础入门】HarmonyOS开发环境IDE和AI编程助手安装配置和默认项目讲解

鸿蒙架构师

客户端

开发工具

人工智能

鸿蒙开发入门指南：详解HarmonyOS开发环境搭建与HelloWorld项目创建。包含华为开发者账号注册、DevEco Studio安装、AI编程助手配置、ArkTS声明式UI开发教程，助你快速掌握鸿蒙应用开发核心技能。

性能测试

智能识别

Android

Flutter

容器

路由

JSON

2026采购季 | AI焕新·智启新局

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

【鸿蒙基础入门】HarmonyOS开发环境IDE和AI编程助手安装配置和默认项目讲解-腾讯云开发者社区-腾讯云

【鸿蒙基础入门】HarmonyOS开发环境IDE和AI编程助手安装配置和默认项目讲解

【鸿蒙基础入门】HarmonyOS开发环境IDE和AI编程助手安装配置和默认项目讲解

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐