HarmonyOS开发入门:环境配置与Hello World实验
实验目标
掌握HarmonyOS开发环境配置,创建首个HarmonyOS应用并实现"Hello World"界面展示
实验准备
- 已安装DevEco Studio开发环境
- 已配置HarmonyOS开发依赖项
- 熟悉基本TypeScript/ArkTS语法(推荐)
实验步骤
一、创建新项目
-
启动IDE
打开DevEco Studio,进入欢迎页 -
选择项目模板
File > New > New Project
→ 选择Application
→ 选择Empty Ability
模板
→ 点击Next
-
工程配置
配置项 说明 Project name 自定义项目名称(如:HelloWorldDemo) Bundle name 应用包名(格式:com.company.project,发布时需保持一致) Save location 选择合适的工程存储路径 Compile SDK 选择API版本(推荐API 9) Model 选择设备模型(Stage模型适合基础应用开发) -
完成创建
点击Finish
,IDE将自动生成项目框架
二、项目结构解析
创建完成后,项目目录结构如下:
HelloWorldDemo/
├── entry/
│ ├── src/
│ │ └── main/
│ │ ├── pages/ # 页面组件
│ │ │ └── Index.ets # 主页面源码
│ │ ├── resources/ # 资源文件
│ │ └── config.json # 页面路由配置
├── build/ # 编译输出目录
└── ... # 其他配置文件
三、Hello World实现
-
定位主页面
打开entry/src/main/pages/Index.ets
-
代码分析
@Entry // 标识页面入口组件
@Component // 声明组件
struct Index {@State message: string = 'Hello World' // 响应式状态变量build() { // 组件构建方法Row() { // 行布局容器Column() { // 列布局容器Text(this.message) // 文本组件.fontSize(50) // 设置字体大小.fontWeight(FontWeight.Bold) // 设置字体粗细}.width('100%') // 设置列宽占满父容器}.height('100%') // 设置行高占满父容器}
}
- 运行效果
编译运行后将在设备中央显示加粗50px的"Hello World"文字
实验总结
-
环境配置要点
- 确保Compile SDK版本与设备匹配
- 包名命名需遵循反向域名规范
- Stage模型支持基础应用开发
-
开发范式理解
- 使用ArkTS声明式UI语法
- 组件化开发思想(@Component)
- 响应式状态管理(@State)
-
扩展建议
尝试修改以下参数观察变化:- 调整fontSize数值
- 修改message内容
- 添加新的UI组件(如Button)
提示:可通过
Previewer
实时预览界面效果,提升开发效率。