鸿蒙开发入门实战：从零开发第一个“Hello World”应用（超详细版）

阿里云教程3个月前发布

18 0 0

适合人群：零基础想入门鸿蒙开发的初学者
阅读收获：完成环境搭建、创建项目、编写页面、真机运行，并理解鸿蒙应用的核心概念

一、环境准备与工具安装

1.1 开发工具下载

鸿蒙应用开发使用官方 IDE —— DevEco Studio，它基于 IntelliJ IDEA 深度定制，集成了鸿蒙 SDK、模拟器、调试工具等全套开发环境。

官方下载地址（华为开发者联盟）：

👉 https://developer.harmonyos.com/cn/develop/deveco-studio

根据操作系统选择对应版本：
• Windows：DevEco Studio 3.x for Windows
• macOS：DevEco Studio 3.x for Mac

硬件建议：
• 内存：≥ 8GB（推荐 16GB，编译和运行模拟器更流畅）
• 磁盘空间：≥ 10GB 可用空间（SDK 和依赖较大）

1.2 安装步骤详解（以 Windows 为例）

双击下载的 deveco-studio-3.x.x.exe安装包。选择安装路径（避免使用中文路径，防止编译异常）。勾选“创建桌面快捷方式”，方便后续启动。安装完成后首次启动：
选择 Do not import settings阅读并接受用户许可协议安装向导会提示下载 Node.js 与 Ohpm（OpenHarmony Package Manager），建议全部勾选自动安装。

1.3 SDK 配置
首次启动 DevEco Studio 需配置 HarmonyOS SDK：

进入菜单 Configure → Settings → HarmonyOS SDK（macOS 为 DevEco Studio → Preferences → HarmonyOS SDK）。指定 SDK 存储路径（确保磁盘空间足够）。勾选必要组件：
Public SDK（基础库）JS SDK（若使用 JavaScript 开发）Toolchains（编译工具链）点击 Next开始下载（视网络情况耗时 2~4 小时）。

二、创建第一个鸿蒙项目

2.1 新建项目步骤

File → New → Create ProjectDevice Type：选择 Phone（手机设备）Template：选择 Empty Ability（空白模板）填写项目信息：
Project Name：HelloWorldProject Type：ApplicationBundle Name：com.example.helloworldSave Location：自定义路径（避免中文）Language：JS（JavaScript）Compatible SDK：API 9或以上点击 Finish创建项目。

2.2 项目结构解析


HelloWorld/
├── entry/                    # 主模块
│   ├── src/
│   │   ├── main/
│   │   │   ├── js/           # JS 源码目录
│   │   │   │   └── default/  # 默认页面目录
│   │   │   ├── resources/    # 图片、字符串等资源
│   │   │   └── config.json   # 应用配置文件
│   │   └── ohosTest/         # 单元测试代码
├── build-profile.json5       # 构建配置
└── hvigorfile.ts.js          # 构建脚本

官方项目结构说明文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/start-with-ets-stage

三、编写 Hello World 页面

3.1 修改首页布局

文件路径：entry/src/main/js/default/pages/index/index.hml

我们用数据绑定实现一个简单的问候页面：


<div class="container">
    <text class="title">{{ title }}</text>
    <input class="input" type="text" placeholder="请输入您的名字" onchange="changeName"/>
    <text class="greeting">Hello, {{ name }}! 欢迎来到鸿蒙世界！</text>
    <button class="button" value="点击我" onclick="handleClick"/>
</div>

3.2 添加页面样式

文件路径：entry/src/main/js/default/pages/index/index.css


.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 40px;
    color: #000000;
    margin-bottom: 30px;
}

.input {
    width: 80%;
    height: 60px;
    margin-bottom: 20px;
    padding: 0 20px;
    border: 1px solid #cccccc;
    border-radius: 10px;
}

.greeting {
    font-size: 30px;
    color: #ff0000;
    margin: 20px 0;
}

.button {
    width: 200px;
    height: 60px;
    background-color: #007dff;
    color: white;
    font-size: 20px;
    border-radius: 10px;
}

3.3 实现页面逻辑

文件路径：entry/src/main/js/default/pages/index/index.js


export default {
    data: {
        title: '鸿蒙开发入门',
        name: '开发者'
    },
    
    // 输入框内容变化时触发
    changeName(e) {
        this.name = e.value;
    },
    
    // 按钮点击事件
    handleClick() {
        this.$element('dialog').show(); // 示例：弹出对话框
    },
    
    onInit() {
        console.info('页面初始化完成');
    }
}

四、真机调试与运行

4.1 设备准备

开启开发者模式：
设置 → 关于手机 → 连续点击“版本号”7 次 → 输入锁屏密码确认。开启 USB 调试：
设置 → 系统和更新 → 开发人员选项 → 开启“USB 调试”。

4.2 运行应用

用 USB 线连接手机与电脑，选择“传输文件”模式。DevEco Studio 顶部工具栏点击 Run（▶️ 按钮）。在弹出的设备列表中选择已连接的手机。等待编译、安装并自动启动应用。

4.3 常见问题及解决

问题	原因	解决方法
设备未识别	缺少驱动	安装华为手机助手：https://consumer.huawei.com/cn/support/hisuite
构建失败	缓存或依赖问题	File → Sync Project with Gradle Files
页面空白	路由未配置或路径错误	检查 config.json中 pages 路由表

五、核心概念详解

5.1 鸿蒙应用架构

Ability：应用的功能单元，分为 Page Ability（带 UI）和 Service Ability（后台服务）。Page Ability：负责用户界面展示与交互。Service Ability：无界面，用于长时间运行任务（如下载、推送）。

5.2 配置文件 config.json要点

该文件定义应用包名、版本、权限、Ability 声明等。示例片段：


{
  "app": {
    "bundleName": "com.example.helloworld",
    "vendor": "example",
    "version": { "code": 1000000, "name": "1.0.0" }
  },
  "module": {
    "package": "com.example.helloworld",
    "name": ".MyApplication",
    "abilities": [
      {
        "name": "MainAbility",
        "srcEntrance": "./ets/entryability/EntryAbility.ts",
        "description": "$string:MainAbility_desc",
        "icon": "$media:icon",
        "label": "$string:MainAbility_label",
        "launchType": "standard"
      }
    ]
  }
}

配置详解见官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/application-configuration-file-stage

六、下一步学习路线

完成 Hello World 后，可按以下顺序深入：

UI 组件：Text、Button、Image、List 等基础控件用法页面路由：Navigator 与 router 实现页面跳转与参数传递数据存储：Preferences（轻量键值存储）、关系型数据库 RdbStore网络请求：@ohos.net.http 模块调用 RESTful API设备能力：调用相机、定位、传感器等硬件功能