鸿蒙应用开发

一、前言

现在鸿蒙生态越来越成熟，一次开发、多端部署的特性，让开发效率远高于传统移动端。

鸿蒙主流开发方式：DevEco Studio + ArkTS + ArkUI 声明式UI。语法接近前端 TS，上手门槛低，非常适合新手入门。

本文带大家从零搭建环境、新建项目、手写完整可运行 Demo、讲解核心知识点，适合作为鸿蒙入门第一篇实战博客。

二、开发环境准备

1. 工具介绍

- 开发工具：DevEco Studio（鸿蒙官方 IDE）

- 开发语言：ArkTS（鸿蒙主推静态类型语言）

- UI 框架：ArkUI 声明式 UI

2. 安装注意事项（新手必看）

1. 全部安装路径不能有中文、空格、特殊符号

2. 安装完成后，首次启动会自动下载 HarmonyOS SDK

3. 建议选择 API10 / API11 稳定版，兼容性最好

三、新建鸿蒙项目完整步骤

1. 打开 DevEco Studio → Create Project

2. 模板选择：Empty Ability（空白模板，最适合练手）

3. 项目配置：

- 项目名：英文命名

- 语言：ArkTS

- 设备类型：Phone

4. 等待gradle同步完成，初次联网加载依赖

核心项目结构（只记重点）

plaintext

entry/src/main/ets/

pages/index.ets # 首页页面，我们主要写代码的地方

MainAbility # 应用启动入口

所有页面开发、UI、逻辑基本都在  pages  文件夹中完成。

四、鸿蒙 ArkTS 核心基础

1. 三个必备注解

-  @Entry ：代表当前页面是入口页面，可以单独渲染

-  @Component ：自定义UI组件

-  @State ：状态变量，变量改变 → 页面自动刷新（核心）

2. 布局组件

-  Column ：垂直排列

-  Row ：水平排列

-  Text ：文本

-  Button ：按钮点击

五、实战：完整计数器 Demo（可直接运行）

替换  index.ets  全部代码：

typescript

// 页面入口

@Entry

@Component

struct Index {

// 定义状态变量，UI跟随数据变化

@State num: number = 0

build() {

// 垂直居中布局

Column() {

// 标题

Text("鸿蒙入门计数器Demo")

.fontSize(30)

.fontWeight(FontWeight.Bold)

.margin({ bottom: 30 })

// 显示数字

Text(`当前数值：${this.num}`)

.fontSize(26)

.margin({ bottom: 60 })

// 横向按钮组

Row({ space: 20 }) {

Button("减 1")

.onClick(() => {

this.num--

})

Button("重置")

.onClick(() => {

this.num = 0

})

Button("加 1")

.onClick(() => {

this.num++

})

}

}

.width("100%")

.height("100%")

.justifyContent(FlexAlign.Center)

}

}

六、代码详细讲解

1. 状态变量

ts

@State num: number = 0

只要  num  值发生变化，页面自动重新渲染，无需手动刷新页面，这就是声明式UI最大优势。

2. Column 垂直布局

页面所有内容垂直居中摆放，铺满全屏。

3. Row 水平布局

三个按钮横向排列， space:20  代表按钮之间间距。

4. 点击事件

 onClick()  内修改变量，实现：

- 点击加1

- 点击减1

- 点击归零

七、运行与预览

方式1：实时预览（推荐开发使用）

IDE 右侧自带 Previewer 预览窗口

保存代码即可实时看到界面效果，无需真机、不用编译。

方式2：模拟器 / 真机运行

1. 开启模拟器或连接鸿蒙真机

2. 点击右上角运行按钮

3. 自动安装应用并打开，可手动点击按钮交互

八、新手常见报错与解决

1. 页面空白、预览失效

代码存在语法错误，检查是否为中文标点、少括号、少分号。

2. 项目同步失败

网络问题、路径中文、SDK版本不匹配。

3. 数据变了页面不变

没有加  @State  修饰变量。

九、鸿蒙后续学习路线

学会基础Demo后，可以继续深入：

1. 页面跳转与路由

2. 自定义组件封装

3. 图片、列表、表单开发

4. 本地数据存储

5. 设备权限、相机、网络请求

6. 多端适配、项目打包发布

十、总结

鸿蒙 ArkTS 声明式开发非常简洁，数据驱动UI，相比传统安卓开发代码更少、逻辑更清晰。

新手入门不用啃复杂文档，先跑通 Demo、理解状态更新和布局逻辑，就能快速上手鸿蒙应用开发。