前端到鸿蒙应用开发，七天秒通

鸿蒙（HarmonyOS NEXT）应用开发入门（一）：从环境搭建到基础组件与 ArkTS 语法

本系列面向零基础或转行学员，目标是“成体系”地把鸿蒙应用开发讲清楚。网上大多数教程只讲语法和组件，学完还是不会做项目。本系列按真实开发顺序推进： 第一篇（本篇）：环境搭建 → 常用插件 → 编辑器配置 → 项目文件结构 → ArkTS 基本语法 → 基础组件 第二篇：数据处理与状态管理、生命周期、网络请求、页面数据填充 第三篇：组件间通信、页面路由跳转、应用间通信建议边读边在 DevEco Studio 里跟着敲一遍，效果远好于只看。

一、先搞清楚：我们到底用什么开发

鸿蒙应用开发的三件套，先把名字记住，后面所有内容都围绕它们展开：

表格

名称	作用	类比
DevEco Studio	集成开发环境（IDE），写代码、编译、调试、预览都在这里	相当于安卓的 Android Studio
ArkTS	开发语言，基于 TypeScript 扩展，强类型	相当于 TypeScript + 鸿蒙规则
ArkUI	声明式 UI 框架，用组件“描述”界面长什么样	思路类似 Flutter / React

几个关键认知，初学者必须先建立：

DevEco Studio 是开箱即用的。从 5.x 版本开始，HarmonyOS SDK、Node.js、Hvigor（构建工具）、OHPM（包管理器）、模拟器平台全部合一打包，装完 IDE 就能写代码，不需要像早期那样逐个配置。
纯血鸿蒙（HarmonyOS NEXT）只支持 ArkTS/ArkUI 和 C/C++，不再兼容安卓 APK，也没有 Java/Kotlin。
应用模型用 Stage 模型。老的 FA 模型已经不主推（仅用于轻量穿戴设备），新建工程默认就是 Stage 模型，不用纠结。
界面是“声明式”写出来的：你用代码描述“这里有一列文字和一个按钮”，框架负责渲染，而不是像传统安卓那样先画 XML 再 findViewById。

二、DevEco Studio 下载与安装

2.1 电脑配置要求

表格

项目	Windows	macOS
操作系统	Windows 10 / 11（64 位）	macOS 11 及以上（X86 和 ARM 均可）
内存	建议 16GB 及以上	8GB 及以上，建议 16GB
硬盘	100GB 及以上可用空间	100GB 及以上可用空间
分辨率	1280×800 及以上	1280×800 及以上

经验之谈：内存低于 16GB 时，编译和模拟器会明显卡顿，学嵌入式/开发的电脑建议一步到位。

2.2 下载

打开华为开发者联盟下载中心：https://developer.huawei.com/consumer/cn/download/
登录华为账号（没有就注册一个，后面模拟器、真机调试、上架都要用）。
选择 DevEco Studio 对应系统的稳定版（Release 版，不要选 Beta 尝鲜版），下载。

下载的是一个 zip 压缩包，解压后得到 exe 安装程序。

2.3 安装步骤（以 Windows 为例）

双击 deveco-studio-x.x.x.xxx.exe，进入安装向导。
选择安装路径。建议不要装 C 盘，例如 D:\Huawei\DevEco Studio，路径中不要包含中文和空格。
安装选项界面建议全部勾选（创建桌面快捷方式、关联环境变量等），点击下一步。
开始菜单目录保持默认，点击安装。安装过程要解压约 10GB 数据，耐心等待。
安装完成后提示重启，重启后安装生效。

2.4 首次启动

双击桌面图标启动 DevEco Studio。
弹出 Import DevEco Studio Settings 时，选择 Do not import settings（不导入旧配置），点 OK。
用户协议点 Agree。
进入欢迎页后，建议先点右上角头像登录华为账号（模拟器下载、真机调试都需要）。

2.5 环境诊断（必做）

装完先别急着写代码，跑一次官方诊断：

欢迎页点击 Diagnose；
或打开工程后，菜单栏 Help > Diagnostic Tools > Diagnose Development Environment。

诊断项包括电脑配置、网络连通性、Node.js / Ohpm / SDK 是否就绪。全部绿色通过才算环境搭建完成；有红叉就按提示修复。

【配图建议：此处插入诊断全部通过的截图】

三、创建第一个项目

欢迎页点击 Create Project。
选择 Application → Empty Ability（空白模板），点 Next。
填写工程参数：

表格

参数	说明	建议
Project name	工程名	英文，如 `MyFirstApp`
Bundle name	应用包名，上架应用市场的唯一标识	倒域名写法，如 `com.example.myfirstapp`
Save location	工程保存路径	英文路径，不带空格
Compile SDK	编译用 SDK 版本	默认即可（SDK 已内嵌在 IDE 中）
Model	应用模型	保持 Stage
设备类型	Phone / Tablet / 2in1 等	学习阶段勾选 Phone 即可

点 Finish，等待首次工程同步（Indexing）完成。左下角进度条走完再操作。
打开 entry/src/main/ets/pages/Index.ets，点击编辑器右侧的 Previewer 标签，能看到 Hello World 界面预览，说明工程 OK。

【配图建议：此处插入 Previewer 预览 Hello World 的截图】

预览器（Previewer）是学习效率神器：改代码 → 保存 → 界面实时刷新，不用每次都跑模拟器。学习组件阶段 90% 的时间用 Previewer 就够了。

四、常用插件推荐

插件安装入口：File > Settings > Plugins，在 Marketplace 搜索安装，装完重启 IDE 生效。

表格

插件	作用	推荐度
CodeGenie	华为官方 AI 编程助手，懂鸿蒙技术栈，可生成代码、解释报错、侧边栏问答	★★★★★
Chinese (Simplified)	界面汉化语言包	英文吃力就装
Rainbow Brackets	括号彩虹配色，嵌套多了不眼花	★★★★
Key Promoter X	你用鼠标点的操作，它提示对应快捷键，逼你练快捷键	★★★★
Atom Material Icons	文件图标美化，目录一眼分清类型	★★★
.ignore	生成/管理 gitignore	用 Git 才需要

关于 CodeGenie 多说两句：它内置了鸿蒙官方文档知识，问“ArkUI 怎么实现上拉加载”“这个红色报错什么意思”之类的问题，比通用大模型答得准。入口在 IDE 右侧边栏，快捷键 Alt + U，需要登录华为账号使用。

五、编辑器常用配置（新手必调）

入口统一在：File > Settings（macOS 为 DevEco Studio > Preferences）。

5.1 中文字体与字号

Editor > Font：字体建议 JetBrains Mono 或 Consolas，Size 建议 16~18（讲课投屏建议 20+）。

勾选一项重要功能：Editor > General 里勾选 Change font size with Ctrl + Mouse Wheel，之后按住 Ctrl 滚鼠标滚轮就能缩放代码字号，讲课演示时非常实用。

5.2 自动导包与导包优化

Editor > General > Auto Import：

勾选 Optimize imports on the fly（自动清理无用 import）；
ArkTS/TS 的自动导包保持开启，写组件时不用手写 import。

5.3 保存时自动格式化

代码风格统一靠工具不靠自觉：

记住格式化快捷键：Ctrl + Alt + L（macOS 为 Option + Command + L）；
或者设置保存时自动格式化：Settings 中搜索 Actions on Save，勾选 Reformat code。

5.4 编码与换行

Editor > File Encodings：全部设为 UTF-8，避免中文乱码。

5.5 显示行号与方法分隔线

Editor > General > Appearance：勾选 Show line numbers 和 Show method separators。

5.6 常用快捷键（Windows / macOS 对照）

表格

功能	Windows	macOS
格式化代码	Ctrl + Alt + L	Option + Cmd + L
快速修复（报错处按）	Alt + Enter	Option + Enter
全局查找文件	双击 Shift	双击 Shift
按名字找类/文件	Ctrl + N	Cmd + O
查找文本	Ctrl + F	Cmd + F
全局替换	Ctrl + Shift + R	Cmd + Shift + R
复制当前行	Ctrl + D	Cmd + D
删除当前行	Ctrl + Y	Cmd + Delete
注释/取消注释	Ctrl + /	Cmd + /
查看方法参数提示	Ctrl + P	Cmd + P
AI 助手 CodeGenie	Alt + U	Option + U

快捷键不用死记，装上 Key Promoter X，用一周鼠标，自然就记住了。

六、项目文件结构详解（面试也爱问）

新建工程后左侧目录看着吓人，真正天天动的就两三个文件。先记住整体地图：

plain

MyFirstApp/                          # 工程根目录
├── AppScope/                        # 应用全局配置
│   ├── app.json5                    # 应用名、图标、版本号（全局唯一入口配置）
│   └── resources/                   # 全局资源
├── entry/                           # 主模块（一个工程可以有多个模块，entry 是默认入口模块）
│   ├── src/main/
│   │   ├── ets/
│   │   │   ├── entryability/
│   │   │   │   └── EntryAbility.ets # 应用入口，相当于安卓的 Application + MainActivity
│   │   │   └── pages/
│   │   │       └── Index.ets        # 首页页面，学习阶段 90% 代码写在这类文件里
│   │   ├── resources/               # 模块资源（颜色、字符串、图片）
│   │   │   ├── base/element/        # color.json、string.json、float.json
│   │   │   ├── base/media/          # 图片
│   │   │   └── base/profile/        # 页面路由配置 main_pages.json
│   │   └── module.json5             # 模块配置：Ability 声明、权限申请
│   ├── oh-package.json5             # 模块级依赖声明（类似 package.json）
│   └── build-profile.json5          # 模块级构建配置（签名等）
├── oh-package.json5                 # 工程级依赖声明
├── build-profile.json5              # 工程级构建配置（签名证书、编译 SDK 版本）
└── hvigorfile.ts                    # 构建脚本（一般用不到，别动）

6.1 新手必须记住的 5 个文件

Index.ets（pages 目录下）：页面文件。一个 .ets 文件通常对应一个页面或一个自定义组件，我们的代码主要写在这里。
EntryAbility.ets：应用启动入口，窗口在这里创建，onWindowStageCreate 里通过 loadContent 加载第一个页面。
module.json5：模块清单。声明 Ability、申请权限（网络、相机、定位等都在这里申请），作用类似安卓的 AndroidManifest.xml。
resources/base/element/：资源文件。颜色写 color.json、文案写 string.json、尺寸写 float.json，代码里用 $r('app.color.xxx') 引用。
resources/base/profile/main_pages.json：页面路由表。新建一个页面后，必须在这里注册路径，否则跳转不到。

6.2 资源引用的两种写法

TypeScript

// 方式一：引用资源文件（推荐，便于多语言和换肤）
Text($r('app.string.app_name'))
  .fontColor($r('app.color.main_color'))

// 方式二：直接写字面量（学习 Demo 可以，正式项目不建议）
Text('你好，鸿蒙')
  .fontColor('#FF6600')

为什么正式项目不推荐写字面量？因为后期改主题色、做多语言时，字面量要全文搜索替换，资源文件只改一处。

七、ArkTS 基本语法（只讲写界面用得上的）

ArkTS 是 TypeScript 的超集，但加了约束（比如禁用 any）。对初学者来说，先掌握下面这几块就能写页面了。

7.1 一个页面的最小骨架

TypeScript

@Entry          // 表示这是页面入口组件（一个页面有且只有一个 @Entry）
@Component      // 表示这是一个自定义组件
struct Index {  // struct 定义组件，Index 是组件名
  build() {     // build() 里描述 UI 长什么样，必须存在
    Column() {
      Text('Hello HarmonyOS')
        .fontSize(24)
    }
    .width('100%')
    .height('100%')
  }
}

四个装饰器/关键字是骨架灵魂：

表格

写法	含义
`@Entry`	页面级组件的标记，路由跳转的目标页面必须有它
`@Component`	标记这是一个 ArkUI 组件
`struct`	定义组件的关键字（不是 class，注意区别）
`build()`	UI 描述函数，所有界面元素都写在里面

7.2 链式属性调用（ArkUI 的标志性写法）

ArkUI 设置样式不用 CSS，而是组件后面接一串方法：

TypeScript

Text('链式调用示例')
  .fontSize(20)              // 字号
  .fontColor('#333333')      // 字体颜色
  .fontWeight(FontWeight.Bold) // 加粗
  .margin({ top: 10 })       // 外边距
  .padding(10)               // 内边距
  .backgroundColor('#F5F5F5') // 背景色
  .borderRadius(8)           // 圆角

每个方法返回组件自身，所以可以无限链下去。读法：从上往下读，就是对组件属性的一条条修饰。

7.3 变量与基本类型

TypeScript

// ArkTS 要求显式类型，不能用 any
let age: number = 18                  // 数字
let name: string = '张三'             // 字符串
let isVip: boolean = true             // 布尔
let tags: string[] = ['鸿蒙', 'ArkTS'] // 数组

// 对象建议用 interface 描述结构
interface User {
  name: string
  age: number
}

let user: User = { name: '李四', age: 20 }

7.4 @State：让数据驱动界面（最重要的一节）

普通变量改了，界面不会刷新。想让界面跟着数据变，必须加 @State：

TypeScript

@Entry
@Component
struct Index {
  @State count: number = 0   // 状态变量：值一变，用到它的组件自动刷新

  build() {
    Column({ space: 16 }) {
      Text(`当前计数：${this.count}`)
        .fontSize(24)

      Button('点我 +1')
        .onClick(() => {
          this.count++       // 修改状态变量 → 上面的 Text 自动更新
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

这就是鸿蒙开发的核心思想：数据驱动 UI。 不要去“操作控件”，而是改数据，框架帮你刷新界面。这个思想和安卓 findViewById 时代完全不同，必须转过来。

7.5 条件渲染：if / else

TypeScript

@State isLogin: boolean = false

build() {
  Column() {
    if (this.isLogin) {
      Text('欢迎回来')
    } else {
      Button('去登录').onClick(() => {
        this.isLogin = true
      })
    }
  }
}

7.6 循环渲染：ForEach

列表类界面全靠它。语法：ForEach(数组, 单项 => 生成的组件, 单项 => 唯一key)：

TypeScript

@State fruitList: string[] = ['苹果', '香蕉', '橘子']

build() {
  Column({ space: 8 }) {
    ForEach(this.fruitList, (item: string) => {
      Text(item)
        .fontSize(18)
        .padding(10)
        .backgroundColor('#FFF3E0')
        .borderRadius(6)
    }, (item: string) => item)   // 第三个参数是 key，保证刷新效率
  }
}

7.7 事件处理：onClick 开头的一家人

TypeScript

Button('按钮')
  .onClick(() => {
    // 点击事件，最常用
  })

TextInput({ placeholder: '请输入' })
  .onChange((value: string) => {
    // 输入内容变化时触发
  })

事件统一用 .onXxx((参数) => { 处理逻辑 }) 的箭头函数写法。

八、常用基础组件详解

8.1 先统一三个尺寸单位

表格

单位	含义	用法
vp	虚拟像素，随屏幕密度自动缩放	宽高、间距、圆角都用它，默认单位
fp	字体像素，会跟随系统字体大小设置变化	字号建议用 fp
%	父容器百分比	`width('100%')`

写数字不带单位时，默认就是 vp。不同尺寸手机不用自己适配，vp 帮你搞定。

8.2 Text 文本

TypeScript

Text('这是一段文本')
  .fontSize(18)                    // 字号
  .fontColor('#333333')            // 颜色
  .fontWeight(FontWeight.Bold)     // 字重：Bold 加粗
  .maxLines(2)                     // 最多 2 行
  .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出显示省略号
  .textAlign(TextAlign.Center)     // 对齐方式
  .lineHeight(24)                  // 行高

8.3 Button 按钮

TypeScript

Button('立即登录', { type: ButtonType.Capsule })  // Capsule 胶囊形，Normal 直角，Circle 圆形
  .width(200)
  .height(44)
  .fontSize(16)
  .backgroundColor('#007DFF')
  .onClick(() => {
    console.info('按钮被点击了')
  })

8.4 TextInput 输入框

TypeScript

@State inputValue: string = ''

TextInput({ placeholder: '请输入手机号', text: this.inputValue })
  .width('90%')
  .height(48)
  .type(InputType.PhoneNumber)     // 键盘类型：手机号、密码、邮箱等
  .maxLength(11)
  .backgroundColor('#F5F5F5')
  .borderRadius(8)
  .onChange((value: string) => {
    this.inputValue = value        // 输入内容同步到状态变量
  })

8.5 Image 图片

TypeScript

// 本地资源图片：放在 resources/base/media/ 下
Image($r('app.media.logo'))
  .width(80)
  .height(80)
  .borderRadius(40)               // 宽高一半 = 圆形头像

// 网络图片（需要在 module.json5 申请 ohos.permission.INTERNET 权限）
Image('https://example.com/pic.png')
  .width(120)
  .height(120)
  .objectFit(ImageFit.Cover)      // 裁剪填充，类似安卓的 centerCrop

8.6 布局三剑客：Column / Row / Stack

页面排版 95% 靠这三个容器组合完成。

Column：纵向排列（主轴竖直）

TypeScript

Column({ space: 12 }) {           // space：子组件间距
  Text('第一行')
  Text('第二行')
  Text('第三行')
}
.width('100%')
.alignItems(HorizontalAlign.Start)     // 交叉轴（水平方向）对齐：居左
.justifyContent(FlexAlign.Center)      // 主轴（竖直方向）对齐：居中

Row：横向排列（主轴水平）

TypeScript

Row({ space: 8 }) {
  Image($r('app.media.avatar')).width(40).height(40)
  Text('用户名')
  Blank()                          // Blank 会占满剩余空间，把右侧组件顶到边
  Text('详情 >')
}
.width('100%')
.padding(12)
.alignItems(VerticalAlign.Center)  // 交叉轴（竖直方向）对齐：居中

Stack：层叠排列（后写的盖在先写的上面）

TypeScript

Stack() {
  Image($r('app.media.banner'))
    .width('100%')
    .height(180)
  Text('轮播图标题')
    .fontColor(Color.White)
    .fontSize(16)
}
.alignContent(Alignment.BottomStart)   // 子组件整体对齐到左下角

记忆口诀：Column 记成“竖着排”，Row 记成“横着排”，Stack 记成“叠罗汉”。 对齐方向别记混：justifyContent 管主轴，alignItems 管交叉轴。

8.7 Scroll 与 List：内容超出屏幕怎么办

Scroll：整块内容可滚动

TypeScript

Scroll() {
  Column({ space: 12 }) {
    // 里面放很多内容
  }
}
.width('100%')
.scrollBar(BarState.Auto)         // 滚动条自动显示

List：长列表专用（带复用机制，性能高）

TypeScript

@State dataList: string[] = ['条目1', '条目2', '条目3', '条目4', '条目5']

List({ space: 10 }) {
  ForEach(this.dataList, (item: string) => {
    ListItem() {                   // List 的直接子组件必须是 ListItem
      Text(item)
        .width('100%')
        .padding(16)
        .backgroundColor('#FFFFFF')
        .borderRadius(8)
    }
  }, (item: string) => item)
}
.width('100%')
.layoutWeight(1)                  // 占满剩余高度

新手常踩的坑：忘记包 ListItem()，编译直接报错。记住：List 的孩子只能是 ListItem。

8.8 通用属性速查表（所有组件都能用）

表格

属性	作用	示例
width / height	宽高	`.width('100%')` `.height(48)`
margin	外边距	`.margin({ top: 10, left: 16 })`
padding	内边距	`.padding(12)`
backgroundColor	背景色	`.backgroundColor('#F5F5F5')`
borderRadius	圆角	`.borderRadius(8)`
border	边框	`.border({ width: 1, color: '#DDDDDD' })`
opacity	透明度	`.opacity(0.6)`
visibility	显隐（占位）	`.visibility(Visibility.Hidden)`
onClick	点击事件	`.onClick(() => { })`

九、本篇小结与下篇预告

到这里，你已经具备的能力：

独立装好 DevEco Studio 并通过环境诊断；
创建 Stage 模型工程，用 Previewer 实时预览；
认识工程结构，知道代码写在哪、配置改在哪；
用 ArkTS 写出带状态、带事件、带列表的页面。

posted @ 2026-07-26 08:41 鬼门元歌阅读(12) 评论(0) 收藏举报

刷新页面返回顶部

前端到鸿蒙应用开发，七天秒通

鸿蒙（HarmonyOS NEXT）应用开发入门（一）：从环境搭建到基础组件与 ArkTS 语法

一、先搞清楚：我们到底用什么开发

二、DevEco Studio 下载与安装

2.1 电脑配置要求

2.2 下载

2.3 安装步骤（以 Windows 为例）

2.4 首次启动

2.5 环境诊断（必做）

三、创建第一个项目

四、常用插件推荐

五、编辑器常用配置（新手必调）

5.1 中文字体与字号

5.2 自动导包与导包优化

5.3 保存时自动格式化

5.4 编码与换行

5.5 显示行号与方法分隔线

5.6 常用快捷键（Windows / macOS 对照）

六、项目文件结构详解（面试也爱问）

6.1 新手必须记住的 5 个文件

6.2 资源引用的两种写法

七、ArkTS 基本语法（只讲写界面用得上的）

7.1 一个页面的最小骨架

7.2 链式属性调用（ArkUI 的标志性写法）

7.3 变量与基本类型

7.4 @State：让数据驱动界面（最重要的一节）

7.5 条件渲染：if / else

7.6 循环渲染：ForEach

7.7 事件处理：onClick 开头的一家人

八、常用基础组件详解

8.1 先统一三个尺寸单位

8.2 Text 文本

8.3 Button 按钮

8.4 TextInput 输入框

8.5 Image 图片

8.6 布局三剑客：Column / Row / Stack

8.7 Scroll 与 List：内容超出屏幕怎么办

8.8 通用属性速查表（所有组件都能用）

九、本篇小结与下篇预告

公告