鸿蒙 Next 技能时间银行 App 开发实战：技能市场 + 时间余额 + 交换系统

作者：duluo
开发工具：DevEco Studio
语言框架：ArkTS + ArkUI
字数：约 9500 字

---

目录

1. 引言
2. 产品概念与数据模型
3. 两 Tab 架构设计
4. 技能市场与分类筛选
5. 时间余额系统
6. 技能交换流程
7. 余额不足检测
8. 连续零错误纪录
9. 第四十四款 App 全景回顾
10. 结语

---

1. 引言

1.1 时间银行的概念

时间银行是一种以"时间"为货币的交换系统。你教别人 1 小时，赚 1 小时；别人教你 1 小时，花 1 小时。

传统货币交换的是"价值"，时间银行交换的是"时间"。摄影入门需要 2 小时，编程基础需要 3 小时——不同技能有不同的"时间价格"。

1.2 第四十四款 App

App 数量：    44
代码总行数：  ~21,700 行
编译错误数：  ~315 个
博客总字数：  ~440,000 字
技术博客数：  44 篇

---

2. 产品概念与数据模型

2.1 功能需求

• 浏览 10 种技能
• 6 个分类标签
• 时间余额 5 小时
• 交换技能消耗时间

2.2 数据模型

interface Skill {
  id: number; name: string; emoji: string; provider: string;
  desc: string; hours: number; tag: string;
}

hours 是核心字段——技能需要的时间。

---

3. 两 Tab 架构

Tab	图标	功能
0	🏪	市场 — 浏览技能
1	⏰	时间 — 余额 + 已预约

---

4. 技能市场

6 个分类标签覆盖 10 种技能。卡片展示技能名、提供者、时长、描述。

4.1 时长展示

Text(s.hours + 'h').fontSize(18).fontColor(C.primary)

金色大字显示小时数。

---

5. 时间余额系统

@State myBalance: number = 5;

初始 5 小时。每次交换扣除对应小时。

我的 Tab 展示余额和已预约列表。

---

6. 交换流程

exchangeSkill(id: number, hours: number): void {
  if (this.myBalance < hours) { promptAction.showToast({ message: '⏳ 时间余额不足' }); return; }
  this.exchanges = [id, ...this.exchanges];
  this.myBalance -= hours;
}

三步：余额检查 → 记录交换 → 扣减余额。余额不足时 Toast 提示。

---

7. 余额不足检测

} else if (this.myBalance < s.hours) {
  Text('⏳ 时间不足').fontSize(13).fontColor(C.textMuted)
}

卡片按钮三态：可交换（橙色按钮）、已预约（绿色文字）、时间不足（灰色文字）。

---

8. 连续零错误

本 App 是系列中连续第 10 款零错误 App（App 35-44）。

---

9. 第四十四款 App 全景

指标	数值
代码行数	251 行
编译错误数	0 个
技能数	10 种
分类	5 个
初始余额	5 小时

---