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

ArkTS 第一课：从零开始学鸿蒙应用开发

news 2025/11/1 10:21:30

您好，我是ID: 熊猫钓鱼！
十余年深耕技术一线，我始终相信：优秀的开发如同垂钓——既要对技术生态的「水域」有深邃理解，也要对问题本质的「鱼汛」保持敏锐直觉。从架构设计到性能调优，从技术选型到团队协作，我专注在恰当的时机，用最合适的技术钓起最优雅的解决方案。

目录

课前准备：认识我们的新朋友 ArkTS

第一站：准备开发环境

1.1 安装必要软件

1.2 创建第一个项目

1.3 认识项目结构

第二站：ArkTS 基础语法入门

2.1 变量和数据类型

2.2 函数的使用

2.3 接口和自定义类型

第三站：声明式 UI 基础

3.1 什么是声明式 UI？

3.2 构建第一个界面

3.3 常用基础组件

学习建议：

下一步学习方向：

课前准备：认识我们的新朋友 ArkTS

欢迎来到 ArkTS 的世界！如果你是第一次接触鸿蒙应用开发，可能会对这个新语言感到既期待又紧张。别担心，让我用一个简单的比喻开始：如果说 JavaScript 是你熟悉的老朋友，那么 TypeScript 就是这个朋友的升级版，而 ArkTS 则是专门为鸿蒙系统量身定制的"超级战衣"。

ArkTS 是基于 TypeScript 的，但它不是简单的复制，而是针对鸿蒙系统的特点进行了深度优化。想象一下，你原来会 JavaScript，这就好像你已经会骑自行车了，现在要学习骑电动车——很多基本技能是相通的，只是增加了一些新的操作方式。

让我们先来看看今天的学习路线图：

  1. 搭建开发环境——准备我们的"工作室"

  2. 认识 ArkTS 的基本组成——学习"字母和单词"

  3. 掌握声明式 UI——了解如何"描述界面"

  4. 学习组件和装饰器——组装我们的"积木块"

  5. 实战练习——亲手制作第一个小应用

第一站：准备开发环境

1.1 安装必要软件

在开始写代码之前，我们需要准备好开发工具。就像木匠需要锯子和锤子一样，我们需要：

DevEco Studio：这是官方推荐的开发工具，你可以把它理解为鸿蒙开发的"专属工作室"。它基于 IntelliJ IDEA 开发，所以如果你之前用过 Android Studio 或其他 JetBrains 的产品，会感到非常熟悉。

安装步骤很简单：

  1. 访问华为开发者联盟官网

  2. 找到 DevEco Studio 下载页面

  3. 选择适合你操作系统的版本（支持 Windows、macOS）

  4. 按照安装向导完成安装

Node.js：ArkTS 的编译需要 Node.js 环境，建议安装最新的 LTS 版本。

1.2 创建第一个项目

安装完成后，让我们创建第一个 ArkTS 项目：

  1. 打开 DevEco Studio

  2. 选择"Create New Project"

  3. 选择"Empty Ability"模板

  4. 配置项目信息：

    • Project Name: MyFirstArkTSApp

    • Package Name: com.example.myfirstarktsapp

    • Save Location: 选择你喜欢的目录

    • Language: 确保选择 ArkTS

  5. 点击"Finish"等待项目创建完成

这个过程可能需要几分钟，因为 IDE 需要下载相关的依赖包。趁这个时间，我们来了解一下项目结构。

1.3 认识项目结构

创建完成后，你会看到这样的目录结构：

MyFirstArkTSApp/
├── entry/
│   ├── src/
│   │   ├── main/
│   │   │   ├── ets/          # ArkTS 代码目录
│   │   │   │   ├── pages/    # 页面目录
│   │   │   │   │   └── index.ets  # 主页面
│   │   │   │   └── app.ets   # 应用入口
│   │   │   └── resources/    # 资源文件
│   │   └── ohosTest/         # 测试代码
├── build-profile.json        # 构建配置
└── package.json             # 项目配置

现在，请找到 entry/src/main/ets/pages/index.ets 文件，这就是我们今天主要修改的文件。

第二站：ArkTS 基础语法入门

2.1 变量和数据类型

让我们从最基础的变量开始。在 ArkTS 中，我们使用 let 和 const 来声明变量：

// 字符串类型
let userName: string = "小明"
const appName: string = "我的第一个应用"// 数字类型
let userAge: number = 25
let price: number = 99.9// 布尔类型
let isLogin: boolean = true
const hasPermission: boolean = false// 数组类型
let hobbies: string[] = ["读书", "运动", "音乐"]
let scores: Array<number> = [95, 88, 92]// 任何类型 - 尽量少用，但迁移时很有帮助
let dynamicData: any = "可以是字符串"
dynamicData = 123  // 现在又变成了数字

重要概念：类型注解
你可能注意到了变量名后面的 : string、: number 等，这就是类型注解。它告诉 ArkTS 这个变量应该存储什么类型的数据。这样做的好处是：

  • 在编写代码时就能发现类型错误

  • IDE 能提供更好的代码提示

  • 代码更容易理解和维护

2.2 函数的使用

函数是组织代码的基本单元，在 ArkTS 中定义函数：

// 基础函数
function greet(name: string): string {return `你好, ${name}!`
}// 箭头函数 - 更简洁的写法
const add = (a: number, b: number): number => {return a + b
}// 可选参数和默认参数
function createUser(name: string, age: number, phone?: string,          // 可选参数country: string = "中国" // 默认参数
): void {console.log(`用户: ${name}, 年龄: ${age}`)if (phone) {console.log(`电话: ${phone}`)}console.log(`国家: ${country}`)
}// 使用函数
const message = greet("小红")  // 输出: 你好, 小红!
const result = add(5, 3)      // 结果: 8
createUser("小李", 20)        // 使用默认的国家参数

实践建议：刚开始时，尽量为每个函数和参数都加上类型注解，这样可以帮助你更好地理解类型系统。

2.3 接口和自定义类型

接口是 ArkTS 中非常重要的概念，它用来定义对象的形状：

// 定义用户接口
interface User {id: numbername: stringemail: stringage?: number  // 可选属性readonly createTime: string  // 只读属性
}// 使用接口
const currentUser: User = {id: 1,name: "张三",email: "zhangsan@example.com",createTime: "2024-01-01"
}// 这样会报错，因为 createTime 是只读的
// currentUser.createTime = "2024-01-02"// 函数使用接口类型
function printUserInfo(user: User): void {console.log(`用户: ${user.name}, 邮箱: ${user.email}`)
}

理解接口：你可以把接口理解为一份"合同"，它规定了对象必须包含哪些属性，每个属性应该是什么类型。这样就能保证代码的一致性。

第三站：声明式 UI 基础

3.1 什么是声明式 UI？

这是 ArkTS 与传统开发最大的不同！让我们用一个对比来理解：

命令式 UI（传统方式）：

// 伪代码，表示传统方式
const button = document.createElement('button')
button.textContent = '点击我'
button.onclick = function() {button.textContent = '已点击'
}
document.body.appendChild(button)

声明式 UI（ArkTS 方式）：

// 关注的是"应该显示什么"，而不是"如何显示"
@Entry
@Component
struct MyComponent {@State buttonText: string = '点击我'build() {Button(this.buttonText).onClick(() => {this.buttonText = '已点击'})}
}

声明式 UI 让我们专注于描述界面"应该是什么样子"，而不用关心具体的操作步骤。

3.2 构建第一个界面

让我们动手修改 index.ets 文件：

@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Column({ space: 20 }) {Text(this.message).fontSize(30).fontWeight(FontWeight.Bold).fontColor('#007DFF')Button('点击改变文字').width('80%').height(50).backgroundColor('#007DFF').fontColor(Color.White).onClick(() => {this.message = '欢迎学习ArkTS!'})}.width('100%').height('100%').justifyContent(FlexAlign.Center).padding(20)}
}

让我们分析一下这段代码：

  • @Entry：表示这是一个页面入口组件

  • @Component：表示这是一个自定义组件

  • @State：表示这个数据是状态数据，当它改变时界面会自动更新

  • build()：构建组件UI的方法

  • Column：纵向排列的容器

  • Text：文本组件

  • Button：按钮组件

试试看：点击预览器中的按钮，你会发现文字真的改变了！这就是声明式 UI 的魔力——数据变化，界面自动更新。

3.3 常用基础组件

ArkTS 提供了丰富的基础组件，我们先学习最常用的几个：

@Entry
@Component
struct BasicComponents {@State inputText: string = ''build() {Column({ space: 15 }) {// 文本显示Text('这是一个文本组件').fontSize(20).fontColor('#333333')// 按钮Button('普通按钮').width('60%').onClick(() => {console.log('按钮被点击了')})// 文本输入框TextInput({ placeholder: '请输入内容' }).width('80%').height(40).onChange((value: string) => {this.inputText = value})// 显示输入的内容Text(`你输入了: ${this.inputText}`).fontSize(16).fontColor('#666666')// 图片显示Image($r('app.media.icon')).width(100).height(100)}.width('100%').height('100%').justifyContent(FlexAlign.Center).padding(20)}
}

学习建议：

循序渐进：不要急于学习高级特性，先把今天的基础概念彻底理解。可以多做一些小练习，比如：

  • 创建一个计数器应用

  • 制作一个简单的待办列表

  • 尝试改变组件的样式和布局

多动手实践：编程是实践性很强的技能，只看不练是很难掌握的。遇到问题时，先自己思考尝试解决，然后再查看文档或寻求帮助。

善用官方资源：华为官方文档是最准确的学习资料，遇到概念不理解时，可以多查阅文档。

下一步学习方向：

当你熟练掌握了今天的内容后，可以继续学习：

  • 状态管理和组件通信

  • 更复杂的装饰器：@Prop、@Link、@Watch

  • 页面路由和导航

  • 网络请求和数据存储

  • 动画和手势处理

  • 自定义组件的高级用法

记住，学习编程就像学习一门新语言，需要时间和练习。不要因为一开始遇到困难就放弃，每个开发者都是从第一行代码开始的。继续加油，期待看到你创造出优秀的鸿蒙应用！

http://www.dtcms.com/a/553678.html

相关文章：

  • 做门户网站代码质量方面具体需要注意什么厦门网页制作设计营销
  • LightGBM（Light Gradient Boosting Machine）模型详解
  • LeetCode 每日一题 1526. 形成目标数组的子数组最少增加次数
  • Linux中伙伴系统页面回收free_pages_bulk和分配函数__rmqueue的实现
  • 33.点赞功能
  • 网站怎么快速做排名个人在线免费公司注册
  • 微信官网网站模板百度站长平台网页版
  • 黑马点评学习笔记03（Hutool工具库）
  • 太原模板建站系统无障碍网站建设标准
  • 企业级SQL审核优化工具 PawSQL 介绍（3）- 审核工单管理
  • XML文档差异分析工具：深入解析Word XML结构变化
  • 门户网站域名长治房产网站建设
  • 神经网络如何预测仓库拥堵？
  • 基于EasyExcel的动态列映射读取方案
  • 非凡免费建网站平台大型网站开发项目合同
  • 瑞芯微RK35xx升级RGA驱动版本和API版本
  • C++ 与 Go 相互调用实践指南：基于 SWIG + Director 模式
  • 做音乐的网站设计网站版权设置
  • SAP ABAP 视图表/表 表维护视图字段更新
  • 汇编、反汇编和机器码
  • 网站做跳转链接馆陶网站推广
  • 逻辑回归正则化解释性实验报告：L2 正则对模型系数收缩的可视化分析
  • LeetCode 412 - Fizz Buzz
  • 大型门户网站建设特点怎么知道一个网站是谁做的
  • IDC报告：阿里云市场份额升至26.8%，连续5季度上涨
  • 佛山房地产网站建设51建模网官方网站
  • 字格格子模板合集：多样练字格硬笔书法训练模板（可打印）
  • Arduino ESP32-C3 串口使用注意事项
  • MCP是什么及如何开发一个MCPServer
  • 程序逆向分析