HarmonyOS鸿蒙开发-ArkTS初学

用户352133796118
19 阅读10分钟

​

一、ArkTS语言概述

1.1 什么是ArkTS？

ArkTS是HarmonyOS应用开发的主力编程语言，它基于TypeScript扩展而来，就像TypeScript是JavaScript的超集一样，ArkTS是TypeScript的超集。简单来说，ArkTS = TypeScript + 鸿蒙特有扩展。

设计理念：

  • 静态类型安全：编译时检查类型错误，减少运行时异常
  • 声明式UI：用简洁代码描述界面，专注"做什么"而非"怎么做"
  • 高性能：针对鸿蒙系统深度优化，启动速度提升40%
  • 分布式友好：原生支持跨设备开发需求

与其他语言对比：

表格

复制

语言特点适合场景
ArkTS静态类型、声明式UI、鸿蒙原生鸿蒙应用开发首选
TypeScript静态类型、Web生态丰富Web前端开发
JavaScript动态类型、灵活但易出错传统Web开发
Java面向对象、成熟稳定安卓传统开发

为什么选择ArkTS：

  • 专为鸿蒙系统优化，性能最佳
  • 语法简洁，代码量比传统方式减少30%-50%
  • 类型安全，编译时发现错误，减少调试时间
  • 与鸿蒙API深度集成，开发效率更高

1.2 学习ArkTS的准备

基础知识：

  • 无需编程经验，但了解基本编程概念更佳
  • 了解HTML/CSS基础有助于理解UI开发
  • 数学基础：初中数学知识足够应对大部分场景

开发环境：

  • DevEco Studio（鸿蒙官方IDE）
  • 鸿蒙模拟器（无需真实设备即可学习）
  • 代码编辑器（DevEco Studio已集成）

学习心态：

  • 循序渐进，不要急于求成
  • 重视基础概念理解，而非死记语法
  • 多动手实践，从错误中学习

二、基础语法详解

2.1 变量与数据类型

变量声明：

ArkTS是静态类型语言，变量类型在声明时确定且不可更改。

// 基本类型声明
let age: number = 25;        // 数字类型
let name: string = "小明";   // 字符串类型
let isStudent: boolean = true; // 布尔类型

// 常量声明（值不可更改）
const PI: number = 3.14159;

核心数据类型：

表格

复制

类型描述示例生活类比
number数字（整数/小数）42, 3.14像一个标有刻度的量杯，只能装液体（数字）
string文本"Hello"像一个信封，专门用来存放文字信息
boolean布尔值true/false像一个开关，只有开和关两种状态
Array数组[1, 2, 3]像一个文件柜，有多个抽屉存放同类物品
object对象{name: "小明"}像一个档案袋，存放多个相关属性
enum枚举enum Color {Red, Green}像一个选择题，只能从给定选项中选择

类型推断：

ArkTS可以自动推断变量类型，简化代码：

let message = "Hello"; // 自动推断为string类型
let count = 100;       // 自动推断为number类型

2.2 控制流语句

条件语句：

let score: number = 85;

if (score >= 90) {
  console.log("优秀");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

// 三元运算符
let result: string = score >= 60 ? "通过" : "未通过";

循环语句：

// for循环
for (let i: number = 0; i < 5; i++) {
  console.log(i);
}

// while循环
let count: number = 0;
while (count < 5) {
  console.log(count);
  count++;
}

// for...of循环（数组）
let fruits: string[] = ["苹果", "香蕉", "橙子"];
for (let fruit of fruits) {
  console.log(fruit);
}

2.3 函数

函数定义：

// 基本函数
function add(a: number, b: number): number {
  return a + b;
}

// 函数调用
let sum: number = add(3, 5);
console.log(sum); // 输出：8

函数特性：

表格

复制

特性描述示例
参数类型必须指定参数类型function greet(name: string)
返回类型必须指定返回值类型function getName(): string
可选参数可标记参数为可选function greet(name?: string)
默认参数为参数设置默认值function greet(name: string = "Guest")
箭头函数简化函数写法const add = (a: number, b: number) => a + b

箭头函数：

简化函数写法，尤其适合简短函数：

// 标准函数
function multiply(a: number, b: number): number {
  return a * b;
}

// 箭头函数等效写法
const multiply = (a: number, b: number): number => a * b;

2.4 类与接口

类的定义与使用：

// 定义类
class Person {
  // 属性
  name: string;
  age: number;
  
  // 构造函数
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  
  // 方法
  greet(): string {
    return `Hello,我叫${this.name}，今年${this.age}岁`;
  }
}

// 创建对象
let person = new Person("小明", 25);
console.log(person.greet()); // 输出：Hello,我叫小明，今年25岁

接口：

定义对象的结构，确保数据符合预期格式：

// 定义接口
interface Student {
  id: number;
  name: string;
  major: string;
  // 可选属性
  grade?: string;
}

// 使用接口
function printStudentInfo(student: Student): void {
  console.log(`学号: ${student.id}, 姓名: ${student.name}`);
}

// 符合接口的数据
let student = {
  id: 1001,
  name: "小红",
  major: "计算机科学"
};

printStudentInfo(student);

三、核心特性解析

3.1 装饰器

装饰器是ArkTS最具特色的功能之一，就像给代码"贴标签"，告诉系统这段代码的特殊用途。

常用装饰器：

表格

复制

装饰器作用生活类比
@Component标记自定义组件给文件贴上"文档"标签
@Entry标记应用入口组件给书本贴上"封面"标签
@State标记组件内部状态给笔记本贴上"可修改"标签
@Prop标记父子组件传值给信件贴上"只读"标签
@Builder标记UI构建函数给模板贴上"可复用"标签

@Component和@Entry：

// 声明一个组件
@Component
struct WelcomeComponent {
  build() {
    Text("欢迎学习ArkTS")
      .fontSize(24)
  }
}

// 声明应用入口组件
@Entry
@Component
struct Index {
  build() {
    Column() {
      WelcomeComponent() // 使用自定义组件
      Text("这是应用主页")
    }
  }
}

3.2 状态管理

状态管理是ArkTS的核心优势，就像一个智能仓库，数据变化时自动通知所有使用该数据的UI元素更新。

核心状态装饰器：

表格

复制

装饰器作用范围数据流向应用场景
@State组件内部双向组件内部数据
@Prop父子组件单向（父到子）父组件向子组件传值
@Link父子组件双向父子组件共享数据
@Provide/@Consume跨组件双向祖孙组件共享数据
@AppStorage应用全局双向应用级共享数据

@State示例：

@Entry
@Component
struct CounterComponent {
  // 声明状态变量
  @State count: number = 0
  
  build() {
    Column() {
      Text(`当前计数: ${this.count}`)
        .fontSize(30)
        .margin(20)
      
      Button("增加")
        .onClick(() => {
          // 修改状态变量，UI会自动更新
          this.count++
        })
    }
  }
}

状态管理原理：

当使用@State装饰变量时，ArkTS编译器会自动：

  1. 跟踪使用该变量的所有UI元素
  2. 当变量值变化时，重新渲染相关UI元素
  3. 只更新需要变化的部分，提高性能

3.3 并发编程

ArkTS提供了优雅的并发编程模型，让多任务处理变得简单安全。

TaskPool：处理CPU密集型任务

import taskpool from '@ohos.taskpool';

// 定义耗时函数
@Concurrent
function calculateSum(start: number, end: number): number {
  let sum = 0;
  for (let i = start; i <= end; i++) {
    sum += i;
  }
  return sum;
}

// 在主线程中调用
async function main() {
  try {
    // 提交任务到任务池
    let result = await taskpool.submit(calculateSum, 1, 1000000);
    console.log(`计算结果: ${result}`);
  } catch (e) {
    console.error(`计算出错: ${e}`);
  }
}

main();

Worker：处理I/O密集型任务

// 创建Worker
const worker = new Worker('entry/ets/workers/MyWorker.ts');

// 发送消息给Worker
worker.postMessage({ type: 'fetchData', url: 'https://api.example.com/data' });

// 接收Worker返回结果
worker.onmessage = (msg) => {
  console.log(`收到数据: ${msg.data}`);
};

// 错误处理
worker.onerror = (error) => {
  console.error(`Worker错误: ${error.message}`);
};

四、UI开发基础

4.1 声明式UI

ArkTS采用声明式UI范式，你只需要描述界面应该是什么样子，系统会自动处理如何绘制。

命令式vs声明式：

// 命令式（传统方式）
let button = new Button();
button.setText("点击我");
button.setColor("blue");
button.setOnClickListener(() => {
  console.log("按钮被点击");
});
container.addChild(button);

// 声明式（ArkTS方式）
Button("点击我")
  .backgroundColor("blue")
  .onClick(() => {
    console.log("按钮被点击");
  })

声明式优势：

  • 代码更简洁，可读性更好
  • 布局与逻辑分离，便于维护
  • 减少样板代码，开发效率更高
  • 天然支持响应式布局

4.2 常用UI组件

基础组件：

表格

复制

组件功能常用属性
Text显示文本fontSize, fontColor, fontWeight
Button按钮width, height, onClick
Image显示图片src, width, height, objectFit
TextInput输入框placeholder, onTextChange
List列表space, divider, onScroll

Text组件示例：

Text("Hello ArkTS")
  .fontSize(30)          // 字体大小
  .fontColor("#007AFF")  // 字体颜色（华为蓝）
  .fontWeight(FontWeight.Bold) // 字体粗细
  .textAlign(TextAlign.Center) // 文本对齐
  .margin(15)            // 外边距
  .padding(10)           // 内边距
  .backgroundColor("#F0F0F0") // 背景色

Button组件示例：

Button("点击我")
  .width(150)            // 宽度
  .height(45)            // 高度
  .fontSize(18)          // 字体大小
  .backgroundColor("#007AFF") // 背景色
  .borderRadius(8)       // 圆角
  .onClick(() => {       // 点击事件
    console.log("按钮被点击了");
  })

4.3 布局容器

布局容器用于排列UI元素，就像家里的家具摆放需要遵循一定规则。

常用布局容器：

表格

复制

容器功能适用场景
Column垂直排列子组件垂直布局如表单
Row水平排列子组件水平布局如导航栏
Stack层叠排列子组件卡片、图片叠加文字
List列表布局联系人、商品列表
Grid网格布局相册、图标网格

Column和Row组合：

Column() {
  Text("用户信息")
    .fontSize(20)
    .margin(10)
  
  Row() {
    Image($r("app.media.avatar"))
      .width(50)
      .height(50)
    
    Column() {
      Text("张三")
        .fontWeight(FontWeight.Bold)
      Text("高级工程师")
        .fontSize(14)
        .fontColor("#666666")
    }
    .margin({ left: 10 })
  }
  
  Button("编辑资料")
    .width(120)
    .margin({ top: 20 })
}
.width("100%")
.padding(20)

五、实战案例分析

5.1 计数器应用

需求：创建一个简单计数器，点击按钮增减数字

代码解析：

@Entry
@Component
struct CounterApp {
  // 定义状态变量
  @State count: number = 0
  
  build() {
    Column() {
      // 显示计数值
      Text(`当前计数: ${this.count}`)
        .fontSize(40)
        .margin(30)
        .fontWeight(FontWeight.Bold)
      
      // 按钮行
      Row({ space: 20 }) {
        // 减号按钮
        Button("-")
          .width(80)
          .height(80)
          .fontSize(30)
          .backgroundColor("#F53F3F")
          .onClick(() => {
            this.count-- // 减少计数
          })
        
        // 加号按钮
        Button("+")
          .width(80)
          .height(80)
          .fontSize(30)
          .backgroundColor("#00B42A")
          .onClick(() => {
            this.count++ // 增加计数
          })
      }
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

核心知识点：

  • @State装饰器：count变化时自动更新UI
  • Column和Row布局：垂直和水平排列组件
  • 事件处理：onClick响应按钮点击
  • 组件属性：设置尺寸、颜色等样式

5.2 待办事项列表

需求：创建一个简单的待办事项列表，支持添加和删除任务

代码解析：

@Entry
@Component
struct TodoApp {
  @State todos: string[] = ["学习ArkTS基础", "开发第一个应用"]
  @State newTodo: string = ""
  
  build() {
    Column() {
      Text("待办事项")
        .fontSize(24)
        .margin(10)
      
      // 输入框和添加按钮
      Row() {
        TextInput({ placeholder: "输入新任务" })
          .width("70%")
          .onChange((value) => {
            this.newTodo = value
          })
        
        Button("添加")
          .width("25%")
          .onClick(() => {
            if (this.newTodo) {
              // 添加新任务
              this.todos.push(this.newTodo)
              // 清空输入框
              this.newTodo = ""
            }
          })
      }
      
      // 待办事项列表
      List() {
        ForEach(this.todos, (item, index) => {
          ListItem() {
            Row({ space: 10 }) {
              Text(item)
                .flexGrow(1)
              
              Button("删除")
                .width(60)
                .fontSize(14)
                .backgroundColor("#F53F3F")
                .onClick(() => {
                  // 删除任务
                  this.todos.splice(index, 1)
                })
            }
            .padding(10)
          }
        })
      }
      .width("100%")
      .margin({ top: 10 })
    }
    .width("100%")
    .padding(15)
  }
}

核心知识点：

  • 数组操作：push添加元素，splice删除元素
  • List和ListItem：创建可滚动列表
  • ForEach：循环渲染列表项
  • TextInput：文本输入与双向绑定

六、常见错误与最佳实践

6.1 初学者常见错误

类型错误：

// 错误示例
let age: string = 25; // 类型不匹配

// 正确示例
let age: number = 25; // 类型匹配

状态更新错误：

// 错误示例
@State list: string[] = ["A", "B", "C"];

// 直接修改数组元素不会触发UI更新
this.list[0] = "D";

// 正确示例
// 创建新数组触发UI更新
this.list = this.list.map((item, index) => 
  index === 0 ? "D" : item
);

布局嵌套过深：

// 不推荐：嵌套过深
Column() {
  Row() {
    Column() {
      Row() {
        Text("嵌套过深")
      }
    }
  }
}

// 推荐：扁平化布局
Column() {
  Row() {
    Text("扁平化布局")
  }
}

6.2 性能优化建议

减少重渲染：

  • 合理使用状态装饰器，避免不必要的状态提升
  • 使用@Cacheable缓存复杂组件
  • 列表使用LazyForEach代替ForEach实现懒加载

优化示例：

// 优化前：每次滚动都创建新组件
List() {
  ForEach(items, (item) => {
    ListItem() {
      ComplexComponent({ data: item })
    }
  })
}

// 优化后：缓存组件实例
List() {
  LazyForEach(items, (item) => item.id, (item) => {
    ListItem() {
      @Cacheable
      ComplexComponent({ data: item })
    }
  })
}

资源管理：

  • 及时释放定时器和监听器
  • 图片使用合适分辨率，避免过大图片
  • 复杂计算使用Worker线程

6.3 代码规范

命名规范：

  • 组件名：PascalCase（首字母大写）
  • 函数名：camelCase（首字母小写，后续单词首字母大写）
  • 变量名：camelCase
  • 常量名：UPPER_SNAKE_CASE（全大写，下划线分隔）

代码格式：

  • 使用4个空格缩进
  • 每行代码不超过80个字符
  • 组件属性每行一个，提高可读性
  • 适当添加空行分隔逻辑块

七、学习资源与进阶路径

7.1 社区资源

鸿蒙开发燾啊的动态 - 哔哩哔哩

文档：

  • 最全面的学习资料
  • 详细语法说明

7.2 进阶学习路径

阶段一：基础掌握（1-2个月）

  • 完成官方Codelabs基础案例
  • 掌握ArkTS语法和基础组件
  • 开发简单应用如计数器、待办列表

阶段二：技能提升（2-3个月）

  • 学习状态管理高级特性
  • 掌握动画和交互效果
  • 开发包含网络请求的应用

阶段三：实战能力（3-4个月）

  • 学习分布式能力开发
  • 掌握性能优化技巧
  • 开发完整应用并上架

7.3 推荐练习项目

初级项目：

  • 个人名片应用
  • 简易计算器
  • 天气显示应用

中级项目：

  • 备忘录应用
  • 音乐播放器
  • 新闻阅读器

高级项目：

  • 社交应用
  • 电商应用
  • 智能家居控制中心

结语：持续学习与成长

ArkTS作为鸿蒙开发的核心语言，为开发者提供了简洁高效的开发体验。通过本文的学习，你已经掌握了ArkTS的基础知识和核心特性，能够开发简单的鸿蒙应用。

学习编程是一个持续探索的过程，建议：

  • 定期查看官方文档，了解最新特性
  • 参与开源项目，积累实战经验
  • 加入开发者社区，与其他开发者交流
  • 关注鸿蒙生态发展，把握技术趋势

​

avatar
文章
阅读
粉丝