HarmonyOS鸿蒙Next开发案例:金融类行业官方模板介绍 (Part1:金融理财应用模板)

HarmonyOS鸿蒙Next开发案例:金融类行业官方模板介绍 (Part1:金融理财应用模板)

鸿蒙生态市场

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

一、概述

  1. 优秀案例概览

    基于以上行业分析,本期将介绍鸿蒙生态市场金融类行业模板——金融理财应用模板,为行业提供常用功能的开发案例,模板主要分理财和我的两大模块

    • Stage开发模型 + 声明式UI开发范式
    • 分层架构设计 + 组件化拆分,支持开发者在开发时既可以选择完整使用模板,也可以根据需求单独选用其中的业务组件
    • 本模板已集成华为账号、支付等服务,只需做少量配置和定制即可快速实现华为账号的登录和购买商品等功能
首页 我的

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

金融理财模板
 |-- 首页
 |    └-- 顶部轮播
 |    └-- 基础服务
 |    |    └-- 活钱管理
 |    |    |    |-- 产品列表
 |    |    |    |-- 产品详情
 |    |    |    |-- 产品定投
 |    |    |    └-- 购买产品
 |    |    └-- 稳健低波
 |    |    |    |-- 产品列表
 |    |    |    |-- 产品详情
 |    |    |    |-- 产品定投
 |    |    |    └-- 购买产品
 |    |    └-- 稳健增值
 |    |    |    |-- 产品列表
 |    |    |    |-- 产品详情
 |    |    |    |-- 产品定投
 |    |    |    └-- 购买产品
 |    |    └-- 投资增益
 |    |    |    |-- 产品列表
 |    |    |    |-- 产品详情
 |    |    |    |-- 产品定投
 |    |    |    └-- 购买产品
 |    |    └-- 投资回报
 |    |         |-- 产品列表
 |    |         |-- 产品详情
 |    |         |-- 产品定投
 |    |         └-- 购买产品
 |    └-- 滚动公告
 |    └-- 灵活取用
 |    |    |-- 产品列表
 |    |    |-- 产品详情
 |    |    |-- 产品定投
 |    |    └-- 购买产品
 |    └-- 理财夜市
 |    |    |-- 产品列表
 |    |    |-- 产品详情
 |    |    |-- 产品定投
 |    |    └-- 购买产品
 |    └-- 理财资讯
 |         └-- 资讯列表
 └-- 我的
 |    └-- 收益信息
 |    └-- 自选产品
 |    |    |-- 产品列表
 |    |    |-- 产品详情
 |    |    |-- 产品定投
 |    |    └-- 购买产品
 |    └-- 产品交易
 |    |    └-- 交易列表
 |    |    └-- 交易详情
 |    └-- 定投产品
 |    |    └-- 定投列表
 |    |    └-- 定投详情
 |    └-- 设置
 |    |    └-- 账号详情
 |    |    └-- 隐私列表
 |    |    └-- 隐私详情
 |    |    └-- 个人信息
 |    └-- 滚动公告
 |    └-- 持仓列表
           └-- 持仓详情
           └-- 持仓赎回
           └-- 追加购买

二、应用架构设计

1. 分层模块化设计

  • 产品定制层:

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

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

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

本模板详细工程结构可见工程结构章节。

2. 业务组件设计

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

三、行业场景技术方案(待补充)

  1. 账号管理

    1)场景说明

    2)技术方案

  2. 基础服务

    1)场景说明

    2)技术方案

  3. 理财咨询

    1)场景说明

    2)技术方案

  4. 收益信息

    1)场景说明

    2)技术方案

四、模板代码

1. 工程结构

详细代码结构如下所示:

FinancialManagement
  |- commons                                       // 公共层
  |   └- lib_foundation/src/main/ets               // 公共基础模块(har)
  |        |- apis                                 // 网络接口  
  |        |- mocks                                // 数据mock   
  |        |- models                               // 网络库封装    
  |        └- types                                // 请求和响应类型   
  |        └- utils                                // 工具类  
  |- components                                    // 公共组件模块(har)
  |   └- module_base/src/main/ets                  // 基础 
  |   |    |- common                               // 常量、工具函数            
  |   |    |- components                           // 基础组件         
  |   |    |- models                               // 路由模型
  |   |    |- types                                // 基础类型
  |   |    └- utils                                // 基础工具类
  |   └- module_line_chart/src/main/ets            // 折线图组件             
  |   |    └- components                           // 基础组件
  |   └- module_notice_board/src/main/ets          // 消息轮播组件            
  |   |    |- components                           // 基础组件         
  |   |    └- types                                // 基础类型
  |   └- module_product_list/src/main/ets          // 产品列表组件 
  |   |    |- common                               // 常量、工具函数            
  |   |    |- components                           // 基础组件         
  |   |    |- http                                 // 数据请求
  |   |    |- types                                // 基础类型
  |   |    |- utils                                // 基础工具类
  |   |    └- viewModel                            // 对应的vm层
  |   └- module_time_line/src/main/ets             // 时间轴组件            
  |        └- components                           // 基础组件               
  |
  |- products                                      // 应用层主包(hap)  
  |   └- entry/src/main/ets                                               
  |        |- entryability                                                               
  |        |- entryformability                                                        
  |        |- pages                              
  |        |   └- MainEntry.ets                    // 主页面
  |        |- types                                // interface接口定义
  |        |- viewmodels                           // 与页面一一对应的vm层          
  |        └- widget                               // 卡片页面 
  |                                            
  |- scenes                                        // 特性层
  |   |- business_home/src/main/ets                // 首页模块(har)
  |   |    |- components                           // 抽离组件         
  |   |    |- pages                               
  |   |    |   |- HomePage.ets                     // 首页
  |   |    |   └- InformationInfo.ets              // 咨询详情页
  |   |    |- types                                // interface类型定义
  |   |    └- viewmodels                           // 与页面一一对应的vm层
  |   |- business_mine/src/main/ets                // 我的模块(har)
  |   |    |- components                           // 抽离组件         
  |   |    |- pages                               
  |   |    |   |- EditPage.ets                     // 编辑页
  |   |    |   |- MinePage.ets                     // 我的页
  |   |    |   |- PersonalInformationPage.ets      // 个人信息页
  |   |    |   └- QuickLoginPage.ets               // 快速登录页
  |   |    |- types                                // interface类型定义
  |   |    └- viewmodels                           // 与页面一一对应的vm层
  |   |- position/src/main/ets                     // 持仓模块(hsp)
  |   |    |- common                               // 常量
  |   |    |- components                           // 抽离组件         
  |   |    |- pages                               
  |   |    |    FinancialAccount.ets               // 账号页
  |   |    |    FinancialAgreement.ets             // 协议页
  |   |    |    MyRegularChoice.ets                // 自选列表页
  |   |    |    MyRegularInvestment.ets            // 定投列表页
  |   |    |    MyRegularInvestmentInfo.ets        // 定投详情页
  |   |    |    Other.ets                          // 其他页
  |   |    |    Position.ets                       // 持仓页
  |   |    |    PositionInfo.ets                   // 持仓详情页
  |   |    |    PositionRecord.ets                 // 持仓记录页
  |   |    |    Preview.ets                        // 预览页
  |   |    |    Redemption.ets                     // 赎回页
  |   |    |    RevenueInfo.ets                    // 收益详情页
  |   |    |    TransactionRecordInfo.ets          // 交易记录详情页
  |   |    |    TransactionRecordList.ets          // 交易记录列表页
  |   |    |- types                                // interface类型定义
  |   |    └- viewmodels                           // 与页面一一对应的vm层          
  |   |     
  |   |- product/src/main/ets                      // 产品模块(hsp)
  |   |    |- components                           // 抽离组件   
  |   |    |- mapper                               // 接口数据到页面数据类型映射 
  |   |    |- models                               // class类型定义     
  |   |    |- pages                               
  |   |    |    DollarCostAveraging.ets            // 定投页
  |   |    |    FinancialInformation.ets           // 理财资讯页
  |   |    |    HistoricalPerformance.ets          // 历史收益页
  |   |    |    Product.ets                        // 首页
  |   |    |    ProductInfo.ets                    // 产品详情页
  |   |    |    ProductList.ets                    // 产品列表页
  |   |    |    ProductSearch.ets                  // 产品搜索页
  |   |    |    Profile.ets                        // 产品档案页
  |   |    |    Purchase.ets                       // 购买页
  |   |    |    Rule.ets                           // 产品规则页
  |   |    └- viewmodels                           // 与页面一一对应的vm层  

2. 关键代码解读(待补充)

  • 待补充

3. 模板集成

本模板提供了两种代码集成方式,供开发者自由使用。

1)整体集成

开发者可以选择直接基于模板工程开发自己的应用工程。

  • 模板代码获取:
  • 打开模板工程,根据README说明中的快速入门章节,将自己的应用信息配置在模板工程内,即可运行并查看模板效果。
  • 对接开发者自己的服务器接口,转换数据结构,展示真实的云侧数据。
    • 将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。

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

  • 根据自己的业务内容修改模板,进行定制化开发。

2)按需集成

若开发者已搭建好自己的应用工程,但暂未实现其中的部分场景能力,可以选择取用其中的业务组件,集成在自己的工程中。

  • 组件代码获取:
  • 下载组件源码,根据README中的说明,将组件包配置在自己的工程中。
  • 根据API参考和示例代码,将组件集成在自己的对应场景中。
```

更多关于HarmonyOS鸿蒙Next开发案例:金融类行业官方模板介绍 (Part1:金融理财应用模板)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

HarmonyOS Next金融理财应用模板提供标准化开发框架,包含账户管理、资产展示、交易记录等核心模块。该模板采用ArkTS语言开发,集成分布式数据管理能力,支持跨设备数据同步。UI组件遵循金融行业规范,内置安全加密模块,符合金融级安全标准。模板已适配鸿蒙原子化服务特性,可实现服务卡片快速触达。数据可视化组件支持实时行情展示,基于鸿蒙图形引擎优化渲染性能。

更多关于HarmonyOS鸿蒙Next开发案例:金融类行业官方模板介绍 (Part1:金融理财应用模板)的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个金融理财应用模板是HarmonyOS Next在金融行业的典型开发案例,采用了Stage模型和声明式UI开发范式。模板采用分层架构设计,包含产品定制层、基础特性层和公共能力层,支持模块化开发和组件化集成。

核心特点:

  1. 已集成华为账号、支付等核心服务,可快速实现登录和支付功能
  2. 提供完整的金融理财功能模块,包括产品展示、交易、持仓管理等
  3. 采用HAR包和HSP包的形式组织代码,支持灵活集成

工程结构清晰,分为:

  • commons:公共基础模块和组件
  • products:应用主包
  • scenes:业务特性模块

开发者可以选择:

  1. 整体集成:基于模板工程直接开发
  2. 按需集成:单独使用特定业务组件

模板已考虑金融行业的数据安全和交易稳定性需求,是开发HarmonyOS金融类应用的优秀参考。

回到顶部