为了账号安全,请及时绑定邮箱和手机立即绑定

ArkTS 语言入门:开启鸿蒙原生开发之旅

ArkTS 是 HarmonyOS 的主力开发语言。它并非一门全新的语言,而是基于 TypeScript(TS)扩展而来的,保留了 TS 的静态类型检查优势,并增加了声明式 UI 开发范式。

对于有 TypeScript/JavaScript 基础的开发者,ArkTS 几乎可以“开箱即用”;对于 Java/Android 开发者,其强类型和类结构也非常亲切。

️ 第一步:环境搭建与项目创建

在开始写代码之前,你需要准备好官方开发工具。

  1. 下载工具:访问华为开发者联盟官网,下载并安装 DevEco Studio(建议最新版本)。
  2. 配置 SDK:首次启动时,工具会自动引导下载 HarmonyOS SDK。
  3. 创建项目
    • 选择 FileNewCreate Project
    • 选择模板:Empty Ability(这是最基础的空白模板)。
    • 配置项目名称和保存路径,点击 Finish。

核心目录结构解析
项目创建后,关注以下关键文件:

  • entry/src/main/ets/pages/Index.ets:主页面代码,我们主要在这里编写 UI 和逻辑。
  • entry/src/main/module.json5:模块配置文件,用于声明权限和 Ability 信息。
  • AppScope/app.json5:应用全局配置。

第二步:ArkTS 语法基础

ArkTS 严格遵循 TypeScript 的语法规范,但在类型系统上更加严格。

1. 变量声明
必须显式标注类型,禁止隐式 any

let name: string = "HarmonyOS"; // 可变变量
const version: number = 6.0;    // 常量

2. 核心装饰器
ArkTS 使用装饰器来定义组件和状态,这是声明式 UI 的灵魂:

装饰器 作用 类比 (React/Vue)
@Entry 标识页面的入口组件 -
@Component 定义一个自定义组件 组件定义
@State 定义响应式状态,数据变化驱动 UI 刷新 useState / data

第三步:构建你的第一个界面

打开 Index.ets,你会看到一段默认代码。让我们通过一个计数器案例来理解 ArkTS 的写法。

代码示例:点击按钮数字加 1

@Entry
@Component
struct Index {
  // 1. 定义状态变量,初始值为 0
  @State count: number = 0;

  build() {
    // 2. 描述 UI 结构
    Column({ space: 20 }) { // 垂直布局容器,间距 20
      Text(`当前计数:${this.count}`)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      Button('点击加 1')
        .onClick(() => {
          // 3. 修改状态,UI 会自动刷新
          this.count++; 
        })
        .backgroundColor('#0A59F7')
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center) // 内容垂直居中
  }
}

代码解析:

  • 声明式 UI:我们通过 ColumnTextButton 等组件像搭积木一样描述界面。
  • 链式调用.fontSize().width() 等方法用于设置样式属性。
  • 响应式更新:当 this.count 发生变化时,Text 组件的内容会自动重绘,无需手动操作 DOM。

️ 第四步:运行与调试

  1. 启动模拟器:在 DevEco Studio 顶部工具栏选择设备(如 Phone),点击运行按钮。
  2. 真机调试
    • 手机开启“开发者模式”和“USB 调试”。
    • 连接电脑,DevEco Studio 会自动识别设备。
    • 点击运行,应用将自动安装并启动。

进阶学习路线图

掌握了基础语法后,你可以按照以下路径深入:

  1. ArkUI 组件库:学习更多容器组件(Row, Stack, List)和通用组件(Image, Input)。
  2. 状态管理:理解 @Prop(父子单向同步)、@Link(父子双向同步)和 AppStorage(全局状态)。
  3. Ability 生命周期:掌握应用从启动到销毁的生命周期管理。
  4. 网络与存储:学习如何使用 http 模块请求数据,以及使用 Preferences 存储本地数据。

现在,打开你的 DevEco Studio,尝试修改上面的代码,比如改变按钮颜色或添加一个新的文本框吧!

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

举报

0/150
提交
取消