基于组件库的移动金融应用开发方法及装置

摘要

本发明公开了一种基于组件库的移动金融应用开发方法及装置，涉及金融技术领域，该方法包括：获取待开发移动金融应用的用户界面设计信息，其中，用户界面设计信息中包含待所需的各种页面元素及交互动作；根据待开发移动金融应用的用户界面设计信息，从预先构建的组件库中调用待所需各种页面元素及交互动作的组件；根据调用的组件，生成待开发移动金融应用中包含的各种用户交互页面。本发明能够增加代码复用率，提高应用开发效率。

说明书

技术领域

本发明涉及金融技术领域，尤其涉及一种基于组件库的移动金融应用开发方法及装置。

背景技术

本部分旨在为权利要求书中陈述的本发明实施例提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。

为了提高软件应用产品的开发效率，在银行移动应用开发过程中，往往借助主流开源UI框架来实现，存在如下问题：①开源UI框架属于通用UI框架，没有针对金融行业场景需要的特殊组件；②开源UI框架设计同质化严重；③针对直角屏幕设计的组件，在应用于圆角屏幕时风格不一致；④基于开源组件的二次开发工作十分繁杂、灵活性差。

针对上述问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例中提供了一种基于组件库的移动金融应用开发方法，用以解决现有技术中借助开源UI框架开发移动程序，存在用户界面风格类似、需要大量定制开发工作、金融领域风格向导性不强的技术问题，该方法包括：获取待开发移动金融应用的用户界面设计信息，其中，用户界面设计信息中包含待开发移动金融应用所需的各种页面元素及交互动作；根据待开发移动金融应用的用户界面设计信息，从预先构建的组件库中调用待开发移动金融应用所需各种页面及交互动作的组件；根据调用的组件，生成待开发移动金融应用中包含的各种用户交互页面。

本发明实施例中还提供了一种基于组件库的移动金融应用开发装置，用以解决现有技术中借助开源UI框架来开发移动金融应用程序，存在开发效率低下、用户界面效果较差的技术问题，该装置包括：应用信息获取模块，用于获取待开发移动金融应用的用户界面设计信息，其中，用户界面设计信息中包含待开发移动金融应用所需的各种页面元素及交互动作；组件库调用模块，用于根据待开发移动金融应用的用户界面设计信息，从预先构建的组件库中调用待开发移动金融应用所需各种页面元素及交互动作的组件；应用页面生成模块，用于根据调用的组件，生成待开发移动金融应用中包含的各种用户交互页面。

本发明实施例中还提供了一种计算机设备，用以解决现有技术中借助开源UI框架来开发移动金融应用程序，存在开发效率低下、用户界面效果较差的技术问题，该计算机设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述基于组件库的移动金融应用开发方法。

本发明实施例中还提供了一种计算机可读存储介质，用以解决现有技术中借助开源UI框架来开发移动金融应用程序，存在开发效率低下、用户界面效果较差的技术问题，该计算机可读存储介质存储有执行上述基于组件库的移动金融应用开发方法的计算机程序。

本发明实施例中提供的基于组件库的移动金融应用开发方法、装置、计算机设备及计算机可读存储介质，在获取到待开发移动金融应用的用户界面设计信息后，根据用户界面设计信息中包含的待开发移动金融应用所需的各种页面元素及交互动作，从预先构建的组件库中调用待开发移动金融应用所需各种页面元素及交互动作的组件，进而根据调用的组件，生成待开发移动金融应用中包含的各种用户交互页面。

与现有技术中借助开源UI框架来开发移动金融应用程序的技术方案相比，本发明实施例中，通过创建一个用于开发移动金融应用的组件库，使得应用开发者利用组件库中包含的各种组件进行金融场景应用的开发，能够大大增加代码复用率，提高应用开发效率，且能够通过设计组件参数，使得组件库中的各种组件既能够满足直角屏幕，也能够满足圆角屏幕。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1为本发明实施例中的一种基于组件库的移动金融应用开发方法流程图；

图2为本发明实施例中的一种可选的基于组件库的移动金融应用开发方法流程图；

图3为本发明实施例中的一种基于组件库的移动金融应用开发装置示意图；

图4为本发明实施例中的一种可选的基于组件库的移动金融应用开发装置示意图；

图5为本发明实施例中的一种计算机设备示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚明白，下面结合附图对本发明实施例做进一步详细说明。在此，本发明的示意性实施例及其说明用于解释本发明，但并不作为对本发明的限定。

目前主流的移动开源UI框架(例如，ANTD Mobile、WEUI、MD Design)都是基于直角屏幕的产物，对圆角屏幕利用不够。且这些开源UI框架缺失用于金融领域场景特殊需求的组件，需要大量二次开发工作。

在上述应用场景下，本发明实施例中提供了一种基于组件库的移动金融应用开发方法，图1为本发明实施例中提供了一种基于组件库的移动金融应用开发方法流程图，如图1所示，该方法包括如下步骤：

S101，获取待开发移动金融应用的用户界面设计信息，其中，用户界面设计信息中包含待开发移动金融应用所需的各种页面元素及交互动作。

需要说明的是，本发明实施例中的待开发移动金融应用可以是任意一种移动金融应用，例如，手机银行客户端等应用。由于待开发移动金融应用中往往包含多个用户交互页面，每个用户交互页面中包含待开发移动金融应用所需的各种页面元素及交互动作，因而，为了实现快速开发移动金融应用的目的，在开发待开发移动金融应用的过程中，可根据待开发移动金融应用所需各种页面元素及交互动作的组件，快速生成待开发移动金融应用中包含的各种用户交互页面。

S102，根据待开发移动金融应用的用户界面设计信息，从预先构建的组件库中调用待开发移动金融应用所需各种页面元素及交互动作的组件。

需要说明的是，上述组件库是预先创建的一个用于开发移动金融应用的组件库，使得应用开发者利用组件库中包含的各种组件进行金融应用的开发，能够大大增加代码复用率，提高应用开发效率。

S103，根据调用的组件，生成待开发移动金融应用中包含的各种用户交互页面。

由于本发明实施例是基于组件库中包含的各种组件进行金融应用的开发，因而，通过设计组件参数，使得组件库中的各种组件既能够满足直角屏幕，也能够满足圆角屏幕。

在一个实施例中，在执行S103之前，本发明实施例中提供的基于组件库的移动金融应用开发方法还包括如下步骤：获取展示待开发移动金融应用的设备屏幕信息；该实施例中，上述S103可根据调用的组件和设备屏幕信息，生成待开发移动金融应用中包含的各种用户交互页面。

需要说明的是，上述实施例中获取的设备屏幕信息可至少包含屏幕尺寸信息，根据屏幕尺寸信息确定当前待开发移动金融应用的设备采用的是圆角屏幕还是直角屏幕，能够生成适合相应屏幕显示的应用页面，从而获得更好的展示效果。

在一个实施例中，在根据待开发移动金融应用的用户界面设计信息，从预先构建的组件库中调用待开发移动金融应用所需各种页面元素及交互动作的组件之前，如图2所示，本发明实施例中提供的基于组件库的移动金融应用开发方法还包括如下步骤：

S100，创建组件库，其中，组件库中包含：多种应用场景对应的待开发移动金融应用所需各种页面元素及交互动作的组件。

需要说明的是，本发明实施例，在具体实施时，可针对不同的移动金融场景，配置适合相应移动金融场景下各种页面元素及交互动作的组件，放入组件库中。

可选地，本发明实施例中创建的组件库中至少包含如下类型的组件：基本组件、SVG组件、弹出类组件、整合交互类组件、动画类组件、触摸动作类组件、自定义业务场景类组件；其中，基本组件包括：骨架页面、输入组件、排版类组件、滑动框组件、列表组件、导航栏组件、搜索栏组件、标签组件、侧滑菜单组件、右下角功能菜单组件；SVG组件包括：弹出式Tab组件、滑动式选择框组件、SVG动画组件、SVG图标组件；弹出类组件包括：可扩展弹窗组件、三层卡片式弹窗组件、双层百叶窗切换弹窗组件、功能提示性悬浮弹窗组件、协议确认对话框组件、普通确认对话框组件；整合交互类组件包括：整合交互按钮组件；动画类组件包括：面板动画组件、文字动画组件；触摸动作类组件包括：长按事件组件、滑动事件组件；自定义业务场景类组件包括：银行卡组件、卡片堆砌选择组件。

由上可知，本发明实施例中，创建用于开发移动金融应用的组件库，在设计方面，采用自动缩放匹配式的屏幕适配模式。所有组件的编码、样式、动作都是自主设计，对不同的创意有最大的兼容和适配性。

本发明实施例中的金融应用可以是但不限于银行应用，对于银行应用开发场景，在具体实施时，可设计了配套使用的移动组件，涵盖基本输入、面部、排版、动画、SVG、触摸动作、弹出等类型的组件，以涵盖所有移动开发场景需要的组件元素，统一了移动端的开发风格，最大程度的复用代码。在具体实施时，可通过样式库模块和ES6组件库模块来实现，其中，样式库模块为整个组件库提供精确的尺寸、颜色、位置、动画效果参数等；ES6组件库模块基于样式库模块详细定义了各个组件的外观、动作、反馈等。

根据本发明实施例中提供的基于组件库的移动金融应用开发方法，能够创建一个银行移动UI组件库，进而提供一种基于银行移动UI组件库的银行应用开发方法，具体包括：

1)搭建开发环境并拷入银行移动UI组件库。

2)按需求建立页面，所有开发中过程中需要用到的页面元素、交互动作、个性元素等，全部从银行移动UI组件库中引入，实现最大程度的代码复用。

3)对接API服务器后台开发、测试移动应用。

通过本发明实施例中提供的基于银行移动UI组件库的银行应用开发方法，能够大大提高银行移动应用程序的开发速度，统一界面设计标准，提供大量交互动作。

下面，对本发明实施例中提供的各个组件说明如下：

1)基本组件

①骨架页面：在页面主体内容未完全加载前展示。

②常用输入组件：通用组件，接受不同主题、颜色、功能、排版等属性设置。包含Button、Switch、Checkbox、InputBox、Textarea、Radiobutton、Select等各种输入元素。

③排版类组件：通过组件预设，排出预先设置好主副标题、说明文字、备注文字、网格、间距、信息层次对比、颜色对比、样式等各种常见app版式。包括段落排版、单行功能性文字、单行标题、双行带注释文字、展示型数字、个人信息展示板式、二维码回单版式等。

④滑动框：带上下拉、刷新、追加的滑动框。容纳列表、区域块等超出页面的内容。为防页面变形，屏蔽了原生滑动事件及原生滑动条。

⑤列表组件：展示数据，有图标、说明、副标题、响应动画、分类标题等定制化选项。

⑥导航栏组件、搜索栏组件：可设置关联动作、显示图标、显示模式(亮、暗、有无边框)的导航栏和搜索栏。

⑦标签组件：支持不同位置、功能模式、颜色等的多功能标签组件。

⑧侧滑菜单组件：该组件一般在首页使用，拖动主内容展示侧滑菜单，主内容缩小。

⑨右下角功能菜单组件：普通状态下是个悬浮在右下角的半透明小图标，点击可展开。

2)SVG组件：

①弹出式Tab组件：通过SVG绘制精确的几何图形面板，在体积相比图片压缩％90的同时，在不同的显示屏上自动伸缩并实现像素级的精确度，点击操作按钮可滑动弹出子级内容。

②滑动式选择框组件：SVG绘制的滑动框展示选择的内容。

③SVG动画组件：SVG绘制的动画，融合自身VI元素结合代码逻辑展示进度、提示等，包括SVG加载提示、SVG请求结果反馈等动画。

④SVG图标：通过SVG内嵌代码的方式，整合了70余个SVG图标。

3)弹出类组件：

①可扩展弹窗组件：该组件在页面中初始状态为一组状态数字，但是在响应长按事件后，数字对应内容子会弹出并铺满整个页面。

②三层卡片式弹窗组件：该组件使用在需要展示大量层级信息的场合，卡片信息依次弹出、点击卡片头部可任意前后切换、组件自带触摸动作反馈，会响应下滑关闭事件。

③双层百叶窗切换弹窗组件：该组件使用在需要在一个页面展示分类信息、而不需要滑动页面场合。组件自带触摸动作反馈，会响应卡片拖动事件。

④功能提示性悬浮弹窗组件：用于使用提示且内容较多时。响应下滑关闭事件。此示例中提示框内含一个步骤提示组件，在金融移动应用场景中多步骤操作指引使用，可显示当前步骤、剩余步骤、每步完成状态、步骤说明等。

⑤协议确认对话框组件：该组件使用在金融移动应用场景中需要提前确认接收某种协议、且文本内容较多时使用。

⑥普通确认对话框组件：回调、响应功能完整、可以容纳大多数其他组件的对话框。自带切入、切出动画，以及模糊背景遮罩效果。

4)整合交互类组件：

①整合交互按钮组件：融合了针对金融场景标识的用于组件嵌套、动画事件组合等在一个按钮内变换融合并完成所有交互动作。一个组件内整合了按钮、确认对话框、异步记载等待、返回信息提示四个组件。

5)动画组件：

①面板动画组件：包裹于其中的组件自带动画效果，现在支持上、下、左、右以及自定义动效和各种淡入淡出效果。

②文字动画组件：包括文字切入切出动画、数字跳动动画等。

6)触摸动作响应组件：

①长按事件组件：包裹于其中的内容响应长按触发事件，如可扩展组件长按弹出。

②滑动事件组件：包裹于其中的内容响应滑动动作触发事件，如侧边栏滑动拉出、百叶窗滑动拖动、各种窗口滑动关闭等。

7)自定义业务场景组件：

①银行卡组件：接收卡片类型、卡号、有效期、名字等属性，显示成相应的卡片。

②卡片堆砌选择组件：该组卡片的堆砌展示、选择，最多支持8张卡片，点击后部的卡片自动切换顺序，点击第一张卡片弹出详细信息框，信息框内包含单张卡片组件及滑动列表组件。

基于同一发明构思，本发明实施例中还提供了一种基于组件库的移动金融应用开发装置，如下面的实施例所述。由于该装置解决问题的原理与基于组件库的移动金融应用开发方法相似，因此该装置的实施可以参见基于组件库的移动金融应用开发方法的实施，重复之处不再赘述。

图3为本发明实施例中的一种基于组件库的移动金融应用开发装置示意图，如图3所示，该装置包括：应用信息获取模块31、组件库调用模块32和应用页面生成模块33。

其中，应用信息获取模块31，用于获取待开发移动金融应用的用户界面设计信息，其中，用户界面设计信息中包含待开发移动金融应用所需的各种页面元素及交互动作；组件库调用模块32，用于根据待开发移动金融应用的用户界面设计信息，从预先构建的组件库中调用待开发移动金融应用所需各种页面元素及交互动作的组件；应用页面生成模块33，用于根据调用的组件，生成待开发移动金融应用中包含的各种用户交互页面。

图4为本发明实施例中的一种可选的基于组件库的移动金融应用开发装置示意图，如图4所示，在一个实施例中，本发明实施例中提供的基于组件库的移动金融应用开发装置还可包括：组件库创建模块34，用于创建组件库，其中，组件库中包含：多种应用场景对应的待开发移动金融应用所需各种页面元素及交互动作的组件。

如图4所示，在一个实施例中，本发明实施例中提供的基于组件库的移动金融应用开发装置还可包括：设备屏幕信息获取模块35，用于获取展示待开发移动金融应用的设备屏幕信息；该实施例中，应用页面生成模块33还用于根据调用的组件和设备屏幕信息，生成待开发移动金融应用中包含的各种用户交互页面。

在一个实施例中，本发明实施例中提供的基于组件库的移动金融应用开发装置中，组件库中至少包含如下类型的组件：基本组件、SVG组件、弹出类组件、整合交互类组件、动画类组件、触摸动作类组件、自定义业务场景类组件；该实施例中，基本组件包括：骨架页面、输入组件、排版类组件、滑动框组件、列表组件、导航栏组件、搜索栏组件、标签组件、侧滑菜单组件、右下角功能菜单组件；SVG组件包括：弹出式Tab组件、滑动式选择框组件、SVG动画组件、SVG图标组件；弹出类组件包括：可扩展弹窗组件、三层卡片式弹窗组件、双层百叶窗切换弹窗组件、功能提示性悬浮弹窗组件、协议确认对话框组件、普通确认对话框组件；整合交互类组件包括：整合交互按钮组件；动画类组件包括：面板动画组件、文字动画组件；触摸动作类组件包括：长按事件组件、滑动事件组件；自定义业务场景类组件包括：银行卡组件、卡片堆砌选择组件。

基于同一发明构思，本发明实施例中还提供了一种计算机设备，用以解决现有技术中借助开源UI框架来开发移动金融应用程序，存在开发效率低下、用户界面效果较差的技术问题，图5为本发明实施例中的一种计算机设备示意图，如图5所示，该计算机设备50包括存储器501、处理器502及存储在存储器501上并可在处理器502上运行的计算机程序，处理器502执行计算机程序时实现上述基于组件库的移动金融应用开发方法。

基于同一发明构思，本发明实施例中还提供了一种计算机可读存储介质，用以解决现有技术中借助开源UI框架来开发移动金融应用程序，存在开发效率低下、用户界面效果较差的技术问题，该计算机可读存储介质存储有执行上述基于组件库的移动金融应用开发方法的计算机程序。

综上所述，本发明实施例中提供的基于组件库的移动金融应用开发方法、装置、计算机设备及计算机可读存储介质，在获取到待开发移动金融应用的用户界面设计信息后，根据用户界面设计信息中包含的待开发移动金融应用所需的各种页面元素及交互动作，从预先构建的组件库中调用待开发移动金融应用所需各种页面元素及交互动作的组件，进而根据调用的组件，生成待开发移动金融应用中包含的各种用户交互页面。

与现有技术中借助开源UI框架来开发移动金融应用程序的技术方案相比，本发明实施例中，通过创建一个用于开发移动金融应用的组件库，使得应用开发者利用组件库中包含的各种组件进行金融应用的开发，能够大大增加代码复用率，提高应用开发效率，且能够通过设计组件参数，使得组件库中的各种组件既能够满足直角屏幕，也能够满足圆角屏幕。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施例而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。