CN113918194A - 一种页面组件的显示方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请公开了一种页面组件的显示方法、装置、电子设备及存储介质，该方法包括：在组件库中，周期性检测当前页面包括的组件的样式数据；其中，组件库中至少包括一个组件，每个组件对应至少一个样式；若检测到样式数据有变化，则确定变化后的目标样式和目标样式的样式名；基于目标样式的样式名，生成与目标样式的样式数据对应的资源数据；将资源数据与在组件库中确定的目标组件进行关联，以对目标组件进行更新；在当前显示页面中显示更新后的目标组件。从而可以实现对单一组件进行修改，无需对整个页面进行修改，降低了操作复杂度，提高了处理效率。

Description

一种页面组件的显示方法、装置、电子设备及存储介质

技术领域

本申请涉及显示技术领域，尤其涉及一种页面组件的显示方法、装置、电子设备及存储介质。

背景技术

页面的显示通常包括多个组件的显示，比如当前页面中包括多个按钮和多个图标等。如果用户想对部分组件的样式进行修改，现有修改逻辑只能针对整个页面代码进行整体修改，页面无法自动加载部分组件的更新。

然而，在这种方式中，有大量的数据或者编码需要处理，操作复杂，处理效率低。

发明内容

本申请实施例提供一种页面组件的显示方法、装置、电子设备及存储介质，从而可以自动加载部分组件的更新，无需对整个页面进行修改，降低了操作复杂度，提高了处理效率。

第一方面，本申请一实施例提供了一种页面组件的显示方法，包括：

在组件库中，周期性检测当前页面包括的组件的样式数据；其中，所述组件库中至少包括一个组件，每个组件对应至少一个样式；

若检测到所述样式数据有变化，则确定变化后的目标样式和所述目标样式的样式名；

基于所述目标样式的样式名，生成与所述目标样式的样式数据对应的资源数据；

将所述资源数据与在所述组件库中确定的目标组件进行关联，以对所述目标组件进行更新；

在当前显示页面中显示更新后的所述目标组件。

在一些示例性的实施方式中，所述资源数据包括所述目标样式的样式名和所述目标样式的属性集合；

将所述资源数据与在所述组件库中确定的目标组件进行关联，以对所述目标组件进行更新，包括：

基于所述资源数据中的目标样式的样式名，以及预设的样式名和组件库中的各个组件的对应关系，确定所述资源数据对应的目标组件；

将所述资源数据中的目标样式的属性集合与所述目标组件进行关联，以对所述目标组件进行更新。

在一些示例性的实施方式中，通过如下方式生成与所述目标样式的样式数据对应的资源数据；

若所述目标样式的样式代码基于IOS系统实现，则确定所述资源数据为包括样式头文件名的样式名和包括资源名的属性集合；

若所述目标样式的样式代码基于Android系统实现，则确定所述资源数据为XML形式的样式名和对应的属性集合。

在一些示例性的实施方式中，在所述确定变化后的目标样式和所述目标样式的样式名之后，还包括：

更新所述组件库的版本号；

所述将所述资源数据与在所述组件库中确定的目标组件进行关联包括：

根据所述组件库的版本号确定最新版本的组件库；

在最新版本的组件库中，基于所述资源数据中的样式名，以及预设的样式名和组件库中的各个组件的对应关系，确定所述资源数据对应的目标组件；

将所述资源数据与所述目标组件进行关联。

在一些示例性的实施方式中，若检测到上传的图层，则确定所述样式数据有变化；其中，所述图层为响应用户操作生成的，所述图层包括所述用户操作指示的样式名和样式的属性以及属性值。

在一些示例性的实施方式中，若满足如下变化之一，则确定所述样式数据有变化：

样式中的属性的新增、样式中的属性的删除，或样式中的属性的属性值变化。

第二方面，本申请一实施例提供了一种页面组件的显示装置，包括：

检测单元，被配置为执行，在组件库中，周期性检测当前页面包括的组件的样式数据；其中，所述组件库中至少包括一个组件，每个组件对应至少一个样式；

确定单元，被配置为执行若检测到所述样式数据有变化，则确定变化后的目标样式和所述目标样式的样式名；

数据生成单元，被配置为执行基于所述目标样式的样式名，生成与所述目标样式的样式数据对应的资源数据；

组件更新单元，被配置为执行将所述资源数据与在所述组件库中确定的目标组件进行关联，以对所述目标组件进行更新；

显示单元，被配置为执行在当前显示页面中显示更新后的所述目标组件。

在一些示例性的实施方式中，所述资源数据包括所述目标样式的样式名和所述目标样式的属性集合；

所述组件更新单元具体被配置为执行：

基于所述资源数据中的目标样式的样式名，以及预设的样式名和组件库中的各个组件的对应关系，确定所述资源数据对应的目标组件；

将所述资源数据中的目标样式的属性集合与所述目标组件进行关联，以对所述目标组件进行更新。

在一些示例性的实施方式中，所述数据生成单元被配置为执行通过如下方式生成与所述目标样式的样式数据对应的资源数据；

若所述目标样式的样式代码基于IOS系统实现，则确定所述资源数据为包括样式头文件名的样式名和包括资源名的属性集合；

若所述目标样式的样式代码基于Android系统实现，则确定所述资源数据为XML形式的样式名和对应的属性集合。

在一些示例性的实施方式中，还包括版本更新单元，被配置为在所述确定变化后的目标样式和所述目标样式的样式名之后，执行：

更新所述组件库的版本号；

所述组件更新单元具体被配置为执行：

根据所述组件库的版本号确定最新版本的组件库；

在最新版本的组件库中，基于所述资源数据中的样式名，以及预设的样式名和组件库中的各个组件的对应关系，确定所述资源数据对应的目标组件；

将所述资源数据与所述目标组件进行关联。

在一些示例性的实施方式中，所述确定单元具体被配置为执行：

若检测到上传的图层，则确定所述样式数据有变化；其中，所述图层为响应用户操作生成的，所述图层包括所述用户操作指示的样式名和样式的属性以及属性值。

在一些示例性的实施方式中，所述确定单元具体被配置为执行：

若满足如下变化之一，则确定所述样式数据有变化：

样式中的属性的新增、样式中的属性的删除，或样式中的属性的属性值变化。

第三方面，本申请一实施例还提供了一种电子设备，包括处理器和用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现如本申请第一方面中提供的任一方法。

第四方面，本申请一实施例还提供了一种计算机可读存储介质，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如本申请第一方面中提供的任一方法。

第五方面，本申请一实施例提供了一种计算机程序产品，包括计算机程序/指令，所述计算机程序/指令被处理器执行时实现如本申请第一方面中提供的任一方法。

本申请的实施例提供的技术方案至少带来以下有益效果：

本申请提出了一种页面组件的显示方法，通过周期性检测组件库中当前页面包括的组件的样式数据，及时获知样式数据是否发生变化，如果检测到样式数据发生变化，先确定变化后的目标样式和目标样式的样式名；由于每个样式通过唯一样式名进行标识，则可以基于目标样式的样式名，生成与目标样式的样式数据对应的资源数据，以便用户直接利用资源数据，无需额外的工作量；将资源数据与在组件库中确定的目标组件进行关联，来对目标组件进行更新，进而在当前页面显示更新后的目标组件。整个过程中，可以自动加载部分组件的更新，无需对整个页面进行修改，降低了操作复杂度，提高了处理效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

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

图1为本申请实施例提供的一种页面组件的显示方法的应用场景示意图；

图2为本申请一实施例提供的一种页面组件的显示方法的流程图；

图3为本申请一实施例提供的一种组件编辑的显示界面图；

图4为本申请一实施例提供的一种组件以及样式变更的示意图；

图5为本申请一实施例提供的另一种页面组件的显示方法的流程图；

图6是根据一示例性实施例示出的一种页面组件的显示装置的框图；

图7是根据一示例性实施例示出的一种页面组件的显示方法的电子设备示意图。

具体实施方式

为了使本领域普通人员更好地理解本申请的技术方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应所述理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

以下，对本申请实施例中的部分用语进行解释说明，以便于本领域技术人员理解。

(1)本申请实施例中术语“多个”是指两个或两个以上，其它量词与之类似。

(2)“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

(3)组件，对数据和方法的简单封装；组件可以有自己的属性和方法，属性是组件数据的简单访问者，方法则是组件的一些简单而可见的功能。

(4)样式，组件的属性的集合的称呼，也即，属性赋值后，不同属性值的组合可以构成多种样式。

(5)属性，组件的描述特性，比如颜色、大小和字体大小等。

(6)组件管理平台，内部集颜色、样式、图标、字体等前后端的统称。其功能可以认为在前端web页可以展示、新增、修改、打包等一系列功能的集合。

(7)图层，类似含有文字或图形等元素的胶片，一张张按顺序叠放在一起，组合起来形成页面的最终效果；可以将页面上的元素精确定位。图层中可以加入文本、图片、表格、插件，也可以在里面再嵌套图层。

页面的显示通常包括多个组件的显示，比如当前页面中包括多个按钮和多个图标等。如果用户想对部分组件的样式进行修改，现有修改逻辑只能针对整个页面代码进行整体修改，页面无法自动加载部分组件的更新。

然而，在这种方式中，有大量的数据或者编码需要处理，操作复杂，处理效率低。

为此，本申请提供了一种页面组件的显示方法，该方法中通过对当前页面包括的组件的样式数据的检测，来确定变化后的目标样式和目标样式的样式名；再基于目标样式的样式名，生成与目标样式的样式数据对应的资源数据；将资源数据与在组件库中确定的目标组件进行关联，以对目标组件进行更新；在当前页面中显示更新后的目标组件。用户整个过程中，可以自动加载部分组件的更新，无需对整个页面进行修改，降低了操作复杂度，提高了处理效率。

在介绍完本申请实施例的设计思想之后，下面对本申请实施例的技术方案能够适用的应用场景做一些简单介绍，需要说明的是，以下介绍的应用场景仅用于说明本申请实施例而非限定。在具体实施时，可以根据实际需要灵活地应用本申请实施例提供的技术方案。

参考图1，其为本申请实施例提供的页面组件的显示方法的应用场景示意图。该应用场景包括多个终端设备101(包括终端设备101-1、终端设备101-2、……终端设备101-n)、服务器102。其中，终端设备101、服务器102之间通过无线或有线网络连接，终端设备101包括但不限于桌面计算机、移动电话、移动电脑、平板电脑、媒体播放器、智能可穿戴设备、智能电视等电子设备。服务器102可以是一台服务器、若干台服务器组成的服务器集群或云计算中心。服务器102可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。

服务器102在组件库中周期性检测当前页面包括的组件的样式数据；如果用户1有样式新增或者样式修改的需求，则触发对应的操作，服务器102检测到样式数据有变化，则确定变化后的目标样式和目标样式的样式名；基于目标样式的样式名，生成与目标样式的样式数据对应的资源数据；将资源数据与组件库中确定的目标组件进行关联，以对目标组件进行更新，进而控制目标组件按照目标样式在终端设备101-1上显示。另外，上述过程也可以由终端设备完成并显示。

上述过程以用户1为例进行说明，在这个过程中，其他用户的页面中的组件通常有如下两种显示逻辑，第一种，显示不发生变化；第二种，同步显示用户1的更新后的目标组件。服务器可预先进行配置，其他用户的页面中按照上述哪种方式进行显示，在此不进行限定。

当然，本申请实施例提供的方法并不限用于图1所示的应用场景中，还可以用于其它可能的应用场景，本申请实施例并不进行限制。对于图1所示的应用场景的各个设备所能实现的功能将在后续的方法实施例中一并进行描述，在此先不过多赘述。

为进一步说明本申请实施例提供的技术方案，下面结合附图以及具体实施方式对此进行详细的说明。虽然本申请实施例提供了如下述实施例或附图所示的方法操作步骤，但可以包括更多或者更少的操作步骤。在逻辑上不存在必要因果关系的步骤中，这些步骤的执行顺序不限于本申请实施例提供的执行顺序。

下面结合图1所示的应用场景，对本申请实施例提供的技术方案进行说明。

参考图2，本申请实施例提供一种页面组件的显示方法，该页面组件的显示方法可以在组件管理平台上实现，比如通过集成有组件管理平台的终端设备来执行，该页面组件的显示方法至少可以包括以下步骤：

S201、在组件库中，周期性检测当前页面包括的组件的样式数据；其中，组件库中至少包括一个组件，每个组件对应至少一个样式。

S202、若检测到样式数据有变化，则确定变化后的目标样式和目标样式的样式名。

S203、基于目标样式的样式名，生成与目标样式的样式数据对应的资源数据。

S204、将资源数据与在组件库中确定的目标组件进行关联，以对目标组件进行更新。

S205、在当前页面中显示更新后的目标组件。

本申请提出了一种页面组件的显示方法，通过周期性检测组件库中当前页面包括的组件的样式数据，及时获知样式数据是否发生变化，如果检测到样式数据发生变化，先确定变化后的目标样式和目标样式的样式名；由于每个样式通过唯一样式名进行标识，则可以基于目标样式的样式名，生成与目标样式的样式数据对应的资源数据，以便用户直接利用资源数据，无需额外的工作量；将资源数据与在组件库中确定的目标组件进行关联，来对目标组件进行更新，进而在当前页面显示更新后的目标组件。整个过程中，可以自动加载部分组件的更新，无需对整个页面进行修改，降低了操作复杂度，提高了处理效率用户。

涉及到S201，组件库中预先存储有至少一个组件，每个组件对应至少一个样式，每个样式通过唯一样式名进行标识。比如，组件A为按钮，其属性有颜色、字体大小、背景色和边框色，给每个属性赋值后，则组合成一个样式，比如，绿色+14pt字号+背景黄色+边框色；组件B也为按钮，其属性为颜色、字体大小、背景色。

而通常情况下，一个页面中包括多个组件，而对应到组件库中，该页面中包括的组件为组件库中的部分组件。因此，在组件库中，周期性检测当前页面包括的组件的样式数据以及样式数据是否发生变化。

示例性的，若满足如下变化之一，则确定样式数据有变化：样式中的属性的新增、样式中的属性的删除，或样式中的属性的属性值变化。其中，样式中的属性的新增是指，属性由颜色、字体变更为颜色、字体和字号，新增的属性为字号；样式中的属性的删除是指，属性由颜色、字体和字号变更为颜色和字体；样式中的属性的属性值变化是指颜色由绿色变成红色。

上述实施例，通过检测样式中属性的新增、删除或属性值的变化，来确定样式数据的变化，进而确定组件的变化，提高组件变化识别的准确性。

涉及到S202，如果检测到样式数据有变化，则确定变化后的目标样式和目标样式的样式名。

具体的，在实际的应用过程中，如果检测到上传的图层，则可以确定组件库中的样式数据有变化，其中，图层为响应用户操作生成的，图层包括用户操作指示的样式名和样式的属性以及属性值。

示例性的，用户操作比如是用户点击了组件管理平台的展示页面上的组件编辑按钮，在弹出来的页面中，画了一个图层，在画该图层的过程中，将需求的样式名以及样式的属性以及属性值输入到组件管理平台中。这样，当检测到上传的图层，则可以确定组件库中的样式数据有变化。

在一个具体的例子中，可以通过Sketch插件上传图层。参见图3，31-33为颜色配置图标，31表示红、32表示绿和33表示黄；34为画板中展示的图层；35为配置参数区域。在这个例子中，配置参数比如包括宽度W、高度H、横坐标X、纵坐标Y、透明度、填充颜色、边框颜色、内部样式等。图3中只是一个示例，并不形成具体的限定。

在一个具体的例子中，比如，用户上传的图层指示的样式名为绿色圆角按钮，属性以及属性值为绿色+圆角+8pt字号+宽高分别为1cm。

上述实施例，通过检测是否有图层上传，可以快速准确的检测到组件库中的样式数据的变化，进而根据图层包括的用户操作指示的样式名和样式的属性以及属性值确定变化的样式数据的具体内容。

涉及到S203，基于目标样式的样式名，生成与目标样式的样式数据对应的资源数据。

其中，资源数据包括目标样式的样式名和目标样式的属性集合，因此，在生成资源数据的过程中，可以基于目标样式的样式名来实现。示例性的，可以将资源数据以样式代码的形式呈现，以便用户快速准确确定资源数据的类型以及功能，提高开发效率。

在实际的应用过程中，由于最后组件的使用者的设备可能是不同系统的设备，比如是IOS系统的手机或者Android系统的手机，因此，为了避免用户转换不同系统之间的样式代码造成的工作量增加，为了提高开发效率，可以通过如下方式生成与目标样式的样式数据对应的资源数据：

(1)如果目标样式的样式代码基于IOS系统实现，则确定资源数据为包括样式头文件名的样式名和包括资源名的属性集合。考虑到IOS系统中组件的特性，在这种情况中，确定的资源数据中不仅要包括样式头文件的文件名，还包括资源名的属性集合。

(2)如果目标样式的样式代码基于Android系统实现，则确定资源数据为XML形式的样式名和对应的属性集合。考虑到Android系统中组件的特性，在这种情况下，确定的资源数据中的样式名和对应的属性集合的数据类型为XML形式的，无需进行格式转换，提高开发效率。

上述实施例，由于样式数据变化带来的组件的变化，是要应用到使用者的终端设备中，而使用者的终端设备的系统通常不同，因此，为了提高开发效率，在生成资源数据的过程中，分IOS系统和Android系统分别生成相应格式的资源数据。

涉及到S204，将资源数据与在组件库中确定的目标组件进行关联，以对目标组件进行更新。

示例性的，该过程可以通过如下方式实现：基于资源数据中的目标样式的样式名，以及预设的样式名和组件库中的各个组件的对应关系，确定资源数据对应的目标组件；将资源数据中的目标样式的属性集合与目标组件进行关联，以对目标组件进行更新。

具体的，组件库中，样式名和组件的对应关系是预设的，基于该预设关系，通过样式名可以查找到该样式名对应的组件。因此，通过资源数据中的目标样式的样式名和该对应关系，可以确定资源数据对应的组件，将该资源数据对应的组件称为目标组件。再将资源数据中的目标样式的属性集合与目标组件进行关联，该关联过程比如，资源数据中的目标样式的属性集合中包括了目标组件的颜色为红色，而目标组件的原始颜色为绿色，该关联过程即为将目标组件的颜色变更为红色，实现对目标组件的更新。而通常情况下，属性集合中包括了多个属性和对应的属性值，则将更新后的目标组件按照该属性集合进行显示。

在一个具体的例子中，比如目标样式的样式名为圆角绿色按钮，则资源数据中为“绿色+圆角+8pt字号+宽高分别为1cm”对应的样式代码，而组件包括按钮、收藏夹符号等，因此，为了确定变化后的样式的组件类型，通过样式名进行关联，以便对目标组件进行更新。

上述实施例，通过以样式名为纽带，将资源数据与组件进行关联，无需在整个组件库中进行查找，提高了组件的更新效率。

为了区分组件库的数据的变化，组件库有不同的版本，比如1.0.0版本的样式中如果有样式变更或者样式新增，则组件库更新为1.0.1版。因此，在确定变化后的目标样式和目标样式的样式名之后，还可以更新组件库的版本，这样，在将资源数据与对应的组件进行关联的过程中，可以根据组件库的版本号确定最新版本的组件库，在最新版本的组件库中，基于资源数据中的样式名，以及预设的样式名和组件库中的各个组件的对应关系，确定资源数据对应的目标组件，具体关联方法可参见前述实施例。

随着组件库的不断更新，通常会出现多个版本的组件库，因此，该方式中增加了通过组件库的版本号确定最新版本的组件库的操作，这样，关联过程在最新版本的组件库中进行。上述实施例，通过更新组件库的版本号关联组件的过程中，准确定位组件库，提高组件更新效率，进一步提高开发效率。

涉及到S205，在对目标组件更新完成后，在当前页面中显示更新后的目标组件。比如，当前页面中有5个组件，其中的2个进行了更新，一个更新是组件1的按钮的颜色发生由红色变成绿色，另一个更新是组件2的形状由圆角变成了方角。

在一个具体的例子中，图4示出了一种组件以及样式变更的示意图，其中，新增属性、删除属性和属性值变化均可以实现样式变更，样式的变更则对应组件的更新。在完成样式变更后，可以完成样式发布；在完成组件更新后，可以进行组件发布，进而通过JOSN转代码实现组件库版本以及组件库中的资源数据的更新，更新的组件库。更新后的组件库中，包括了内置样式以及新增样式，以及更新后的组件库的版本号等。

为了使本申请的技术方案更容易理解，下面用一个完整的流程图进行说明，参考图5。

S501、组件管理平台若检测到样式数据发生变化，则新增组件，并配置组件属性；或在组件下新增样式，并设置样式的属性值；或修改已有样式的属性值。

比如，创建组件，并且配置组件的属性，如颜色、大小、字体、圆角以及嵌套组件样式名等。在组件库配置组件的属性时，可以通过通用接口设置组件外观。

S502、生成样式代码形式的资源数据；其中，若样式代码基于IOS系统实现，则确定资源数据为包括样式头文件名的样式名和包括资源名的属性集合；若样式代码基于Android系统实现，则确定资源数据为XML形式的样式名和对应的属性集合。

比如，根据预设规则直接生成客户端样式所需代码，针对IOS系统自动生成一系列的样式头文件名和资源名；针对Android系统自动生成一系列的样式代码。

S503、更新包括变化后的样式数据的版本号，并将资源数据提交到远端仓库；以使组件根据远端仓库的资源数据进行渲染显示。

本申请实施例，可以应用在大改版项目中(比如对包括多个组件的页面的项目中，多个组件需要修改)，可以实现各个业务模块在修改组件外观的功能，底层修改后只需用户进行回测效果，改动量小；允许用户在不依赖开发的情况下，自主修改组件的外观样式(比如获取用户操作产生的变化的样式数据)，并且自动生成样式代码。

下面用一个示例性的场景对上述完整的流程进行解释说明，用户A在组件管理平台上通过画图层的方式提出自己的需求，该需求的呈现结果是样式数据发生了变化；组件管理平台根据变化的样式数据，结合变化后的样式数据所属的组件类型生成相应的资源数据，比如是IOS系统可以直接用的或者Android系统可以直接用的样式代码，再将原有组件库的版本号进行更新，将样式代码提交到远端仓库。组件管理平台获取到资源数据，利用样式名和在组件库中确定的目标组件进行关联，进而实现对目标组件进行更新，最后在当前页面中显示更新后的目标组件，进而快速显示目标组件。

如此，业务开发使用样式生成的外观，可以在组件管理平台上直接修改属性的值，通过脚本更新新的样式数据。业务开发不需要任何的开发即是新的颜色，比如：原先的按钮的一个样式的背景色是白色，在组件管理平台上更新为红色时。只需要更新依赖的组件库文件，即变成红色的按钮。

图6是根据一示例性实施例示出的一种页面组件的显示装置的框图，参照图6，该装置包括检测单元61、确定单元62、数据生成单元63、组件更新单元64和显示单元65。

其中，检测单元61，被配置为执行，在组件库中，周期性检测当前页面包括的组件的样式数据；其中，组件库中至少包括一个组件，每个组件对应至少一个样式；

确定单元62，被配置为执行若检测到样式数据有变化，则确定变化后的目标样式和目标样式的样式名；

数据生成单元63，被配置为执行基于目标样式的样式名，生成与目标样式的样式数据对应的资源数据；

组件更新单元64，被配置为执行将资源数据与在组件库中确定的目标组件进行关联，以对目标组件进行更新；

显示单元65，被配置为执行在当前显示页面中显示更新后的目标组件。

在一些示例性的实施方式中，资源数据包括目标样式的样式名和目标样式的属性集合；

组件更新单元64具体被配置为执行：

基于资源数据中的目标样式的样式名，以及预设的样式名和组件库中的各个组件的对应关系，确定资源数据对应的目标组件；

将资源数据中的目标样式的属性集合与目标组件进行关联，以对目标组件进行更新。

在一些示例性的实施方式中，数据生成单元63被配置为执行通过如下方式生成与目标样式的样式数据对应的资源数据；

若目标样式的样式代码基于IOS系统实现，则确定资源数据为包括样式头文件名的样式名和包括资源名的属性集合；

若目标样式的样式代码基于Android系统实现，则确定资源数据为XML形式的样式名和对应的属性集合。

在一些示例性的实施方式中，还包括版本更新单元，被配置为在确定变化后的目标样式和目标样式的样式名之后，执行：

更新组件库的版本号；

组件更新单元64具体被配置为执行：

根据组件库的版本号确定最新版本的组件库；

在最新版本的组件库中，基于资源数据中的样式名，以及预设的样式名和组件库中的各个组件的对应关系，确定资源数据对应的目标组件；

将资源数据与目标组件进行关联。

在一些示例性的实施方式中，确定单元62具体被配置为执行：

若检测到上传的图层，则确定样式数据有变化；其中，图层为响应用户操作生成的，图层包括用户操作指示的样式名和样式的属性以及属性值。

在一些示例性的实施方式中，确定单元62具体被配置为执行：

若满足如下变化之一，则确定样式数据有变化：

样式中的属性的新增、样式中的属性的删除，或样式中的属性的属性值变化。

在介绍了本申请示例性实施方式的页面组件的显示方法和装置之后，接下来，介绍根据本申请的另一示例性实施方式的电子设备。

所属技术领域的技术人员能够理解，本申请的各个方面可以实现为系统、方法或程序产品。因此，本申请的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“系统”。

在一些可能的实施方式中，根据本申请的电子设备可以至少包括至少一个处理器、以及至少一个存储器。其中，存储器存储有程序代码，当程序代码被处理器执行时，使得处理器执行本说明书上述描述的根据本申请各种示例性实施方式的页面组件的显示方法中的步骤。例如，处理器可以执行如页面组件的显示方法中的步骤。

下面参照图7来描述根据本申请的这种实施方式的电子设备130。图7显示的电子设备130仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图7所示，电子设备130以通用电子设备的形式表现。电子设备130的组件可以包括但不限于：上述至少一个处理器131、上述至少一个存储器132、连接不同系统组件(包括存储器132和处理器131)的总线133。

总线133表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器、外围总线、处理器或者使用多种总线结构中的任意总线结构的局域总线。

存储器132可以包括易失性存储器形式的可读介质，例如随机存取存储器(RAM)1321和/或高速缓存存储器1322，还可以进一步包括只读存储器(ROM)1323。

存储器132还可以包括具有一组(至少一个)程序模块1324的程序/实用工具1325，这样的程序模块1324包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

电子设备130也可以与一个或多个外部设备134(例如键盘、指向设备等)通信，还可与一个或者多个使得用户能与电子设备130交互的设备通信，和/或与使得该电子设备130能与一个或多个其它电子设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口135进行。并且，电子设备130还可以通过网络适配器136与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器136通过总线133与用于电子设备130的其它模块通信。应当理解，尽管图中未示出，可以结合电子设备130使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理器、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

在示例性实施例中，还提供了一种包括指令的计算机可读存储介质，例如包括指令的存储器132，上述指令可由处理器131执行时实现如本申请提供的页面组件的显示方法的任一方法。可选地，计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

在示例性实施例中，还提供一种计算机程序产品，包括计算机程序/指令，计算机程序/指令被处理器131执行时实现如本申请提供的页面组件的显示方法的任一方法。

在示例性实施例中，本申请提供的一种页面组件的显示方法的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在计算机设备上运行时，程序代码用于使计算机设备执行本说明书上述描述的根据本申请各种示例性实施方式的一种页面组件的显示方法中的步骤。

程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

本申请的实施方式的用于图像缩放的程序产品可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在电子设备上运行。然而，本申请的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括——但不限于——电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于——无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本申请操作的程序代码，程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户电子设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户电子设备上部分在远程电子设备上执行、或者完全在远程电子设备或服务端上执行。在涉及远程电子设备的情形中，远程电子设备可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户电子设备，或者，可以连接到外部电子设备(例如利用因特网服务提供商来通过因特网连接)。

应当注意，尽管在上文详细描述中提及了装置的若干单元或子单元，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本申请的实施方式，上文描述的两个或更多单元的特征和功能可以在一个单元中具体化。反之，上文描述的一个单元的特征和功能可以进一步划分为由多个单元来具体化。

此外，尽管在附图中以特定顺序描述了本申请方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

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

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

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

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

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (10)

1.一种页面组件的显示方法，其特征在于，包括：

在组件库中，周期性检测当前页面包括的组件的样式数据；其中，所述组件库中至少包括一个组件，每个组件对应至少一个样式；

若检测到所述样式数据有变化，则确定变化后的目标样式和所述目标样式的样式名；

基于所述目标样式的样式名，生成与所述目标样式的样式数据对应的资源数据；

将所述资源数据与在所述组件库中确定的目标组件进行关联，以对所述目标组件进行更新；

在当前显示页面中显示更新后的所述目标组件。

2.根据权利要求1所述的方法，其特征在于，所述资源数据包括所述目标样式的样式名和所述目标样式的属性集合；

将所述资源数据与在所述组件库中确定的目标组件进行关联，以对所述目标组件进行更新，包括：

基于所述资源数据中的目标样式的样式名，以及预设的样式名和组件库中的各个组件的对应关系，确定所述资源数据对应的目标组件；

将所述资源数据中的目标样式的属性集合与所述目标组件进行关联，以对所述目标组件进行更新。

3.根据权利要求2所述的方法，其特征在于，通过如下方式生成与所述目标样式的样式数据对应的资源数据；

若所述目标样式的样式代码基于IOS系统实现，则确定所述资源数据为包括样式头文件名的样式名和包括资源名的属性集合；

若所述目标样式的样式代码基于Android系统实现，则确定所述资源数据为XML形式的样式名和对应的属性集合。

4.根据权利要求1所述的方法，其特征在于，在所述确定变化后的目标样式和所述目标样式的样式名之后，还包括：

更新所述组件库的版本号；

所述将所述资源数据与在所述组件库中确定的目标组件进行关联包括：

根据所述组件库的版本号确定最新版本的组件库；

在最新版本的组件库中，基于所述资源数据中的样式名，以及预设的样式名和组件库中的各个组件的对应关系，确定所述资源数据对应的目标组件；

将所述资源数据与所述目标组件进行关联。

5.根据权利要求1所述的方法，其特征在于，若检测到上传的图层，则确定所述样式数据有变化；其中，所述图层为响应用户操作生成的，所述图层包括所述用户操作指示的样式名和样式的属性以及属性值。

6.根据权利要求1～5任一项所述的方法，其特征在于，若满足如下变化之一，则确定所述样式数据有变化：

样式中的属性的新增、样式中的属性的删除，或样式中的属性的属性值变化。

7.一种页面组件的显示装置，其特征在于，包括：

检测单元，被配置为执行在组件库中，周期性检测当前页面包括的组件的样式数据；其中，所述组件库中至少包括一个组件，每个组件对应至少一个样式；

确定单元，被配置为执行若检测到所述样式数据有变化，则确定变化后的目标样式和所述目标样式的样式名；

数据生成单元，被配置为执行基于所述目标样式的样式名，生成与所述目标样式的样式数据对应的资源数据；

组件更新单元，被配置为执行将所述资源数据与在所述组件库中确定的目标组件进行关联，以对所述目标组件进行更新；

显示单元，被配置为执行在当前显示页面中显示更新后的所述目标组件。

8.一种电子设备，其特征在于，包括处理器和用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现如权利要求1至6中任一项所述的方法。

9.一种计算机可读存储介质，其特征在于，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如权利要求1至6中任一项所述的方法。

10.一种计算机程序产品，包括计算机程序/指令，其特征在于，所述计算机程序/指令被处理器执行时实现权利要求1至6中任一项所述的方法。

Images