HarmonyOS鸿蒙NEXT开发案例：金融类行业官方模板介绍 （Part2：记账应用模板）

鸿蒙生态市场

💡摘要： 本模板来自华为生态市场（Huawei Partner Market），本文选取了金融类行业的一个官方模板——记账应用模板，并进行了简要的介绍与分析。各位开发者伙伴们，更多行业模板与组件请进入生态市场查看！

一、概述

1. 优秀案例概览

   基于以上行业分析，本期将介绍鸿蒙生态市场金融类行业模板——记账应用模板，为行业提供常用功能的开发案例，模板主要分首页、统计和资产三大模块

   • Stage开发模型 + 声明式UI开发范式
   • 分层架构设计 + 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件

   首页	统计	资产

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

记账模板
 |-- 首页
 |    |-- 账单查询
 |    |-- 新增账单
 |    |-- 账单类型管理
 |    |-- 编辑账单
 |    |-- 删除账单
 |    └-- 账单详情查看
 |-- 统计
 |    |-- 账单报表查看
 |    |-- 账单分类查看
 |    └-- 日历视图
 └-- 资产
      |-- 资产查询
      |-- 新增资产
      |-- 编辑资产
      |-- 删除资产
      └-- 资产内记账

二、应用架构设计

1. 分层模块化设计

• 产品定制层：专注于满足不同设备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。

  • 本实践暂时只支持直板机，为单HAP包形式，包含路由根节点、底部导航栏等。

• 基础特性层：用于存放相对独立的功能UI和业务逻辑实现。

  • 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
  • 每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。

• 公共能力层：存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。

  • 本实践的公共能力层分为公共基础能力和可分可合组件，均打包为HAR包被上层业务组件引用。
  • 公共基础能力包含日志、文件处理等工具类，公共类型定义，网络库，以及弹窗、加载等公共组件。
  • 可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。

2. 业务组件设计

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

三、行业场景技术方案（待补充）

1. 账号管理

   1）场景说明

   2）技术方案

2. 账单详情

   1）场景说明

   2）技术方案

3. 账单报表

   1）场景说明

   2）技术方案

4. 资产详情

   1）场景说明

   2）技术方案

四、模板代码

1. 工程结构

详细代码结构如下所示：

MoneyTrack
|--commons                                      // 公共能力层
|   └--commonlib                                // 基础能力包
|     └--src/main
|         |--ets
|         |   |--components                     // 公共组件
|         |   |  |-- CommonButton.ets           // 公共按钮
|         |   |  |-- CommonDivider.ets          // 公共分割线
|         |   |  |-- CommonHeader.ets           // 公共标题栏
|         |   |  |-- CommonMonthPicker.ets      // 月份选择
|         |   |  |-- ContainerColumn.ets        // 垂直卡片容器
|         |   |  └-- ContainerRow.ets           // 水平卡片容器
|         |   |–constants                      // 公共静态变量
|         |   |  |-- CommonConstants.ets        // 公共常量
|         |   |  └-- CommonEnums.ets            // 公共枚举
|         |   |
|         |   |–dialogs                        // 公共弹窗
|         |   |  └-- CommonConfirmDialog.ets    // 二次确认弹窗
|         |   |
|         |   └–utils                          // 公共方法
|         |      |-- eventbus                   // 全局事件管理
|         |      |-- framework                  // 全局框架管理
|         |      |-- logger                     // 日志
|         |      |-- router                     // 路由
|         |      └-- window                     // 窗口
|         |
|         └-- resources/base/element
|             |-- color.json                    // 全局颜色
|             |-- font.json                     // 全局字号
|             └-- style.json                    // 全局样式
|
|–components                                   // 可分可合组件包
|   |-- asset_base                              // 资产通用基础包
|   |-- asset_card                              // 资产卡片
|   |-- asset_manage                            // 资产管理
|   |-- bill_base                               // 账单通用基础包
|   |-- bill_card                               // 账单卡片
|   |-- bill_chart                              // 账单图表
|   |-- bill_data_processing                    // 账单数据处理
|   └-- bill_manage                             // 账单管理
|
|–features                                     // 基础特性层
|   |-- assets                                  // 资产
|   |   └–src/main/ets/views
|   |      |–AssetDetailPage.ets               // 资产详情页
|   |      └–AssetsView.ets                    // 资产页
|   |-- home                                    // 首页明细
|   |   └–src/main/ets/views
|   |      |–BillDetailPage.ets                // 账单详情页
|   |      └–HomeView.ets                      // 首页
|   └-- statistics                              // 统计
|       └–src/main/ets/views
|          |–BillByResourceView.ets            // 分类账单详情
|          └–StatisticsView.ets                // 统计页
└–products                                     // 设备入口层
└-- entry
└–src/main/ets
|-- pages
|   └-- MainEntry.ets                // 主入口
└-- widgets
|-- MiddleCard.ets               // 24中号卡片
└-- MiniCard.ets                 // 22小号卡片

2. 关键代码解读（待补充）

• 待补充

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参考和示例代码，将组件集成在自己的对应场景中。