鸿蒙 5.0+ 开发入门保姆级指南！环境搭建 + 工程结构 + Hello World 实战（ArkTS 纯享版）
鸿蒙开发入门指南：环境搭建与HelloWorld实战 本文为鸿蒙开发新手提供详细的环境配置和入门教程。首先介绍DevEco Studio 5.0+的安装步骤，包括系统要求、SDK配置和模拟器/真机调试设置。重点解析ArkTS工程的核心目录结构，详细说明entry主模块、资源配置文件和config.json的关键配置。通过HelloWorld示例演示如何创建第一个鸿蒙应用，包含完整的代码示例和配套资
各位鸿蒙学习搭子们集合啦～ 想入门鸿蒙开发、冲开发者认证的宝子，第一步必须搞定「环境搭建 + 工程结构」！这俩是认证基础考点，也是后续开发的必经之路，新手千万别绕路～ 今天就带大家从零踩坑，手把手教你搭环境、懂结构、跑通第一个 ArkTS 鸿蒙应用，全程实操无废话，跟着做就能成！
一、开发环境搭建（避坑版！新手也能一次成）
1. 先备齐工具和系统配置
首先冲 DevEco Studio 5.0+ 版本，官网直接下载：https://developer.harmonyos.com/cn/develop/deveco-studio/，记得选「适配 HarmonyOS 5.0+」的安装包～
系统要求提前说清，避免白忙活：
- Windows：Win10 及以上，内存 ≥8GB（不够的宝子先清内存，别让内存拖后腿）
- macOS：macOS 11 及以上，内存 ≥8GB
2. 配置 HarmonyOS SDK（下载卡壳必看）
打开 DevEco Studio 后，按这个路径找设置：Settings → Appearance & Behavior → System Settings → HarmonyOS SDK
勾选「API 10 及以上版本」，点击 Download 等待下载即可～
�� 避坑点：下载卡进度的话，在 SDK 设置里找到「SDK Update Site」切换镜像源，亲测换源后速度直接翻倍！
3. 模拟器 / 真机调试（二选一，按需选更高效）
（1）模拟器创建（无真机首选）
路径：Tools → Device Manager → New Device
可选设备类型：手机（比如 Pixel 5）、平板（iPad Pro）、车机（Generic Car），记得选「HarmonyOS 5.0+」镜像，点击 Finish 就能启动～
�� 避坑点：启动报错？先检查电脑「虚拟化是否开启」，没开的话去 BIOS 里设置（网上搜自己电脑型号的开启方法，超简单）！
（2）真机调试（调试更流畅）
- 手机打开「开发者选项」：设置 → 关于手机 → 连续点击「版本号」5 次；
- 开启「USB 调试」：开发者选项里找到 USB 调试，勾选打开；
- 用 USB 线连电脑，DevEco Studio 会自动识别设备，点击运行按钮直接调试～
�� 避坑点：连不上的话，重新装一遍手机 USB 驱动，大概率能解决！
二、ArkTS 工程结构大解析（一看就懂，不用死记）
刚创建的工程看着复杂，其实核心目录就几个，拆开来给大家说，后续找文件不迷路：
entry/ // 主模块（核心开发目录）
├─ ets/ // ArkTS代码
│ ├─ pages/ // 页面组件（自动路由注册）
│ └─ app.ets // 应用入口（Ability声明）
├─ resources/ // 资源文件
│ ├─ media/ // 图片/音频（如：icon.png）
│ ├─ element/ // 基础资源（如：colors.json）
│ └─ layout/ // 布局文件（如：main_layout.xml）
├─ module.json5 // 模块配置（HarmonyOS 5.0+）
└─ build.gradle // 构建配置（默认无需修改）
重点：module.json5 关键配置（ArkTS 适配版）
这个文件不能瞎改，核心部分标出来了，按模板填就行（以下为关键配置片段）：
{
"app": {
"bundleName": "com.example.harmonyapp", // 应用唯一包名（自定义）
"versionCode": 10000, // 版本号（纯数字）
"versionName": "1.0.0" // 版本名称（给用户看）
},
"module": {
"name": "entry",
"type": "entry",
"deviceTypes": ["phone", "tablet"], // 支持的设备类型
"reqPermissions": [], // 权限申请（后续开发再加）
"abilities": [ // 启动入口声明
{
"name": ".MainAbility",
"srcEntry": "./ets/app.ets", // 入口文件路径
"icon": "$media:icon", // 应用图标
"label": "$string:mainability_label", // 应用名称
"type": "page",
"launchType": "standard"
}
]
}
}resources 目录怎么用？（ArkTS 专属引用方式）
element 目录下建议建 3 个文件统一管理资源，ArkTS 中引用超简洁：
- float.json：存尺寸（按钮大小、边距）
- color.json：存颜色（主题色、文字色）
- string.json：存文字（欢迎语、按钮文字）
引用方法直接抄：
- 尺寸：$r ("app.float.button_size")
- 颜色：$r ("app.color.primary_color")
- 字符串：$r ("app.string.welcome_msg")
三、第一个 Hello World 应用（ArkTS 完整代码，直接抄！）
环境和结构都搞懂了，直接上实战！打开 entry/src/main/ets/pages/Index.ets，替换成下面的代码（纯 ArkTS 语法，适配 5.0+ 特性）：
// entry/src/main/ets/pages/Index.ets
import router from '@ohos.router'; // 引入路由模块（5.0+ 内置）
@Entry // 标记为页面入口组件（ArkTS 核心装饰器）
@Component // 声明为可复用组件
struct HelloHarmony {
// 组件内部响应式状态（数据变 UI 自动更）
@State isClicked: boolean = false
build() {
// 垂直布局（Column=垂直排列，Row=水平排列）
Column({ space: 20 }) { // 子组件统一间距
// 主标题（ArkTS 5.0+ 链式调用，属性更简洁）
Text("Hello HarmonyOS 5.0+!")
.fontSize($r("app.float.title_font_size")) // 引用尺寸资源
.fontWeight(FontWeight.Bold) // 加粗
.fontColor(this.isClicked ? $r("app.color.clicked_color") : $r("app.color.primary_color")) // 状态联动
.margin({ top: 200 }) // 上边距
.onClick(() => {
this.isClicked = !this.isClicked // 点击切换状态
})
// 欢迎语（引用字符串资源）
Text($r("app.string.welcome_msg"))
.fontSize(18)
.textAlign(TextAlign.Center) // 文字居中
// 5.0+ 新增胶囊按钮（内置样式，无需自定义）
Button("跳转测试", { type: ButtonType.Capsule })
.width('60%')
.height(45)
.backgroundColor($r("app.color.primary_color"))
.fontColor('#ffffff')
.onClick(() => {
// 路由跳转（ArkTS 5.0+ 简化 API）
router.pushUrl({ url: 'pages/TestPage' })
})
}
.width('100%') // 占满屏幕宽度
.height('100%') // 占满屏幕高度
.backgroundColor($r("app.color.bg_color")) // 引用背景色
.justifyContent(FlexAlign.Start) // 主轴对齐
}
}配套资源配置（别漏了！）
- 尺寸配置（float.json）
{
"float": [
{
"name": "title_font_size",
"value": "30vp" // vp 单位自适应屏幕，ArkTS 推荐
},
{
"name": "button_size",
"value": "45vp"
}
]
}2.颜色配置（string.json）
{
"color": [
{
"name": "primary_color",
"value": "#FF007DFF" // 鸿蒙蓝
},
{
"name": "clicked_color",
"value": "#FF7A00" // 点击后变色
},
{
"name": "bg_color",
"value": "#F5F5F5" // 浅灰背景
}
]
}3.文字配置（string.json）
{
"string": [
{
"name": "welcome_msg",
"value": "鸿蒙开发入门，从 Hello World 开始～"
},
{
"name": "mainability_label",
"value": "我的第一个 ArkTS 应用"
}
]
}4.应用入口文件（app.ets）
// 应用入口，声明 Ability
@Entry
@Component
struct App {
build() {
// 路由容器，管理页面跳转
router.Router()
}
}
// 注册主 Ability
export default class MainAbility extends Ability {
onCreate(want, launchParam) {
super.onCreate(want, launchParam);
}
onWindowStageCreate(windowStage) {
super.onWindowStageCreate(windowStage);
// 加载入口组件
windowStage.loadContent('pages/Index', (err, data) => {
if (err.code) {
console.error('加载页面失败：', err.message);
return;
}
});
}
}四、运行流程 + ArkTS 调试小技巧
1. 运行流程
app.ets（声明 Ability）→ 加载 pages/Index.ets（入口组件）→ 渲染 Column/Text/Button 等组件 → 响应 @State 状态变化，按这个逻辑找问题准没错～
2. 调试小技巧
- 打印日志：用 console.log("状态变化：", this.isClicked)，在 View → Tool Windows → Logcat 查看；
- 断点调试：在 this.isClicked = !this.isClicked 行左侧点一下加断点，点击 Debug 按钮逐步看状态变化；
- 实时预览：DevEco Studio 右侧 Preview 窗口实时刷新 UI，修改代码不用反复运行；
- 状态调试：ArkTS 响应式特性，修改 @State 变量无需手动刷新 UI，调试更高效～
五、认证考点 + ArkTS 学习建议（冲证必看！）
1. 认证相关（送分题别丢！）
开发环境搭建、ArkTS 工程结构、@Entry/@Component 装饰器、@State 响应式状态、资源引用方式，这几块占「HarmonyOS 应用开发者认证」基础部分 15% 分值，亲手实操一遍就能稳拿！
2. 学习小建议（少走弯路！）
- 别光看不动手！环境搭建、Hello World 一定要自己跑一遍，ArkTS 的响应式特性和链式调用多写几遍就熟了；
- 遇到问题别慌：SDK 下载失败、模拟器启动不了等坑，按前文避坑点排查，也可去鸿蒙社区搜 ArkTS 解决方案；
- 系统学习：加入班级，https://developer.huawei.com/consumer/cn/training/classDetail/6b5617ffd9264d6daa2f3d9250204f1e?type=1%3Fha_source%3Dhmosclass&ha_sourceId=89000248，冲认证更有动力。
大家搭环境、写代码时遇到任何问题，欢迎在评论区留言，我会一一回复！祝大家学习顺利 ，早日拿下认证～
本文为鸿蒙生态赋能系列第一篇，后续会持续更新一系列的实战内容，关注不迷路~
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
27
0- 0
已为社区贡献8条内容
所有评论(0)