【鸿蒙HarmonyOS Next App实战开发】古诗书院 应用技术实践

应用下载地址:

https://appgallery.huawei.com/app/detail?id=com.liuhaikang.poetry

应用截图:

介绍

古诗书院是一款学习古诗词的应用,包括唐诗三百首、宋词三百首、水墨唐诗等众多诗词。 主要功能

一、学习诗词 不同的朝代和内容分类,都有对应诗词 查看详情:部分诗词包含原文、拼音和翻译 快速搜索:按标题、作者或内容查找

二、收藏与记录 收藏喜欢的诗词,方便随时查看 标记已背诵的诗词,记录学习进度 查看最近背诵记录,了解学习情况

三、朗读功能 点击朗读,听诗词发音 帮助理解诗词韵律

四、学习统计 查看使用天数 查看已背诵的诗词数量 查看学习进度

五、个性化设置 选择喜欢的字体 设置是否开启振动触感 设置是否开启点击音效

六、适用人群 适合诗词爱好者,帮助赏析诗词。

技术架构

开发框架

  • 语言: ArkTS (TypeScript的超集)

  • UI框架: ArkUI声明式开发范式

  • 状态管理: AppStorage + @State/@StorageLink

  • 数据存储: AppStorage + PersistentStorage

核心模块

  1. 数据管理

应用采用模块化的数据结构,将诗词数据按分类组织:

  • 小学1-6年级教材诗词(12个分类)

  • 经典诗词(唐诗三百首、宋词、楚辞等)

  • 蒙学经典(三字经、弟子规、百家姓等)

所有数据通过 `PoetryUtils.ts` 统一管理,提供按ID、分类、关键词搜索等功能。

  1. 字体管理

实现了自定义字体管理器 `FontManager`,支持:

  • 系统字体和自定义字体动态加载

  • 字体注册和生命周期管理

  • 支持宋体、楷体等多种字体切换

```typescript

// 字体加载示例

await fontManager.loadFont('song');

const fontFamily = fontManager.getFontFamilies('song');

```

  1. 音频服务

基于 `@ohos.multimedia.media` 实现了完整的音频播放服务:

  • 背景音乐:使用AVPlayer实现循环播放,支持播放状态管理

  • 音效播放:点击音效、成功/错误提示音

  • TTS朗读:集成系统TTS引擎,支持诗词语音朗读

音频服务采用单例模式,确保全局唯一实例,并通过状态回调机制管理播放生命周期。

  1. 本地存储

使用 `StorageService` 封装了所有存储操作:

  • 背诵记录: 使用Set存储已背诵诗词ID,支持时间戳记录

  • 收藏功能: 独立的收藏Set管理

  • 学习记录: 练习记录、接龙记录等历史数据

  • 用户设置: 字体、音效、振动等偏好设置

  1. 拼音对齐算法

实现了智能的拼音与汉字对齐算法,核心逻辑:

  1. 按标点符号(,。?!;)分割诗句

  2. 提取每个片段对应的拼音

  3. 将拼音与汉字逐字对齐,处理标点符号

```typescript

// 拼音对齐核心方法

alignPinyinWithCharacters(line: string, pinyinLine: string): ProcessedCharacter[]

```

技术亮点

  1. 响应式设计

通过 `ResponsiveFont` 工具类实现自适应布局:

  • 根据屏幕宽度动态调整字体大小

  • 平板设备优化显示效果

  • 支持多设备适配

  1. 动画系统

使用ArkUI的 `animateTo` API实现丰富的动画效果:

  • 图标跳动动画(首页功能按钮)

  • 音乐按钮旋转动画(随播放状态)

  • 页面切换过渡动画

  1. 状态同步

通过 `@StorageLink` 实现跨组件状态同步:

  • 背诵状态全局同步

  • 字体设置实时生效

  • 收藏状态即时更新

  1. 性能优化
  • **懒加载**: 字体按需加载,减少启动时间

  • **数据缓存**: 诗词列表在内存中缓存

  • **资源管理**: 音频播放器及时释放,避免内存泄漏

开发经验总结

  1. 模块化设计

将功能拆分为独立的服务类(AudioService、StorageService、FontManager),便于维护和测试。

  1. 类型安全

充分利用TypeScript的类型系统,定义清晰的接口(Poetry、ProcessedLine等),减少运行时错误。

  1. 用户体验
  • 点击反馈:触觉振动 + 音效

  • 加载状态:优雅的加载动画

  • 错误处理:友好的错误提示

  1. 代码规范
  • 统一的命名规范

  • 完善的注释说明

  • 清晰的代码结构

未来优化方向

  1. 数据云端同步: 支持多设备数据同步

  2. AI功能: 智能推荐、个性化学习路径

  3. 社交功能: 学习打卡、排行榜

  4. 离线语音识别: 支持语音背诵检测

总结

这个项目展示了HarmonyOS应用开发的完整流程,从数据管理、UI设计到多媒体处理,涵盖了现代移动应用开发的核心技术点。通过合理的架构设计和模块化开发,实现了功能丰富、性能优良的诗词学习应用。

技术栈: HarmonyOS + ArkTS + ArkUI

开发工具: DevEco Studio

项目规模: 约5000+行代码,包含70+个诗词数据文件

相关推荐
哈哈你是真的厉害14 小时前
Windows系统通过wsl Ubuntu24.04本地安装OpenJiuwen Studio的完整安装教程
人工智能·华为·ai·大模型·agent·智能体·openjiuwen
胡琦博客14 小时前
基于开发者空间鸿蒙云手机体验鸿蒙开发
华为·智能手机·harmonyos
namehao4651 天前
从HarmonyOS基础认证到赋能资源建设:我的鸿蒙开发进阶之路
华为·harmonyos
航Hang*1 天前
第十五章:网络系统建设与运维(高级)—— 总复习
网络·华为·ensp·期末·复习
前端不太难1 天前
用一张“状态扩散图”,定位 RN 列表性能风险
react.js·harmonyos
坚持学习前端日记1 天前
桌面端与移动端JS桥技术对比及跨平台实现
开发语言·javascript·harmonyos
彭不懂赶紧问1 天前
鸿蒙NEXT开发浅进阶到精通15:从零搭建Navigation路由框架
前端·笔记·harmonyos·鸿蒙
钟睿2 天前
HarmonyOS弹窗+bindSheet半模态+浮层通用解决方案覆盖全业务场景
android·harmonyos
ChinaDragon2 天前
HarmonyOS:管理Cookie及数据存储
harmonyos