当前位置：首页 > news >正文

鸿蒙开发入门：从环境搭建到第一个ArkTS应用，30分钟上手

news 2026/3/26 22:18:13

鸿蒙开发入门：从环境搭建到第一个ArkTS应用，30分钟上手

对新手来说，鸿蒙开发的“入门门槛”往往卡在“环境装不上”“语法搞不懂”——但只要找对方法，30分钟就能从0跑通第一个ArkTS应用。本文聚焦DevEco Studio安装、API 9配置、ArkTS基础语法，搭配进阶版Hello World案例，帮你快速上手鸿蒙开发。

一、第一步：10分钟搞定DevEco Studio环境

鸿蒙开发的核心工具是DevEco Studio（类似Android Studio），环境搭建只需3步：

1. 下载安装包

从华为开发者联盟官网下载DevEco Studio（选择对应系统版本，建议选4.0及以上版本，适配API 9）。

2. 安装与配置SDK

安装时默认勾选“HarmonyOS SDK”，安装完成后启动软件；
首次启动会自动下载API 9的SDK（若未自动下载，可在Settings > Appearance & Behavior > System Settings > HarmonyOS SDK中手动勾选“API 9”并下载）。

3. 验证环境

创建新项目时，若能选择“Phone”设备、“API 9”版本，则环境搭建成功。

二、ArkTS基础语法：5分钟掌握核心要点

ArkTS是鸿蒙开发的主力语言，基于TypeScript扩展，核心语法和前端很像，新手只需记住3个关键点：

1. 组件化开发

ArkTS用**@Component定义组件，用build()**方法写UI结构：

// 定义一个简单组件@Componentstruct HelloComponent{build(){// 文本组件Text('Hello HarmonyOS').fontSize(30)// 设置字体大小.fontColor('#0066cc')// 设置字体颜色}}

2. 状态管理

用**@State**定义响应式变量，变量变化时UI自动更新：

@Componentstruct CountComponent{// 响应式状态变量@Statecount:number=0;build(){Column(){// 垂直布局容器Text(`当前计数：${this.count}`)Button('点击加1').onClick(()=>{// 点击事件this.count++;})}}}

3. 布局容器

常用Column（垂直布局）、Row（水平布局）、**Flex（弹性布局）**管理组件位置，替代传统的CSS布局：

Column({space:20,alignItems:ItemAlign.Center}){// 垂直布局，组件间距20，居中对齐Text('标题')Row({justifyContent:FlexAlign.SpaceAround}){// 水平布局，组件均匀分布Button('按钮1')Button('按钮2')}}.width('100%')// 宽度占满父容器.height('100%')// 高度占满父容器

三、实战：15分钟写一个进阶版Hello World

我们写一个带“点击计数+动态问候”的Hello World应用，步骤如下：

1. 创建项目

打开DevEco Studio，选择“Create Project”，依次选择：

模板：“Empty Ability”；
设备：“Phone”；
API版本：“9”；
项目名称：“HelloHarmony”；
语言：“ArkTS”。

2. 编写核心代码

打开entry/src/main/ets/pages/Index.ets，替换为以下代码：

@Entry// 标记为入口组件@Componentstruct HelloHarmony{// 响应式状态：用户名、点击次数@Stateusername:string='鸿蒙开发者';@StateclickCount:number=0;build(){Column({space:30,// 组件间距alignItems:ItemAlign.Center,// 水平居中justifyContent:FlexAlign.Center// 垂直居中}).width('100%').height('100%'){// 问候文本Text(`你好，${this.username}!`).fontSize(35).fontWeight(FontWeight.Bold)// 计数文本Text(`你已点击：${this.clickCount}次`).fontSize(20).fontColor('#666')// 按钮：点击计数+修改用户名Button('点击互动').width(150).height(50).backgroundColor('#0066cc').fontColor('#fff').onClick(()=>{this.clickCount++;// 点击3次后修改用户名if(this.clickCount===3){this.username='ArkTS爱好者';}})}}}