多设备移动支付界面

概述

本文从当前常见的多设备应用场景中，选择移动支付应用作为典型案例，详细介绍“一多”在实际开发中的应用。

移动支付应用的核心是为用户提供便捷的金融支付服务，主要功能涵盖扫码支付、出示收付款二维码、投资理财等。本文围绕上述核心功能，选取推荐页、扫一扫页、收付款页作为典型页面进行开发实践。开发过程遵循多设备开发的“差异性”、“一致性”、“灵活性”和“兼容性”原则，助力开发者快速掌握“一多”开发能力，高效实现移动支付应用相关功能。

目前该应用已适配设备包括：直板机、双折叠（Mate X系列）、三折叠、阔折叠、平板、电脑和智能穿戴。

UX设计

移动支付应用的UX设计可参考移动支付类多设备响应式设计指南，设计参考图如下所示。

工程管理

为提升“一多”工程代码的复用性和可维护性，推荐开发者使用分层架构组织代码工程。分层架构将项目工程划分为产品定制层（products）、基础特性层（features）和公共能力层（common），各层级权责明确且功能独立，为开发者提供了一套清晰、高效且可扩展的设计架构。关于分层架构的具体设计细节，可参考分层架构设计。

创建工程

开发者可先参考多设备工程部署与发布相关内容，掌握分层架构工程的创建与配置方法，并完成分层架构模板工程的搭建。后续再结合移动支付应用的实际开发需求进行针对性调整，使工程架构与业务场景保持一致。

工程结构

移动支付应用基于推荐的分层架构，按products、features、common三个层级组织代码工程。各层级设计如下：

• products层：移动支付应用需要适配的设备包括直板机、双折叠（Mate X系列）、三折叠、阔折叠、平板、电脑和智能穿戴。由于电脑和智能穿戴的界面布局与其他设备差异较大，因此在products层分别创建名称为“pc”和“watch”的HAP包，作为电脑和智能穿戴的应用入口。直板机、双折叠（Mate X系列）、三折叠、阔折叠和平板上的界面整体布局相似，部分差异可以通过“一多”的自适应布局和响应式布局进行适配，因此在products层创建名称为“default”的HAP包作为这类设备统一的应用入口。
• features层：移动支付应用主要包含推荐页（multimobilepaymentrecommend）、扫一扫（multimobilepaymentscan）和收付款（multimobilepaymentpay）三个核心业务模块。在features层为三个业务模块分别创建对应的HAR包，供products层按需引用。各业务模块相对独立，互不依赖，便于后续工程的维护与迭代。
• common层：为实现代码复用、减少冗余，在common层创建一个基础（multimobilepaymentbase）能力HAR包。统一封装公共常量、断点工具以及窗口管理工具等多模块共用的基础能力，便于上层模块直接调用。

工程结构如下：

├──common                                        // 公共能力层
│  └──multimobilepaymentbase/src/main
│     ├──ets
│     │  ├──components
│     │  ├──data                    
│     │  ├──db                                 
│     │  └──utils   
│     └──resources                                // 应用资源       
├──features                                       // 基础特性层
│  ├──multimobilepaymentpay/src/main              // 收付款模块
│  │  ├──ets
│  │  │  ├──view
│  │  │  └──viewmodel
│  │  └──resources                                // 应用资源
│  ├──multimobilepaymentrecommend/src/main        // 推荐模块
│  │  ├──ets
│  │  │  ├──model
│  │  │  ├──view
│  │  │  └──viewmodel
│  │  └──resources                                // 应用资源
│  └──multimobilepaymentscan/src/main             // 扫码模块
│     ├──ets
│     │  ├──model
│     │  ├──view
│     │  └──viewmodel
│     └──resources
└──products                                       // 产品定制层
   ├──default/src/main                            // 手机、平板
   │  ├──ets
   │  │  ├──entryability
   │  │  ├──entrybackupability
   │  │  ├──model
   │  │  ├──pages
   │  │  ├──view
   │  │  └──viewmodel
   │  └──resources                                // 应用资源
   ├──pc/src/main                                 // 电脑
   │  ├──ets
   │  │  ├──model
   │  │  ├──pages
   │  │  ├──pcability
   │  │  ├──pcbackupability
   │  │  └──viewmodel
   │  └──resources                                
   └──watch/src/main                              // 手表
      ├──ets
      │  ├──model
      │  ├──pages
      │  ├──view
      │  ├──viewmodel
      │  ├──wearableability
      │  └──wearablebackupability
      └──resources                               

移动端页面

本章介绍如何针对直板机、双折叠（Mate X系列）、三折叠、阔折叠和平板设备，使用“一多”布局能力，实现移动支付应用页面层级“一套代码、多端适配”。同时，介绍上述设备的窗口适配方案。

窗口适配

• 窗口模式

  适配设备支持全屏、分屏和悬浮窗模式，具体参见窗口模式。其中，分屏模式与悬浮窗通常无特殊设计，可通过系统方式进入。应用内监听窗口尺寸变化，通过断点刷新UI，即可自动适配全屏、分屏、悬浮窗模式下的布局。

• 窗口方向

  窗口显示方向通过在HAP包的module.json5文件中abilities标签下配置orientation属性为其他方向类型的FOLLOW_DESKTOP来实现。

• 窗口沉浸式

  根据UX设计规范，需要实现沉浸式效果，具体实现可参考窗口沉浸式。在推荐页中，可通过window.setWindowLayoutFullscreen()实现沉浸式，并配合动态安全区避让，确保显示效果完整。

  说明

  由于扫一扫页面和收付款页面通过半模态转场实现，无法通过setWindowLayoutFullscreen()达到沉浸式的目的，需要针对性进行沉浸式处理：

  在扫一扫页面中，可以通过ignoreLayoutSafeArea，扩展相机预览时的安全区域。

  在收付款页面中，可以通过background属性，在设置背景色的同时向父组件的安全区扩展，实现沉浸式显示效果。

推荐页

界面开发

推荐页借助“一多”自适应布局的拉伸能力、占比能力和响应式组件，实现不同断点下的布局效果。

具体介绍及实现方案如下表所示：

在实际开发中，区域1为外层页签，区域2-6为并列的推荐页内容，所以对应的开发顺序为区域1和区域2-6。

在本示例中，点击扫一扫/收付款，在不同断点下呈现效果不同：在横向断点为sm时，拉起一个独立页面；横向断点大于sm时，拉起一个弹窗。此处采用半模态转场实现，sm断点时设置半模态样式sheetType（SheetType枚举说明）为CONTENT_COVER，即全屏弹窗；大于sm断点时设置样式为CENTER，即居中弹窗。具体实现可查看示例代码。

扫一扫页

扫一扫页主要功能为拉起相机进行扫码，同时提供其他相关功能入口。按照功能设计，将扫一扫页相关内容划分为4个区域，效果图如下：

界面开发

扫一扫页借助“一多”自适应布局的均分能力，实现不同断点下的布局效果。

具体介绍及实现方案如下表所示：

在实际开发中，区域1为底层画面，区域2-4为并列的扫一扫页内容，所以对应的开发顺序为区域1和区域2-4。

功能开发

扫一扫功能通过Scan Kit（统一扫码服务）的能力实现。多设备开发时，某些设备可能不支持扫码功能，需要使用canIUse接口查询系统能力，若支持扫码，向用户申请授权，调用相机，打开扫码弹窗。

在本示例中，仅实现拉起相机预览流并保存扫码数据信息，在实际开发时，需要根据业务逻辑进一步处理扫码数据。具体实现逻辑可查看示例代码。

收付款页

收付款页主要功能为展示收付款二维码，同时提供其他相关功能入口。按照功能设计，将收付款页相关内容划分为4个区域，效果图如下：

界面开发

收付款页借助“一多”自适应布局的拉伸能力，实现不同断点下的布局效果。

具体介绍及实现方案如下表所示：

在实际开发中，区域1、2、4为并列内容，3需要判断位于哪个容器中，所以对应的开发顺序为区域1、2、4和区域3。

功能开发

二维码通过generateBarcode (码图生成)能力实现，需要设备具备码图生成能力，所以在开发时，需要通过canIUse接口进行判断，防止因设备不兼容导致功能异常或崩溃。

电脑端页面

本章介绍如何基于现有移动端界面开发方案，实现代码逻辑与布局复用，高效完成电脑设备上移动支付应用的界面开发。

窗口适配

• 窗口模式

  适配设备支持自由窗口模式，具体参见窗口模式。应用内监听窗口尺寸变化，通过断点刷新UI，即可自动适配自由窗口模式下的布局。

• 窗口沉浸式

  自由窗口模式下使用window.setWindowDecorVisible(false)设置隐藏标题栏，仅保留右上角三键。此时，应用页面拓展至标题栏区域，实现沉浸式显示效果。

推荐页

电脑端推荐页与移动端推荐页内容基本一致，差异点在于，移动端使用底部页签进行内容视图切换，电脑端使用侧边栏进行切换。按照模块，将推荐页相关内容划分为2个区域，效果图如下：

界面开发

推荐页定义独立的侧边栏，并复用已有的移动端页面代码即可实现。

具体介绍及实现方案如下表所示：

在实际开发中，区域1为外层容器，所以对应的开发顺序为先区域1后区域2。

智能穿戴端页面

本章介绍如何完成智能穿戴设备上的移动支付应用开发，同时，阐述功能开发的实现方案。

推荐页

智能穿戴设备推荐页仅展示金刚区核心功能，并且，由于智能穿戴没有摄像头，不支持扫一扫能力，仅提供收付款、出行和卡包功能。效果图如下：

界面开发

推荐页使用弧形列表ArcList组件实现，它支持自定义标题栏样式及子组件样式，常用于穿戴设备的开发场景。

收付款页

示例代码

• 多设备移动支付界面