HarmonyOs学习 环境配置后 实验1：创建项目Hello World

HarmonyOS开发入门：环境配置与Hello World实验

实验目标

掌握HarmonyOS开发环境配置，创建首个HarmonyOS应用并实现"Hello World"界面展示

实验准备

1. 已安装DevEco Studio开发环境
2. 已配置HarmonyOS开发依赖项
3. 熟悉基本TypeScript/ArkTS语法（推荐）

实验步骤

一、创建新项目

1. 启动IDE

   打开DevEco Studio，进入欢迎页

2. 选择项目模板
   File > New > New Project

   → 选择Application

   → 选择Empty Ability模板

   → 点击Next

3. 工程配置

   配置项	说明
   Project name	自定义项目名称（如：HelloWorldDemo）
   Bundle name	应用包名（格式：com.company.project，发布时需保持一致）
   Save location	选择合适的工程存储路径
   Compile SDK	选择API版本（推荐API 9）
   Model	选择设备模型（Stage模型适合基础应用开发）

4. 完成创建

   点击Finish，IDE将自动生成项目框架

二、项目结构解析

创建完成后，项目目录结构如下：

HelloWorldDemo/
├── entry/
│   ├── src/
│   │   └── main/
│   │       ├── pages/         # 页面组件
│   │       │   └── Index.ets  # 主页面源码
│   │       ├── resources/     # 资源文件
│   │       └── config.json    # 页面路由配置
├── build/                     # 编译输出目录
└── ...                        # 其他配置文件

三、Hello World实现

1. 定位主页面

   打开entry/src/main/pages/Index.ets

2. 代码分析

@Entry          // 标识页面入口组件
@Component      // 声明组件
struct Index {
  @State message: string = 'Hello World' // 响应式状态变量

  build() {     // 组件构建方法
    Row() {     // 行布局容器
      Column() { // 列布局容器
        Text(this.message) // 文本组件
          .fontSize(50)    // 设置字体大小
          .fontWeight(FontWeight.Bold) // 设置字体粗细
      }
      .width('100%') // 设置列宽占满父容器
    }
    .height('100%') // 设置行高占满父容器
  }
}

3. 运行效果
   编译运行后将在设备中央显示加粗50px的"Hello World"文字

实验总结

1. 环境配置要点

   • 确保Compile SDK版本与设备匹配
   • 包名命名需遵循反向域名规范
   • Stage模型支持基础应用开发

2. 开发范式理解

   • 使用ArkTS声明式UI语法
   • 组件化开发思想（@Component）
   • 响应式状态管理（@State）

3. 扩展建议

   尝试修改以下参数观察变化：

   • 调整fontSize数值
   • 修改message内容
   • 添加新的UI组件（如Button）

提示 ：可通过Previewer实时预览界面效果，提升开发效率。