CN107729074A

CN107729074A - 一种pos应用的用户界面的加载方法及装置

Info

Publication number: CN107729074A
Application number: CN201710875666.5A
Authority: CN
Inventors: 潘泉锦
Original assignee: PAX Computer Technology Shenzhen Co Ltd
Current assignee: PAX Computer Technology Shenzhen Co Ltd
Priority date: 2017-09-25
Filing date: 2017-09-25
Publication date: 2018-02-23
Anticipated expiration: 2037-09-25
Also published as: CN107729074B

Abstract

本发明适用于通信技术领域，提供了一种POS应用的用户界面的加载方法及装置，包括接收终端发送的加载用户界面的请求信息，请求信息包括用户界面标识以及终端的标识，通过用户界面标识确定目标用户界面；根据用户界面标识从用户界面库中获取与目标用户界面对应的目标文件，目标文件包括超文本标记语言HTML文件以及样式层叠表CSS文件，通过CSS文件包含的API查询终端的显示屏的配置参数，根据终端的显示屏的配置参数修改CSS文件中用户界面的显示分辨率和宽高值；根据终端的标识将HTML文件和修改后的CSS文件发送至终端。以自适应地兼容各类不同屏幕分辨率的终端，保证软件产品用户界面的分辨率和宽高值等一致性和统一性。

Description

一种POS应用的用户界面的加载方法及装置

技术领域

本发明属于通信技术领域，尤其涉及一种POS应用的用户界面的加载方法及装置。

背景技术

在销售商品时，销售终端(point of sale，POS)自动读取收银机的商品销售信息，如商品名、单价、销售数量、销售时间、销售店铺、购买顾客等，并通过通讯网络或者计算机系统将这些信息传送至相关模块进行分析加工，完成在商品销售过程中的信息记录、资金流动等功能，提高了商品的经营效率，对整个交易过程做了良好的保障。

其中，现有技术中很多POS采用的操作系统都是通过基于嵌入式Linux系统或Android系统进行系统开发。在不同操作系统或者不同使用终端的环境中进行开发时，由不同开发人员分工完成各个模块的代码或者用户界面设计，容易造成开发效率低、兼容性差，且用户界面分辨率或宽高值等出现不统一的情况。

发明内容

有鉴于此，本发明实施例提供了一种POS应用的用户界面的加载方法及装置，以解决现有技术中在不同操作系统或者不同使用终端的环境中进行开发时，由不同开发人员分工完成各个模块的代码或者用户界面设计，容易造成开发效率低、兼容性差，且用户界面分辨率或宽高值等出现不统一的问题。

本发明实施例的第一方面提供了一种POS应用的用户界面的加载方法，包括：

接收终端发送的加载用户界面的请求信息，所述请求信息包括用户界面标识以及所述终端的标识，通过所述用户界面标识确定目标用户界面；

根据用户界面标识从用户界面库中获取与所述目标用户界面对应的目标文件，所述目标文件包括超文本标记语言HTML文件以及样式层叠表CSS文件，所述CSS文件中包括用于查询终端的显示屏的配置参数的应用程序编程接口API；

通过所述CSS文件包含的所述API查询所述终端的显示屏的配置参数，根据所述终端的显示屏的配置参数修改所述CSS文件中用户界面的显示分辨率和宽高值；

根据所述终端的标识将所述HTML文件和修改后的所述CSS文件发送至所述终端。

本发明实施例的第二方面提供了一种POS应用的用户界面的加载装置，包括：

信息接收单元，用于接收终端发送的加载用户界面的请求信息，所述请求信息包括用户界面标识以及所述终端的标识，通过所述用户界面标识确定目标用户界面；

目标获取单元，用于根据用户界面标识从用户界面库中获取与所述目标用户界面对应的目标文件，所述目标文件包括超文本标记语言HTML文件以及样式层叠表CSS文件，所述CSS文件中包括用于查询终端的显示屏的配置参数的应用程序编程接口API；

参数修改单元，用于通过所述CSS文件包含的所述API查询所述终端的显示屏的配置参数，根据所述终端的显示屏的配置参数修改所述CSS文件中用户界面的显示分辨率和宽高值；

文件发送单元，用于根据所述终端的标识将所述HTML文件和修改后的所述CSS文件发送至所述终端。

本发明实施例的第三方面提供了一种POS应用的用户界面的加载装置，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述第一方面所述方法的步骤。

本发明实施例的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如上述第一方面所述方法的步骤。

本发明实施例与现有技术相比存在的有益效果是：通过使用HTML和CSS技术实现一套适合POS业务的自适应用户界面库，以自适应地兼容各类不同屏幕分辨率的终端，保证软件产品用户界面的分辨率和宽高值等一致性和统一性。

附图说明

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

图1是本发明实施例提供的POS应用的用户界面的加载方法的流程图；

图2是本发明另一实施例提供的POS应用的用户界面的加载方法的流程图；

图3是本发明另一实施例提供的POS应用的用户界面的加载方法中寻卡组件的示意图；

图4和图5分别是本发明另一实施例提供的POS应用的用户界面的加载方法中不同手机终端系统中的数字软键盘组件的示意图；

图6是本发明另一实施例提供的POS应用的用户界面的加载方法中电子签名组件的示意图；

图7是本发明另一实施例提供的POS应用的用户界面的加载方法中通信组件的示意图；

图8是本发明另一实施例提供的POS应用的用户界面的加载方法中交易小票组件的示意图；

图9是本发明另一实施例提供的POS应用的用户界面的加载方法中PIN输入组件的示意图；

图10和图11分别为相同界面元素在手机终端显示屏的分辨率下和在电脑终端显示屏的分辨率下的显示效果的示意图；

图12是本发明实施例提供的POS应用的用户界面的加载装置的示意图；

图13是本发明另一实施例提供的POS应用的用户界面的加载装置的示意图；

图14是本发明实施例提供的POS应用的用户界面的加载装置的示意图。

具体实施方式

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本发明实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本发明。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本发明的描述。

为了说明本发明所述的技术方案，下面通过具体实施例来进行说明。

参见图1，图1是本发明实施例提供的一种POS应用的用户界面的加载方法的流程图。本实施例中POS应用的用户界面的加载方法的执行主体为具有加载POS应用的用户界面功能的装置，该装置可以是服务器、计算机设备、平板电脑等装置。如图1所示的POS应用的用户界面的加载方法可以包括以下步骤：

S101：接收终端发送的加载用户界面的请求信息，所述请求信息包括用户界面标识以及所述终端的标识，通过所述用户界面标识确定目标用户界面。

在日常生活的很多情况下，人们在购物时以刷卡代替现金的支付方式进行商品交易，通过刷卡机感应磁卡的信息并收取相应的资金数目，再将交易的数据信息打印出来。这种交易方式极大的方便了交易者之间的交易过程，简化了交易手续，并对交易信息的安全性和可用性做到了很好的保障。

刷卡机是POS设备中的一种类型，用户通过POS设备上的用户界面便可以对其进行相应的操作，例如，通过将磁卡靠近POS设备便可以直接识别磁卡的信息，通过在该设备的密码输入区输入密码，验证无误之后划走相应的款项，在刷完卡之后再通过用户界面显示出交易信息并打印。

开发人员在开发POS的操作系统时，一般都是基于嵌入式Linux和Android系统开发，例如Prolin系统。在连接互联网或局域网的情况下，POS设备都具有运行浏览器的能力，通过POS设备的用户界面运行浏览器，而使该POS设备完成相应的操作。

通过接收终端发送的加载用户界面的请求信息，请求信息中包含用户界面标识，用户界面标识可以为用户界面的名称，或者是用于表示该用户界面的属性信息的标识，每个用户界面的标识都是独一无二的，用于区别自己与其余的用户界面，通过用户界面标识确定与该用户界面标识对应的目标用户界面，以防加载错误。

S102：根据用户界面标识从用户界面库中获取与所述目标用户界面对应的目标文件，所述目标文件包括超文本标记语言HTML文件以及样式层叠表CSS文件，所述CSS文件中包括用于查询终端的显示屏的配置参数的应用程序编程接口API。

在确定与接收到的用户界面标识对应的目标用户界面之后，根据该用户界面标识从用户界面库中获取与目标用户界面对应的目标文件。目标文件预先存储于用户界面库中。

目标文件包括超文本标记语言(Hyper Text Markup Language，HTML)文件以及样式层叠表(Cascading Style Sheet，CSS)文件。其中，HTML文件是一种文本文件，通过在该文本文件中添加标记符，以使HTML文件中的内容能通过浏览器正确的显示，例如：文字如何处理，画面如何安排或者图片如何显示等。通过对HTML文件中的内容进行解析以获取解析后的数据，即文字的处理方式、图像的显示方式或者画面的交互方式等，以使该HTML文件对应的用户界面通过浏览器按照标记符中的显示方式被显示出来。但是，不同的浏览器在解析同一标记符时，可能会得到不完全相同的解析结果，因而可能会有不同的显示效果。

CSS文件为HTML文件提供了一种样式描述，定义了其中元素的显示方式。CSS文件不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS文件能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS文件可以将样式定义在用户界面元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。样式规则是可应用于网页中元素，如文本段落或链接的格式化指令，样式规则由一个或多个样式属性及其值组成。

POS设备可以支撑使用HTML技术和CSS技术实现一套适合POS业务的自适应用户界面库，兼容所有分辨率屏幕，进一步的，还可以及兼容多个操作系统。因此，在本实施例中，建立POS应用的用户界面的用户界面库，通过HTML技术和CSS技术统一用户界面库中的元素，及其对应的文件，以完成对POS设备用户界面的开发。达到提高开发效率、用户界面的复用性维护性，保证软件产品用户界面的一致性。

S103：通过所述CSS文件包含的所述API查询所述终端的显示屏的配置参数，根据所述终端的显示屏的配置参数修改所述CSS文件中用户界面的显示分辨率和宽高值。

在本实施例中，CSS文件中包括用于查询终端的显示屏的配置参数的应用程序编程接口(Application Programming Interface，API)，通过该API查询终端的显示屏的配置参数。

显示屏的配置参数可以包括显示终端的屏幕尺寸，屏幕尺寸用于表示显示终端的屏幕的大小；显示屏的配置参数可以包括显示终端的屏幕分辨率，屏幕分辨率用于表示显示终端的屏幕的显示效果；显示屏的配置参数还可以包括显示屏的功能设定，该功能设定是根据POS终端的业务类型进行的设定。

示例性的，某个显示终端是用于对交易信息的显示，则与该显示终端功能设定相符合的用户界面就需要包括能表示交易信息的用户界面元素，例如，交易时间模块、交易金额模块或者支付方式模块等表示该终端显示功能的用户界面。

根据获取到的显示屏的屏幕尺寸，终端可以修改用户界面元素的CSS文件中的宽高值，以使用户界面元素的大小尺寸适用于要加载该用户界面的终端的显示屏幕的大小；根据获取到终端的显示屏的屏幕分辨率，终端可以修改用户界面元素的CSS文件中的显示分辨率，以使用户界面元素的显示分辨率与要加载该用户界面的终端的屏幕分辨率相符；根据获取到的显示屏的功能设定，终端可以修改用户界面元素的CSS文件中的功能模块，以使用户界面元素的功能模块与要加载该用户界面的终端的功能设定相符。

在本实施例中，通过设置每个元素的宽高值确定该元素最好的显示状态，进一步的，定义元素或者显示控件的最小显示效果或者最大显示效果，以使每个用户界面元素都能在合理的显示效果范围内被终端加载。

再根据查询到的POS设备显示终端的大小或者分辨率，调整对应元素或者显示控件的大小或者分辨率。示例性的，通过百分比的方式改变用户界面元素的宽高值。使该元素或者显示控件的状态能适用于当前的用户界面，进而使得当前的用户界面状态能适用于该POS设备的显示终端，实现元素或者显示控件随屏幕分辨率进行自适应宽高值调整的功能。

进一步的，通过对显示控件或者元素进行最小显示效果或者最大显示效果，可以防止元素因为拉长或者加宽而出现失真或者显示模糊的情况。

另外，可以将相同样式的用户界面元素进行归类，用户界面元素的样式可以为分辨率、宽高值或者功能类别，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。若需修改样式，只要在样式列表中找到相应的样式声明进行修改即可。

通过目标用户界面的CSS文件中的用于查询终端的显示屏的配置参数API，查询所述终端的显示屏的配置参数，并根据查询到的配置参数修改目标用户界面的CSS文件中的用户界面的参数，解决了POS应用多系统多分辨率下不能兼容运行问题，简化了用户界面的开发流程，提高了应用开发效率，增强用户界面的复用性。并能统一公司的产品的用户体验样式，增强公司产品辨识度。

S104：根据所述终端的标识将所述HTML文件和修改后的所述CSS文件发送至所述终端。

根据终端的显示屏配置参数修改过用户界面参数之后，根据终端的标识，将该用户界面的HTML文件和修改后的用户界面元素的CSS文件发送至终端。

终端中的浏览器根据HTML文件中的标记符，确定如何显示其中的内容，例如文字如何处理，画面如何安排，图片如何显示等。浏览器按顺序阅读网页文件，然后根据标记符解析和显示其标记的内容，在终端上显示该HTML文件对应的用户界面。

根据修改后的CSS文件定义的样式结构，例如用户界面元素的字体、颜色、位置等，对网页中的用户界面元素的位置、样式等进行像素级精确控制，进而在终端上显示出于终端屏幕配置参数相符的用户界面。

终端获取到CSS文件后，调用预设的CSS解析包解析CSS文件，从而得到HTML标签与样式属性之间的预设对应关系，终端根据解析得到的每个HTML标签以及HTML标签与样式属性之间的预设对应关系，确定解析得到的每个HTML标签对应的样式或属性，即文字的处理方式、图像的显示方式或者画面的交互方式等，以使该HTML文件对应的用户界面通过浏览器按照标记符中的显示方式被显示出来。

以上，通过接收终端发送的加载用户界面的请求信息，请求信息包括用户界面标识以及终端的标识，通过用户界面标识确定目标用户界面；根据用户界面标识从用户界面库中获取与目标用户界面对应的目标文件，目标文件包括超文本标记语言HTML文件以及样式层叠表CSS文件，通过CSS文件包含的API查询终端的显示屏的配置参数，根据终端的显示屏的配置参数修改CSS文件中用户界面的显示分辨率和宽高值；根据终端的标识将HTML文件和修改后的CSS文件发送至终端。通过目标用户界面的CSS文件中的用于查询终端的显示屏的配置参数API，查询终端的显示屏的配置参数，并根据查询到的配置参数修改目标用户界面的CSS文件中的用户界面的参数，使用户界面库中的用户界面可以自适应地根据显示终端的情况设定用户界面的显示情况，保证软件产品用户界面样式的一致性，提高用户界面的复用性和维护性。

参见图2，图2是本发明另一实施例提供的一种POS应用的用户界面的加载方法的流程图。图2与图1的区别之处在于，图2在图1中的步骤S101之前增加了步骤S201，并且步骤S201包括S2011和S2012。本实施例中POS应用的用户界面的加载方法的执行主体为具有加载POS应用的用户界面功能的装置，该装置可以是服务器、计算机设备、平板电脑等设备。如图2所示的POS应用的用户界面的加载方法可以包括以下步骤：

S201：创建所述用户界面库，并将具有相同用户界面的分辨率或相同宽高值的用户界面存储于一套用户界面库中。

建立基于POS业务的用户界面库，该用户界面库由用户界面组成，用户界面库可以包括：控件库、组件库以及图标库；具有相同分辨率或相同宽高值的用户界面存储于一套用户界面库中，以使用户界面库中的界面或者元素具有统一性。

进一步的，本实施例中，步骤S201包括S2011和S2012：

S2011：将具有相同所述显示分辨率或宽高值的基础控件存储于一套基础控件库中；所述基础控件为具有单一属性的用户界面元素。

用户界面库中包括控件库，控件库是由基础控件封装而成的一类控件。这些基础控件都分别对应不用的属性、内容或事件，通过将基础控件的属性与其内容和实践进行绑定，确定该基础控件对应的属性、事件和内容。其中，属性是基础控件数据的简单访问者，事件和内容则是基础控件的一些简单可见的功能。

示例性的，基础控件可以为：输入框、按钮、复选框、输入框、开关、信息提示框、底部弹框选择栏等具有自己属性和方法的用户界面组成元素。其中，输入框用于记录用户输入的用户名称、磁卡卡号或者密码等用户信息；而输入框代表的事件或内容是使用户输入或提供自己或者磁卡的信息，通过将输入框的属性与其对应的内容和事件绑定，完成对该数据和方法的封装。

示例性的，信息提示框的属性是一条信息的显示，信息提示框的事件发生是在某件事情完成之后触发该信息，对用户进行相应的提示，信息提示框的内容则是需要提示用户的信息，并且为了不影响后续的操作或者视觉效果，该信息提示框可以仅用文字的形式出现，或者只显示3秒钟。

通过将具有相同显示分辨率或宽高值的基础控件存储于一套基础控件库中，并将其属性与其对应的内容和事件绑定，便于开发人员在开发的过程中进行直接调用，提升开发效率。

S2012：整合所述基础控件库中的基础控件，以构成业务控件；将具有相同所述显示分辨率或宽高值的所述业务控件存储于一套业务控件库中。

整合基础控件库中的基础控件，以构成业务控件。在本实施例中，业务控件是基于POS业务将多个基础控件进行组合，以完成一个整体的POS业务，开发人员可以对整个业务控件进行直接的调用，省去了分别调用基础控件的步骤，提高开发效率。

例如，将金额符号图标和输入框整合在一起，构成金额采集控件。开发人员可以直接调用该金额采集控件进行开发，而不是分别调用金额符号图标和输入框。

将具有相同显示分辨率或宽高值的业务控件存储于一套业务控件库中。示例性的，本实施例中的业务控件可以包括以下业务控件中的一种或多种，此处不做限制。

金额采集控件，该控件的显示内容为“金额符号图标+输入框”，默认实现金额的小数移位效果，即默认金额0.00，输入1后，自动处理为0.01。此种模式为POS中的一贯样式。

流水号采集控件，该控件功能为针对POS业务经常需要输入流水号的需求，整合对流水号输入的限制和检查，仅允许输入000001～999999范围内的数字内容。输入框内默认会提示“流水号”描述字样，待用户输入一位有效数字后，描述字样自动消失。

商户号、终端号采集控件，该控件功能为针对POS业务需要输入商户号、终端号需求，整合对商户号、终端号的输入限制和检查，限制商户号为15位数字内容、终端号为8位数字内容，输入框内默认提示“商户号”、“终端号”描述字样，用户输入一位有效数字后，描述字样自动消失。

参考号采集控件，该控件功能为针对POS业务需要输入参考号需求，整合度对参考号的输入限制和检查，限制参考号为12位数字内容，输入框默认带有“参考号”描述字样，输入一位有效数字后描述字样消失。

授权码采集控件，该控件功能为针对POS业务需要输入授权码需求，整合对授权码输入的限制和检查，允许输入包括数字、大小写字母的8位字符，输入框默认提示“授权码”描述字样，输入一位有效字符后描述字样消失。

手输卡号采集控件，该控件功能为针对POS业务需要手输卡号需求，整合对卡号输入的限制和检查，仅允许输入13～19位数字，输入框默认提示“卡号”描述字样，输入一位有效数字后描述字样消失。

卡有效期采集控件，该控件功能针对POS业务需要采集卡片有效期需求，整合对卡有效期的格式和检查，限制输入格式为“两位数字月份/两位数字年份”格式有效期，且截至年份应该大于当前年份。输入框默认显示当前“月/年”信息，如“07/17”，点击后会弹出月份和年份的列表以供滚动选择。

明文密码采集控件，该控件功能针对POS业务需要输入明文密码需求，如EMV卡片脱机交易。依照EMV规范要求，卡片最多允许尝试输入三次密码，每次输入后，需要提示剩余的密码输入次数。此控件会在密码输入框右侧随密码输入次数，更新文字信息提示“剩余次数x次”。

进一步的，以上所有POS业务控件，随着用户输入的过程，会自动高亮输入框，输入不符合要求时，自动红色高亮输入框边框，以示提醒。

通过将基础控件整合为业务控件可以简化用户界面中控件的开发过程，开发人员可以根据开发需求直接采用整合成的完整的业务控件，提升开发效率，并能保证整个开发结果的样式一致。

进一步的，用于用户界面库中还包括组件库，组件库中包括用户界面组件。用户界面组件由基于POS业务的基础控件和元素控件封装得到。其中，基础控件提供了单一类别的元素控件，提供了基于POS业务的基础控件组合，此组合实际也是基于用户界面元素的再次封装。

可选的，用户界面组件中可以包含：金额输入组件、寻卡组件、数字软键盘组件、电子签名板组件中通信组件、交易小票组件以及个人识别码PIN输入组件的一个或多个，此处不做限制。具体的，用户界面组件中可以包含：

金额输入组件，金额输入组件的显示内容可以为金额符号图标和输入框控件的封装，用于实现金额的数字移位效果。例如，金额输入组件中的默认金额为0.00，在操作者输入1之后，该组件自动处理为0.01。这种输入模式为POS设备中用户界面在有数字输入时的一贯样式。

寻卡组件，寻卡组件的显示内容可以包括一组银行卡类别的指示图标，以及用于显示卡号信息的输入框控件，请一并参阅图3。通过操作者将磁卡靠近POS设备，POS设备识别该磁卡的类型，并根据磁卡类型自动高亮显示对应的界面区域，或者灰度化其余的磁卡图标。

数字软键盘组件，请一并参阅图4和图5，图4和图5分别是本发明另一实施例提供的POS应用的用户界面的加载方法中不同手机终端系统中的数字软键盘组件的示意图。POS业务中需要经常输入数字操作，例如，输入磁卡的密码或者授权码、需处理的金额数目或者该磁卡对应的用户联系方式等交易数据，为了方便操作者的输入，定制了更为易用的数字软键盘组件。

电子签名组件，请一并参阅图6。POS业务中需要支持电子签名功能，综合业务形态可以提供电子签名板组件。该组件基于HTML画布，可以实现将签名轨迹映射在画布上，并结合相关操作按钮元素进行需要的处理。

通信组件，请一并参阅图7，针对POS规范中的相关要求，动态的提示交易通讯的过程，包括已连接服务器、正在发送中、正在接收中、正在处理中，并且根据交易设置的单次通信超时时间，显示倒计时效果。

交易小票组件，请一并参阅图8，针对交易过程中需要显示交易信息的需求，设计交易小票UI组件，用于显示交易小票的数据信息。

PIN输入组件，请一并参阅图9，针对交易过程中设计明文PIN输入的场景，结合明文密码采集控件和数字软键盘组件，扩展出PIN输入组件。

进一步的，由于组件的功能职责为直接面向上层应用调用，组件会涉及到上层应用的数据传递和事件交互两方面的内容处理。用户界面组件的数据传递方式为通过给组件添加自定义属性实现。示例性的，自定义键盘中用于指定显示何种类型的键盘，可以通过type属性指明键盘类别，显示仅数字软键盘调用的方式通过如下语句实现：

<key-board type＝"Number"></key-board>

小票组件、电子签名组件也是通过此种方式将交易数据传递给组件内显示处理。

用户界面组件还具有事件交互功能，事件交互指的是为组件提供和组件外内容的交互能力，以支撑数据通信服务。此功能依托于属性中指明回调方法实现。如寻卡组件中的卡信息传递事件交互，交互方式通过如下语句实现：

<read-card on-result＝"setData()"></read-card>

通过寻卡组件调用并指定回调函数，寻卡成功后，卡组件调用setData函数返回卡信息结果。

进一步的，POS应用的用户界面库中还可以包括图标库，图标库中可以包括：人民币/美元等金额符号、银行卡图标、现金图标、刷卡/挥卡/插卡动作动态图、打印图标等类型的图标。其中，POS应用的用户界面库中的图标可以自适应兼容从320像素大小的手机屏幕到1200像素大小的电脑屏幕，囊括了POS设备的所有分辨率大小，请一并参阅图10和图11，其中，图10为手机终端的显示屏的分辨率下的用户界面显示效果，图11为电脑终端的显示屏的分辨率下的用户界面显示效果。

通过用户界面库提供一系类POS业务相关的支撑图标，以保证用户界面样式的整体一致。并且其中的图标兼具矢量特性，支持矢量拉伸放大效果。

进一步的，现代浏览器支持CSS查询浏览器的信息，包括屏幕大小、窗口大小等信息。基于此功能封装出CSS的工具类，包括：元素水平垂直居中工具类、元素阴影工具类以及元素自动圆角工具类中的一个或多个，方便上层应用构建用户界面元素时扩展出响应式的特性。

可以理解的是，CSS的工具类中的类型包含以上实施例中的一个或多个，此处不做限制。

针对性的结合POS行业的相关规范和POS业务，提供丰富的POS应用的用户界面控件、组件集合，简化了POS应用用户界面的开发工作，提高了用户界面的复用性和可扩展性。使POS用户在多显示终端屏幕分辨率或大小的情况下依然能兼容运行，并且自适应用户界面作为统一的公共库，便于统一维护、管理和升级。统一公司的产品的用户体验样式，增强公司产品辨识度。

S202：接收终端发送的加载用户界面的请求信息，所述请求信息包括用户界面标识以及所述终端的标识，通过所述用户界面标识确定目标用户界面。

本实施例中的步骤S202与上一实施例中的步骤S101相同，具体请参阅上一实施例中的步骤S101的相关描述，此处不赘述。

S203：根据用户界面标识从用户界面库中获取与所述目标用户界面对应的目标文件，所述目标文件包括超文本标记语言HTML文件以及样式层叠表CSS文件，所述CSS文件中包括用于查询终端的显示屏的配置参数的应用程序编程接口API。

在确定与接收到的用户界面标识对应的目标用户界面之后，根据该用户界面标识从用户界面库中获取与所述目标用户界面对应的目标文件。目标文件预先存储于用户界面库中。

POS设备可以支撑使用HTML技术和CSS技术实现一套适合POS业务的自适应用户界面库，兼容所有分辨率屏幕，兼容多个操作系统。因此，在本实施例中，建立POS应用的用户界面的用户界面库，通过统一该用户界面库中的元素，与其对应的文件，以及HTML技术和CSS技术完成对POS设备用户界面的开发。达到提高开发效率、用户界面的复用性维护性，保证软件产品用户界面样式的一致性。

S204：通过所述CSS文件包含的所述API查询所述终端的显示屏的配置参数，根据所述终端的显示屏的配置参数修改所述CSS文件中的显示分辨率和宽高值。

在日常生活的POS业务分为很多种，按其用途可以分为：金融类POS设备，主要用于银联商务体系、各商业银行、各地信用合作社等银行系统；非金融类POS设备，适用于各种规模、各种类型的会员、连锁、加盟店；餐饮娱乐企业，汽车养护中心、化妆品专卖店、旅游景点等领域。按照POS设备的机型可以分为：台式POS设备、手持POS设备以及手机POS设备，其中手持POS设备的体积较小，移动方便，能以单键快速操作；台式POS设备的体积较手持POS设备大，但是功能比手持POS设备齐全；而移动手机POS设备按操作方式分类分为手机外置设备刷卡机和手机专用POS设备，其中，手机外置设备刷卡机可以随身携带，体积小、成本低，但是手机外置设备同时需要通过数据传输将外置设备的使用数据传输至处理器，存在较长的时延；而手机专用POS设备不需外置设备，能方便的随身携带，并能实现较短时间的跨行转账，具有较高的安全性，但是这种装置没有打印账单的功能并且成本较高。

无论是哪一种的POS设备，其都有相应的显示界面用于显示该设备当前的数据处理或者交易情况。操作者通过点击该设备显示界面上的按钮，或者通过该设备显示界面上的输入框输入相应的操作数据，对该次交易进行处理。因此不同的用户界面对应的基础控件及其元素的是不相同的。例如，在不同样式的交易环境中，该用户界面的样式或者结构也可能随之发生变化；或者，在不同大小的POS设备终端上，显示终端的大小或分辨率也是影响用户界面的基础控件及其元素的分辨率的重要因素之一。

通过CSS文件包含的API查询终端的显示屏的配置参数，根据终端的显示屏的配置参数修改CSS文件中的显示分辨率和宽高值；

根据获取到的屏幕尺寸，终端可以修改用户界面元素的CSS文件中的宽高值，以使用户界面元素的大小尺寸适用于要加载该用户界面的终端的显示屏幕的大小；根据获取到的屏幕分辨率，终端可以修改用户界面元素的CSS文件中的显示分辨率，以使用户界面元素的显示分辨率与要加载该用户界面的终端的屏幕分辨率相符，给予Web技术实现兼容多分辨率的POS设备用户界面的开发方法。使其具有样式一致性、自适应、组件化的特性。

S205：根据所述终端的标识将所述HTML文件和修改后的所述CSS文件发送至所述终端。

终端中的浏览器根据HTML文件中的标记符，确定如何显示其中的内容，例如文字如何处理，画面如何安排，图片如何显示等。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，在终端上显示该HTML文件对应的用户界面。根据修改后的CSS文件定义的样式结构，例如用户界面元素的字体、颜色、位置等，对网页中的用户界面元素的位置、样式等进行像素级精确控制，进而在终端上显示出于终端屏幕配置参数相符的用户界面。

以上可以看出，本实施例提供的一种POS应用的用户界面的加载方法通过创建用户界面库，并将具有相同用户界面的分辨率或相同宽高值的用户界面存储于一套用户界面库中；接收终端发送的加载用户界面的请求信息，请求信息包括用户界面标识以及终端的标识，通过用户界面标识确定目标用户界面；根据用户界面标识从用户界面库中获取与目标用户界面对应的目标文件，目标文件包括超文本标记语言HTML文件以及样式层叠表CSS文件，通过CSS文件包含的API查询终端的显示屏的配置参数，根据终端的显示屏的配置参数修改CSS文件中用户界面的显示分辨率和宽高值；根据终端的标识将HTML文件和修改后的CSS文件发送至终端。在本实施例中，建立POS应用的用户界面的用户界面库，通过统一该用户界面库中的元素，与其对应的文件，以及HTML技术和CSS技术完成对POS设备用户界面的开发。达到提高开发效率、用户界面的复用性维护性，保证软件产品用户界面样式的一致性。

参见图12，图12是本发明实施例提供的一种POS应用的用户界面的加载装置的示意图。本实施例中的POS应用的用户界面的加载的装置为具有加载POS应用的用户界面功能的装置，该装置可以是服务器、计算机设备、平板电脑等装置。本实施例中的装置300包括的各单元用于执行图1对应的实施例中的各步骤，具体请参阅图1及图1对应的实施例中的相关描述，此处不赘述。本实施例的POS应用的用户界面的加载的装置300包括信息接收单元301、目标获取单元302、参数修改单元303及文件发送单元304。具体的：

信息接收单元301用于接收终端发送的加载用户界面的请求信息，所述请求信息包括用户界面标识以及所述终端的标识，通过所述用户界面标识确定目标用户界面；

目标获取单元302用于根据用户界面标识从用户界面库中获取与所述目标用户界面对应的目标文件，所述目标文件包括超文本标记语言HTML文件以及样式层叠表CSS文件，所述CSS文件中包括用于查询终端的显示屏的配置参数的应用程序编程接口API；

参数修改单元303用于通过所述CSS文件包含的所述API查询所述终端的显示屏的配置参数，根据所述终端的显示屏的配置参数修改所述CSS文件中用户界面的显示分辨率和宽高值；

文件发送单元304用于根据所述终端的标识将所述HTML文件和修改后的所述CSS文件发送至所述终端。

以上可以看出，本实施例提供的一种POS应用的用户界面的加载装置接收终端发送的加载用户界面的请求信息，请求信息包括用户界面标识以及终端的标识，通过用户界面标识确定目标用户界面；根据用户界面标识从用户界面库中获取与目标用户界面对应的目标文件，目标文件包括超文本标记语言HTML文件以及样式层叠表CSS文件，通过CSS文件包含的API查询终端的显示屏的配置参数，根据终端的显示屏的配置参数修改CSS文件中用户界面的显示分辨率和宽高值；根据终端的标识将HTML文件和修改后的CSS文件发送至终端。以自适应地兼容各类不同屏幕分辨率的终端，保证软件产品用户界面的分辨率和宽高值等一致性和统一性。

参见图13，图13是本发明实施例提供的一种POS应用的用户界面的加载装置的示意图。本实施例中的POS应用的用户界面的加载的装置为具有加载POS应用的用户界面功能的装置，该装置可以是服务器、计算机设备、平板电脑等装置。本实施例中的装置400包括的各单元用于执行图2对应的实施例中的各步骤，具体请参阅图2及图2对应的实施例中的相关描述，此处不赘述。本实施例的POS应用的用户界面的加载的装置400包括用户界面库创建单元401、信息接收单元402、目标获取单元403、参数修改单元404、文件发送单元405。

用户界面库创建单元401用于创建所述用户界面库，并将具有相同用户界面的分辨率或相同宽高值的用户界面存储于一套用户界面库中。

其中，用户界面库创建单元401包括基础控件库创建单元4011和业务控件库创建单元4012。

基础控件库创建单元4011用于将具有相同所述显示分辨率或宽高值的基础控件存储于一套基础控件库中；所述基础控件为具有单一属性的用户界面元素。

业务控件库创建单元4012用于整合所述基础控件库中的基础控件，以构成业务控件；将具有相同所述显示分辨率或宽高值的所述业务控件存储于一套业务控件库中。

信息接收单元402用于接收终端发送的加载用户界面的请求信息，所述请求信息包括用户界面标识以及所述终端的标识，通过所述用户界面标识确定目标用户界面。

目标获取单元403用于根据用户界面标识从用户界面库中获取与所述目标用户界面对应的目标文件，所述目标文件包括超文本标记语言HTML文件以及样式层叠表CSS文件，所述CSS文件中包括用于查询终端的显示屏的配置参数的应用程序编程接口API。

参数修改单元404用于通过所述CSS文件包含的所述API查询所述终端的显示屏的配置参数，根据所述终端的显示屏的配置参数修改所述CSS文件中用户界面的显示分辨率和宽高值。

文件发送单元405用于根据所述终端的标识将所述HTML文件和修改后的所述CSS文件发送至所述终端。

以上可以看出，本实施例提供的一种POS应用的用户界面的加载装置创建用户界面库，并将具有相同用户界面的分辨率或相同宽高值的用户界面存储于一套用户界面库中；接收终端发送的加载用户界面的请求信息，请求信息包括用户界面标识以及终端的标识，通过用户界面标识确定目标用户界面；根据用户界面标识从用户界面库中获取与目标用户界面对应的目标文件，目标文件包括超文本标记语言HTML文件以及样式层叠表CSS文件，通过CSS文件包含的API查询终端的显示屏的配置参数，根据终端的显示屏的配置参数修改CSS文件中用户界面的显示分辨率和宽高值；根据终端的标识将HTML文件和修改后的CSS文件发送至终端。在本实施例中，建立POS应用的用户界面的用户界面库，通过统一该用户界面库中的元素，与其对应的文件，以及HTML技术和CSS技术完成对POS设备用户界面的开发。达到提高开发效率、用户界面的复用性维护性，保证软件产品用户界面样式的一致性。

应理解，上述实施例中各步骤的序号的宽高值并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

参见图14，图14是本发明再一实施例提供的一种POS应用的用户界面的加载装置的示意图。如图14所示的本实施例中的POS应用的用户界面的加载的装置500可以包括：处理器501、存储器502以及存储在存储器502中并可在处理器501上运行的计算机程序503，例如修改所述CSS文件中用户界面的显示分辨率和宽高值的程序。处理器501执行计算机程序503时实现上述各个POS应用的用户界面的加载方法实施例中的步骤。例如图1所示的S101至S104。或者，处理器501执行计算机程序503时实现上述各装置实施例中各单元的功能，例如图12所述的单元301至304。

示例性的，计算机程序503可以被分割成一个或多个单元，所述一个或者多个单元被存储在所述存储器502中，并由所述处理器501执行，以完成本发明。所述一个或多个单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序503在POS应用的用户界面的加载的装置500中的执行过程。例如，所述计算机程序503可以被分割成信息接收单元、目标获取单元、参数修改单元及文件发送单元，各单元具体功能如下：

信息接收单元用于接收终端发送的加载用户界面的请求信息，所述请求信息包括用户界面标识以及所述终端的标识，通过所述用户界面标识确定目标用户界面。

目标获取单元用于根据用户界面标识从用户界面库中获取与所述目标用户界面对应的目标文件，所述目标文件包括超文本标记语言HTML文件以及样式层叠表CSS文件，所述CSS文件中包括用于查询终端的显示屏的配置参数的应用程序编程接口API。

参数修改单元用于通过所述CSS文件包含的所述API查询所述终端的显示屏的配置参数，根据所述终端的显示屏的配置参数修改所述CSS文件中用户界面的显示分辨率和宽高值。

文件发送单元用于根据所述终端的标识将所述HTML文件和修改后的所述CSS文件发送至所述终端。

所述POS应用的用户界面的加载的装置可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述POS应用的用户界面的加载的装置可包括，但不仅限于，处理器501、存储器502。本领域技术人员可以理解，图14仅仅是POS应用的用户界面的加载的装置500的示例，并不构成对POS应用的用户界面的加载的装置500的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述调节封闭工作环境的装置还可以包括输入输出设备、网络接入设备、总线等。

所称处理器501可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

所述存储器502可以是所述POS应用的用户界面的加载的装置500的内部存储单元，例如POS应用的用户界面的加载的装置500的硬盘或内存。所述存储器502也可以是所述POS应用的用户界面的加载的装置500的外部存储设备，例如所述POS应用的用户界面的加载的装置500上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器502还可以既包括所述POS应用的用户界面的加载的装置500的内部存储单元也包括外部存储设备。所述存储器502用于存储所述计算机程序以及所述调节封闭工作环境的装置所需的其他程序和数据。所述存储器502还可以用于暂时地存储已经输出或者将要输出的数据。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述装置中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

在本发明所提供的实施例中，应该理解到，所揭露的装置/终端设备和方法，可以通过其它的方式实现。例如，以上所描述的装置/终端设备实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个装置，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。

Claims

1.一种POS应用的用户界面的加载方法，其特征在于，包括：

2.如权利要求1所述的POS应用的用户界面的加载方法，其特征在于，在所述接收终端发送的加载用户界面的请求信息之前，所述方法还包括：

创建所述用户界面库，并将具有相同用户界面的分辨率或相同宽高值的用户界面存储于一套用户界面库中。

3.如权利要求1或2所述的POS应用的用户界面的加载方法，其特征在于，所述终端的显示屏的配置参数包括屏幕尺寸或屏幕分辨率；

所述用户界面库中包括CSS工具类，所述CSS工具类包括：元素水平垂直居中工具类、元素阴影工具类以及元素自动圆角工具类中的一个或至少两个；

所述通过所述CSS文件包含的所述API查询所述终端的显示屏的配置参数，根据所述终端的显示屏的配置参数修改所述CSS文件中用户界面的显示分辨率和宽高值，包括：

根据所述显示屏的屏幕尺寸，通过所述用户界面库中包括的所述CSS工具类修改所述用户界面元素的所述CSS文件中所述用户界面的宽高值；或者

根据所述显示屏的屏幕分辨率，通过所述用户界面库中包括的所述CSS工具类修改所述用户界面元素的所述CSS文件中的显示分辨率。

4.如权利要求2所述的POS应用的用户界面的加载方法，其特征在于，所述创建所述用户界面库，并将具有相同用户界面的分辨率或相同宽高值的用户界面存储于一套用户界面库中，包括：

将具有相同所述显示分辨率或宽高值的基础控件存储于一套基础控件库中；所述基础控件为具有单一属性的用户界面元素；

整合所述基础控件库中的基础控件，以构成业务控件；将具有相同所述显示分辨率或宽高值的所述业务控件存储于一套业务控件库中。

5.如权利要求2所述的POS应用的用户界面的加载方法，其特征在于，所述创建所述用户界面库，还包括：

在所述用户界面库中创建用户界面组件库，所述用户界面组件库由用户界面组件组成；

通过封装多个所述基础控件得到所述用户界面组件；所述用户界面组件包括：寻卡组件、电子签名组件、数字软键盘组件、通信组件、交易小票组件以及个人识别码PIN输入组件中的一个或至少两个。

6.一种POS应用的用户界面的加载的装置，其特征在于，包括：

7.如权利要求6所述的POS应用的用户界面的装置，其特征在于，在所述信息接收单元之前，所述装置还包括：

用户界面库创建单元，用于创建所述用户界面库，并将具有相同用户界面的分辨率或相同宽高值的用户界面存储于一套用户界面库中。

8.如权利要求7所述的POS应用的用户界面的装置，其特征在于，所述用户界面库创建单元还包括：

基础控件库创建单元，用于将具有相同所述显示分辨率或宽高值的基础控件存储于一套基础控件库中；所述基础控件为具有单一属性的用户界面元素；

业务控件库创建单元，用于整合所述基础控件库中的基础控件，以构成业务控件；将具有相同所述显示分辨率或宽高值的所述业务控件存储于一套业务控件库中。

9.一种POS应用的用户界面的加载的装置，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至5任一项所述方法的步骤。

10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至5任一项所述方法的步骤。