news 2026/7/5 23:04:12

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
鸿蒙开发入门:从环境搭建到第一个ArkTS应用,30分钟上手

鸿蒙开发入门:从环境搭建到第一个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爱好者';}})}}}

3. 运行应用

  • 选择模拟器(DevEco Studio自带“Phone”模拟器,启动后自动加载);
  • 点击右上角“Run”按钮,等待编译完成,模拟器会显示应用界面:
    • 初始显示“你好,鸿蒙开发者!”;
    • 点击按钮,计数增加;
    • 点击3次后,用户名变为“ArkTS爱好者”。

四、新手避坑:2个常见问题

  1. 模拟器启动失败:检查电脑是否开启虚拟化(BIOS中开启VT-x/AMD-V),或重启DevEco Studio;
  2. 语法报错:确保项目选择的是“ArkTS”语言,而非“JavaScript”,且API版本为9。

总结

鸿蒙开发入门并不难:DevEco Studio环境搭建10分钟搞定,ArkTS核心语法和前端高度相似,再通过一个小案例就能快速上手。后续可以尝试扩展功能(比如添加输入框修改用户名),逐步熟悉鸿蒙的组件库和API。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/26 17:52:14

如何用云原生开发,把新项目启动从1天缩短到3分钟

新同事入职,一周过去了,代码没写几行,环境还没配好。这个场景我见过太多次,甚至自己也曾是主角。团队里最常听到的那句“在我电脑上明明是好的”,与其说是解释,不如说是一种无奈的哀嚎。我一直在思考&#…

作者头像 李华
网站建设 2026/7/3 2:08:47

基于微信小程序的维修服务平台的设计与实现

前言 🌞博主介绍:✌CSDN特邀作者、全栈领域优质创作者、10年IT从业经验、码云/掘金/知乎/B站/华为云/阿里云等平台优质作者、专注于Java、小程序/APP、python、大数据等技术领域和毕业项目实战,以及程序定制化开发、文档编写、答疑辅导等。✌…

作者头像 李华
网站建设 2026/7/5 1:12:38

基于SpringBoot+Vue的图书馆选座平台设计与实现毕设源码

博主介绍:✌ 专注于Java,python,✌关注✌私信我✌具体的问题,我会尽力帮助你。一、研究目的本研究旨在设计并实现一个基于SpringBoot和Vue的图书馆选座平台,以满足现代图书馆在座位管理方面的需求。具体研究目的如下: 首先&#x…

作者头像 李华
网站建设 2026/7/5 9:17:54

主生产计划:PMC体系的核心引擎解析

MPS:承上启下的“总调度台” 在主生产计划与物料控制体系中,主生产计划处于中枢位置。它向上承接销售预测与客户订单,向下驱动物料需求计划与车间作业排程。简单说,MPS决定了“在什么时间、生产什么产品、生产多少数量”&#xff…

作者头像 李华
网站建设 2026/7/3 6:43:37

第八章 基因的表达与调控

第九章基因工程和基因组学第十章基因突变第十一章细胞质遗传第十二章遗传与发育第十三章数量性状遗传第十四章群体遗传与进化

作者头像 李华
网站建设 2026/7/4 7:51:11

Post-training with Tinker:定制语言模型的最佳解决方案

Post-training with Tinker:定制语言模型的最佳解决方案 在深度学习和自然语言处理领域,定制化的语言模型正逐渐成为提升模型性能的重要手段。今天,我们将深入探讨 Tinker 及其配套工具 Tinker Cookbook,这两个开放源码库旨在帮助…

作者头像 李华