CN108509526A - 用于动态布局移动应用的界面元素的方法和装置 - Google Patents

Abstract

本申请实施例公开了用于动态布局移动应用的界面元素的方法和装置。该方法的一具体实施方式包括：接收服务端发送的目标页面元素的布局设置信息、显示样式设置信息以及目标页面元素对应的数据内容信息；解析目标页面元素的布局设置信息，得到目标页面元素在移动应用界面的显示布局；解析目标页面元素的显示样式设置信息，得到目标页面元素在移动应用界面的显示样式；基于显示布局以及显示样式在移动应用界面中展现数据内容信息所指示的数据内容。该实施方式可以降低创建目标页面元素和更新目标页面元素的显示布局和显示样式所消耗的人力物力，并可以提高创建目标页面元素和更新目标页面元素的时效性。

Description

用于动态布局移动应用的界面元素的方法和装置

技术领域

本申请实施例涉及计算机技术领域，具体涉及互联网技术领域，尤其涉及用于动态布局移动应用的界面元素的方法和装置。

背景技术

随着移动互联网的迅速发展，利用移动互联网发布广告也逐渐成了商家的宣传手段之一。

原生广告，是由广告内容所驱动，并整合了网站和应用本身的可视化设计。原生广告不会让用户一眼就看出广告形态，同时也不会通过插屏弹窗等方式干扰应用的正常操作，使得用户更容易接受、分享。相应地，相比传统广告，原生广告的转化率也较高。

通常，原生广告可以随着移动应用的信息流发送至移动端，以在移动应用中显示原生广告。

发明内容

本申请实施例提出了一种用于动态布局移动应用的界面元素的方法和装置。

第一方面，本申请实施例提供了一种用于动态布局移动应用的界面元素的方法，该方法包括：接收服务端发送的目标页面元素的布局设置信息、显示样式设置信息以及目标页面元素对应的数据内容信息；解析目标页面元素的布局设置信息，得到目标页面元素在移动应用界面的显示布局；解析目标页面元素的显示样式设置信息，得到目标页面元素在移动应用界面的显示样式；基于显示布局以及显示样式在移动应用界面中展现数据内容信息所指示的数据内容。

在一些实施例中，移动应用界面中还包括目标页面元素之外的原有页面元素；以及在基于显示布局以及显示样式在移动应用界面中展现数据内容信息所指示的数据内容之前，该方法还包括：基于移动应用界面中所包括的原有页面元素的显示布局以及显示样式调整目标页面元素在移动应用界面的显示布局和显示样式。

在一些实施例中，解析目标页面元素的布局设置信息，得到目标页面元素在移动应用界面的显示布局，包括：确定目标页面元素所对应的边框在移动应用界面中的位置以及尺寸。

在一些实施例中，目标页面元素包括多个子元素，以及解析目标页面元素的布局设置信息，得到目标页面元素在移动应用界面的显示布局，包括：基于边框在移动应用界面中的位置以及尺寸确定各子元素在边框内的布局。

在一些实施例中，基于显示布局以及显示样式在移动应用界面中展现数据内容信息所指示的数据内容，包括：基于显示布局以及显示样式在移动应用界面中创建目标页面元素对应的界面组件；基于界面组件展现数据内容。

第二方面，本申请实施例提供了一种用于动态布局移动应用的界面元素的方法，该方法包括：接收对移动端移动应用界面中目标页面元素的显示布局和/或显示样式的更新请求，或者接收到在移动应用界面中新建目标页面元素的请求；确定目标页面元素的布局设置信息和显示样式设置信息；将目标页面元素的布局设置信息、显示样式设置信息以及对应的数据内容信息发送至移动端，以使移动端基于布局设置信息和显示样式设置信息解析目标页面元素在移动应用界面的显示布局和显示样式，并根据显示布局和显示样式展现数据内容信息所指示的数据内容。

在一些实施例中，目标页面元素包括多个子元素；以及将目标页面元素的布局设置信息、显示样式设置信息以及对应的数据内容信息发送至移动端，还包括：将多个子元素的信息发送至移动端，以使移动端在解析到的目标页面元素对应的边框在移动应用界面中的位置及尺寸之后，设置各子元素在边框内的布局。

第三方面，本申请实施例提供了一种用于动态布局移动应用的界面元素的装置，该装置包括：信息接收单元，配置用于接收服务端发送的目标页面元素的布局设置信息、显示样式设置信息以及目标页面元素对应的数据内容信息；第一解析单元，配置用于解析目标页面元素的布局设置信息，得到目标页面元素在移动应用界面的显示布局；第二解析单元，配置用于解析目标页面元素的显示样式设置信息，得到目标页面元素在移动应用界面的显示样式；展现单元，配置用于基于显示布局以及显示样式在移动应用界面中展现数据内容信息所指示的数据内容。

在一些实施例中，移动应用界面中还包括目标页面元素之外的原有页面元素；以及该装置还包括调整单元，调整单元配置用于：在展现单元基于显示布局以及显示样式在移动应用界面中展现数据内容信息所指示的数据内容之前，基于移动应用界面中所包括的原有页面元素的显示布局以及显示样式调整目标页面元素在移动应用界面的显示布局和显示样式。

在一些实施例中，第一解析单元进一步配置用于：确定目标页面元素所对应的边框在移动应用界面中的位置以及尺寸。

在一些实施例中，目标页面元素包括多个子元素，以及第一解析单元进一步配置用于：基于边框在移动应用界面中的位置以及尺寸确定各子元素在边框内的布局。

在一些实施例中，展现单元进一步配置用于：展现单元进一步配置用于：基于显示布局以及显示样式在移动应用界面中创建目标页面元素对应的界面组件；基于界面组件展现数据内容。

第四方面，本申请实施例提供了一种用于动态布局移动应用的界面元素的装置，该装置包括：请求接收单元，配置用于接收对移动端移动应用界面中目标页面元素的显示布局和/或显示样式更新请求，或者接收到在移动应用界面中新建目标页面元素的请求；确定单元，配置用于基于预设规则确定目标页面元素的布局设置信息和显示样式设置信息；发送单元，配置用于将目标页面元素的布局设置信息、显示样式设置信息以及对应的数据内容信息发送至移动端，以使移动端基于布局设置信息和显示样式设置信息解析目标页面元素在移动应用界面的显示布局和显示样式，并根据显示布局和显示样式展现数据内容信息所指示的数据内容。

在一些实施例中，目标页面元素包括多个子元素；以及发送单元进一步配置用于：将多个子元素的信息发送至移动端，以使移动端在解析到的目标页面元素对应的边框在移动应用界面中的位置及尺寸之后，设置各子元素在边框内的布局。

第五方面，本申请实施例提供了一种终端，该终端包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当上述一个或多个程序被上述一个或多个处理器执行时，使得上述一个或多个处理器实现如第一方面中任一实现方式描述的方法。

第六方面，本申请实施例提供了一种服务器，该服务器包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当上述一个或多个程序被上述一个或多个处理器执行时，使得上述一个或多个处理器实现如第二方面中任一实现方式描述的方法。

第七方面，本申请实施例提供了一种计算机可读介质，其上存储有计算机程序，其中，该计算机程序被处理器执行时实现如第一方面中任一实现方式描述的方法。

第八方面，本申请实施例提供了另一种计算机可读介质，其上存储有计算机程序，其中，该计算机程序被处理器执行时实现如第二方面中任一实现方式描述的方法。

本申请实施例提供的用于动态布局移动应用的界面元素的方法和装置，通过接收服务端发送的目标页面元素的布局设置信息、显示样式设置信息以及目标页面元素对应的数据内容信息，而后解析目标页面元素的布局设置信息，得到目标页面元素在移动应用界面的显示布局以及解析目标页面元素的显示样式设置信息，得到目标页面元素在移动应用界面的显示样式，最后基于显示布局以及显示样式在移动应用界面中展现数据内容信息所指示的数据内容，从而可以改善在调整目标页面元素的显示布局和显示样式时的资源浪费，并可以提高调整目标页面元素的显示布局和显示样式的效率。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1是本申请可以应用于其中的示例性系统架构图；

图2是根据本申请的用于动态布局移动应用的界面元素的方法的一个实施例的流程图；

图3是根据本申请的用于动态布局移动应用的界面元素的方法的一个应用场景的示意图；

图4是根据本申请的用于动态布局移动应用的界面元素的方法的另一个实施例的流程图；

图5是根据本申请的用于动态布局移动应用的界面元素的方法的另一个实施例的流程图；

图6是根据本申请的用于动态布局移动应用的界面元素的装置的一个实施例的结构示意图；

图7是根据本申请的用于动态布局移动应用的界面元素的装置的另一个实施例的结构示意图；

图8是适于用来实现本申请实施例的终端或服务器的计算机系统的结构示意图。

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关发明，而非对该发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与有关发明相关的部分。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

图1示出了可以应用本申请的用于动态布局移动应用的界面元素的方法或用于动态布局移动应用的界面元素的装置的实施例的示例性系统架构100。

如图1所示，系统架构100可以包括客户端101、102、103，网络104和服务端105。网络104用以在客户端101、102、103和服务端105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用客户端101、102、103通过网络104与服务端105交互，以接收或发送消息等。客户端101、102、103上可以安装有各种客户端应用，例如网页浏览器应用、购物类应用、搜索类应用等。

客户端101、102、103可以是具有显示屏并且支持网页浏览的各种移动电子终端，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture ExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving PictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机等等。

服务端105可以是提供各种服务的服务器，例如对客户端101、102、103上显示的页面提供支持的后台服务器。后台服务器可以对插入到页面中的目标页面元素进行处理，并将处理结果(例如目标页面元素的显示布局设置信息和显示样式设置信息)发送给客户端。

需要说明的是，本申请实施例所提供的用于动态布局移动应用的界面元素的方法可以通过服务端105和客户端101、102、103共同执行，例如，“确定目标页面元素的布局设置信息和样式设置信息”的步骤可以由服务端105执行，解析目标页面元素的布局设置信息和样式设置信息并展示目标页面元素的步骤由客户端101、102、103执行。

需要说明的是，服务端、客户端可以是硬件，也可以是软件。当服务端、客户端为硬件时，可以实现成多个服务器的分布式服务器集群，也可以实现成单个服务器。当服务端、客户端为软件时，可以实现成多个软件或软件模块(例如用来提供分布式服务的多个软件或软件模块)，也可以实现成单个软件或软件模块。在此不做具体限定。

应该理解，图1中的客户端、网络和服务端的数目仅仅是示意性的。根据实现需要，可以具有任意数目的客户端、网络和服务端。

继续参考图2，其示出了根据本申请的用于动态布局移动应用的界面元素的方法的一个实施例的流程200。该用于动态布局移动应用的界面元素的方法，包括以下步骤：

步骤201，接收服务端发送的目标页面元素的布局设置信息、显示样式设置信息以及目标页面元素对应的数据内容信息。

在本实施例中，用于动态布局移动应用的界面元素的方法的执行主体(例如图1所示的客户端，在本申请中上述客户端也可以认为是移动端)可以通过有线连接方式或者无线连接方式接收服务端发送的目标页面元素的布局设置信息、显示样式设置信息以及目标页面元素对应的数据内容信息。

在这里，上述目标页面元素可以是移动应用所显示的界面中的一个页面元素。该目标页面元素可以是一个原生广告，也可以是一则新闻、一个公益宣传视频等。

通常，目标页面元素可以对应一定的数据内容。这里的数据内容可以包括文字、图片以及视频等。在本实施例中，上述服务端可以根据预设规则设定目标页面元素的布局设置信息、显示样式设置信息。

在本实施例的一些可选实现方式中，上述服务端可以根据层叠样式表框模型规则来设置目标页面元素对应的布局。例如上述服务端可以根据层叠样式表框模型规则来声明目标页面元素对应的内容区域、内边距、边框、外边距。

在本实施例的一些可选实现方式中，上述目标页面元素可以包括多个子元素。上述服务端还可以根据层叠样式弹性框模型规则声明目标页面元素中各子元素的排列设置。根据弹性框模型理论，在上述目标页面元素对应的内容区域内，各子元素可以以任意方向排列，并且各子元素的大小可以伸缩。例如伸展子元素以填充内容区域内未使用的空间，或者收缩子元素以避免子元素溢出目标页面元素的内容区域。

上述服务端根据上述层叠样式表框模型规则和层叠样式弹性框模型规则确定目标页面元素及该目标页面元素的子元素的布局设置。也即服务端声明目标页面元素及其各子元素的布局设置信息。

此外，上述服务端还可以设置目标页面元素及该目标页面元素的各子元素的显示样式。这里的显示样式可以包括背景颜色、背景图片、边框颜色、边框形状、透明度、文本颜色、文本字体、文本对其方式等等。

上述服务端在确定了目标页面元素的布局设置和显示样式之后，将目标页面元素的布局设置信息、显示样式信息以及目标页面元素对应的数据内容打包发送给移动端。

步骤202，解析目标页面元素的布局设置信息，得到目标页面元素在移动应用界面的显示布局。

在本实施例中，上述执行主体(例如图1所示的客户端)在接收到由服务端发送的目标页面元素的布局设置信息、显示样式设置信息和目标页面元素对应的数据内容之后，可以首先根据各种方法来解析目标元素的布局设置信息，得到目标页面元素在移动应用界面的显示布局。

在本实施例的一些可选实现方式中，上述执行主体可以根据服务端在设置目标页面元素的布局时所使用的规则，例如层叠样式表框模型规则和层叠样式表弹性框模型规则来解析目标页面元素的布局设置信息，从而得到目标页面元素在移动应用界面的显示布局。

在本实施例的一些可选实现方式中，上述执行主体可以根据目标页面元素的布局设置信息确定目标页面元素在移动应用界面中所占的宽度和最大行数。进一步地，上述执行主体可以根据上述目标页面元素在移动应用界面中所占的宽度和最大行数来确定目标页面元素所对应的边框在移动应用界面中的位置以及尺寸。也即确定目标页面元素所对应的边框在移动应用界面中的高度以及宽度。此外，上述执行主体在确定了目标页面元素的在移动应用界面中的边框所对应的位置及尺寸之后，还可以确定目标页面元素所对应的外边距、边框、内边距以及内容区域各自对应的高度及宽度。

上述执行主体可以进一步基于边框在移动应用界面中的位置以及尺寸确定目标页面元素的各子元素在上述目标页面元素对应的边框内的布局。也即上述目标页面元素的各子元素在上述目标页面元素的内容区域内的排列位置，以及各子元素对应的高度和宽度等。

需要说明的是，上述层叠样式表框模型规则和层叠样式表弹性框模型规则是目前广泛研究和应用的公知技术，在此不再赘述。

步骤203，解析目标页面元素的显示样式设置信息，得到目标页面元素在移动应用界面的显示样式。

在本实施例中，用于动态布局移动应用的界面元素的方法的执行主体上可以使用各种方法对服务端发送的目标页面元素的显示样式设置信息进行解析，从而得到目标页面元素在移动应用界面的显示样式。

值得指出的是，步骤202和步骤203的顺序可以互相调整，此处不做限定。

步骤204，基于显示布局以及显示样式在移动应用界面中展现数据内容信息所指示的数据内容。

在本实施例中，在解析出目标页面元素在移动应用界面上的显示布局和显示样式之后，上述执行主体可以基于上述目标页面元素的显示布局以及显示样式在移动应用界面中展现目标页面元素对应的数据内容信息所指示的数据内容。也就是根据在移动应用界面中的由移动端确定的位置以及移动端确定的显示布局来展现目标页面元素对应的数据内容。

在本实施例的一些可选实现方式中，上述执行主体可以基于显示布局和显示样式在移动应用界面中创建目标页面元素对应的界面组件。进一步地，上述执行主体可以根据目标页面元素所包括的各子元素创建每一个子元素对应的界面组件。这里的界面组件例如目标页面元素的文本内容对应的文本界面组件、目标页面元素的图片和视频内容对应的视图界面组件等。上述执行主体可以基于上述界面组件展现上述数据内容信息所指示的数据内容。

继续参见图3，图3是根据本实施例的用于动态布局移动应用的界面元素的方法的应用场景的一个示意图300。在图3的应用场景中，用户在打开一个应用之后，点击(或触摸)该应用选项框中的一个选项(如图3中的“热点”选项)来选择该选项301，由客户端(也即移动端)向服务端发起与该选项对应的移动应用界面的浏览请求；之后，服务端可以根据浏览请求将该选项对应的移动应用界面的原有页面元素303的相关信息发送给客户端，同时将目标页面元素302的布局设置信息和显示样式设置信息发送给客户端；然后，上述客户端可以解析目标页面元素的布局设置信息和显示样式设置信息，得到目标页面元素在移动应用界面的显示布局和显示样式；最后，客户端在移动应用界面中展现上述原有页面元素303以及基于上述显示布局和显示样式在应用界面展现目标页面元素302。

目前原生广告在移动客户端应用内的植入方式通常是预埋原生广告的业务逻辑和多个固定的原生广告显示布局和显示样式。也就是说，在移动应用内，原生广告的显示布局和显示样式是固定的。如果需要对原生广告的显示布局和显示样式进行变化时，需要修改移动应用的版本，在修改移动应用的版本时对显示布局和显示样式进行变化。如果仅仅由于原生广告的显示布局和显示样式的变化而变更移动应用的版本，会引起资源浪费。另外，在移动应用中植入全新的原生广告必须预埋进移动端的移动应用中，随着移动应用版本的发布而发布，从而使得原生广告发布的时效性较差。

本申请的上述实施例提供的方法通过解析客户端发送的目标页面元素的布局设置信息和显示样式设置信息得到目标页面元素对应移动应用界面的显示布局和显示样式，并根据上述显示布局和显示样式在移动应用界面展现上述目标页面元素。由于服务端仅对目标页面元素的布局和显示样式进行声明，并不设置具体的显示布局和显示样式的实现方式，由客户端来解析目标页面元素在应用界面的显示布局和显示样式，从而可以改善在调整目标页面元素在移动应用界面中的显示布局和显示样式或者在移动应用界面中创建目标页面元素造成的资源浪费；此外，还可以改善在移动应用界面中调整目标页面元素的显示布局和显示样式或者在移动应用界面中创建目标页面元素的时效性。

进一步参考图4，其示出了用于动态布局移动应用的界面元素的方法的另一个实施例的流程400。该用于动态布局移动应用的界面元素的方法的流程400，包括以下步骤：

步骤401，接收服务端发送的目标页面元素的布局设置信息、显示样式设置信息以及目标页面元素对应的数据内容信息。

在本实施例中，用于动态布局移动应用的界面元素的方法的执行主体(例如图1所示的客户端，在本申请中上述客户端也可以认为是移动端)可以通过有线连接方式或者无线连接方式接收服务端发送的目标页面元素的布局设置信息、显示样式设置信息以及目标页面元素对应的数据内容信息。

步骤401与图2所示的步骤201相同，此处不赘述。

步骤402，解析目标页面元素的布局设置信息，得到目标页面元素在移动应用界面的显示布局。

步骤402与图2所示的步骤202相同，此处不赘述。

步骤403，解析目标页面元素的显示样式设置信息，得到目标页面元素在移动应用界面的显示样式。

步骤403与图2所示的步骤203相同，此处不赘述。

值得指出的是，步骤402和步骤403的顺序可以互相调整，此处不做限定。

步骤404，基于移动应用界面中所包括的原有页面元素的显示布局以及显示样式调整目标页面元素在移动应用界面的显示布局和显示样式。

通常，移动应用界面中可以包括目标页面元素之外的原有页面元素。每一个原有页面元素均可以包括文字、图片、和/或视频等内容。此外，多个原有页面元素中每一个原有页面元素均有其对应的显示位置、显示布局、显示样式等。在本实施例的一些可选实现方式中，上述执行主体可以基于移动应用界面中所包括的原有页面元素的显示布局以及显示样式来调整目标页面元素在移动应用界面的显示布局和显示样式。例如，当移动应用界面中的多个原有页面元素中，多个原有页面元素包括两行文字内容，并配以并排排列的多张人物图片。则可以将目标页面元素的布局也调整成两行文字内容配以并排排列的多张图片的形式。又例如，可以将目标页面元素的显示字体、背景颜色调整成与原有页面元素相同的显示字体和背景颜色的显示样式。这样一来，上述目标页面元素可以进一步与移动应用界面中的原有页面元素融为一体，使得用户更容易接受。从而可以提高目标页面元素的点击率。

步骤405，基于显示布局以及显示样式在所述移动应用界面中展现数据内容信息所指示的数据内容。

在本实施例中，在解析出目标页面元素在移动应用界面上的显示布局和显示样式之后，上述执行主体可以基于上述目标页面元素的显示布局以及显示样式在移动应用界面中展现目标页面元素对应的数据内容信息所指示的数据内容。也就是根据在移动应用界面中的由移动端确定的位置以及移动端确定的显示布局来展现目标页面元素对应的数据内容。

从图4中可以看出，与图2对应的实施例相比，本实施例中的用于动态布局移动应用的界面元素的方法的流程400突出了基于移动应用界面中所包括的原有页面元素的显示布局以及显示样式调整目标页面元素在移动应用界面的显示布局和显示样式的步骤。由此，本实施例描述的方案可以使得目标页面元素进一步与移动应用界面中的原有页面元素融为一体，使得用户更容易接受。从而可以提高目标页面元素的点击率。

进一步参考图5，其示出了用于动态布局移动应用的界面元素的方法的又一个实施例的流程500。该用于动态布局移动应用的界面元素的方法的流程500，包括以下步骤：

步骤501，接收对移动端移动应用界面中目标页面元素的显示布局和/或显示样式更新请求，或者接收到在移动应用界面中新建目标页面元素的请求。

在本实施例中，用于动态布局移动应用的界面元素的方法的执行主体(例如图1所示的服务端)可以通过有线连接方式或者无线连接方式接收来自目标页面元素的推广用户的发起的变更目标页面元素的显示布局和/或显示样式的请求；或者接收目标页面元素的推广用户提出的新建目标页面元素的请求。

目标页面元素的推广用户可以根据自身待推广的物品或者信息的变动向上述执行主体发起变更目标页面元素的显示布局和/或显示样式的请求。例如对于一个品牌系列的食品，该品牌系列的食品在应用界面中对应有目标页面元素。在该品牌系列的食品增加了一新款食品之后，推广用户可以向上述执行主体发起在对应该品牌系列的食品对应的目标页面元素中增加该新款食品对应的图片以及说明的请求。增加新款食品的图片和说明就意味着原有的与该品牌系列的食品对应的目标页面元素中的文字和图片的显示布局将发生变动。或者，上述推广用户还可以向上述执行主体发出创建针对该新款食品的目标页面元素的请求。

值得指出的是，这里的目标页面元素可以是一条原生广告，或者可以是一条新闻或者视频媒体，此处不做限定。

步骤502，确定目标页面元素的布局设置信息和显示样式设置信息。

在本实施例中，上述执行主体(例如图1所示的服务端)可以根据预设规则来确定目标页面元素的布局设置信息和显示样式设置信息。

在本实施例的一些可选实现方式中，上述执行主体可以根据层叠样式表框模型规则来设定目标页面元素对应的布局设置。根据层叠样式表框模型规则可以声明目标页面元素对应的内容区域、内边距、边框、外边距的设置信息。

在本实施例的一些可选实现方式中，上述目标页面元素可以包括多个子元素。上述执行主体还可以根据层叠样式弹性框模型规则来确定目标页面元素中各子元素的排列设置。根据弹性框模型理论，在上述页面元素对应的内容区域内，各子元素可以以任意方向排列，并且各子元素的大小可以伸缩。例如伸展子元素以填充内容区域内未使用的空间，或者收缩子元素以避免子元素溢出目标页面元素的内容区域。

例如上述一个品牌系列的食品对应的目标页面元素中增加新款食品说明和图片引起的目标页面元素的显示布局和显示样式发生变化的示例中，上述服务端可以根据增加上述新款食品的文字和图片后的图片的数量以及文字块的数量来重新声明各款食品对应的文字和图片在上述目标页面元素的内容区域内的布局设置信息。

上述执行主体根据上述层叠样式表框模型规则和层叠样式弹性框模型规则确定目标页面元素及该目标页面元素的子元素的布局设置。也即服务端声明目标页面元素及其各子元素的布局设置信息。

此外，上述执行主体还可以设置上述目标页面元素及其各子元素的显示样式。

步骤503，将目标页面元素的布局设置信息、显示样式设置信息以及对应的数据内容信息发送至移动端，以使移动端基于布局设置信息和显示样式设置信息解析目标页面元素在移动应用界面的显示布局和显示样式，并根据显示布局和显示样式展现数据内容信息所指示的数据内容。

在本实施例中，上述执行主体可以将确定的目标页面元素的布局设置信息和显示样式设置信息以及目标页面元素对应的数据内容信息发送给客户端。客户端在接收到目标页面元素的布局设置信息和显示样式设置信息以及目标页面元素对应的数据内容信息之后，对目标页面元素的布局设置信息和显示样式设置信息进行解析，得到目标页面元素在移动应用界面的显示布局和显示样式。然后客户端根据目标页面元素在移动应用界面的显示布局和显示样式来展现目标页面元素对应的数据内容信息所指示的数据内容。

在本实施例的一些可选实现方式中，上述目标页面元素可以包括多个子元素；以及上述将目标页面元素的布局设置信息、显示样式设置信息以及对应的数据内容信息发送至移动端，还可以包括将目标页面元素对应的多个子元素的信息发送至移动端，以使移动端在解析到的目标页面元素对应的边框在移动应用界面中的位置及尺寸之后，设置各子元素在边框内的布局。

本实施例描述的方案在服务端确定目标页面元素的布局设置以及显示样式设置，并将目标页面元素的布局设置信息以及显示样式设置信息发送给客户端，以使客户端根据上述布局设置信息以及显示样式设置信息解析目标页面元素的显示布局和显示样式，从而降低创建目标页面元素和更新目标页面元素的显示布局和显示样式所消耗的人力物力，并可以提高创建目标页面元素和更新目标页面元素的效率。

进一步参考图6，作为对上述各图所示方法的实现，本申请提供了一种用于动态布局移动应用的界面元素的装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图6所示，本实施例的用于动态布局移动应用的界面元素的装置600包括：信息接收单元601、第一解析单元602、第二解析单元603和展现单元604。其中，信息接收单元601，配置用于接收服务端发送的目标页面元素的布局设置信息、显示样式设置信息以及目标页面元素对应的数据内容信息；第一解析单元602，配置用于解析目标页面元素的布局设置信息，得到目标页面元素在移动应用界面的显示布局；第二解析单元603，配置用于解析目标页面元素的显示样式设置信息，得到目标页面元素在移动应用界面的显示样式；展现单元604，配置用于基于显示布局以及显示样式在移动应用界面中展现数据内容信息所指示的数据内容。

在本实施例中，用于动态布局移动应用的界面元素的装置600的信息接收单元601、第一解析单元602、第二解析单元603和展现单元604的具体处理及其所带来的技术效果可分别参考图2对应实施例中步骤201、步骤202、步骤203和步骤204的相关说明，在此不再赘述。

在本实施例的一些可选实现方式中，所述移动应用界面中还包括目标页面元素之外的原有页面元素。用于动态布局移动应用的界面元素的装置600还包括调整单元(图中未示出)。调整单元配置用于：在展现单元604基于显示布局以及显示样式在移动应用界面中展现数据内容信息所指示的数据内容之前，基于移动应用界面中所包括的原有页面元素的显示布局以及显示样式调整目标页面元素在移动应用界面的显示布局和显示样式。

在本实施例的一些可选实现方式中，第一解析单元602进一步配置用于：确定目标页面元素所对应的边框在移动应用界面中的位置以及尺寸。

在本实施例的一些可选实现方式中，目标页面元素包括多个子元素，以及第一解析单元602进一步配置用于：基于边框在移动应用界面中的位置以及尺寸确定各子元素在边框内的布局。

在本实施例的一些可选实现方式中，展现单元604进一步配置用于：基于显示布局以及显示样式在移动应用界面中创建目标页面元素对应的界面组件；基于界面组件展现数据内容。

进一步参考图7，作为对上述图5所示方法的实现，本申请提供了一种用于动态布局移动应用的界面元素的装置的另一个实施例，该装置实施例与图5所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图7所示，本实施例的用于动态布局移动应用的界面元素的装置700包括：请求接收单元701、确定单元702和发送单元703。其中，请求接收单元701，配置用于接收对移动端移动应用界面中目标页面元素的显示布局和/或显示样式更新请求，或者接收到在移动应用界面中新建目标页面元素的请求；确定单元702，配置用于基于预设规则确定目标页面元素的布局设置信息和显示样式设置信息；发送单元703，配置用于将目标页面元素的布局设置信息、显示样式设置信息以及对应的数据内容信息发送至移动端，以使移动端基于布局设置信息和显示样式设置信息解析目标页面元素在移动应用界面的显示布局和显示样式，并根据显示布局和显示样式展现数据内容信息所指示的数据内容。

在本实施例中，用于动态布局移动应用的界面元素的装置700的请求接收单元701、确定单元702和发送单元703的具体处理及其所带来的技术效果可分别参考图5对应实施例中步骤501、步骤502和步骤503的相关说明，在此不再赘述。

在本实施例的一些可选实现方式中，目标页面元素包括多个子元素；以及发送单元703进一步配置用于：将多个子元素的信息发送至移动端，以使移动端在解析到的目标页面元素对应的边框在移动应用界面中的位置及尺寸之后，设置各子元素在边框内的布局。

下面参考图8，其示出了适于用来实现本申请实施例的终端/服务器的计算机系统800的结构示意图。图8示出的终端/服务器仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图8所示，计算机系统800包括中央处理单元(CPU，Central Processing Unit)801，其可以根据存储在只读存储器(ROM，Read Only Memory)802中的程序或者从存储部分808加载到随机访问存储器(RAM，Random Access Memory)803中的程序而执行各种适当的动作和处理。在RAM 803中，还存储有系统800操作所需的各种程序和数据。CPU 801、ROM802以及RAM 803通过总线804彼此相连。输入/输出(I/O，Input/Output)接口805也连接至总线804。

以下部件连接至I/O接口805：包括键盘、鼠标等的输入部分806；包括诸如阴极射线管(CRT，Cathode Ray Tube)、液晶显示器(LCD，Liquid Crystal Display)等以及扬声器等的输出部分807；包括硬盘等的存储部分808；以及包括诸如LAN(局域网，Local AreaNetwork)卡、调制解调器等的网络接口卡的通信部分809。通信部分809经由诸如因特网的网络执行通信处理。驱动器810也根据需要连接至I/O接口805。可拆卸介质811，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器810上，以便于从其上读出的计算机程序根据需要被安装入存储部分808。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分809从网络上被下载和安装，和/或从可拆卸介质811被安装。在该计算机程序被中央处理单元(CPU)801执行时，执行本申请的方法中限定的上述功能。需要说明的是，本申请所述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

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

附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括信息接收单元、第一解析单元、第二解析单元和展现单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定，例如，信息接收单元还可以被描述为“接收服务端发送的目标页面元素的布局设置信息、显示样式设置信息以及目标页面元素对应的数据内容信息的单元”。

作为另一方面，本申请还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的装置中所包含的；也可以是单独存在，而未装配入该装置中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该装置执行时，使得该装置：接收服务端发送的目标页面元素的布局设置信息、显示样式设置信息以及目标页面元素对应的数据内容信息；解析目标页面元素的布局设置信息，得到目标页面元素在移动应用界面的显示布局；解析目标页面元素的显示样式设置信息，得到目标页面元素在移动应用界面的显示样式；基于显示布局以及显示样式在移动应用界面中展现数据内容信息所指示的数据内容。

作为另一方面，本申请还提供了另一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的装置中所包含的；也可以是单独存在，而未装配入该装置中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该装置执行时，使得该装置：接收对移动端移动应用界面中目标页面元素的显示布局和/或显示样式的更新请求，或者接收到在移动应用界面中新建目标页面元素的请求；确定目标页面元素的布局设置信息和显示样式设置信息；将目标页面元素的布局设置信息、显示样式设置信息以及对应的数据内容信息发送至移动端，以使移动端基于布局设置信息和显示样式设置信息解析目标页面元素在移动应用界面的显示布局和显示样式，并根据显示布局和显示样式展现数据内容信息所指示的数据内容。

以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (18)

1.一种用于动态布局移动应用的界面元素的方法，包括：

接收服务端发送的目标页面元素的布局设置信息、显示样式设置信息以及所述目标页面元素对应的数据内容信息；

解析所述目标页面元素的布局设置信息，得到所述目标页面元素在所述移动应用界面的显示布局；

解析所述目标页面元素的显示样式设置信息，得到所述目标页面元素在所述移动应用界面的显示样式；

基于所述显示布局以及所述显示样式在所述移动应用界面中展现所述数据内容信息所指示的数据内容。

2.根据权利要求1所述的方法，其中，所述移动应用界面中还包括所述目标页面元素之外的原有页面元素；以及

在所述基于所述显示布局以及所述显示样式在所述移动应用界面中展现所述数据内容信息所指示的数据内容之前，所述方法还包括：

基于所述移动应用界面中所包括的所述原有页面元素的显示布局以及显示样式调整所述目标页面元素在所述移动应用界面的显示布局和显示样式。

3.根据权利要求1所述的方法，其中，所述解析所述目标页面元素的布局设置信息，得到所述目标页面元素在所述移动应用界面的显示布局，包括：

确定所述目标页面元素所对应的边框在所述移动应用界面中的位置以及尺寸。

4.根据权利要求3所述的方法，其中，所述目标页面元素包括多个子元素，以及

所述解析所述目标页面元素的布局设置信息，得到所述目标页面元素在所述移动应用界面的显示布局，包括：

基于所述边框在所述移动应用界面中的位置以及尺寸确定各子元素在所述边框内的布局。

5.根据权利要求1所述的方法，其中，所述基于所述显示布局以及所述显示样式在所述移动应用界面中展现所述数据内容信息所指示的数据内容，包括：

基于所述显示布局以及所述显示样式在所述移动应用界面中创建所述目标页面元素对应的界面组件；

基于所述界面组件展现所述数据内容。

6.一种用于动态布局移动应用的界面元素的方法，包括：

接收对移动端移动应用界面中目标页面元素的显示布局和/或显示样式的更新请求，或者接收到在所述移动应用界面中新建目标页面元素的请求；

确定所述目标页面元素的布局设置信息和显示样式设置信息；

将所述目标页面元素的布局设置信息、显示样式设置信息以及对应的数据内容信息发送至移动端，以使移动端基于所述布局设置信息和显示样式设置信息解析所述目标页面元素在所述移动应用界面的显示布局和显示样式，并根据所述显示布局和显示样式展现所述数据内容信息所指示的数据内容。

7.根据权利要求6所述的方法，其中，所述目标页面元素包括多个子元素；以及

所述将所述目标页面元素的布局设置信息、显示样式设置信息以及对应的数据内容信息发送至移动端，还包括：

将所述多个子元素的信息发送至所述移动端，以使所述移动端在解析到的所述目标页面元素对应的边框在所述移动应用界面中的位置及尺寸之后，设置各子元素在所述边框内的布局。

8.一种用于动态布局移动应用的界面元素的装置，包括：

信息接收单元，配置用于接收服务端发送的目标页面元素的布局设置信息、显示样式设置信息以及所述目标页面元素对应的数据内容信息；

第一解析单元，配置用于解析所述目标页面元素的布局设置信息，得到所述目标页面元素在所述移动应用界面的显示布局；

第二解析单元，配置用于解析所述目标页面元素的显示样式设置信息，得到所述目标页面元素在所述移动应用界面的显示样式；

展现单元，配置用于基于所述显示布局以及所述显示样式在所述移动应用界面中展现所述数据内容信息所指示的数据内容。

9.根据权利要求8所述的装置，其中，所述移动应用界面中还包括所述目标页面元素之外的原有页面元素；以及

所述装置还包括调整单元，所述调整单元配置用于：

在展现单元基于所述显示布局以及所述显示样式在所述移动应用界面中展现所述数据内容信息所指示的数据内容之前，基于所述移动应用界面中所包括的原有页面元素的显示布局以及显示样式调整所述目标页面元素在所述移动应用界面的显示布局和显示样式。

10.根据权利要求8所述的装置，其中，所述第一解析单元进一步配置用于：

确定所述目标页面元素所对应的边框在所述移动应用界面中的位置以及尺寸。

11.根据权利要求10所述的装置，其中，所述目标页面元素包括多个子元素，以及

所述第一解析单元进一步配置用于：

基于所述边框在所述移动应用界面中的位置以及尺寸确定各子元素在所述边框内的布局。

12.根据权利要求8所述的装置，其中，所述展现单元进一步配置用于：

基于所述显示布局以及所述显示样式在所述移动应用界面中创建所述目标页面元素对应的界面组件；

基于所述界面组件展现所述数据内容。

13.一种用于动态布局移动应用的界面元素的装置，包括：

请求接收单元，配置用于接收对移动端移动应用界面中目标页面元素的显示布局和/或显示样式更新请求，或者接收到在所述移动应用界面中新建目标页面元素的请求；

确定单元，配置用于基于预设规则确定目标页面元素的布局设置信息和显示样式设置信息；

发送单元，配置用于将所述目标页面元素的布局设置信息、显示样式设置信息以及对应的数据内容信息发送至移动端，以使移动端基于所述布局设置信息和显示样式设置信息解析所述目标页面元素在所述移动应用界面的显示布局和显示样式，并根据所述显示布局和显示样式展现所述数据内容信息所指示的数据内容。

14.根据权利要求13所述的装置，其中，所述目标页面元素包括多个子元素；以及

所述发送单元进一步配置用于：

将所述多个子元素的信息发送至所述移动端，以使所述移动端在解析到的所述目标页面元素对应的边框在所述移动应用界面中的位置及尺寸之后，设置各子元素在所述边框内的布局。

15.一种终端，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-5中任一所述的方法。

16.一种服务器，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求6-7中任一所述的方法。

17.一种计算机可读介质，其上存储有计算机程序，其中，该程序被处理器执行时实现如权利要求1-5中任一所述的方法。

18.一种计算机可读介质，其上存储有计算机程序，其中，该程序被处理器执行时实现如权利要求6-7中任一所述的方法。