鸿蒙原生应用实战（一）：从零搭建「单词达人」——项目规划与技术选型

再见658

203人浏览 · 2026-06-13 08:30:20

再见658 · 2026-06-13 08:30:20 发布

鸿蒙原生应用实战（一）：从零搭建「单词达人」——项目规划与技术选型

前言

随着鸿蒙生态的快速发展，越来越多的开发者开始投身鸿蒙原生应用开发。本文将带你从零开始，完整搭建一个鸿蒙原生英语单词学习应用「单词达人」。作为系列的第一篇，我们聚焦项目规划、技术选型与整体架构设计。

本系列基于 HarmonyOS API 23（Stage模型 + ArkTS），DevEco Studio 开发环境。

一、为什么选择「单词单词学习」这个题材？

在决定做什么应用时，我考虑了以下因素：

数据驱动 — 单词应用天然需要大量结构化数据，适合展示鸿蒙的数据管理能力
多页面交互 — 首页、词库、详情、测验、个人中心，5个页面覆盖了常见的导航模式
状态持久化 — 学习进度、收藏标记需要本地存储，适合展示 PersistentStorage / AppStorage
实用价值 — 英语学习是刚需，应用做完自己也能用

最终确定的应用名为 「单词达人」，目标用户为大学生和英语学习者。

二、技术栈选型

2.1 框架：Stage 模型

鸿蒙应用有两种开发模型：

FA模型（Feature Ability）：早期的轻量模型
Stage模型：鸿蒙3.0后主推的模型，支持多实例、组件化

本项目选择 Stage模型，因为它是官方推荐的演进方向，且 API 23 及以上默认使用 Stage 模型。

2.2 语言：ArkTS

ArkTS 是鸿蒙的声明式 UI 开发语言，基于 TypeScript 扩展。相比 JS 开发，ArkTS 提供了：

强类型检查
装饰器语法（@Component、@State、@Entry 等）
严格的编译时检查（arkts-no-untyped-obj-literals 等规则）

特别注意：鸿蒙 API 23 启用了多项 ArkTS 严格模式规则，包括 arkts-no-untyped-obj-literals（禁止无类型对象字面量）、arkts-no-noninferrable-arr-literals（禁止不可推断类型数组字面量）。这些规则在编码时需要格外留意。

2.3 SDK 版本

项目配置如下：

// build-profile.json5
{
  "products": [
    {
      "name": "default",
      "targetSdkVersion": "6.1.1(24)",
      "compatibleSdkVersion": "6.1.0(23)",
      "runtimeOS": "HarmonyOS"
    }
  ]
}

compatibleSdkVersion: 23 — 兼容 API 23
targetSdkVersion: 24 — 目标 API 24

2.4 路由方案

API 23 下路由使用 @ohos.router：

import router from '@ohos.router';

// 跳转
router.pushUrl({ url: 'pages/WordDetailPage', params: { wordId: 1 } });

// 返回
router.back();

// 接收参数
const params = router.getParams() as Record<string, Object>;

⚠️ 注意：不要使用 @kit.AbilityKit 导出的 router，API 23 下该模块不导出 router。

三、整体架构设计

3.1 页面结构

entry/src/main/ets/pages/
├── Index.ets              ← 首页
├── WordListPage.ets       ← 词库列表
├── WordDetailPage.ets     ← 单词详情
├── QuizPage.ets           ← 单词测验
└── ProfilePage.ets        ← 个人中心

3.2 数据模型层

单独抽出一个 models/WordData.ets 文件，负责：

数据类型定义（WordItem、QuizQuestion、UserStats）
词库数据存储
工具函数（getAllWords、generateQuiz、getWordOfDay）

3.3 数据流

用户交互 → 组件方法 → AppStorage(持久化) ←→ 各页面读取
                          │
                    JSON序列化
                          │
                    本地存储

3.4 资源文件规划

resources/base/element/
├── string.json    ← 字符串资源（所有用户可见文本）
├── color.json     ← 颜色资源（主色、背景色、文字色）
└── float.json     ← 字号/尺寸资源

四、页面功能规划

页面	核心功能	交互复杂度
首页	学习进度、每日一词、复习提醒	⭐⭐⭐
词库列表	5分类标签、搜索、掌握状态	⭐⭐⭐
单词详情	音标释义、例句展开、4档掌握标记	⭐⭐
单词测验	10题随机出题、即时判对错	⭐⭐⭐⭐
个人中心	学习统计、每日目标、清除数据	⭐⭐

首页功能详解

首页是最重要的流量入口，我们设计了以下模块：

连续学习提示 — 展示用户连续学习天数，带 🔥 表情
学习进度条 — 已学/总数百分比，带可视化进度条
快速统计 — 已学单词数、正确率、连学天数三列
复习提醒 — 如果有需要复习的单词，显示提醒条
每日一词 — 基于日期算法每天展示不同单词，可点击跳转详情

词库分类

本项目覆盖5个单词分类：

分类	说明	词库量
CET-4	大学英语四级	~530词
CET-6	大学英语六级	10词
考研	研究生英语	10词
TOEFL	托福考试	8词
IELTS	雅思考试	7词

五、项目目录结构

最终项目文件结构如下：

MyApplication/
├── AppScope/
│   └── resources/base/element/string.json  ← 应用名「单词达人」
├── entry/
│   └── src/main/
│       ├── ets/
│       │   ├── entryability/EntryAbility.ets
│       │   ├── models/
│       │   │   └── WordData.ets           ← 数据模型 + 词库
│       │   └── pages/
│       │       ├── Index.ets
│       │       ├── WordListPage.ets
│       │       ├── WordDetailPage.ets
│       │       ├── QuizPage.ets
│       │       └── ProfilePage.ets
│       └── resources/
│           ├── base/element/string.json
│           ├── base/element/color.json
│           ├── base/element/float.json
│           └── base/profile/main_pages.json
├── build-profile.json5
└── local.properties

六、开发环境搭建要点

安装 DevEco Studio — 从华为开发者官网下载
配置 Node.js — DevEco Studio 内置了 Node，路径在 tools/node/node.exe
配置 hvigor — 构建工具在 tools/hvigor/bin/hvigorw.js

构建命令：

node.exe hvigorw.js --mode module -p module=entry@default \
  -p product=default -p requiredDeviceType=phone assembleHap \
  --analyze=normal --parallel --incremental --daemon