鸿蒙生态为开发者提供海量的HarmonyOS模板/组件,助力开发效率原地起飞
一键直达生态市场组件&模板市场 , 快速应用DevEco Studio插件市场集成组件&模板
实战分享:如何基于模板快速开发一款记账应用?本期案例为您解答。
覆盖20+行业,点击查看往期案例汇总贴,持续更新,点击收藏!一键三连!常看常新!
【第7期】金融理财 · 记账应用
一、 概述
1. 行业洞察
1) 行业诉求:
· 功能冗余:普通用户刚需功能简单分类、预算管理、账单总结;部分 APP 堆砌 “投资分析”“信贷推荐” 等功能。
· 用户习惯培养难,留存率低:部分APP页面简陋、广告过多、分类复杂导致用户放弃使用。
· 盈利模式与用户体验博弈: 运营及开发成本依赖广告收益,用户付费意愿弱。
· 数据安全与合规风险凸显。
2) 行业常用三方SDK

说明:“以上三方库及链接仅为示例,三方库由三方开发者独立提供,以其官方内容为准”
2. 案例概览(下载模板)
基于以上行业分析,本期将介绍鸿蒙生态市场金融类行业模板——记账应用模板,为行业提供常用功能的开发案例,模板主要分首页、统计和资产三大模块。
· Stage开发模型 + 声明式UI开发范式。
· 分层架构设计 + 组件化拆分,支持开发者在开发时既可以选择完整使用模板,也可以根据需求单独选用其中的业务组件。

本模板主要页面及核心功能如下所示:

二、 应用架构设计
1. 分层模块化设计
· 产品定制层:专注于满足不同设备或使用场景的个性化需求,作为应用的入口,是用户直接互动的界面。
本实践暂时只支持直板机,为单HAP包形式,包含路由根节点、底部导航栏等。
· 基础特性层:用于存放相对独立的功能UI和业务逻辑实现。
本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
每个功能模块都具备高内聚、低耦合、可定制的特点,支持产品的灵活部署。
· 公共能力层:存放公共能力,包括公共UI组件、数据管理、外部交互和工具库等共享功能。
本实践的公共能力层分为公共基础能力和可分可合组件,均打包为HAR包被上层业务组件引用。
公共基础能力包含日志、文件处理等工具类,公共类型定义,网络库,以及弹窗、加载等公共组件。
可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块,支持开发者在开发中单独集成使用,详见业务组件设计章节。

2. 业务组件设计
为支持开发者单独获取特定场景的页面和功能,本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块,不依赖公共基础能力包,开发者可以单独集成,开箱即用,降低使用难度。

三、 行业场景技术方案
1. 账单数据管理
1) 场景说明
· 支持账单、资产数据本地存储和管理。
· 未对接云侧时实现应用数据不丢失,仅在卸载后清空本地数据。
2) 技术方案
· 应用ArkData关系型数据库实现数据持久化。
2. 账单图表
1) 场景说明
· 通过饼图、排行榜、柱状图、报表的形式呈现当月账单的数据分析。
· 通过日历视图呈现每日收支详情。

2) 技术方案
· 使用开源三方库@ohos/mpchart呈现多类型图表
· 使用开源三方库lunar实现农历日期、节假日数据的获取,使用开源三方库dayjs实现日期数据格式化。
· 使用Grid组件循环渲染实现日历视图的开发。
3. 动态卡片
1) 场景说明
· 支持在桌面展示2\*2 和 2\*4大小的服务卡片,展示当前月的收支情况。
· 点击记一笔拉起本模板应用主页面,新增账单后,在桌面同步刷新获取最新的收支数据。

2) 技术方案
· 通过Form Kit创建动态卡片。
· 通过commonEventManager公共事件管理实现卡片事件的注册和实时通信。
四、 模板代码
1. 工程结构(下载模板)
详细代码结构如下所示:

2. 关键代码解读
本篇代码非应用的全量代码,只包括应用的部分能力的关键代码。
1) 账单数据管理
· 封装通用数据库类


· 创建账单表



2) 动态卡片
· 封装卡片事件工具



· 在EntryFormAbility中的生命周期进行事件管理

以上代码展示了商务笔记应用的核心功能实现,包括多选管理、富文本编辑、分类管理和响应式布局等关键技术方案。
3. 模板集成
本模板提供了两种代码集成方式,供开发者自由选用。
1) 整体集成(下载模板)
开发者可以选择直接基于模板工程开发自己的应用工程。
· 模板代码获取:
² 通过IDE插件创建模板工程,开发指导。
² 通过生态市场下载源码, 下载模板。
² 通过开源仓访问源码,仓库地址。
· 打开模板工程,根据README说明中的快速入门章节,将自己的应用信息配置在模板工程内,即可运行并查看模板效果。

· 对接开发者自己的服务器接口,转换数据结构,展示真实的云侧数据。
将
commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。

在
commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中将云侧开发者自定义的数据结构转换为端侧数据结构。

根据自己的业务内容修改模板,进行定制化开发。
2) 按需集成
若开发者已搭建好自己的应用工程,但暂未实现其中的部分场景能力,可以选择取用其中的业务组件,集成在自己的工程中。
· 组件代码获取:
² 通过IDE插件下载组件源码。开发指导
² 通过生态市场下载组件源码。 下载地址
· 下载组件源码,根据README中的说明,将组件包配置在自己的工程中。

· 根据API参考和示例代码,将组件集成在自己的对应场景中。
以上是第7期“金融理财-记账应用”行业案例的内容,更多行业敬请期待~
欢迎下载使用行业模板“点击下载”,若您有体验和开发问题,或者迫不及待想了解XX行业的优秀案例,欢迎在评论区留言,小编会快马加鞭为您解答~
HarmonyOS官方模板优秀案例系列持续更新, 点击查看往期案例汇总贴, 点击收藏 “
”方便查找!【互动有礼】邀请你成为HarmonyOS官方模板产品经理,优化方案由你制定!点击参加
HarmonyOS组件模板相关推荐:鸿蒙应用开发者激励计划2025,点击查看