news 2026/3/11 16:58:51

鸿蒙开发入门:从环境搭建到第一个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/3/11 12:54:46

基于纳米微粒激发平面波的米氏散射FDTD仿真模拟与验证

基于纳米微粒激发平面波的米氏散射FDTD仿真模拟 微纳光学 【案例内容】 本案例展示了一个基于纳米粒子激发平面波的米氏散射仿真模型(mie scattering),计算其散射和吸收截面、局域场增强和远场散射分布,同时将截面和远场结果与解析…

作者头像 李华
网站建设 2026/3/11 12:54:35

以茶叶取小名,萌到想贴贴[特殊字符]

以茶叶取小名,萌到想贴贴🤣【茶泡】🍵:开水一冲就冒泡,软萌到心坎里【小茗】🌱:茗茶本茶,喊着顺口还显乖【茶糯】🍚:像茶泡饭一样软糯,听着就好ru…

作者头像 李华
网站建设 2026/3/11 12:54:24

8个降AI率工具推荐,研究生必备神器!

8个降AI率工具推荐,研究生必备神器! AI降重工具:研究生论文写作的得力助手 随着人工智能技术的快速发展,越来越多的研究生在撰写论文时会使用AI辅助工具来提升效率。然而,AI生成的内容往往带有明显的“AI痕迹”&#x…

作者头像 李华
网站建设 2026/3/11 12:54:14

OpenAI 格式 API 通用接入说明(含 Cherry Studio 配置教程)

OpenAI 格式 API 通用接入说明(含 Cherry Studio 配置教程) 关键词:OpenAI API、Base_URL 配置、API Key、模型接入、Cherry Studio 教程、AI 客户端配置 最近在折腾一些 AI 应用和本地客户端时,发现很多同学在 API 接入阶段就卡住…

作者头像 李华
网站建设 2026/3/11 2:45:58

java计算机毕业设计小学生在线数学学习平台 轻量级Java毕业设计:小学生数学在线教学与测评一体化平台 基于SpringBoot的小学生数学互动学习及智能作业系统

计算机毕业设计小学生在线数学学习平台2odvb9 (配套有源码 程序 mysql数据库 论文) 本套源码可以在文本联xi,先看具体系统功能演示视频领取,可分享源码参考。“双减”之后,校外学科培训退潮,校内数学提分却仍是刚需。传…

作者头像 李华
网站建设 2026/3/11 12:53:52

MSVC Cmake中使用多字节和MT

MSVC Cmake中使用多字节和MT if(MSVC)target_compile_options(a PRIVATE/W4/permissive-)target_compile_definitions(a PRIVATE_CRT_SECURE_NO_WARNINGS_MBCS)set_property(TARGET a PROPERTYMSVC_RUNTIME_LIBRARY "MultiThreaded$<$<CONFIG:Debug>:Debug>&q…

作者头像 李华