鸿蒙应用开发设计报告

一、实验项目概述

项目名称：单词测试APP（Word Learning App）

开发环境：

操作系统：HarmonyOS

开发工具：DevEco Studio 5.1.0

编程语言：ArkTS/TypeScript

API版本：HarmonyOS API 18+

项目简介：
本项目是一款面向英语学习者的单词学习应用，主要功能包括单词学习、测试练习、学习记录管理等。应用通过卡片式设计展示单词，提供例句学习、选择题测试等功能，帮助用户有效记忆英语单词。应用面向广大英语学习者，特别是学生和需要提升英语词汇量的用户群体。

二、页面设计与布局思路

2.1设计理念

学习导向：以清晰直观的方式呈现单词信息，减少干扰

交互友好：通过即时反馈和进度可视化增强学习体验

视觉统一：采用一致的配色方案和组件风格，主色调为蓝色系

渐进式学习：从单词认知到应用测试的完整学习流程

2.2布局实现

主要布局组件使用：

1. Column+Row组合布局：用于构建页面主体结构
2. Stack布局：实现重叠效果，如我的页面中的背景圆形
3. Scroll组件：实现内容滚动，确保在小屏幕设备上的可用性
4. Grid布局：单词列表页的卡片网格排列
5. Tabs组件：底部导航栏实现页面切换
6. Refresh组件：下拉刷新功能实现
7. ForEach循环渲染：动态生成单词卡片和选项

布局逻辑：

• 首页（Index）：采用Tabs容器管理三个主要页面
• 答题页（answerPage）：纵向布局，依次显示进度、统计、题目、选项和控制按钮
• 列表页（ListPage）：瀑布流式卡片布局，两列并排显示单词
• 我的页面（MyPage）：上半部分个人信息展示，下半部分功能列表

首先进入单词测试APP进入到登录页面，在登录注册页面使用text，textinput，button组件和column等布局实现了页面的渲染。登录注册首页鸿蒙首选项数据存储来实现注册对账户密码的存储。实现了首选项的增改查功能。在输入账户或密码时实现了表单验证功能，如：输入不能为空、密码错误等提示。当用户正确输入账户密码后进入以Tabs组件为基础搭建的底部栏为答题、列表、我的index页面，首先默认显示答题页面。答题页面顶部是答题状态部分，中间是单词选择部分，底部是按钮操控和结果部分。顶部答题状态部分，当开始测试是进度条会根据答题随时跟进，还包括准确率、正确数、总题数、用时功能。中间答题部分是英语单词和对应四个选项答案组成，根据单词选择对应答案。当选择后会给出结果效果错误是红色框，正确是绿色框。无论正确错误3秒后自动刷新到下一个单词的答题。底部控制按钮可以控制开始测试，结束测试，重新测试功能。测试结束后在控制按钮底部会总结答题情况并记录到我的页的打卡记录里。列表页面是多行2列的可滑动列表。实现了下拉刷新（列表随机刷新数据）功能，顶部记录单词卡片加载数，从上往下翻会逐渐加载单词卡片，点击卡片也会跳转到单词测试页面进行测试。最后是我的页面包括头像，昵称，打卡记录页，检查更新页，关于页和退出登录按钮。

2.3界面截图

三、功能实现与技术要点

3.1核心功能说明

用户认证系统：登录、注册、退出登录

单词学习系统：

单词卡片浏览（图片+单词+例句）

随机顺序展示，避免记忆定式

测试练习系统：

选择题测试（四选一）

自动计时和正确率计算

即时反馈（正确/错误提示）

学习记录管理：

测试记录保存和查看

详细答题记录分析

统计图表和数据可视化

数据持久化：

用户偏好设置存储

学习记录本地保存

界面交互：

下拉刷新和加载更多

滑动切换页面

弹窗和提示交互

3.2关键代码展示与说明

关键代码段1：答题逻辑实现

selectAnswer(answer: string) {

  // 防止重复作答

  if (this.isAnswered || this.answeredQuestions.has(this.currentQuestionIndex)) {

    return;

  }

  this.selectedAnswer = answer;

  this.isAnswered = true;

  this.answeredQuestions.add(this.currentQuestionIndex);

  // 计算该题用时

  const timeSpent = Math.floor((Date.now() - this.currentQuestionStartTime) / 1000);

  // 停止当前题目的计时

  this.stopTimer();

  this.isCorrect = (answer === this.correctAnswer);

  if (this.isCorrect) {

    this.correctCount += 1;

  }

  this.questionCount += 1;

  this.accuracy = this.correctCount > 0 ?

    Math.round((this.correctCount / this.questionCount) * 100) : 0;

  // 记录本题的答案

  const answerRecord: AnswerRecord = {

    questionIndex: this.currentQuestionIndex + 1,

    word: this.words,

    selectedAnswer: answer,

    correctAnswer: this.correctAnswer,

    isCorrect: this.isCorrect,

    timeSpent: timeSpent

  };

  this.currentTestRecord.answers.push(answerRecord);

说明：此代码实现了答题的核心逻辑，包括：

防止重复作答的检查机制

答题用时计算

正确率实时更新

答题记录的数据结构管理

自动跳转到下一题的交互流程

关键代码段2：测试记录保存

说明：此代码实现

private async saveTestRecord() {

  try {

    // 获取现有记录

    let existingRecords: TestRecord[] = [];

    const savedRecords = await PreferenceUtil.getPreferenceValue('test_records', '[]');

    if (typeof savedRecords === 'string') {

      existingRecords = JSON.parse(savedRecords);

    }

    // 添加新记录

    existingRecords.unshift(this.currentTestRecord);

    // 只保留最近50条记录

    if (existingRecords.length > 50) {

      existingRecords = existingRecords.slice(0, 50);

    }

    // 保存到首选项

    await PreferenceUtil.putPreferenceValue('test_records', JSON.stringify(existingRecords));

    // 同时保存到AppStorage供其他页面访问

    AppStorage.setOrCreate('test_records', existingRecords);

  } catch (error) {

    console.error('保存测试记录失败:', error);

  }

了学习记录的持久化存储，特点包括：

使用首选项（Preferences）进行数据存储

记录数量限制（最近50条）

双重存储策略（AppStorage+Preferences）

错误处理和异常捕获

3.3技术难点与解决方案

难点1：状态管理与数据同步

问题：多页面间数据共享和状态同步困难

解决方案：

使用AppStorage进行全局状态管理

设计统一的数据接口（TestRecord,AnswerRecord）

采用观察者模式，组件响应式更新

难点2：计时器管理与内存泄漏

问题：多个计时器同时运行可能导致资源泄露

解决方案：

实现startTimer()和stopTimer()配对使用

在组件生命周期中清理计时器

使用setTimeout进行延迟操作，避免阻塞主线程

难点3：列表性能优化

问题：大量单词数据渲染导致性能下降

解决方案：

实现分页加载（loadMore机制）

使用Scroll组件的滚动优化

采用虚拟列表思想，只渲染可视区域内容

四、创新点与自主设计

智能答题反馈系统：

根据答题正确率动态改变统计卡片颜色

答题后显示正确答案对比

2秒自动跳转，平衡学习节奏

学习进度可视化：

实时更新的进度条

彩色统计卡片展示关键数据

测试完成后的成绩总结弹窗