【鸿蒙实战开发】一多开发实例（移动支付）_鸿蒙应用开发添加银行卡功能的实现-CSDN博客

本文链接：https://blog.csdn.net/shangkangba/article/details/143579287

📚鸿蒙开发往期学习笔录✒️：

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

本文重点内容如下：

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

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

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

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

示意图	sm	mg	lg
效果图

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