鸿蒙之光HarmonyOS NEXT原生应用开发入门：零基础精通ArkTS编程

2026-02-05 04:46:27作者：余洋婵Anita

你还在为跨平台应用开发的复杂性而烦恼吗？一文带你从零基础掌握HarmonyOS NEXT原生应用开发，轻松上手ArkTS编程。读完本文，你将了解HarmonyOS的核心概念、搭建开发环境、编写第一个ArkTS应用，并掌握基础UI布局与交互逻辑，开启你的鸿蒙开发之旅。

HarmonyOS与ArkTS简介

HarmonyOS是华为自主研发的分布式操作系统，旨在为全场景智能设备提供统一的应用开发平台。ArkTS是HarmonyOS NEXT主推的应用开发语言，基于TypeScript扩展而来，具备静态类型检查、声明式UI等特性，大幅提升开发效率与代码质量。

《跟老卫学HarmonyOS开发》是本项目的核心教程，涵盖从基础到进阶的全面内容，包括最新版本HarmonyOS（HarmonyOS 6）的新特性。通过图文并茂的方式和大量实例，带你逐步走进HarmonyOS的世界。社区教程：README.md

开发环境搭建

安装DevEco Studio

DevEco Studio是HarmonyOS应用开发的集成开发环境（IDE），提供了工程管理、代码编辑、编译构建、调试运行等一站式开发服务。

访问华为开发者联盟官网，下载并安装最新版DevEco Studio。
安装完成后，首次启动需配置HarmonyOS SDK，选择对应版本（建议HarmonyOS NEXT Developer Beta3及以上）。
配置Gradle仓库镜像，解决国内网络环境下的依赖下载问题。相关教程：HarmonyOS初探04——使用DevEco Studio时设置Gradle仓库镜像

配置开发环境

注册华为开发者联盟账号，完成实名认证。环境搭建教程：HarmonyOS环境搭建之注册华为开发者联盟帐号
在DevEco Studio中登录华为账号，关联开发者证书，确保应用能够正常签名打包。
启动模拟器或连接真实设备，进行应用调试。若使用模拟器，需注意端口占用问题。相关教程：HarmonyOS初探06——使用DevEco Studio模拟器端口被占用无法启动

第一个ArkTS应用：Hello World

创建项目

打开DevEco Studio，选择“Create Project”。
选择“Application” -> “Empty Ability”，点击“Next”。
填写项目信息：
- Project Name: ArkTSHelloWorld
- Bundle Name: com.waylau.ohms.arktshelloworld（可自定义，需符合命名规范）
- Save Location: 选择合适的项目路径
- Language: ArkTS
- API Version: 选择HarmonyOS NEXT对应的版本（如API 10）
点击“Finish”，等待项目初始化完成。

项目配置文件app.json5定义了应用的基本信息，如应用名称、图标、版本号等。以下是示例项目的配置内容：

{
  "app": {
    "bundleName": "com.waylau.ohms.arktshelloworld",
    "vendor": "example",
    "versionCode": 1000000,
    "versionName": "1.0.0",
    "icon": "$media:app_icon",
    "label": "$string:app_name"
  }
}

配置文件：samples/ArkTSHelloWorld/AppScope/app.json5

编写代码

项目创建完成后，IDE会自动生成EntryAbility.ts和Index.ets文件。Index.ets是应用的主页面，采用声明式UI编写。

打开Index.ets，修改代码如下：

@Entry
@Component
struct Index {
  @State message: string = 'Hello, HarmonyOS!'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行应用

点击DevEco Studio工具栏中的“Run”按钮（绿色三角形），或使用快捷键Shift+F10。
选择已配置的模拟器或连接的设备，点击“OK”。
等待应用编译、安装完成，模拟器或设备上将显示“Hello, HarmonyOS!”。

基础UI布局与组件

常用布局容器

HarmonyOS提供了多种布局容器，用于构建灵活的界面结构：

Row：横向排列子组件
Column：纵向排列子组件
Stack：层叠显示子组件
List：列表布局，高效展示大量数据

以下是使用Column和Row实现的简单布局示例：

@Entry
@Component
struct LayoutExample {
  build() {
    Column() {
      Row() {
        Text('Left')
          .width('33%')
          .height(50)
          .backgroundColor('#ff0000')
        Text('Center')
          .width('34%')
          .height(50)
          .backgroundColor('#00ff00')
        Text('Right')
          .width('33%')
          .height(50)
          .backgroundColor('#0000ff')
      }
      .width('100%')
      
      Text('Bottom Content')
        .margin({ top: 20 })
        .fontSize(20)
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

常用UI组件

ArkTS提供了丰富的UI组件，满足各种界面需求：

Text：文本显示
Image：图片展示
Button：按钮交互
TextField：文本输入
Swiper：轮播图

以Button组件为例，演示点击事件处理：

@Entry
@Component
struct ButtonExample {
  @State count: number = 0

  build() {
    Column() {
      Button('Click me')
        .onClick(() => {
          this.count++
        })
        .margin(10)
      
      Text(`Clicked ${this.count} times`)
        .fontSize(20)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

实战案例：简易购物车

功能需求

实现一个简单的购物车页面，包含商品列表、添加/减少数量、计算总价等功能。

核心代码

@Entry
@Component
struct ShoppingCart {
  @State items: { name: string, price: number, count: number }[] = [
    { name: '商品A', price: 99.9, count: 1 },
    { name: '商品B', price: 199.9, count: 1 }
  ]

  build() {
    Column() {
      List() {
        ForEach(this.items, (item) => {
          ListItem() {
            Row() {
              Text(item.name)
                .width('40%')
              Text(`￥${item.price.toFixed(2)}`)
                .width('20%')
              Row() {
                Button('-')
                  .onClick(() => {
                    if (item.count > 1) item.count--
                  })
                Text(`${item.count}`)
                  .width(30)
                  .textAlign(TextAlign.Center)
                Button('+')
                  .onClick(() => {
                    item.count++
                  })
              }
            }
            .padding(10)
          }
        })
      }
      .width('100%')
      
      Text(`总价: ￥${this.getTotal().toFixed(2)}`)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin(20)
    }
    .width('100%')
    .padding(10)
  }

  getTotal(): number {
    return this.items.reduce((sum, item) => sum + item.price * item.count, 0)
  }
}