实现手机银行应用框架鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例提供了一个手机银行应用的基本框架，包含“首页”、“财富”、“生活”、“我的”四个模块。应用只展示了基本的页面，其中具体功能的实现，开发者可根据需求自行开发。

实现手机银行应用框架源码链接

效果预览

使用说明

进入应用，点击下方的tabBar可浏览不同的模块，其中一些功能未开发，只是作为页面布局展示。应用中登录验证，只是UI能力，手机号输入满11位，验证码为123456，开发者可根据需要自行开发。

实现思路

根据行业应用的功能，按照高内聚，低耦合的原则，常见应用功能以及职责，将应用划分为“首页”、“财富”、“生活”、“我的”四个模块，开发者在实际设计过程中，可以根据模块的复杂程度实际情况再进一步细分。

通过Navigation组件和GridRow组件实现底部tab导航，点击可跳转到不同模块。核心代码如下，源码参考TabPage.ets。

Tabs({
        barPosition: this.breakPoint === CommonConstants.BREAK_POINT_LG ? BarPosition.Start : BarPosition.End
      }) {
        TabContent() {
          HomePage()
        }
        .tabBar(this.BuildTabs($r('app.media.ic_public_home_filled'), $r('app.string.tab_bar_home'), 0))

        TabContent() {
          WealthPage()
        }
        .tabBar(this.BuildTabs($r('app.media.ic_public_cards_filled'), $r("app.string.tab_bar_wealth"), 1))

        TabContent() {
          MessagePage()
        }
        .tabBar(this.BuildTabs($r('app.media.ic_home_fortunes'), $r('app.string.tab_bar_life'), 2))

        TabContent() {
          MinePage()
        }
        .tabBar(this.BuildTabs($r('app.media.ic_life_filled'), $r('app.string.tab_bar_mine'), 3))
      }