【鸿蒙实战开发】一多开发实例（移动支付）

往期推文全新看点

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
• 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
• 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
• 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
• 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
• 记录一场鸿蒙开发岗位面试经历~
• 持续更新中……

概述

本文从目前流行的垂类市场中，选择移动支付应用作为典型案例详细介绍 “一多” 在实际开发中的应用，同时提供该垂类应用在多设备上的界面设计与实现参考。本文选择移动支付首页作为典型页面进行开发，涉及的核心功能包括支付、收款、扫码等。

本文重点内容如下：

• 扫一扫功能实现。
• 收付款功能实现。

下面的章节将分别从 UX设计、 架构设计、页面开发三个角度给出推荐的参考样例，介绍“一多”移动支付应用在开发过程中的最佳实践。

架构设计

HarmonyOS应用的分层架构主要包括三个层次：产品定制层、基础特性层和公共能力层，为开发者构建了一个清晰、高效、可扩展的设计架构。

页面开发

本章介绍移动支付应用中如何使用“一多”的布局能力，完成页面层级的一套页面、多端适配。下文将从不同页面展开，介绍每个页面区域使用到具体的布局能力，帮助开发者从零到一进行移动支付应用的开发。

首页

移动应用首页主要涉及扫一扫、支付、收付款等能力。观察首页在多设备上的UX设计图，可以进行如下设计：

• 将首页划分为6个部分，效果图如下：

示意图	sm	mg	lg
效果图

---

区域编号	简介	实现方案
1	底部/侧边页签	借助 栅格布局 监听断点变化改变位置。
2	城市及搜索框	使用 拉伸能力 结合断点控制元素尺寸，同时采用 Blank组件 填充中间空白区域。
3	金刚区	使用 栅格布局 结合断点变化改变快捷功能的形态。
4	功能入口合集	采用 重复布局，在更大尺寸设备上显示更多的功能入口。
5	服务卡片	采用 重复布局，手机上的单列信息，在折叠屏和2in1上重复布局。
6	财富精选	采用 栅格布局 ，在更大尺寸设备上显示更多列数。

• 金刚区