第五款 HarmonyOS 上架作品 奇趣故事匣 来了

2025-07-05 15:24:34
109次阅读
0个评论

第五款 HarmonyOS 上架作品 奇趣故事匣 来了

前言

北京时间2025年7月4日 ,青蓝逐码组织第五款鸿蒙元服务 奇趣故事匣 也发布上架了,奇趣故事匣 是一个奇幻故事类的应用,目前包含的核心功能有 奇趣故事分类、浏览、语音播报,还包括有华为静默登录,它也是我们青蓝逐码组织的一个小伙伴独立开发前端+后端的作品,耗时一个多月的业余时间完成🎉。

效果一览

image-20250704224029475

开发故事

这次作品是一个小伙伴独立完成开发并且上架的,作战能力很强,这里我们可以分享下他开发的历程故事。

建立作品选型

我们在立项前也会简单的做个技术沟通,确保目标和方向是正确并且可行的。

image-20250704225828058


技术方案讨论

如果小伙伴不懂后端,但是执行力强,还可以推荐具体的技术,如端云

image-20250704230027670


程序员的思维 - 记账类APP

传统的记账类太多,很容易引起生理反感

image-20250704230126968

接入了华为的AI朗读

image-20250704231004529

在商讨后期接入大模型,可以让用户自己AI创作故事

image-20250704231204184

思想的碰撞会指引出具体的行动方向

image-20250704231252815


头脑乱掉了,简单的业务给限制住了

image-20250704231633897


实践得真知

image-20250704231717506

开发日志

独立开发就是快,自己一个人噌噌噌的写和改。

image-20250705141417241

上架历程

从提测到真正真正上架,也花了有差不多小半个月时间了

image-20250705141856595

技术说明文档

项目概述

奇趣故事匣是一款基于HarmonyOS开发的故事阅读应用,采用原子化服务(Atomic Service)架构。应用提供故事浏览、分类查看、在线阅读、收藏管理、阅读历史等功能,支持华为账号授权登录。

基本信息

  • 应用名称: 奇趣故事匣
  • 应用类型: 原子化服务 (atomicService)
  • 版本: 1.0.0 (versionCode: 1000000)
  • 兼容SDK版本: 5.0.4(16)
  • 运行系统: HarmonyOS

技术架构

开发框架

  • 开发语言: ArkTS (TypeScript扩展)
  • UI框架: ArkUI
  • 架构模式: Stage模型
  • 组件化: ComponentV2 + @Local状态管理
  • 数据持久化: PersistenceV2
  • 导航: Navigation + NavPathStack

项目结构

FunStoryBox/
├── AppScope/                    ## 应用级配置
│   ├── app.json5               ## 应用配置文件
│   └── resources/              ## 应用级资源
├── entry/                      ## 主模块
│   ├── src/main/
│   │   ├── ets/                ## TypeScript源码
│   │   │   ├── components/     ## 可复用组件
│   │   │   ├── constants/      ## 常量定义
│   │   │   ├── entryability/   ## 应用入口
│   │   │   ├── models/         ## 数据模型
│   │   │   ├── pages/          ## 页面组件
│   │   │   └── utils/          ## 工具类
│   │   ├── module.json5        ## 模块配置
│   │   └── resources/          ## 资源文件
│   └── build-profile.json5     ## 构建配置
├── config/                     ## 签名证书配置
└── build-profile.json5         ## 项目构建配置

核心功能模块

1. 用户认证模块

  • 华为账号授权登录: 集成华为账号Kit,支持OAuth2.0授权流程
  • 自动登录: 应用前台时自动检测登录状态
  • 用户信息管理: 持久化存储用户基本信息

2. 故事内容模块

  • 故事浏览: 支持分类浏览、热门推荐、最新更新
  • 故事详情: 展示故事基本信息、章节列表、相关推荐
  • 在线阅读: 章节内容阅读,支持阅读进度记录
  • 搜索功能: 故事标题和内容搜索

3. 个人中心模块

  • 阅读历史: 记录和管理用户阅读记录
  • 收藏管理: 故事收藏和取消收藏
  • 个人信息: 用户资料展示和管理

4. 数据管理模块

  • 网络请求: 封装HTTP工具类,支持GET/POST/DELETE请求
  • 数据模型: 定义完整的业务数据结构
  • 状态管理: 使用@Local和PersistenceV2管理应用状态

主要页面说明

页面路由配置

应用使用Navigation组件进行页面管理,路由配置如下:

页面名称 文件路径 功能描述
Layout pages/Layout.ets 主布局页面,包含底部导航
StoryDetail pages/StoryDetail.ets 故事详情页面
ReadStory pages/ReadStory.ets 故事阅读页面
RecommendList pages/RecommendList.ets 推荐列表页面
CategoryDetail pages/CategoryDetail.ets 分类详情页面
SearchStory pages/SearchStory.ets 故事搜索页面
AuthorDetail pages/AuthorDetail.ets 作者详情页面
ReadHistory pages/ReadHistory.ets 阅读历史页面
FavoriteStory pages/FavoriteStory.ets 收藏故事页面

核心页面架构

1. 主布局页面 (Layout.ets)
  • 底部Tab导航,包含:首页、发现、我的
  • 使用Tabs组件实现页面切换
  • 集成用户信息状态管理
2. 首页 (Home.ets)
  • 分类统计展示
  • 热门故事推荐
  • 最新故事列表
  • 最近阅读记录
  • 下拉刷新功能
3. 发现页面 (Discover.ets)
  • 故事分类浏览
  • 推荐内容展示
4. 个人中心 (Mine.ets)
  • 用户信息展示
  • 阅读历史入口
  • 收藏管理入口

技术特性

1. 组件化开发

  • 可复用组件: PageHeader、SectionTitle、StoryCard、StoryList
  • 组件通信: 使用@Local装饰器实现组件间状态共享
  • 生命周期管理: 合理使用aboutToAppear等生命周期方法

2. 状态管理

  • 全局状态: 使用AppStorageV2管理导航栈
  • 持久化状态: 使用PersistenceV2存储用户信息
  • 响应式更新: @Monitor装饰器监听状态变化

3. 网络通信

  • HTTP封装: 统一的网络请求工具类
  • 错误处理: 完善的网络错误处理机制
  • 数据格式: 支持JSON和form-urlencoded格式

4. 安全特性

  • 应用签名: 配置开发和发布环境的签名证书
  • 权限管理: 申请网络访问权限
  • 数据加密: 集成RSA加密工具

API接口设计

基础配置

主要接口

接口类型 接口路径 功能描述
GET /api/category/totalStoriesCount 获取分类故事统计
GET /api/story/hot 获取热门故事
GET /api/story/latest 获取最新故事
GET /api/story/search 故事搜索
POST /api/user/authorizeLogin 华为账号授权登录
GET /api/user/read/history/latest 获取最近阅读记录
POST /api/favorite/add 添加收藏
DELETE /api/favorite 取消收藏

数据模型

核心实体

用户模型 (User)
interface User {
  id?: string
  username: string
  nickname?: string
  avatar?: string
  status: number
  // ... 其他字段
}
故事模型 (Story)
interface Story {
  id?: number
  title: string
  description?: string
  authorName: string
  coverUrl?: string
  categoryId: number
  wordCount: number
  chapterCount: number
  // ... 其他字段
}
章节模型 (Chapter)
interface Chapter {
  id?: number
  storyId: number
  title: string
  content?: string
  chapterIndex: number
  wordCount: number
  // ... 其他字段
}

总结

目前我们上架的作品也已经达到了五个。

image-20250705142201794

关于青蓝逐码组织

如果你兴趣想要了解更多的鸿蒙应用开发细节和最新资讯甚至你想要做出一款属于自己的应用!欢迎在评论区留言或者私信或者看我个人信息,可以加入技术交流群。

image-20250611211811768

收藏00

登录 后评论。没有帐号? 注册 一个。