CN110400196A - 一种页面处理方法、装置及计算机可读存储介质 - Google Patents

Abstract

本发明提供了一种页面处理方法、装置及计算机可读存储介质，包括：获取多个页面模板、多个组件以及组件对应的终端的类型；响应于客户端的页面请求，确定目标页面模板，并根据客户端所在终端的类型，确定与终端的类型相匹配的目标组件；将目标页面模板以及目标组件添加至页面生成器，并获取页面生成器生成的待发布页面；将待发布页面发送至客户端，以供客户端对待发布页面渲染后展示。本发明可以在建立专题页面时，直接选取所需的目标页面模板以及与客户端的终端的类型匹配的目标组件，来构建待发布页面，解决了每次构建专题页面都需要重新开发页面模板和组件的问题，提高了针对不同客户端来构建专题页面的构建效率。

Description

一种页面处理方法、装置及计算机可读存储介质

技术领域

本发明属于计算机技术领域，特别是涉及一种页面处理方法、装置及计算机可读存储介质。

背景技术

对于线上商家来说，在处于运营活动或节日时，需要制作专题页面，以供线上展示。专题页面具有独特性和时效性，不同的活动和节日，其专题页面的内容一般不同，且活动和节日下线后，专题页面一般也会下线。。

现有技术中，在每次运营活动或节日到来之时，都需要由运营组开发人员根据需求制作一个定制化的专题页面，以供在客户端进行展示。并且，针对不同的客户端类型(如网页浏览器端、移动应用端等)，需要建立与客户端宿主语言匹配的专题页面，达到在不同类型的客户端展示专题页面的目的。

但是，目前方案中，针对每次运营活动或节日，一般存在多个不同类型的客户端对专题页面进行展示，使得每次都需要从零开始，建立多个新的专题页面，并使得每个专题页面的开发语言与对应客户端的宿主语言匹配，导致页面建立的效率较低。

发明内容

有鉴于此，本发明提供一种页面处理方法、装置及计算机可读存储介质，在一定程度上解决了目前方案中页面建立的效率较低的问题。

依据本发明的第一方面，提供了一种页面处理方法，该方法可以包括：

获取多个页面模板、多个组件以及所述组件对应的终端的类型；

响应于客户端的页面请求，从所述多个页面模板中确定目标页面模板，并根据所述客户端所在终端的类型，从所述多个组件中确定与所述终端的类型相匹配的目标组件；

将所述目标页面模板以及所述目标组件添加至页面生成器，并获取所述页面生成器根据所述目标页面模板以及所述目标组件生成的待发布页面；

将所述待发布页面发送至所述客户端，以供所述客户端对所述待发布页面渲染后展示。

依据本发明的第二方面，提供了一种页面处理装置，该装置可以包括：

获取模块，用于获取多个页面模板、多个组件以及所述组件对应的终端的类型；

确定模块，用于响应于客户端的页面请求，从所述多个页面模板中确定目标页面模板，并根据所述客户端所在终端的类型，从所述多个组件中确定与所述终端的类型相匹配的目标组件；

生成模块，用于将所述目标页面模板以及所述目标组件添加至页面生成器，并获取所述页面生成器根据所述目标页面模板以及所述目标组件生成的待发布页面；

第一发布模块，用于将所述待发布页面发送至所述客户端，以供所述客户端对所述待发布页面渲染后展示。

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

针对在先技术，本发明具备如下优点：

本发明提供的一种页面处理方法，包括：获取多个页面模板、多个组件以及组件对应的终端的类型；响应于客户端的页面请求，从多个页面模板中确定目标页面模板，并根据客户端所在终端的类型，从多个组件中确定与终端的类型相匹配的目标组件；将目标页面模板以及目标组件添加至页面生成器，并获取页面生成器根据目标页面模板以及目标组件生成的待发布页面；将待发布页面发送至客户端，以供客户端对待发布页面渲染后展示。本发明可以预置多个页面模板和多个具有对应终端的类型的组件，且组件的开发语言与其终端的类型对应的客户端的宿主语言匹配。使得在建立专题页面时，可以从预置的页面模板和组件中，直接选取所需的目标页面模板以及与客户端的终端的类型匹配的目标组件，来构建待发布页面，以供客户端对待发布页面进行渲染展示，解决了每次构建专题页面都需要重新开发页面模板和组件的问题，提高了针对不同客户端来构建专题页面的构建效率。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1是本发明实施例提供的一种页面处理方法的步骤流程图；

图2是本发明实施例提供的一种页面处理方法的系统架构图；

图3是本发明实施例提供的一种页面处理方法的界面示意图；

图4是本发明实施例提供的另一种页面处理方法的步骤流程图；

图5是本发明实施例提供的一种页面处理装置的框图；

图6是本发明实施例提供的另一种页面处理装置的框图。

具体实施方式

下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本发明，并且能够将本发明的范围完整的传达给本领域的技术人员。

图1是本发明实施例提供的一种页面处理方法的步骤流程图，应用于终端，如图1所示，该方法可以包括：

步骤101、获取多个页面模板、多个组件以及所述组件对应的终端的类型。

在本发明实施例中，由于专题页面的独特性和时效性，使得专题页面的上线时间较短、上线频率较大。因此，为了提高专题页面建立方案的复用性，以及简化专题页面的建立步骤，参照图2，其示出了本发明实施例提供的一种页面处理方法的系统架构图，本发明实施例可以建立一个内容管理系统(CMS，Content Management System)，对获取的页面模板和组件进行存储和管理，从而有效解决专题页面的建立与发布中常见的问题和需求。对专题页面的内容管理是CMS的最大优势，通过对用于构建页面的模板和组件进行收集和管理，达到快速搭建和发布页面的目的。

具体的，一个页面的基本构成元素可以包括页面模板和组件，其中，页面模板是针对一个基础页面的声明性代码段落，页面模板可以包含表示元素，这些元素包括文本文字、超文本标记语言(HTML，Hyper Text Markup Language)和数据之间的绑定表达式，简单来说，页面模板可以为一个空的、没有内容的原始页面，其仅有的是页面的边框、主题和内容区域划分等内容，页面模板可以通过加载层叠样式表(CSS，Cascading Style Sheets)文件，来实现对模板样式的设置。

另外，组件(Component)是对数据和方法的简单封装，一般也可称为控件，组件可以有自己的属性和方法，属性是组件数据的简单访问者，方法则是组件的一些简单而可见的功能，使用组件可以实现拖放式编程、快速的属性处理以及真正的面向对象的设计。在页面开发方面，组件可以用于构建页面，帮助完成页面开发中视窗、文本框、按钮、下拉式菜单等界面元素的开发，组件在页面中可以具有可视化的表现。具体的，组件可以对页面中界面元素的数据和方法进行封装，并以一个整体的形式实现页面的模块化设计。如，建立视窗、文本框、按钮、下拉式菜单等界面元素的组件，使得在进行页面构建时，可以直接将需要的组件进行选取和添加至模板的预设位置，生成最终的页面。

进一步的，页面模板和组件的获取方式可以有多种，在本发明实施例的一种实现方式下，可以由页面开发人员根据需求开发一些常用或通用的页面模板和组件，并由CMS进行收集和管理。在本发明实施例的另一种实现方式下，也可以通过互联网下载一些已开发好的页面模板和组件的资源，以供CMS进行收集和管理。

在本发明实施例中，根据展示专题页面的客户端的终端类别不同，专题页面的建立过程也不同，目前用于展示专题页面的客户端通常包括三个终端类别：移动万维网(H5，HTML5)浏览器、个人计算机万维网(PC Web)浏览器和移动客户端应用(Mobile App)。这三种类别的客户端具有不同的系统架构，因此具有不同的页面描述语言(宿主语言)，在实际应用中，页面模板可以通用至这三种类别的客户端，但是由于组件与客户端的系统环境强耦合，使得一个页面中的组件的语言需要与对应客户端的页面描述语言匹配，即需要针对不同类型的客户端设计不同的组件。

因此，在本发明实施例中，可以对根据不同类型的客户端设计的不同组件，添加对应的终端的类型，以表明该组件所能够被应用到何种类型的客户端。如，假设H5浏览器端、PC Web浏览器端和Mobile App端的终端的类型分别为A，B，C，针对一个页面中的按钮，若要将该页面发布至H5浏览器端、PC Web浏览器端和Mobile App端，则需要根据H5浏览器端的宿主语言，开发按钮组件1；根据PC Web浏览器端的宿主语言，开发按钮组件2；根据MobileApp端的宿主语言，开发按钮组件3。并为按钮组件1设置终端的类型A；为按钮组件2设置终端的类型B；为按钮组件3设置终端的类型C。

步骤102、响应于客户端的页面请求，从所述多个页面模板中确定目标页面模板，并根据所述客户端所在终端的类型，从所述多个组件中确定与所述终端的类型相匹配的目标组件。

参照图2，本发明实施例可以建立一个页面制作工具，提供页面制作和数据填充两个功能，页面制作功能用于实现基于页面模板和组件的页面制作，数据填充功能用于实现对组件的数据源绑定。

具体的参照图3，其示出了本发明实施例提供的一种页面处理方法的界面示意图，本发明实施例可以建立一个具有页面制作界面10的页面制作工具，并可以将CMS提供的n个页面模板和n个组件导入页面制作界面10的工具栏20中，通过用户对工具栏20执行的操作，实现对目标页面模板和目标组件进行选取和编辑。具体的，可以根据实际需求，从多个页面模板中确定目标页面模板，如，针对新年活动的专题页面，可以选取红色等具有喜庆色调的页面模板；针对圣诞节活动的专题页面，可以选取蓝色等冷色调的页面模板。

在确定目标页面模板之后，可以进一步选取专题页面所需的目标组件，如，一个专题页面需要具有播放器功能，则可以在确定该专题页面的目标页面模板之后，进一步选取播放器组件作为目标组件。

需要说明的是，在本发明实施例中，由于组件的建立依赖于客户端的宿主语言的关系，在对一个页面进行选取目标组件的操作时，可以针对某一种终端类型的客户端，进行目标组件的确定操作，如，假设H5浏览器端、PC Web浏览器端和Mobile App端的终端的类型分别为A，B，C，若确定了客户端为PC Web浏览器端，则在建立页面1的过程中，可以在选取了目标页面模板之后，进一步选取终端的类型为B的目标组件，另外，若要将页面1复用至H5浏览器端，则可以直接将页面1中的终端的类型为B的目标组件，替换为终端的类型为A的目标组件，以完成页面复用，提高了页面的复用性。

步骤103、将所述目标页面模板以及所述目标组件添加至页面生成器，并获取所述页面生成器根据所述目标页面模板以及所述目标组件生成的待发布页面。

本发明实施例中，页面生成器可以为根据模板和组件的图形化布局，自动生成待发布页面的工具，参照图3，在页面制作工具中，页面生成器可以具有可视化编辑区域30，如，在确定目标页面模板为模板2之后，可以在可视化编辑区域30中对模板2进行展示，进一步的，在确定目标组件为组件1、组件2和组件3之后，可以通过对组件1、组件2和组件3的拖拽操作，将组件1、组件2和组件3从工具栏20拖入可视化编辑区域30中的预设区域，完成将目标页面模板以及目标组件添加至页面生成器的目的。

进一步的，页面生成器可以根据目标模板、目标组件以及目标模板和目标组件之间的相对位置关系，生成待发布页面的页面代码，从而使得页面制作工具通过页面生成器得到待发布页面文件。

另外，在生成待发布页面的过程中，还可以对需要添加数据的组件绑定对应的数据源，以使得该组件能够被正常使用，如，一个“确定”按钮组件，其实现的功能是在用户按下按钮后，打开名称为“海滩旅行”的视频，则在生成待发布页面的过程中，可以对该“确定”按钮组件添加“海滩旅行”视频的文件地址，使得用户在按下该按钮后，能够根据文件地址，打开对应的“海滩旅行”视频。

步骤104、将所述待发布页面发送至所述客户端，以供所述客户端对所述待发布页面渲染后展示。

在该步骤中，待发布页面生成后，可以将待发布页面发送至客户端，以供客户端通过解析器或编译器对待发布页面的代码进行解析或编译，得到解析结果，解析结果包括最终展示页面的页面Java Script代码、CSS代码和HTML代码，客户端在对解析结果进行渲染后，即可得到最终的专题页面。具体的，渲染操作包括根据解析结果对各个目标组件进行位置计算、样式计算，从而构建渲染树，然后客户端可以根据渲染树，实现对专题页面的展示。

需要说明的是，针对客户端之外的其他客户端，若要将专题页面的复用，则可以直接将专题页面中与客户端的终端的类型匹配的目标组件，替换为与其他客户端终端的类型匹配的目标组件，以完成页面复用，提高了页面的复用性。

综上，本发明实施例提供的页面处理方法中，包括：获取多个页面模板、多个组件以及组件对应的终端的类型；响应于客户端的页面请求，从多个页面模板中确定目标页面模板，并根据客户端所在终端的类型，从多个组件中确定与终端的类型相匹配的目标组件；将目标页面模板以及目标组件添加至页面生成器，并获取页面生成器根据目标页面模板以及目标组件生成的待发布页面；将待发布页面发送至客户端，以供客户端对待发布页面渲染后展示。本发明可以预置多个页面模板和多个具有对应终端的类型的组件，且组件的开发语言与其终端的类型对应的客户端的宿主语言匹配。使得在建立专题页面时，可以从预置的页面模板和组件中，直接选取所需的目标页面模板以及与客户端的终端的类型匹配的目标组件，来构建待发布页面，以供客户端对待发布页面进行渲染展示，解决了每次构建专题页面都需要重新开发页面模板和组件的问题，提高了针对不同客户端来构建专题页面的构建效率。

图4是本发明实施例提供的另一种页面处理方法的步骤流程图，如图4所示，该方法可以包括：

步骤401、获取多个页面模板、多个组件以及所述组件对应的终端的类型。

该步骤具体可以参照上述步骤101，此处不再赘述。

可选的，组件包括超文本标记语言HTML结构文件、行为事件文件、CSS样式文件中的一种或多种。

在本发明实施例中，组件可以包括HTML结构文件、行为事件文件、CSS样式文件，其中，HTML结构文件主要包括由HTML命令组成的描述性文本，用于对组件包括的各个元素进行描述，HTML结构文件由标记(tags)所构成，每个标记对浏览器下一个特定的指令，这些指令会告诉浏览器如何显示文件的内容，以供客户端的浏览器通过HTML结构文件实现对组件的渲染。

行为事件文件定义了组件所能够被支持的行为事件，如一个播放器组件，若将该播放器组件应用到通过语音控制的音箱上，则可以定义该组件的行为事件为语音交互类事件；若将该播放器组件应用到包括触摸屏的手机上，则可以定义该组件的行为事件为针对触摸屏的触控交互类事件。

CSS样式文件用于对组件包括的各个元素之间形成的结构样式进行定义，如，定义各个元素所在的位置、大小以及相互之间的位置关系。

可选的，对每个所述组件包括的所述行为事件文件和所述CSS样式文件，分别设置有与所述组件匹配的区分标识。

在本发明实施例中，由于组件的数量较多，不同的组件之间可能会存在功能相似性，使得在后期解析时产生混淆冲突，如，渲染组件a时，错误解析了组件b的行为事件文件或CSS样式文件。因此，每个组件的行为事件文件和CSS样式文件需要通过添加唯一标识的方式进行作用域区分，即为一组件的行为事件文件和CSS样式文件分别设置与所述组件匹配的区分标识，避免后期对该组件进行解析时，将该组件与其他相似组件进行混淆。如，针对相似的组件a和组件b，可以对组件a的行为事件文件和CSS样式文件分别设置标识a，对组件b的行为事件文件和CSS样式文件分别设置标识b，以达到区分组件a和组件b各自的行为事件文件和CSS样式文件的目的。

步骤402、响应于客户端的页面请求，从所述多个页面模板中确定目标页面模板，并根据所述客户端所在终端的类型，从所述多个组件中确定与所述终端的类型相匹配的目标组件。

该步骤具体可以参照上述步骤102，此处不再赘述。

步骤403、将所述目标页面模板以及所述目标组件添加至页面生成器，并获取所述页面生成器根据所述目标页面模板以及所述目标组件生成的待发布页面。

该步骤具体可以参照上述步骤103，此处不再赘述。

可选的，在本发明实施例的一种实现方式中，步骤403具体可以包括：

子步骤4031、通过所述页面生成器，对所述目标页面模板以及所述目标组件进行样式设置。

在本发明实施例中，根据实际业务需求，可以在建立专题页面的过程中，对专题页面的页面模板及各个组件进行样式设置，以使得专题页面的样式符合实际业务需求，如，样式设置可以包括对某几个组件进行居中排版；对页面模板和组件进行对比度、色调调整等。

需要说明的是，对目标页面模板以及目标组件进行样式设置，可以通过在页面生成器中基于目标页面模板以及目标组件的代码进行编译，得到样式设置后的页面的页面代码。

另外，也可以通过可视化的化页面模板、可视化的组件以及可视化的页面生成器，实现对目标页面模板以及目标组件的可视化样式设置。

可选的，页面模板包括可视化页面模板，所述组件包括可视化组件，所述页面生成器包括可视化编辑区域，子步骤4031具体可以包括：

子步骤40311、在所述可视化编辑区域中展示目标可视化页面模板。

在本发明实施例中，由于组件和页面模板本身包括可显示信息，因此可以通过浏览器对组件或页面模板进行独立显示，参照图3，可以建立一个页面制作界面10的页面制作工具，并可以将CMS提供的n个可视化页面模板和n个可视化组件导入页面制作界面10的工具栏20中进行展示，通过用户对工具栏20执行的操作，实现对目标页面模板和目标组件进行选取，另外，页面制作工具还提供了具有可视化编辑区域30的页面生成器。

在该步骤中，当选取了一个目标页面模板之后，可以在可视化编辑区域30中对目标页面模板进行展示。

子步骤40312、接收对目标可视化组件的拖拽操作，并根据所述拖拽操作，将所述目标可视化组件移动至所述目标可视化页面模板中的目标区域。

在该步骤中，参照图3，用户可以通过一些对目标可视化组件的选取和或拖拽操作，将工具栏20中的目标可视化组件移动至目标可视化页面模板中的目标区域，实现对目标组件的排版。

另外，用户也可以在可视化编辑区域30对单个可视化组件进行样式设置，如对可视化组件进行放大或缩小操作。

可选的，在子步骤40312之后，还可以包括：

子步骤40313、添加针对所述可视化编辑区域的层叠样式表CSS文件。

子步骤40314、根据所述CSS文件，修改所述目标可视化页面模板和目标可视化组件的样式。

假设根据实际业务需求，需要对专题页面进行整体调整，若先进行对目标页面模板的调整，再进行针对各个目标组件的调整，会导致操作繁琐，耗时较长。因此，在本发明实施例中，可以对整个可视化编辑区域添加对应的CSS文件，实现根据CSS文件，修改目标可视化页面模板和目标可视化组件的样式的目的。

例如，假设要将整个专题页面的透明度调整为60％，若先调整页面模板的透明度，再调整各个组件的透明度，会导致耗时较长，处理繁琐，本发明实施例可以通过将一个修改透明度为60％的CSS文件添加至整个可视化编辑区域，并应用于可视化编辑区域中的所有对象，实现一次性调整整个专题页面的样式的目的。

子步骤4032、根据所述组件与数据源之间的对应关系，确定所述目标组件对应的目标数据源。

子步骤4033、将所述目标数据源的访问地址，添加至所述目标组件，得到所述待发布页面。

在生成待发布页面的过程中，还可以对需要添加数据的目标组件绑定对应的数据源，以使得该目标组件能够被正常使用，如，一个“确定”按钮组件，其实现的功能是在用户按下按钮后，打开名称为“海滩旅行”的视频，则在生成待发布页面的过程中，可以对该“确定”按钮组件添加“海滩旅行”视频的文件地址，使得用户在按下该按钮后，能够根据文件地址，打开对应的“海滩旅行”视频。在本发明实施例中，页面制作工具中可以存储有组件与数据源之间的对应关系，根据该对应关系，可以确定目标组件对应的目标数据源。另外，目标组件对应的目标数据源也可以由客户进行任意指定，本发明实施例对此不作限定。

进一步的，数据源可以为存储在本地的文件，且本地的文件具有自己的的访问地址。另外，数据源也可以为远端服务器，远端服务器也具有自己的访问地址，以使得通过该访问地址访问远端的服务器，实现数据的异步获取。本发明实施例可以将目标数据源的访问地址，添加至所述目标组件，得到所述待发布页面，使得目标组件可以通过访问地址调用对应的数据源，达到目标组件能够被正常使用的目的。

步骤404、将所述待发布页面发送至所述客户端，以供所述客户端对所述待发布页面渲染后展示。

该步骤具体可以参照上述步骤104，此处不再赘述。

可选的，在本发明实施例的一种实现方式中，当所述客户端为浏览器时，步骤404具体可以包括：

子步骤4041、通过编译器对所述待发布页面进行编译，得到页面代码文件。

在本发明实施例中，浏览器可以包括移动万维网浏览器或个人计算机万维网浏览器，移动万维网浏览器也通常叫做H5浏览器，在个人计算机或者移动终端浏览器都可以通过H5浏览器直接访问H5页面，H5浏览器的兼容性主要包括移动终端的不同浏览器的兼容性。

人计算机万维网浏览器也通常叫做PC Web浏览器，PC Web浏览器可以通过浏览器请求后台服务，后台返回到响应内容显示在浏览器上，PC Web浏览器的兼容性主要包括个人计算机的各个浏览器和不同操作系统。

PC Web浏览器和H5浏览器都可以对应一个后台服务，所有客户访问的都是同一个后台，二者之间的不同在于，PC Web浏览器针对于个人计算机，而H5浏览器针对于移动终端(手机)。

针对于PC Web浏览器和H5浏览器，本发明实施例可以通过编译器对待发布页面进行编译，得到页面代码文件。例如，对于PC Web浏览器和H5浏览器，可以通知CMS系统将待发布页面文件放到Web Server(网页服务器)容器中编译得到HTML代码，该HTML代码可以直接被客户端进行渲染展示。

子步骤4042、将所述页面代码文件发送至所述客户端，以供所述客户端对所述页面代码文件渲染后展示。

在该步骤中，在得到HTML代码之后，可以将HTML代码保存为页面代码文件，并将页面代码文件发送到内容分发网络(CDN，Content Delivery Network)，以通过CDN将页面代码文件发送至客户端。在客户端接收到页面代码文件之后，可以利用客户端的浏览器直接对页面代码文件进行渲染，渲染后即可进行展示。

可选的，在本发明实施例的另一种实现方式中，当所述客户端包括应用程序时，步骤404具体可以包括：

子步骤4043、通过解析器对所述待发布页面进行解析，得到所述待发布页面的第一描述文件，所述第一描述文件包括所述目标组件对应的终端的类型，以及所述目标组件对应的描述信息。

在本发明实施例中，应用程序可以包括移动客户端应用，移动客户端应用通常也称作Mobile App端，具体可以应用于不同操作系统的移动终端的应用上，移动客户端应用展示的页面可以包括应用的界面、内容页面等，由于Mobile App端的兼容性包含移动终端的不同操作系统、移动终端的不同机型、移动终端的不同版本、移动终端的不同屏幕等，因此Mobile App端通常需要对多种移动终端的应用的实际情况进行兼容。而PC Web浏览器和H5浏览器应用于较为固定和稳定的浏览器，因此Web浏览器和H5浏览器通常不需要对多种浏览器的实际情况进行兼容。

因此，相较于PC Web浏览器和H5浏览器，Mobile App端无法实现对单一类型的移动终端应用进行兼容，在本发明实施例中，对于Mobile App端，可以通过解析器对所述待发布页面进行解析，得到第一描述文件，解析器(parser)是指一个程序，通常是编译器的部分，用于接收输入的顺序源程序指令、交互式联机命令、标记或者一些其它定义的接口，并将它们打破分成几个部分，然后能够被其它的编程控制。第一描述文件包括目标组件对应的终端的类型，以及目标组件对应的描述信息，其中，目标组件对应的描述信息可以包括各个目标组件之间的位置约束关系以及业务约束关系，位置约束关系是指各个目标组件的相对位置关系；业务约束关系是指各个目标组件之间在业务和功能上的关联。

通过对待发布页面的解析，可以得到能够被Mobile App端所识别的第一描述文件，Mobile App端可以根据自己的应用的实际情况，将第一描述文件编译成对应的页面代码，并将页面代码进行渲染展示。

例如，针对一个屏幕尺寸为3英寸的移动终端上的网购应用，以及一个屏幕尺寸为4英寸的移动终端上的同一网购应用，若生成了该网购应用的一个主页页面的第一描述文件，则屏幕尺寸为3英寸的移动终端可以将该第一描述文件编译成设配3英寸屏幕的页面代码；屏幕尺寸为4英寸的移动终端可以将该第一描述文件编译成设配4英寸屏幕的页面代码，以供不同尺寸的屏幕渲染展示与屏幕尺寸相适配的页面代码。

子步骤4044、当所述第一描述文件的页面描述语言与所述客户端的页面描述语言匹配时，将所述第一描述文件发送至所述客户端，以供所述客户端对所述第一描述文件进行编译和渲染后展示。

在本发明实施例中，基于不同的客户端的不同终端类型，通常需要采用不同的描述语言(宿主语言)来适配不同终端类型的客户端的应用，在实际应用中，假设在构建待发布页面时采用了页面描述语言type A，而移动终端的应用在开发时也采用了页面描述语言type A，则通过解析待发布页面得到的第一描述文件的页面描述语言，与客户端的页面描述语言匹配，此时客户端可以识别并处理第一描述文件，客户端可以根据自己的应用的实际情况(如屏幕尺寸不同、屏幕形状不同等)，将第一描述文件编译成对应的页面代码，并将页面代码进行渲染展示。

可选的，在步骤4043之后，还可以包括：

子步骤4045、当所述第一描述文件的页面描述语言与所述客户端的页面描述语言不匹配时，根据所述客户端的页面描述语言，将所述第一描述文件转化为第二描述文件，所述第二描述文件的页面描述语言与所述客户端的页面描述语言相匹配。

在本发明实施例中，基于不同的客户端的不同终端类型，通常需要采用不同的描述语言(宿主语言)来适配不同终端类型的客户端的应用，若提供给客户端一个由不同页面描述语言建立的第一描述文件，则客户端会无法识别和处理该第一描述文件，此时需要根据第一描述文件的页面描述语言与客户端所支持的页面描述语言(开发语言)之间的语法转换关系，将第一描述文件转化为第二描述文件。

例如，假设在构建待发布页面时采用了页面描述语言type A，而移动终端的应用在开发时采用了页面描述语言type B，则通过解析待发布页面得到的第一描述文件的页面描述语言，与客户端的页面描述语言不匹配，此时可以按照页面描述语言type A和页面描述语言type B之间的语法转换关系，将第一描述文件转换为能够被客户端识别并处理的第二描述文件，提高了专题页面的适用性。

子步骤4046、将所述第二描述文件发送至所述客户端，以供所述客户端对所述第二描述文件编译、渲染后展示。

在接收到第二描述文件之后，客户端可以根据自己的应用的实际情况(如屏幕尺寸不同、屏幕形状不同等)，将第二描述文件编译成对应的页面代码，并将页面代码进行渲染展示。

可选的，在步骤403之后，还可以包括：

步骤405、从所述多个组件中，确定与其他客户端所在终端的类型相匹配的组件，所述其他客户端所在终端的类型与所述客户端所在终端的类型不同。

在本发明实施例中，可以对根据不同类型的客户端设计的不同组件，添加对应的终端的类型，以表明该组件所能够被应用到何种类型的客户端。如，假设H5浏览器端、PCWeb浏览器端和Mobile App端的终端的类型分别为A，B，C，针对一个页面中的按钮，若要将该页面发布至H5浏览器端、PC Web浏览器端和Mobile App端，则需要根据H5浏览器端的宿主语言，开发按钮组件1；根据PC Web浏览器端的宿主语言，开发按钮组件2；根据MobileApp端的宿主语言，开发按钮组件3。并为按钮组件1设置终端的类型A；为按钮组件2设置终端的类型B；为按钮组件3设置终端的类型C。

步骤406、将所述待发布页面中的目标组件，替换为所述与其他客户端所在终端的类型相匹配的组件，得到新的待发布页面。

进一步的，参照步骤405中的示例，若确定了客户端为PC Web浏览器端，则在建立页面1的过程中，可以在选取了目标页面模板之后，进一步选取终端的类型为B的按钮组件2，另外，若要将页面1复用至H5浏览器端，则可以直接将页面1中的终端的类型为B的按钮组件2，替换为终端的类型为A的按钮组件1，得到新的页面，并将新的页面发送至H5浏览器端进行渲染展示，以完成页面复用，在该页面复用过程中，并不需要重新建立针对H5浏览器端的页面，提高了页面复用的效率。

步骤407、将所述新的待发布页面发送至所述其他客户端，以供所述其他客户端渲染后展示。

该步骤可以参照上述步骤104，此处不再赘述。

综上所述，本发明实施例提供的页面处理方法，包括：获取多个页面模板、多个组件以及组件对应的终端的类型；响应于客户端的页面请求，从多个页面模板中确定目标页面模板，并根据客户端所在终端的类型，从多个组件中确定与终端的类型相匹配的目标组件；将目标页面模板以及目标组件添加至页面生成器，并获取页面生成器根据目标页面模板以及目标组件生成的待发布页面；将待发布页面发送至客户端，以供客户端对待发布页面渲染后展示。本发明可以预置多个页面模板和多个具有对应终端的类型的组件，且组件的开发语言与其终端的类型对应的客户端的宿主语言匹配。使得在建立专题页面时，可以从预置的页面模板和组件中，直接选取所需的目标页面模板以及与客户端的终端的类型匹配的目标组件，来构建待发布页面，以供客户端对待发布页面进行渲染展示，解决了每次构建专题页面都需要重新开发页面模板和组件的问题，提高了针对不同客户端来构建专题页面的构建效率。另外，本发明通过对应用于不同终端类型客户端的组件，设定与终端类型匹配的终端的类型，使得针对一个页面，可以直接将其包括的组件按照需求替换成其他终端的类型对应的组件，并直接将替换后的页面复用至其他终端的类型对应的客户端上，避免了每次页面复用都要重新进行页面建立，降低了页面复用的难度，提高了页面复用的效率。

图5是本发明实施例提供的一种页面处理装置的框图，如图5所示，该装置50可以包括：

获取模块501，用于获取多个页面模板、多个组件以及所述组件对应的终端的类型；

可选的，所述组件包括超文本标记语言HTML结构文件、行为事件文件、CSS样式文件中的一种或多种。

可选的，对每个所述组件包括的所述行为事件文件和所述CSS样式文件，分别设置有与所述组件匹配的区分标识。

确定模块502，用于响应于客户端的页面请求，从所述多个页面模板中确定目标页面模板，并根据所述客户端所在终端的类型，从所述多个组件中确定与所述终端的类型相匹配的目标组件；

生成模块503，用于将所述目标页面模板以及所述目标组件添加至页面生成器，并获取所述页面生成器根据所述目标页面模板以及所述目标组件生成的待发布页面；

可选的，生成模块503还用于：

通过所述页面生成器，对所述目标页面模板以及所述目标组件进行样式设置；

根据所述组件与数据源之间的对应关系，确定所述目标组件对应的目标数据源；

将所述目标数据源的访问地址，添加至所述目标组件，得到所述待发布页面。

可选的，所述页面模板包括可视化页面模板，所述组件包括可视化组件，所述页面生成器包括可视化编辑区域；生成模块503还用于：

所述通过所述页面生成器，对所述目标页面模板以及所述目标组件进行样式设置，包括：

在所述可视化编辑区域中展示目标可视化页面模板；

接收对目标可视化组件的拖拽操作，并根据所述拖拽操作，将所述目标可视化组件移动至所述目标可视化页面模板中的目标区域。

可选的，生成模块503还用于：

添加针对所述可视化编辑区域的层叠样式表CSS文件；

根据所述CSS文件，修改所述目标可视化页面模板和所述目标可视化组件的样式。

第一发布模块504，用于将所述待发布页面发送至所述客户端，以供所述客户端对所述待发布页面渲染后展示。

可选的，若所述客户端为应用程序，所述第一发布模块504还用于通过编译器对所述待发布页面进行编译，得到页面代码文件；

将所述页面代码文件发送至所述客户端，以供所述客户端对所述页面代码文件渲染后展示。

可选的，若所述客户端为浏览器，所述第一发布模块504还用于通过解析器对所述待发布页面进行解析，得到所述待发布页面的第一描述文件，所述第一描述文件包括所述目标组件对应的终端的类型，以及所述目标组件对应的描述信息；

当所述第一描述文件的页面描述语言与所述客户端的页面描述语言匹配时，将所述第一描述文件发送至所述客户端，以供所述客户端对所述第一描述文件进行编译和渲染后展示。

可选的，所述第一发布模块504还用于当所述第一描述文件的页面描述语言与所述客户端的页面描述语言不匹配时，根据所述客户端的页面描述语言，将所述第一描述文件转化为第二描述文件，所述第二描述文件的页面描述语言与所述客户端的页面描述语言相匹配；

将所述第二描述文件发送至所述客户端，以供所述客户端对所述第二描述文件编译、渲染后展示。

可选的，参照图6，所述装置还可以包括：

选取模块505，从所述多个组件中，确定与其他客户端所在终端的类型相匹配的组件，所述其他客户端所在终端的类型与所述客户端所在终端的类型不同；

替换模块506，将所述待发布页面中的目标组件，替换为所述与其他客户端所在终端的类型相匹配的组件，得到新的待发布页面；

第二发布模块507，将所述新的待发布页面发送至所述其他客户端，以供所述其他客户端渲染后展示。

综上所述，本发明实施例提供的页面处理装置，包括：获取多个页面模板、多个组件以及组件对应的终端的类型；响应于客户端的页面请求，从多个页面模板中确定目标页面模板，并根据客户端所在终端的类型，从多个组件中确定与终端的类型相匹配的目标组件；将目标页面模板以及目标组件添加至页面生成器，并获取页面生成器根据目标页面模板以及目标组件生成的待发布页面；将待发布页面发送至客户端，以供客户端对待发布页面渲染后展示。本发明可以预置多个页面模板和多个具有对应终端的类型的组件，且组件的开发语言与其终端的类型对应的客户端的宿主语言匹配。使得在建立专题页面时，可以从预置的页面模板和组件中，直接选取所需的目标页面模板以及与客户端的终端的类型匹配的目标组件，来构建待发布页面，以供客户端对待发布页面进行渲染展示，解决了每次构建专题页面都需要重新开发页面模板和组件的问题，提高了针对不同客户端来构建专题页面的构建效率。另外，本发明通过对应用于不同终端类型客户端的组件，设定与终端类型匹配的终端的类型，使得针对一个页面，可以直接将其包括的组件按照需求替换成其他终端的类型对应的组件，并直接将替换后的页面复用至其他终端的类型对应的客户端上，避免了每次页面复用都要重新进行页面建立，降低了页面复用的难度，提高了页面复用的效率。

对于上述装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

优选的，本发明实施例还提供一种终端，包括处理器，存储器，存储在存储器上并可在所述处理器上运行的计算机程序，该计算机程序被处理器执行时实现上述页面处理方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。

本发明实施例还提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述页面处理方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。其中，所述的计算机可读存储介质，如只读存储器(Read-Only Memory，简称ROM)、随机存取存储器(Random Access Memory，简称RAM)、磁碟或者光盘等。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域技术人员易于想到的是：上述各个实施例的任意组合应用都是可行的，故上述各个实施例之间的任意组合都是本发明的实施方案，但是由于篇幅限制，本说明书在此就不一一详述了。

在此提供的页面处理方法不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造具有本发明方案的系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本发明并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的页面处理方法中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (12)

1.一种页面处理方法，其特征在于，所述方法包括：

获取多个页面模板、多个组件以及所述组件对应的终端的类型；

响应于客户端的页面请求，从所述多个页面模板中确定目标页面模板，并根据所述客户端所在终端的类型，从所述多个组件中确定与所述终端的类型相匹配的目标组件；

将所述目标页面模板以及所述目标组件添加至页面生成器，并获取所述页面生成器根据所述目标页面模板以及所述目标组件生成的待发布页面；

将所述待发布页面发送至所述客户端，以供所述客户端对所述待发布页面渲染后展示。

2.根据权利要求1所述的方法，其特征在于，所述获取所述页面生成器根据所述目标页面模板以及所述目标组件生成的待发布页面的步骤，包括：

通过所述页面生成器，对所述目标页面模板以及所述目标组件进行样式设置；

根据所述组件与数据源之间的对应关系，确定所述目标组件对应的目标数据源；

将所述目标数据源的访问地址，添加至所述目标组件，得到所述待发布页面。

3.根据权利要求2所述的方法，其特征在于，所述页面模板包括可视化页面模板，所述组件包括可视化组件，所述页面生成器包括可视化编辑区域；

所述通过所述页面生成器，对所述目标页面模板以及所述目标组件进行样式设置，包括：

在所述可视化编辑区域中展示目标可视化页面模板；

接收对目标可视化组件的拖拽操作，并根据所述拖拽操作，将所述目标可视化组件移动至所述目标可视化页面模板中的目标区域。

4.根据权利要求3所述的方法，其特征在于，在所述接收对目标可视化组件的拖拽操作，并根据所述拖拽操作，将所述目标可视化组件移动至所述目标可视化页面模板中的目标区域的步骤之后，还包括：

添加针对所述可视化编辑区域的层叠样式表CSS文件；

根据所述CSS文件，修改所述目标可视化页面模板和所述目标可视化组件的样式。

5.根据权利要求1所述的方法，其特征在于，在所述将所述待发布页面发送至所述客户端，以供所述客户端对所述待发布页面渲染后展示的步骤之后，还包括：

从所述多个组件中，确定与其他客户端所在终端的类型相匹配的组件，所述其他客户端所在终端的类型与所述客户端所在终端的类型不同；

将所述待发布页面中的目标组件，替换为所述与其他客户端所在终端的类型相匹配的组件，得到新的待发布页面；

将所述新的待发布页面发送至所述其他客户端，以供所述其他客户端渲染后展示。

6.根据权利要求1所述的方法，其特征在于，若所述客户端为浏览器，所述将所述待发布页面发送至所述客户端，以供所述客户端对所述待发布页面渲染后展示，包括：

通过编译器对所述待发布页面进行编译，得到页面代码文件；

将所述页面代码文件发送至所述客户端，以供所述客户端对所述页面代码文件渲染后展示。

7.根据权利要求1所述的方法，其特征在于，若所述客户端为应用程序，所述将所述待发布页面发送至所述客户端，以供所述客户端对所述待发布页面渲染后展示，包括：

通过解析器对所述待发布页面进行解析，得到所述待发布页面的第一描述文件，所述第一描述文件包括所述目标组件对应的终端的类型，以及所述目标组件对应的描述信息；

当所述第一描述文件的页面描述语言与所述客户端的页面描述语言匹配时，将所述第一描述文件发送至所述客户端，以供所述客户端对所述第一描述文件进行编译和渲染后展示。

8.根据权利要求7所述的方法，其特征在于，在所述通过解析器对所述待发布页面进行解析，得到所述待发布页面的第一描述文件之后，还包括：

当所述第一描述文件的页面描述语言与所述客户端的页面描述语言不匹配时，根据所述客户端的页面描述语言，将所述第一描述文件转化为第二描述文件，所述第二描述文件的页面描述语言与所述客户端的页面描述语言相匹配；

将所述第二描述文件发送至所述客户端，以供所述客户端对所述第二描述文件编译、渲染后展示。

9.根据权利要求1至8任一所述的方法，其特征在于，所述组件包括超文本标记语言HTML结构文件、行为事件文件、CSS样式文件中的一种或多种。

10.根据权利要求9所述的方法，其特征在于，对每个所述组件包括的所述行为事件文件和所述CSS样式文件，分别设置有与所述组件匹配的区分标识。

11.一种页面处理装置，其特征在于，所述装置包括：

获取模块，用于获取多个页面模板、多个组件以及所述组件对应的终端的类型；

确定模块，用于响应于客户端的页面请求，从所述多个页面模板中确定目标页面模板，并根据所述客户端所在终端的类型，从所述多个组件中确定与所述终端的类型相匹配的目标组件；

生成模块，用于将所述目标页面模板以及所述目标组件添加至页面生成器，并获取所述页面生成器根据所述目标页面模板以及所述目标组件生成的待发布页面；

第一发布模块，用于将所述待发布页面发送至所述客户端，以供所述客户端对所述待发布页面渲染后展示。

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