鸿蒙金融理财全栈项目：基础架构、数据安全与用户体验

这个页面的思路并不复杂，但很实用：顶部先建立品牌感和安全感，下面用标签页承接各个业务入口，用户一眼就能知道自己当前在哪一块。

2.2 理财产品列表

理财产品页的关键不是'把数据摆出来'，而是把信息层次排清楚。用户最关心的通常是产品名称、描述和预期收益率，所以这些信息要优先展示，按钮操作也要足够直接。

@Entry
@Component
struct FinancialProductsPage {
  @State financialProducts: Array<financial.FinancialProduct> = [];

  build() {
    Column({ space: 16 }) {
      ListComponent({
        data: this.financialProducts,
        renderItem: (item: financial.FinancialProduct, index: number) => {
          Row({ space: 16 }) {
            Image(item.avatarUrl)
              .width(80)
              .height(80)
              .objectFit(ImageFit.Cover)
              .borderRadius(8);

            Column({ space: 8 }) {
              Text(item.name)
                .fontSize(16)
                .fontWeight(FontWeight.Bold)
                .textColor('#000000');
              Text(item.description)
                .fontSize(14)
                .textColor('#666666')
                .maxLines(2)
                .textOverflow({ overflow: TextOverflow.Ellipsis });
              Text(`预期收益率：${item.expectedReturnRate}%`)
                .fontSize(16)
                .fontWeight(FontWeight.Bold)
                .textColor('#FF0000');
            }
            .layoutWeight(1);

            ButtonComponent({
              text: '查看详情',
              onClick: () => {
                router.pushUrl({
                  url: '/pages/FinancialProductDetailPage',
                  params: { productId: item.productId }
                });
              },
              disabled: false
            });
          }
          .width('100%')
          .height('auto')
          .padding(16)
          .backgroundColor('#FFFFFF')
          .borderRadius(8)
          .margin({ bottom: 8 });
        },
        onItemClick: (item: financial.FinancialProduct, index: number) => {
          router.pushUrl({
            url: '/pages/FinancialProductDetailPage',
            params: { productId: item.productId }
          });
        }
      });
    }
    .width('100%')
    .height('100%')
    .padding(16)
    .backgroundColor('#F5F5F5');
  }

  aboutToAppear() {
    this.initFinancialProducts();
  }

  async initFinancialProducts(): Promise<void> {
    this.financialProducts = await FinancialProductUtil.getInstance().getFinancialProducts();
  }
}

这里有个小细节值得注意：列表项本身和按钮都能进入详情页，这样既照顾了习惯点卡片的用户，也照顾了习惯点按钮的用户。

三、业务逻辑层与数据访问封装

把金融业务能力封装成工具类，是比较稳妥的做法。页面只关心展示和交互，真正的数据请求和能力调用交给工具类，这样后续维护会轻松很多。

3.1 金融产品工具类

import financial from '@ohos.financial';

// 金融产品工具类
export class FinancialProductUtil {
  private static instance: FinancialProductUtil | null = null;
  private financialHelper: financial.FinancialHelper | null = null;

  // 单例模式
  static getInstance(): FinancialProductUtil {
    if (!FinancialProductUtil.instance) {
      FinancialProductUtil.instance = new FinancialProductUtil();
    }
    return FinancialProductUtil.instance;
  }

  // 初始化金融产品工具
  async init(): Promise<void> {
    if (!this.financialHelper) {
      this.financialHelper = financial.createFinancialHelper();
    }
  }

  // 获取金融产品列表
  async getFinancialProducts(): Promise<Array<financial.FinancialProduct>> {
    if (!this.financialHelper) {
      return [];
    }
    const result = await this.financialHelper.getFinancialProducts();
    return result;
  }

  // 获取金融产品详情
  async getFinancialProductDetail(productId: number): Promise<financial.FinancialProductDetail> {
    if (!this.financialHelper) {
      return null;
    }
    const result = await this.financialHelper.getFinancialProductDetail(productId);
    return result;
  }
}

3.2 个人理财工具类

import personal from '@ohos.personal';

// 个人理财工具类
export class PersonalFinanceUtil {
  private static instance: PersonalFinanceUtil | null = null;
  private personalHelper: personal.PersonalHelper | null = null;

  // 单例模式
  static getInstance(): PersonalFinanceUtil {
    if (!PersonalFinanceUtil.instance) {
      PersonalFinanceUtil.instance = new PersonalFinanceUtil();
    }
    return PersonalFinanceUtil.instance;
  }

  // 初始化个人理财工具
  async init(): Promise<void> {
    if (!this.personalHelper) {
      this.personalHelper = personal.createPersonalHelper();
    }
  }

  // 获取个人理财数据
  async getPersonalFinanceData(): Promise<personal.PersonalFinanceData> {
    if (!this.personalHelper) {
      return null;
    }
    const result = await this.personalHelper.getPersonalFinanceData();
    return result;
  }

  // 购买金融产品
  async purchaseFinancialProduct(productId: number, amount: number): Promise<personal.PurchaseFinancialProductResult> {
    if (!this.personalHelper) {
      return null;
    }
    const result = await this.personalHelper.purchaseFinancialProduct(productId, amount);
    return result;
  }
}

四、数据安全设计与实现

金融场景里，数据安全不是附加项，而是底座。用户注册、登录、购买、查看资产，这些行为背后都涉及敏感信息，任何一个环节处理不当，都可能放大风险。

4.1 数据加密

数据加密的重点在于：敏感内容在传输和存储前都要尽量避免明文暴露。下面把加密和解密能力封装成独立工具类，方便在不同业务场景复用。

import encryption from '@ohos.encryption';

// 数据加密工具类
export class DataEncryptionUtil {
  private static instance: DataEncryptionUtil | null = null;
  private encryptionHelper: encryption.EncryptionHelper | null = null;

  // 单例模式
  static getInstance(): DataEncryptionUtil {
    if (!DataEncryptionUtil.instance) {
      DataEncryptionUtil.instance = new DataEncryptionUtil();
    }
    return DataEncryptionUtil.instance;
  }

  // 初始化数据加密工具
  async init(): Promise<void> {
    if (!this.encryptionHelper) {
      this.encryptionHelper = encryption.createEncryptionHelper();
    }
  }

  // 加密数据
  async encryptData(data: string): Promise<string> {
    if (!this.encryptionHelper) {
      return null;
    }
    const result = await this.encryptionHelper.encryptData(data);
    return result;
  }

  // 解密数据
  async decryptData(encryptedData: string): Promise<string> {
    if (!this.encryptionHelper) {
      return null;
    }
    const result = await this.encryptionHelper.decryptData(encryptedData);
    return result;
  }
}

4.2 身份认证

身份认证是金融应用的另一条关键防线。只有确认'是谁在操作'，后续的交易和数据展示才有意义。

import { IdentityAuthenticationUtil } from '../utils/IdentityAuthenticationUtil';

@Entry
@Component
struct IdentityAuthenticationPage {
  @State authenticationResult: authentication.AuthenticationResult | null = null;

  build() {
    Column({ space: 16 }) {
      Text('身份认证')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .textColor('#000000');

      ButtonComponent({
        text: '进行身份认证',
        onClick: async () => {
          await this.authenticate();
        },
        disabled: false
      });

      if (this.authenticationResult) {
        Text(`认证结果：${this.authenticationResult.success}`)
          .fontSize(14)
          .textColor('#000000');
        Text(`认证方式：${this.authenticationResult.authenticationMethod}`)
          .fontSize(14)
          .textColor('#666666');
      }
    }
    .width('100%')
    .height('100%')
    .padding(16)
    .backgroundColor('#F5F5F5');
  }

  aboutToAppear() {
    IdentityAuthenticationUtil.getInstance().init();
  }

  async authenticate(): Promise<void> {
    this.authenticationResult = await IdentityAuthenticationUtil.getInstance().authenticate();
  }
}

4.3 安全审计

审计能力的价值在于'可追溯'。金融系统里，很多问题并不是立刻暴露的，但只要操作日志足够完整，后面排查、回放、合规检查就会顺手很多。

import audit from '@ohos.audit';

// 安全审计工具类
export class SecurityAuditUtil {
  private static instance: SecurityAuditUtil | null = null;
  private auditHelper: audit.AuditHelper | null = null;

  // 单例模式
  static getInstance(): SecurityAuditUtil {
    if (!SecurityAuditUtil.instance) {
      SecurityAuditUtil.instance = new SecurityAuditUtil();
    }
    return SecurityAuditUtil.instance;
  }

  // 初始化安全审计
  async init(): Promise<void> {
    if (!this.auditHelper) {
      this.auditHelper = audit.createAuditHelper();
    }
  }

  // 记录操作日志
  async recordOperationLog(operationLog: audit.OperationLog): Promise<void> {
    if (!this.auditHelper) {
      return;
    }
    await this.auditHelper.recordOperationLog(operationLog);
  }

  // 获取操作日志
  async getOperationLog(): Promise<Array<audit.OperationLog>> {
    if (!this.auditHelper) {
      return [];
    }
    const result = await this.auditHelper.getOperationLog();
    return result;
  }
}

五、用户体验设计与优化

金融应用经常给人一种'功能不少，但用起来很累'的印象，问题往往不在功能本身，而在体验细节。无障碍、布局适配、性能反馈，这些地方看似不显眼，实际决定了用户愿不愿意长期使用。

5.1 无障碍设计

无障碍能力要尽量做得自然，不要只停留在'有这个功能'，而是要让更多用户真的能用起来。

@Entry
@Component
struct AccessibilityDesignPage {
  build() {
    Column({ space: 16 }) {
      Text('无障碍设计')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .textColor('#000000');
      Text('我们的应用符合无障碍设计标准，确保所有用户都能正常使用。')
        .fontSize(14)
        .textColor('#666666');
      ButtonComponent({
        text: '启用无障碍功能',
        onClick: async () => {
          await this.enableAccessibility();
        },
        disabled: false
      });
    }
    .width('100%')
    .height('100%')
    .padding(16)
    .backgroundColor('#F5F5F5');
  }

  async enableAccessibility(): Promise<void> {
    const accessibility = new accessibility.AccessibilityManager();
    await accessibility.enableAccessibility();
    promptAction.showToast({ message: '无障碍功能已启用' });
  }
}

5.2 响应式布局

响应式布局在金融场景里尤其重要。用户可能在手机、平板甚至不同分辨率设备上查看资产信息，页面不能只适配一种屏幕。

@Entry
@Component
struct ResponsiveLayoutPage {
  build() {
    Column({ space: 16 }) {
      Text('响应式布局')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .textColor('#000000');
      Text('我们的应用适配不同屏幕尺寸的设备，确保在任何设备上都能正常显示。')
        .fontSize(14)
        .textColor('#666666');

      Row({ space: 16 }) {
        Text('屏幕宽度：').fontSize(14).textColor('#000000');
        Text(`${px2vp(display.getDefaultDisplaySync().width)}`)
          .fontSize(14)
          .textColor('#666666');
      }
      .width('100%')
      .height('auto');

      Row({ space: 16 }) {
        Text('屏幕高度：').fontSize(14).textColor('#000000');
        Text(`${px2vp(display.getDefaultDisplaySync().height)}`)
          .fontSize(14)
          .textColor('#666666');
      }
      .width('100%')
      .height('auto');
    }
    .width('100%')
    .height('100%')
    .padding(16)
    .backgroundColor('#F5F5F5');
  }
}

5.3 性能优化

性能优化不一定是大改动，很多时候只是把初始化、请求和渲染拆开，避免页面一打开就把用户'卡住'。

import performance from '@ohos.performance';

// 性能优化工具类
export class PerformanceOptimizationUtil {
  private static instance: PerformanceOptimizationUtil | null = null;
  private performanceHelper: performance.PerformanceHelper | null = null;

  // 单例模式
  static getInstance(): PerformanceOptimizationUtil {
    if (!PerformanceOptimizationUtil.instance) {
      PerformanceOptimizationUtil.instance = new PerformanceOptimizationUtil();
    }
    return PerformanceOptimizationUtil.instance;
  }

  // 初始化性能优化
  async init(): Promise<void> {
    if (!this.performanceHelper) {
      this.performanceHelper = performance.createPerformanceHelper();
    }
  }

  // 优化应用的性能
  async optimizePerformance(): Promise<performance.PerformanceResult> {
    if (!this.performanceHelper) {
      return null;
    }
    const result = await this.performanceHelper.optimizePerformance();
    return result;
  }
}

六、项目配置与部署

项目做到这里，还需要把配置和部署链路走顺。金融类应用往往对权限和页面入口更敏感，所以 module.json5 里的配置不能马虎。

{
  "module": {
    "requestPermissions": [
      // ...
    ],
    "abilities": [
      // ...
    ],
    "widgets": [
      // ...
    ],
    "pages": [
      // ...
    ]
  }
}

开发完成后，在 DevEco Studio 中构建 HAP，再部署到鸿蒙设备上进行验证。测试时可以重点看这几件事：

• 理财产品列表是否正常展示；
• 个人理财数据是否准确加载；
• 风险评估和账户管理入口是否可用；
• 身份认证是否生效；
• 安全审计是否能记录操作；
• 无障碍和响应式布局是否在不同设备上表现正常；
• 页面切换和数据加载是否足够顺滑。

七、运行效果与结论

把整套链路跑通后，可以得到一个比较完整的金融理财应用骨架：

• 理财产品列表能展示名称、描述和预期收益率；
• 个人理财模块可以承载资产、收益、支出等数据；
• 风险评估和账户管理有了统一的入口；
• 身份认证、安全审计和数据加密把安全链路补齐；
• 无障碍、响应式布局和性能优化让应用更像一个成熟产品，而不只是一个能演示的 Demo。

八、总结与后续方向

这一篇完成的重点，不只是把页面搭出来，更重要的是把金融理财应用最核心的几条底线搭稳：架构分层要清楚，安全能力要独立，体验优化要前置考虑。对于金融类鸿蒙应用来说，这三件事缺一不可。

接下来的内容可以继续往风险控制、合规审计和产品创新方向推进，把这个项目从'基础可用'真正走向'面向上线'。