第10次课

周子力大约 6 分钟教学文档HarmonyOS

鸿蒙应用开发课总结

1. TypeScript（TS）语言详解（含示例）

TypeScript 是 JavaScript 的超集，添加了静态类型系统，极大提升了大型应用的可维护性与开发体验，是鸿蒙 ArkTS 开发的核心语言基础。

1.1 基础概念

TypeScript 在编译时进行类型检查，运行时仍输出标准 JavaScript，兼容所有 JS 环境。它解决了 JS 中“运行时才发现类型错误”的痛点。

示例：
在 JavaScript 中：

function add(a, b) { return a + b; }
console.log(add("5", 3)); // 输出 "53" —— 潜在逻辑错误

在 TypeScript 中：

function add(a: number, b: number): number {
  return a + b;
}
console.log(add("5", 3)); // 编译时报错：Argument of type 'string' is not assignable to parameter of type 'number'.

1.2 核心语法与类型系统

类型	示例	说明
布尔类型	`let isActive: boolean = true;`	常用于状态控制
数字类型	`let age: number = 25;`	支持整数和浮点数
字符串类型	`let name: string = "Alice";`	支持模板字符串：`Hello, ${name}`
数组类型	`let scores: number[] = [85, 92, 78];` 或 `let names: Array<string> = ["Tom", "Jerry"];`	两种写法等价
对象类型	`let person: { name: string; age: number } = { name: "Bob", age: 30 };`	明确定义属性结构
联合类型	`let status: string	number = "active";`
枚举类型	`enum Direction { Up, Down, Left, Right }` `let dir: Direction = Direction.Up;`	提升代码可读性

1.3 函数定义与调用

// 带类型注解的函数
function greet(name: string, greeting: string = "Hello"): string {
  return `${greeting}, ${name}!`;
}

console.log(greet("Alice")); // 输出：Hello, Alice!
console.log(greet("Bob", "Hi")); // 输出：Hi, Bob!

// 箭头函数
const multiply = (x: number, y: number): number => x * y;
console.log(multiply(4, 5)); // 20

// 可选参数与剩余参数
function logUser(id: number, name?: string, ...tags: string[]) {
  console.log(`ID: ${id}, Name: ${name || "Unknown"}, Tags: ${tags.join(", ")}`);
}
logUser(1, "Alice", "admin", "premium"); // ID: 1, Name: Alice, Tags: admin, premium

1.4 类与面向对象特性

// 基类
class Animal {
  protected name: string;

  constructor(name: string) {
    this.name = name;
  }

  makeSound(): void {
    console.log("Some generic sound");
  }
}

// 继承
class Dog extends Animal {
  private breed: string;

  constructor(name: string, breed: string) {
    super(name); // 调用父类构造器
    this.breed = breed;
  }

  // 重写父类方法（多态）
  makeSound(): void {
    console.log(`${this.name} says: Woof!`);
  }

  // 封装：私有方法
  private getBreedInfo(): string {
    return `Breed: ${this.breed}`;
  }

  public displayInfo(): void {
    console.log(this.getBreedInfo());
  }
}

const myDog = new Dog("Buddy", "Golden Retriever");
myDog.makeSound(); // 输出：Buddy says: Woof!
myDog.displayInfo(); // 输出：Breed: Golden Retriever

✅ 为什么重要？
鸿蒙 ArkTS 中的页面组件、状态管理、服务类等，大量使用类与继承结构。掌握 TS 类系统，是构建可复用、可维护 UI 组件的基础。

2. HarmonyOS 应用开发全流程（含示例）

HarmonyOS 应用开发以“一次开发，多端部署”为核心理念，使用 ArkTS（TypeScript 的增强版）作为主要开发语言。

2.1 工程架构

一个标准鸿蒙工程结构如下：

entry/
├── src/
│   ├── main/
│   │   ├── ets/              # ArkTS 源码
│   │   │   └── entryability/ # 应用入口
│   │   │   └── pages/        # 页面文件（.ets）
│   │   ├── resources/        # 资源文件
│   │   │   ├── base/         # 默认资源
│   │   │   │   ├── element/  # 字符串、颜色、样式
│   │   │   │   └── media/    # 图片、音频
│   │   │   └── layout/       # 布局文件（.json5）
│   │   └── module.json5      # 模块配置（权限、页面声明）

示例：module.json5 声明页面

{
  "module": {
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "pages": ["pages/Index.ets"]
      }
    ]
  }
}

2.2 组件与资源

布局文件（.json5）：定义页面结构（类似 XML/HTML）
样式文件（.css）：控制组件外观
资源文件（.png, .json, .string）：统一管理图片、文本

示例：Index.ets 页面布局

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Text(this.message)
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
      Button('Click Me')
        .onClick(() => {
          this.message = 'Button clicked!';
        })
    }
    .padding(20)
  }
}

✅ 关键点：@State 标记的变量是响应式数据，修改后 UI 自动刷新。

2.3 API 使用示例

功能	API	示例
网络请求	`fetch`	```ts
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => this.userData = data);

| **本地存储（首选项）** | `@ohos.data.preferences` | ```ts
import preferences from '@ohos.data.preferences';
const prefs = await preferences.getPreferences(this.context, 'user_prefs');
await prefs.put('username', 'Alice');
const name = await prefs.getString('username', '');
``` |
| **关系型数据库（RelationalData）** | `@ohos.data.relationalStore` | 用于结构化数据存储，如用户信息表，支持 SQL 查询 |

> 💡 **注意**：你提到“没有讲后台与数据库设计”，但在实际项目中，建议采用 **MVVM 架构**：  
> - **Model**：数据模型（如 `User` 类）  
> - **View**：UI 组件（`@Component`）  
> - **ViewModel**：连接两者，处理逻辑与数据绑定（如 `@State` + `@Watch`）

#### **2.4 开发流程总结（带示例）**

1. **需求分析**：开发一个“待办清单”应用 → 需要添加、删除、标记完成。
2. **界面设计**：使用 `List` + `Row` + `Text` + `Button` 组合。
3. **数据模型**：
   ```ts
   interface Todo {
     id: number;
     text: string;
     completed: boolean;
   }

数据持久化：使用首选项存储列表：

await prefs.putJSON('todos', JSON.stringify(todoList));

编码：使用 ArkTS + ArkUI 构建响应式列表。
测试：模拟点击、输入，验证数据更新与 UI 反馈。
打包发布：使用 DevEco Studio → Build → Generate HAP → 发布到 AppGallery Connect。

⚠️ 注意：你提到“打包发布没讲”，但这是上线必经步骤，建议学习 HAP（HarmonyOS Ability Package） 的签名、多端适配、性能优化。

3. ArkUI 组件与数据流动详解（核心！）

ArkUI 是鸿蒙的声明式 UI 框架，一切皆组件，数据驱动 UI。

3.1 组件组合 = 累积木

// 自定义组件：TodoItem
@Component
struct TodoItem {
  @Prop item: Todo;
  @Link isCompleted: boolean; // 双向绑定

  build() {
    Row() {
      Checkbox()
        .checked(this.isCompleted)
        .onChange((value) => {
          this.isCompleted = value; // 修改会同步到父组件
        })
      Text(this.item.text)
        .strokeColor(this.isCompleted ? Color.Gray : Color.Black)
        .textDecoration(this.isCompleted ? TextDecoration.LineThrough : TextDecoration.None)
      Button('Delete')
        .onClick(() => {
          // 通知父组件删除
          this.onDelete?.();
        })
    }
    .padding(10)
  }
}

3.2 数据流动三大机制

机制	作用	示例
@State	组件内部状态	`@State count: number = 0;`
@Prop	父 → 子单向传递	`@Prop message: string;`
@Link	子 ↔ 父双向绑定	`@Link isActive: boolean;`
@Provide / @Consume	跨层级传递	用于全局状态（如主题、用户信息）
@Watch	监听状态变化	`@Watch('count') onCountChange(newVal) { ... }`

示例：父子组件双向通信

// 父组件
@Entry
@Component
struct Parent {
  @State todoList: Todo[] = [{ id: 1, text: '学习ArkUI', completed: false }];

  build() {
    List() {
      ForEach(this.todoList, item => {
        TodoItem({ item, isCompleted: $item.completed, onDelete: () => {
          this.todoList = this.todoList.filter(t => t.id !== item.id);
        }})
      }, item => item.id)
    }
  }
}

✅ 关键：$item.completed 是“状态引用”，修改子组件中的 isCompleted，父组件的 todoList 会自动更新！

3.3 实战技巧：如何“得心应手”？

✅ 组件拆分原则：一个组件只做一件事（如 Header、ListItem、Footer）
✅ 数据集中管理：复杂应用使用 @Provide + @Consume 或状态管理库（如 Redux 模式）
✅ 事件驱动：避免直接操作 DOM，通过 onClick、onChange 触发状态变更
✅ 响应式思维：你改数据，UI 自动变 —— 这是 ArkUI 的核心哲学

🎯 终极目标：当你修改一个 @State 变量，整个 UI 自动重绘，你无需手动操作 DOM —— 这就是声明式 UI 的强大之处。

✅ 总结：学习路径建议

阶段	内容	建议行动
1	掌握 TypeScript	用 TS 重写 3 个 JS 小项目（计算器、待办列表）
2	理解 ArkUI 组件	用 `Text`, `Button`, `List`, `Column`, `Row` 搭建一个完整页面
3	实践数据绑定	实现一个“计数器 + 显示当前值”的父子组件联动
4	使用本地存储	将待办事项保存到首选项，重启应用后仍保留
5	构建完整应用	开发一个“天气查询”应用：调用 API → 显示 → 存储历史

💡 提示：鸿蒙官方文档（HarmonyOS Developeropen in new window）是你的最佳伙伴，配合 DevEco Studio 的实时预览功能，边写边看，进步飞快。