CN105760149A - 客户端界面动态显示方法及其系统 - Google Patents

Abstract

本申请涉及数据显示技术，公开了一种客户端界面动态显示方法及其系统。在本申请的客户端界面动态显示方法中，客户端与服务器关于一些基础组件制定了数据结构协议，从而在需要展现新的业务界面时，只需要将相应于特定基础组件的业务数据发送给客户端，客户端就能根据数据结构协议获取特定基础组件的关系数据，将基础组件进行展示，而不依赖于版本的发布，在减少客户端版本发布的频率的同时，支持动态业务扩展。此外，利用输入类型的基础组件来回收客户端的输入值，有利于扩展与客户端的动态交互业务。

Description

客户端界面动态显示方法及其系统

技术领域

本申请涉及数据显示技术，特别涉及客户端界面动态显示方法及其系统。

背景技术

组件为完成特定功能的数据结构实体，例如用来完成客户端用户界面(UserInterface，简称“UI”)的渲染或者用于客户端数据的回收。业务组件为具有一定业务含义的组件，不具有通用性，例如电子商务系统中，手机订单系统中的提供商品运输方式选择功能的页面组件。

通常为了在移动通讯工具上的客户端支持新的业务组件，必须要等到客户端的新的版本发布才可以支持，如此业务组件支持的周期会很长，导致移动通讯客户端中的业务与PC端的业务不匹配性上升，影响用户在移动通讯客户端的体验。

发明内容

本申请的目的在于提供一种客户端界面动态显示方法及其系统，减少了客户端版本的发布频率，支持动态业务扩展。

为解决上述技术问题，本申请的实施方式公开了一种客户端界面动态显示方法，客户端与服务器关于基础组件具有数据结构协议，该方法包括以下步骤：

在需要更新客户端界面时，从服务器获取相应于基础组件的业务数据，业务数据包括反映基础组件之间关系的关系数据；

根据数据结构协议解析业务数据以获取记载基础组件之间关系的关系数据；

根据关系数据加载基础组件。

本申请的实施方式还公开了一种客户端界面动态显示系统，系统包括客户端和服务器，客户端与服务器关于基础组件具有数据结构协议；

客户端包括：

第一获取模块，用于在需要更新客户端界面时，从服务器获取相应于基础组件的业务数据，业务数据包括反映基础组件之间关系的关系数据；

第一解析模块，用于根据数据结构协议解析业务数据以获取记载基础组件之间关系的关系数据；以及

第一加载模块，用于根据关系数据加载基础组件。

本申请实施方式与现有技术相比，主要区别及其效果在于：

在本申请的客户端界面动态显示方法中，客户端与服务器关于一些基础组件制定了数据结构协议，从而在需要展现新的业务界面时，只需要将相应于特定基础组件的业务数据发送给客户端，客户端就能根据数据结构协议获取特定基础组件的关系数据，将基础组件进行展示，而不依赖于版本的发布，在减少客户端版本发布的频率的同时，支持动态业务扩展。

进一步地，利用输入类型的基础组件来回收客户端的输入值，有利于扩展与客户端的动态交互业务。

进一步地，业务数据还可以包括各基础组件的组件结构数据，由客户端从服务器获取组件结构数据，可以使得客户端界面的动态显示更灵活，以更好地支持动态业务扩展。

附图说明

图1是本申请第一实施方式中一种客户端界面动态显示方法的流程示意图；

图2是本申请第三实施方式中一种客户端界面动态显示系统的结构示意图。

具体实施方式

在以下的叙述中，为了使读者更好地理解本申请而提出了许多技术细节。但是，本领域的普通技术人员可以理解，即使没有这些技术细节和基于以下各实施方式的种种变化和修改，也可以实现本申请各权利要求所要求保护的技术方案。

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请的实施方式作进一步地详细描述。

本申请第一实施方式涉及一种客户端界面动态显示方法。图1是该客户端界面动态显示方法的流程示意图。

如图1所示，该客户端界面动态显示方法包括以下步骤101-103。

步骤101，设定基础组件及基础组件对应的数据结构协议。

客户端与服务器关于基础组件具有数据结构协议，每一基础组件适用于数据结构相同的业务数据。可以理解，这里的基础组件可以预先指定。例如，可以预先指定一些具有一定通用性的原子组件为基础组件。这里的业务数据包括反映基础组件之间关系的关系数据。

步骤102，在需要更新客户端界面时，从服务器获取相应于基础组件的业务数据，并根据数据结构协议解析所述业务数据以获取记载所述基础组件之间的关系的关系数据。

所述关系数据包括基础组件之间的联动关系和层次关系。所述联动关系包括基础组件之间对在发生状态变化时的联动规则的约定。当一个组件随另外一个组件的状态变化而相应发生变化，则这两个组件之间具有联动关系。

所述层次关系包括基础组件之间的嵌套关系(或称为父子关系)。

步骤103，根据所述关系数据加载所述基础组件。

在本实施方式的客户端界面动态显示方法中，客户端与服务器关于一些基础组件制定了数据结构协议，从而在需要展现新的业务界面时，只需要将相应于特定基础组件的业务数据发送给客户端，客户端就能根据数据结构协议获取特定基础组件的关系数据，将所述基础组件进行展示，而不依赖于版本的发布，在减少客户端版本发布的频率的同时，支持动态业务扩展。

本申请第二实施方式涉及一种客户端界面动态显示方法。第二实施方式在第一实施方式的基础上进行了以下改进。

利用输入类型的基础组件来回收客户端的输入值，有利于扩展与客户端的动态交互业务。具体地说：

基础组件包括输入类型的基础组件，上述客户端界面动态显示方法还包括以下步骤：

从服务器接收到相应于输入类型的基础组件的业务数据时，客户端将相应于该输入类型的基础组件的输入值返回给服务器。

在服务器端，服务器根据数据结构协议从客户端获取相应于该输入类型的基础组件的输入值。

优选地，上述数据结构协议包括对输入值的限定规则。例如若输入的内容是电话号码，则必须符合电话号码是6－20位数字的规则；若输入的内容是身份证号码，则必须符合身份证号码只能为数字或字母的规则。如果输入的内容不符合上述规则，则会给出相应的错误提示信息。

此外，服务器根据从客户端获取的相应于输入类型的基础组件的输入值，对与该输入类型的基础组件相关联的其他组件的值进行修改。

可以理解，在本申请的各个实施方式中，每个基础组件的状态的变化可以有一套与其对应的异步联动状态集：如A组件展示的某一属性的属性值的变化，会导致B组件相应属性的属性值的变化，进而导致C组件相应属性的属性值的变化或相应属性的状态的变化(比如所述属性的可编辑状态变成不可编辑状态等)。同时这一系列状态的变迁，可以在本地完成或发远程请求完成，其取决于服务器的动态的配置。每个基础组件的异步联动状态集将根据相应业务进行配置。例如，本申请实施例中的客户端界面动态显示系统在向用户提供操作界面时，某些功能对于用户信息满足设定条件的特定用户开放。这些功能对应的基础组件的状态会根据用户信息来进行配置。对基础组件的状态的配置信息可以由服务器根据用户信息反馈给客户端，客户端根据服务器返回的所述配置信息加载所述基础组件。

此外，所述业务数据还可以包括各基础组件的组件结构数据。由客户端从服务器获取组件结构数据，可以使得客户端界面的动态显示更灵活，以更好地支持动态业务扩展。具体地说：

该客户端界面动态显示方法还包括以下步骤：

在需要更新客户端界面时，从服务器获取该客户端界面的各基础组件的组件结构数据；

客户端根据组件结构数据加载各基础组件。

可以理解，在本申请的各个实施方式中，上述组件结构数据可以包括组件的大小、组件的位置以及组件的显示顺序等等，其依赖于具体的业务场景进行设置。

在本申请的一个优选的例子中，服务器和客户端对以下基础组件制定了数据结构协议：

●开关组件Toggle＝{name,checked,name}

该开关组件对应客户端中的“开”或“关”操作，其中前一个name表示开关的名称，比如是否需要使用业务D；checked的布尔类型表示开关的两种状态；后一个name即该开关组件的名称，比如“使用业务D”。

●输入组件Input＝{name,placeholder,value,regex,errorMsg,plugin}

该输入组件表示一个输入框，其中regex是用来校验输入内容的正则表达式，若校验不通过，则相应的错误信息会在errorMsg中给出；plugin决定输入的内容的获取方式，例如是通过本地通讯录来获取(contacts)，还是通过本地日历来获取(calendar)，甚至是普通的用户输入。

●级联组件Cascade＝{title,expand,target}

该级联组件用来实现级联选择功能，例如国家、省、市、区的选择，是一个动态的组件，其中expand表示组件初始状态是展开还是闭合，target表示子级联组件。

●标签组件Label＝{value,url,css＝{color,isBold,isItalic}}

该标签组件用来展示文案信息，其中value就是展示的内容；url表示对应的链接；css表示文案的颜色、粗细、斜体。

●提示组件Tips＝{resource,tipsType＝{html|url|img}}

该提示组件以气泡提示信息展示，其中提示类型tipsType决定了resource的展现形式是一段html代码(需要客户端的webview来展示)，还是一个url，或者是一张图片。

●日历组件DatePicker＝{title,beginDate,endDate,invalidWeekday,selectedDate,placeholder}

该日历组件为日期选择的控件，其中selectedDate表示选中的日期，选择的范围就是在beginDate和endDate之间，但若选中的日期在本周的invalidWeekday中，也是不可以选择的。

●选择组件Select＝{selectedId,disabled,title,options＝{name,value,optionId}}

在该选择组件中，options承载了该选择组件的所有候选项，选中项的optionId最终会同步到selectedId上，用于最后的数据提交。

对于上述的数据结构协议，服务器和客户端都会遵守。当客户端接收到服务器输出的业务数据的时候，它已经知道该如何来展示。所以这就有个好处，例如需要在下单页提示“七天无理由退货”的文案信息，此时服务器只要按既定的数据结构协议，输出相应于标签组件Lable的业务数据，就可以实现该需求。再或者增加了话费交易类型，需要客户端展现输入框，同时用户输入的内容还必须符合手机号码的规则，此时服务器需要做的就是按照既定的数据结构协议，输出相应于输入组件Input的业务数据就可以了，即扩展性就体现在这里了。

在另一个具体的例子中，商品分为集市商品和商城商品。在以往的业务逻辑中商城商品不支持业务E。但有了新的业务场景后，使得商城商品支持业务E。按照前述的业务约定，商城商品不该支持业务E。但使用关于基础组件的数据结构协议会对这样的需求这样处理：服务器梳理出商城商品的交易之后，会输出相应于开关组件(Toggle)类型的业务数据，然后客户端就可以展示一个滑动的按钮，用以打开或关闭业务E。

除了展示之外，对于页面数据的回收(例如下单页需要将关键数据提交到服务器完成订单的创建)也是按照组件粒度来回收(或者说以组件为单位来回收)。例如服务器接收相应于开关组件Toggle的数据之后，直接获取其checked属性的数值；服务器接收相应于输入组件Input的数据之后，例如实现备忘录的输入组件Input，直接获取其对应的value。具体地，当用户填写了备忘录之后，会将相应于该输入组件Input的数据提交给服务器，对于输入组件Input，服务器会回收其中的value字段对应的数值(需要注意的是，当使用该输入组件Input的用户并没有输入任何内容时，服务器不回收数值，只有当用户填写了内容之后，服务器才会将填写的内容回填到其输入组件Input的value字段上来)。服务器接收到相应于所有提交的输入组件的数据之后，获取其中的关键元素信息(备忘录的内容、收货地址信息、运送方式的选择、服务的选择等等)，然后组装成最终的参数(例如下单参数)。

此外，可以理解，在本申请的各个实施例中，服务器输出的可以不仅仅是相应于组件的业务数据，同时也可以输出页面组件的结构信息，例如组件之间的顺序，顺序的输出依赖具体的业务场景。例如普通的下单页的输出顺序为：收货地址、店铺信息、店铺优惠、商品信息、商品优惠、积分、确认购买按钮。而对于交易类型F，它期望将收货地址放到订单信息的下面，对于这种情况服务器只要判断出交易类型F之后，将页面输出结构信息做一调整即可(服务器有一份默认的配置文件)。

由上可以看到业务增加了，客户端展现变了，但客户端并未依赖版本的发布。

可以理解，上述仅为一优选的例子，在本申请的其他实施例中，也可以根据具体业务需要设置其他类型的基础组件，来实现界面动态显示和参数回收，不限于上述基础组件。

此外，可以理解，上述基础组件的定义不限于本地组件的形式，可以通过桥接组件Bridge完成本地组件和webview的交互，选中了桥接组件Bridge之后，跳到html5页面，然后将html5页面上一系列操作得到的最终数据回传给桥接组件Bridge。具体地，桥接组件Bridge涵盖一些关键属性：title、desc、url、info，其中关键属性url是用户触发了该桥接组件Bridge之后跳转的url，这个url对应的页面中的内容可以自行扩展。用户在此页面上进行一系列操作之后，会将操作的结果回填给info字段，即完成了webview组件到本地组件之间的数据传输。

目前主流客户端平台为Android和ios，一般来说客户端的页面以系统本身能够认识的语言来编写，比如Android以java语言实现本地组件，而ios以objectc来实现本地组件，但这些不能实现跨平台。所以为了业务快速迭代，部分组件会采用跨平台实现。例如，当用户选中上述的桥接组件Bridge的时候，会通过webview(Android和ios两平台都有该执行引擎)加载html片段来完成渲染；且当用户在该页面进行操作之后，会将操作的结果返回给桥接组件Bridge完成该组件上参数的回收。

上述基础组件也可以为条款组件Terms的形式，此条款组件Terms涵盖这些关键属性：title、desc、url以及notAgreeMsg。该条款组件Terms展示的时候，会有个链接用户描述具体的条款信息，而desc用来描述简单的条款信息；当用户没有同意条款而提交下单会提示这个信息：notAgreeMsg。

本申请的各方法实施方式均可以以软件、硬件、固件等方式实现。不管本申请是以软件、硬件、还是固件方式实现，指令代码都可以存储在任何类型的计算机可访问的存储器中(例如永久的或者可修改的，易失性的或者非易失性的，固态的或者非固态的，固定的或者可更换的介质等等)。同样，存储器可以例如是可编程阵列逻辑(ProgrammableArrayLogic，简称“PAL”)、随机存取存储器(RandomAccessMemory，简称“RAM”)、可编程只读存储器(ProgrammableReadOnlyMemory，简称“PROM”)、只读存储器(Read-OnlyMemory，简称“ROM”)、电可擦除可编程只读存储器(ElectricallyErasableProgrammableROM，简称“EEPROM”)、磁盘、光盘、数字通用光盘(DigitalVersatileDisc，简称“DVD”)等等。

本申请第三实施方式涉及一种客户端界面动态显示系统。图2是该客户端界面动态显示系统的结构示意图。该客户端界面动态显示系统包括客户端和服务器，客户端与服务器关于基础组件具有数据结构协议。每一基础组件适用于数据结构相同的业务数据。可以理解，这里的基础组件可以预先指定。例如，可以预先指定一些具有一定通用性的原子组件为基础组件。这里的业务数据包括反映基础组件之间关系的关系数据。

如图2所示，该客户端包括：

第一获取模块，用于在需要更新客户端界面时，从服务器获取相应于基础组件的业务数据，业务数据包括反映基础组件之间关系的关系数据。

第一解析模块，用于根据数据结构协议解析业务数据以获取记载基础组件之间关系的关系数据。以及

第一加载模块，用于根据关系数据加载基础组件。

所述关系数据包括基础组件之间的联动关系和层次关系。所述联动关系包括基础组件之间对在发生状态变化时的联动规则的约定。当一个组件随另外一个组件的状态变化而相应发生变化，则这两个组件之间具有联动关系。

所述层次关系包括基础组件之间的嵌套关系(或称为父子关系)。

本实施方式的客户端界面动态显示系统包括客户端和服务器，客户端与服务器关于一些基础组件制定了数据结构协议，从而在需要展现新的业务界面时，只需要将相应于特定基础组件的业务数据发送给客户端，客户端就能根据数据结构协议获取特定基础组件的关系数据，将基础组件进行展示，而不依赖于版本的发布，在减少客户端版本发布的频率的同时，支持动态业务扩展。

第一实施方式是与本实施方式相对应的方法实施方式，本实施方式可与第一实施方式互相配合实施。第一实施方式中提到的相关技术细节在本实施方式中依然有效，为了减少重复，这里不再赘述。相应地，本实施方式中提到的相关技术细节也可应用在第一实施方式中。

本申请第四实施方式涉及一种客户端界面动态显示系统。第四实施方式在第三实施方式的基础上进行了以下改进。

利用输入类型的基础组件来回收客户端的输入值，有利于扩展与客户端的动态交互业务。具体地说：

基础组件包括输入类型的基础组件。

客户端还包括返回模块，用于在从服务器接收到相应于输入类型的基础组件的业务数据时，将相应于该输入类型的基础组件的输入值返回给服务器。

服务器还包括第二获取模块，用于根据数据结构协议从客户端获取相应于输入类型的基础组件的输入值。

优选地，上述数据结构协议包括对输入值的限定规则。

此外，服务器还包括联动模块，用于根据上述第二获取模块从客户端获取的相应于输入类型的基础组件的输入值，对与该输入类型的基础组件相关联的其他组件的值进行修改。

此外，所述业务数据还可以包括各基础组件的组件结构数据，由客户端从服务器获取组件结构数据，可以使得客户端界面的动态显示更灵活，以更好地支持动态业务扩展。具体地说：

该客户端还包括：

第三获取模块，用于在需要更新客户端界面时，从服务器获取该客户端界面的各基础组件的组件结构数据。以及

第二加载模块，用于根据组件结构数据来加载各基础组件。

第二实施方式是与本实施方式相对应的方法实施方式，本实施方式可与第二实施方式互相配合实施。第二实施方式中提到的相关技术细节在本实施方式中依然有效，为了减少重复，这里不再赘述。相应地，本实施方式中提到的相关技术细节也可应用在第二实施方式中。

综上，本申请中提及的基础组件可以弥补业务支持周期长的缺陷。在客户端和服务器双方约定的前提下，制定出一套交互的业务协议(这里的交互例如为：下单页的展现和下单参数的回收)。将不变的或者功能类似的业务数据抽象成基础模型，如抽象为基础组件：Select,Input,Switch,Label,Table等。此约定带来的好处就是在服务器业务变化的情况下，可以将数据模型向基础组件上来靠拢，如此客户端在遵守先前协议解析的前提下，就可以直接展现新的业务特征。同时对于参数的回收，也是通过类似的理念，如选择组件Select关键数据是selectId，而输入组件Input关键数据为value，开关组件Toggle的关键数据是开关的关闭属性checked。这样，减少了客户端版本发布的频率，支持动态业务的扩展。

需要说明的是，本申请各设备实施方式中提到的各模块都是逻辑模块，在物理上，一个逻辑模块可以是一个物理模块，也可以是一个物理模块的一部分，还可以以多个物理模块的组合实现，这些逻辑模块本身的物理实现方式并不是最重要的，这些逻辑模块所实现的功能的组合才是解决本申请所提出的技术问题的关键。此外，为了突出本申请的创新部分，本申请上述各设备实施方式并没有将与解决本申请所提出的技术问题关系不太密切的模块引入，这并不表明上述设备实施方式并不存在其它的模块。

需要说明的是，在本专利的权利要求和说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

虽然通过参照本申请的某些优选实施方式，已经对本申请进行了图示和描述，但本领域的普通技术人员应该明白，可以在形式上和细节上对其作各种改变，而不偏离本申请的精神和范围。

Claims (10)

1.一种客户端界面动态显示方法，其特征在于，客户端与服务器关于基础组件具有数据结构协议，所述方法包括以下步骤：

在需要更新所述客户端界面时，从所述服务器获取相应于所述基础组件的业务数据，所述业务数据包括反映基础组件之间关系的关系数据；

根据所述数据结构协议解析所述业务数据以获取记载基础组件之间关系的关系数据；

根据所述关系数据加载所述基础组件。

2.根据权利要求1所述的客户端界面动态显示方法，其特征在于，所述基础组件包括输入类型的基础组件，所述方法还包括以下步骤：

从所述服务器接收到相应于输入类型的基础组件的业务数据时，所述客户端将相应于该输入类型的基础组件的输入值返回给所述服务器；

所述服务器根据所述数据结构协议从所述客户端获取相应于所述输入类型的基础组件的输入值。

3.根据权利要求1所述的客户端界面动态显示方法，其特征在于，所述关系数据包括基础组件之间的联动关系和层次关系。

4.根据权利要求2所述的客户端界面动态显示方法，其特征在于，所述方法还包括以下步骤：

所述服务器根据从所述客户端获取的相应于所述输入类型的基础组件的输入值，对与该输入类型的基础组件相关联的其他组件的值进行修改。

5.根据权利要求1所述的客户端界面动态显示方法，其特征在于，该方法还包括以下步骤：

在需要更新所述客户端界面时，从所述服务器获取所述客户端界面的各基础组件的组件结构数据；

所述客户端根据所述组件结构数据来加载各基础组件。

6.一种客户端界面动态显示系统，其特征在于，所述系统包括客户端和服务器，所述客户端与所述服务器关于基础组件具有数据结构协议；

所述客户端包括：

第一获取模块，用于在需要更新所述客户端界面时，从所述服务器获取相应于所述基础组件的业务数据，所述业务数据包括反映基础组件之间关系的关系数据；

第一解析模块，用于根据所述数据结构协议解析所述业务数据以获取记载基础组件之间关系的关系数据；以及

第一加载模块，用于根据所述关系数据加载所述基础组件。

7.根据权利要求6所述的客户端界面动态显示系统，其特征在于，所述基础组件包括输入类型的基础组件；

所述客户端还包括返回模块，用于在从所述服务器接收到相应于输入类型的基础组件的业务数据时，将相应于该输入类型的基础组件的输入值返回给所述服务器；

所述服务器包括第二获取模块，用于根据所述数据结构协议从所述客户端获取相应于所述输入类型的基础组件的输入值。

8.根据权利要求6所述的客户端界面动态显示系统，其特征在于，所述关系数据包括基础组件之间的联动关系和层次关系。

9.根据权利要求7所述的客户端界面动态显示系统，其特征在于，所述服务器还包括联动模块，用于根据所述第二获取模块从所述客户端获取的相应于所述输入类型的基础组件的输入值，对与该输入类型的基础组件相关联的其他组件的值进行修改。

10.根据权利要求6所述的客户端界面动态显示系统，其特征在于，所述客户端还包括第三获取模块，用于在需要更新所述客户端界面时，从所述服务器获取所述该客户端界面的各基础组件的组件结构数据；以及

第二加载模块，用于根据所述组件结构数据来加载各基础组件。