CN108363600A

CN108363600A - 应用程序的组件显示方法、装置及电子设备

Info

Publication number: CN108363600A
Application number: CN201810045687.9A
Authority: CN
Inventors: 刘孟
Original assignee: Wuba Co Ltd
Current assignee: Wuba Co Ltd
Priority date: 2018-01-17
Filing date: 2018-01-17
Publication date: 2018-08-03

Abstract

本发明实施例提供一种应用程序的组件显示方法、装置及电子设备，该方法包括：接收服务器发送的组件数组，所述组件数组中包括至少一个子数组，每个所述子数组中包括至少一个组件；根据所述至少一个子数组，在应用程序的页面上对所述组件数组中的组件进行分组显示。该方法中，APP客户端从服务器接收包含至少一个子数组的组件数组，进而可以根据组件数组中所划分出的子数组，在应用程序的页面上对组件进行分组显示，从而实现了组件的分组显示，极大地提升了用户使用APP的体验。

Description

应用程序的组件显示方法、装置及电子设备

技术领域

本发明实施例涉及计算机技术，尤其涉及一种应用程序的组件显示方法、装置及电子设备。

背景技术

目前的一些应用程序(Application，简称APP)通过组件化来实现在页面上动态、任意组合的展示不同的内容或样式。

现有技术中，APP的客户端根据服务器下发的不同数据，通过一系列的转换，匹配到APP内相应的组件，进而根据数据的顺序来显示对应的组件，从而实现组件化。

但是，现有技术技能完成对组件数据的顺序显示，无法实现对组件的分组，影响用户体验。

发明内容

本发明实施例提供一种应用程序的组件显示方法、装置及电子设备，用于解决现有技术中无法对组件分组显示所导致的用户体验不佳的问题。

本发明实施例第一方面提供一种应用程序的组件显示方法，包括：

接收服务器发送的组件数组，所述组件数组中包括至少一个子数组，每个所述子数组中包括至少一个组件；

根据所述至少一个子数组，在应用程序的页面上对所述组件数组中的组件进行分组显示。

进一步地，所述根据所述至少一个子数组，在应用程序的页面上对所述组件数组中的组件进行分组显示，包括：

解析所述组件数组，获取所述组件数组中的每个子数组；

确定每个子数组中每个组件对应的组件视图；

在每两个相邻的子数组之间插入分割视图，形成由所述组件视图和所述分割视图组成的视图序列；

按照所述视图序列中的顺序，在所述应用程序的页面中显示所述组件视图以及所述分割视图。

进一步地，所述解析所述组件数组，获取所述组件数组中的每个子数组，包括：

根据所述组件数组中的数组标记，解析所述组件数组，获取所述组件数组中的每个子数组；

其中，所述数组标记为预设格式的标记。

进一步地，所述确定每个子数组中每个组件对应的组件视图，包括：

根据每个组件的标识、数据模型映射表以及每个组件的原始数据，确定每个组件的数据模型；

根据每个组件的数据模型、每个组件的标识以及视图映射表，确定每个的组件视图。

进一步地，所述分割视图为脚视图，所述脚视图的样式为分割线样式。

本发明实施例第二方面提供一种应用程序的组件显示装置，包括：

接收模块，用于接收服务器发送的组件数组，所述组件数组中包括至少一个子数组，每个所述子数组中包括至少一个组件；

显示模块，用于根据所述至少一个子数组，在应用程序的页面上对所述组件数组中的组件进行分组显示。

进一步地，所述显示模块包括：

解析单元，用于解析所述组件数组，获取所述组件数组中的每个子数组；

确定单元，用于确定每个子数组中每个组件对应的组件视图；

插入单元，用于在每两个相邻的子数组之间插入分割视图，形成由所述组件视图和所述分割视图组成的视图序列；

显示单元，用于按照所述视图序列中的顺序，在所述应用程序的页面中显示所述组件视图以及所述分割视图。

进一步地，所述解析单元具体用于：

其中，所述数组标记为预设格式的标记。

进一步地，所述确定单元具体用于：

本发明实施例第三方面提供一种电子设备，包括：

存储器，用于存储程序指令；

处理器，用于调用并执行所述存储器中的程序指令，执行上述第一方面所述的方法步骤。

本发明实施例第四方面提供一种可读存储介质，所述可读存储介质中存储有计算机程序，当应用程序的组件显示装置的至少一个处理器执行所述计算机程序时，应用程序的组件显示装置执行上述第一方面所述的应用程序的组件显示方法。

本发明实施例所提供的应用程序的组件显示方法、装置及电子设备，APP客户端从服务器接收包含至少一个子数组的组件数组，进而可以根据组件数组中所划分出的子数组，在应用程序的页面上对组件进行分组显示，从而实现了组件的分组显示，极大地提升了用户使用APP的体验。

附图说明

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

图1为本发明实施例提供的应用程序的组件显示方法的系统架构图；

图2为本发明实施例提供的应用程序的组件显示方法的流程示意图；

图3为现有技术中服务器发送的组件数组与本发明实施例的组件数组的对比示例图；

图4为本发明实施例提供的应用程序的组件显示方法的流程示意图；

图5为本发明实施例提供的应用程序的组件显示方法的流程示意图；

图6为本发明实施例提供的应用程序的组件显示装置的模块结构图；

图7为本发明实施例提供的应用程序的组件显示装置的模块结构图；

图8为本发明实施例提供的电子设备的实体框图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明实施例一部分实施例，而不是全部的实施例。基于本发明实施例中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明实施例保护的范围。

图1为本发明实施例提供的应用程序的组件显示方法的系统架构图，如图1所示，该方法涉及电子设备以及服务器。其中，电子设备是指安装APP客户端的电子设备，具体例如可以是手机、平板电脑等。服务器是APP的服务器。APP客户端通过与服务器交互，从服务器中获取数据、接收服务器的指示、向服务器发送请求以及向服务器反馈数据等。

现有技术中，APP客户端仅能对组件数据进行顺序显示，但是无法对组件进行分组显示。当要显示的组件较多时，用户无法快速查看自己希望查看的信息，从而导致用户的体验不佳。

本发明实施例基于上述问题，提出一种应用程序的组件显示方法，通过从服务器接收包含子数组的组件数组，进而根据子数组来实现组件的分组显示，从而极大地提升用户体验。

图2为本发明实施例提供的应用程序的组件显示方法的流程示意图，该方法的执行主体为上述电子设备，具体为上述电子设备上所运行的APP客户端。如图2所示，该方法包括：

S201、接收服务器发送的组件数组，该组件数组中包括至少一个子数组，每个所述子数组中包括至少一个组件。

S202、根据上述至少一个子数组，在应用程序的页面上对上述组件数组中的组件进行分组显示。

具体的，APP客户端从服务器接收到的组件数组为嵌套结构，即最外层为一个大数组，大数组中的每个元素也是数组，即在大数组中嵌套了一层子数组，每个子数组中包括至少一个组件。

可选的，组件数组使用原始数据表示。其中，原始数据是经过服务器压缩和转换处理的。原始数据的数据格式是APP客户端和服务器都支持的数据格式，例如可以为json、xml等数据格式。APP客户端对原始数据进行解析处理之后，获取组件数组的子数组信息以及子数组中的组件信息，进而再根据这些信息来对组件进行分组显示。

图3为现有技术中服务器发送的组件数组与本发明实施例的组件数组的对比示例图，如图3中左侧现有技术中的组件数据结构示例图所示，现有技术中的组件数组为单层结构，即数组中每个元素即为要显示的组件。而本发明实施例中的组件数组为嵌套结构，例如，如图3中右侧本发明实施例的组件数据结构示例图所示，APP客户端从服务器接收到大数组info，大数组info中嵌套了4个子数组，分别为子数组0、子数组1、子数组2和子数组3。其中，子数组0中包含了0、1、2、3、4这5个组件，子数组1中包含了0、1这两个组件，子数组2中包含了0这一个组件，子数组3中包含了0这一个组件。

当APP客户端从服务器接收到例如上述图3右侧所示的包含有子数组的组件数组后，根据其中划分出的子数组，就可以实现子数组之间的组件分割显示。即根据划分出的子数组，将一个子数组内的组件显示为一组，将另一个子数组内的组件显示为另一组，从而实现组件的分组显示。

本实施例中，APP客户端从服务器接收包含至少一个子数组的组件数组，进而可以根据组件数组中所划分出的子数组，在应用程序的页面上对组件进行分组显示，从而实现了组件的分组显示，极大地提升了用户使用APP的体验。

在上述实施例的基础上，本实施例涉及APP客户端根据子数组对组件进行分组显示的具体方法。

图4为本发明实施例提供的应用程序的组件显示方法的流程示意图，如图4所示，该方法包括：

S401、接收服务器发送的组件数组，该组件数组中包括至少一个子数组，每个所述子数组中包括至少一个组件。

S402、解析上述组件数组，获取上述组件数组中的每个子数组。

具体的，当APP客户端接收到服务器发送的组件数组之后，需要按照特定的规则对组件数组进行解析，以识别并获取组件数组中的每个子数组的信息。

S403、确定每个子数组中每个组件对应的组件视图。

如前所述，组件数组使用原始数据表示，以便于数据的高效传输，原始数据一般采用xml等形式来表示。而应用程序的页面在显示组件数据时，需要加载组件对应的组件视图。因此，本步骤中，需要对解析出的每个子数组中的每个组件进行处理，确定出每个组件对应的组件视图，以使得APP的页面可以加载这些组件视图。

S404、在每两个相邻的子数组之间插入分割视图，形成由上述组件视图和该分割视图组成的视图序列。

当确定出每个子数组中每个组件的组件视图之后，在每两个相邻子数组之间插入分割视图。其中，在每个两个相邻子数组之前插入分割视图，是指在前一子数组的最后一个组件和后一子数组的第一个组件之间插入分割视图，进而形成视图序列。

可选的，上述分割视图具体可以为脚视图footer，该脚视图的样式可以设置为固定的样式，例如可以固定设置为分割线样式，分割线样式的颜色、高度也可以预先进行设置。当APP客户端在每两个相邻子数组之间都假如该分割视图并被加载到APP的页面之后，可以保证每个组件分组之间的分割区域的样式都是统一的。

以下举一例进行说明。

以上述图3右侧所示的包含有子数组的组件数组为例，假设APP客户端已经对组件数组info进行解析并已经确定出info中每个子数组的每个组件的组件视图，则首先可以确定各子数组的显示顺序从前到后分别为子数组0、子数组1、子数组2和子数组3。则对于子数组0和子数组1，APP客户端会在子数组0的最后一个组件(组件5)对应的组件视图和子数组1的第一个组件(组件0)对应的组件视图之间插入一个分割视图。以此类推，在剩余子数组之间也插入分割视图。则最终形成的视图序列为：子数组0的组件视图(0、1、2、3、4)、分割视图1、子数组1的组件视图(0、1)、分割视图、子数组2的组件视图(0)、分割视图、子数组3的组件视图(0)。

S405、按照上述视图序列中的顺序，在上述应用程序的页面中显示上述组件视图以及上述分割视图。

具体的，APP客户端按照上述视图序列中的顺序，逐一将每个组件视图加载到APP的页面中，从而实现组件的分组显示。

本实施例中，首先解析组件数组并确定组件数组中每个组件的组件视图，进而通过在相邻两个子数组之间插入分割视图，从而使得组件在APP的页面上显示时，不同的组件分组可以分开显示，从而实现了组件的分组显示，极大地提升了用户的使用体验。

在一种可选的实施方式中，上述步骤S402中解析上述组件数组时，具体可以根据组件数组中的数组标记，解析上述组件数组，获取上述组件数组中的每个子数组。

其中，上述数组标记为预设格式的标记。

如前所述，组件数组使用原始数据表示，原始数据可以采用xml等形式来表示，即组件数组使用例如xml等特定形式来表示。具体的形式可以由服务器和APP客户端预先进行约定或设置。例如，APP客户端和服务器约定使用xml形式来表示组件数组，则服务器会生成xml形式的组件数组，当APP客户端接收到组件数组之后，根据xml的规则来解析组件数组。具体的，在xml中，会使用特定的标记来表示一个数组，即在xml中数组对应特定的数组标记，APP客户端会根据xml形式的组件数组中的数组标记来获取大数组以及子数组，从而完成对组件数组的解析。

在上述实施例的基础上，本实施例涉及确定每个子数组中每个组件对应的组件视图的具体方法。

图5为本发明实施例提供的应用程序的组件显示方法的流程示意图，如图5所示，该方法包括：

S501、接收服务器发送的组件数组，该组件数组中包括至少一个子数组，每个所述子数组中包括至少一个组件。

S502、解析上述组件数组，获取上述组件数组中的每个子数组。

S503、根据每个组件的标识、数据模型映射表以及每个组件的原始数据，确定每个组件的数据模型。

组件数组中的每个组件都携带标识以及原始数据，其中，组件的标识用于唯一的标识一个组件，组件的原始数据用于携带组件的显示信息。

其中，数据模型映射表用于记录组件的标识与数据模型的对应关系，数据模型可以解析组件的原始数据并对解析出的数据进行保存。

需要说明的是，在执行本步骤之前，APP客户端已经创建了数据模型，并建立了组件的标识与数据模型的对应关系，即已经生成了数据模型映射表。

进而，在本步骤中，APP客户端根据组件的标识、已经创建的数据模型映射表以及组件的原始数据，就可以确定组件的数据模型。

S504、根据每个组件的数据模型、每个组件的标识以及视图映射表，确定每个的组件视图。

其中，视图映射表用于记录组件的标识与组件视图的对应关系，组件视图获取组件的数据并根据这些数据在APP的页面上进行显示。

在执行本步骤之前，APP客户端已经创建了组件视图，并建立了组件的标识与组件视图的对应关系，即已经生成了视图映射表。

进而，在本步骤中，APP客户端根据上述获取到的数据模型、组件的标识和视图映射表，即可以确定组件的组件视图。

S505、在每两个相邻的子数组之间插入分割视图，形成由所述组件视图和所述分割视图组成的视图序列。

S506、按照所述视图序列中的顺序，在所述应用程序的页面中显示所述组件视图以及所述分割视图。

本实施例中，APP客户端预先建立数据模型映射表以及视图映射表，进而，根据服务器发送的组件数组中的每个组件的信息、数据模型映射表和视图映射表，可以确定出每个组件对应的组件视图，从而保证每个组件都可以在APP页面上准确地显示。

图6为本发明实施例提供的应用程序的组件显示装置的模块结构图，如图6所示，该装置包括：

接收模块601，用于接收服务器发送的组件数组，所述组件数组中包括至少一个子数组，每个所述子数组中包括至少一个组件。

显示模块602，用于根据所述至少一个子数组，在应用程序的页面上对所述组件数组中的组件进行分组显示。

该装置用于实现前述方法实施例，其实现原理和技术效果类似，此处不再赘述。

图7为本发明实施例提供的应用程序的组件显示装置的模块结构图，如图7所示，该装置包括接收模块601和显示模块602，其中，显示模块602包括：

解析单元6021，用于解析所述组件数组，获取所述组件数组中的每个子数组。

确定单元6022，用于确定每个子数组中每个组件对应的组件视图。

插入单元6023，用于在每两个相邻的子数组之间插入分割视图，形成由所述组件视图和所述分割视图组成的视图序列。

显示单元6024，用于按照所述视图序列中的顺序，在所述应用程序的页面中显示所述组件视图以及所述分割视图。

另一实施例中，解析单元6021具体用于：

其中，所述数组标记为预设格式的标记。

另一实施例中，确定单元6022具体用于：

另一实施例中，所述分割视图为脚视图，所述脚视图的样式为分割线样式。

图8为本发明实施例提供的电子设备的实体框图，如图8所示，该电子设备包括：

存储器801，用于存储程序指令。

处理器802，用于调用并执行存储器801中的程序指令，执行上述方法实施中所述的方法步骤。

本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

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

Claims

1.一种应用程序的组件显示方法，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，所述根据所述至少一个子数组，在应用程序的页面上对所述组件数组中的组件进行分组显示，包括：

解析所述组件数组，获取所述组件数组中的每个子数组；

确定每个子数组中每个组件对应的组件视图；

3.根据权利要求2所述的方法，其特征在于，所述解析所述组件数组，获取所述组件数组中的每个子数组，包括：

其中，所述数组标记为预设格式的标记。

4.根据权利要求2所述的方法，其特征在于，所述确定每个子数组中每个组件对应的组件视图，包括：

5.根据权利要求1-4任一项所述的方法，其特征在于，所述分割视图为脚视图，所述脚视图的样式为分割线样式。

6.一种应用程序的组件显示装置，其特征在于，包括：

7.根据权利要求6所述的装置，其特征在于，所述显示模块包括：

8.根据权利要求7所述的装置，其特征在于，所述解析单元具体用于：

其中，所述数组标记为预设格式的标记。

9.根据权利要求7所述的装置，其特征在于，所述确定单元具体用于：

10.根据权利要求6-9任一项所述的装置，其特征在于，所述分割视图为脚视图，所述脚视图的样式为分割线样式。

11.一种电子设备，其特征在于，包括：

存储器，用于存储程序指令；

处理器，用于调用并执行所述存储器中的程序指令，执行权利要求1-5任一项所述的方法步骤。

12.一种可读存储介质，其特征在于，所述可读存储介质中存储有计算机程序，当应用程序的组件显示装置的至少一个处理器执行所述计算机程序时，应用程序的组件显示装置执行权利要求1-5任一项所述的应用程序的组件显示方法。