CN107436841B - 页面的预览方法及装置 - Google Patents

Abstract

本申请实施例涉及一种页面的预览方法及装置，在页面中组装页面组件模块之后，可以向服务端发送页面预览请求；服务端在接收到页面预览请求之后，根据页面预览请求中的平台类型，从设备池中选取对应于该平台类型的设备，并通过该设备显示上述页面；服务端实时地将设备的显示界面发送给客户端，从而客户端可以显示真实环境下页面的显示效果，这既可以提高在真实环境下页面显示的正确性，还可以确保页面的显示符合预期。

Description

页面的预览方法及装置

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面的预览方法及装置。

背景技术

传统技术中，在可视化页面搭建平台(如，内容管理系统(Content ManagementSystem，CMS))中创建页面时，该页面包括页面组件模块，用户只能在开发环境下查看页面的显示效果，而事实上，当页面被发布上线后，该页面可能会在不同的环境下进行展示，如，在不同的平台类型(如，IOS、安卓(Andriod)或者个人电脑)的设备上进行展示，而开发环境与真实环境往往存在很大的差别，因此，若不能预览真实环境下页面的显示效果，可能会导致页面不能正确显示的问题。

发明内容

本申请实施例提供了一种页面的预览方法及装置，可以预览真实环境下页面的显示效果，从而可以提高页面显示的准确性。

第一方面，提供了一种页面的预览方法，该方法包括：

从模块列表中选择页面组件模块，并将选择的页面组件模块组装在页面上；

向服务端发送页面预览请求，所述页面预览请求包括平台类型以及所述页面，所述页面预览请求用于指示所述服务端根据所述平台类型，查找相应的设备，并通过所述设备展示所述页面；

接收所述服务端发送的所述设备的展示界面，显示所述展示界面。

第二方面，提供了一种页面的预览方法，该方法包括：

接收客户端发送的页面预览请求，所述页面预览请求包括平台类型以及包含页面组件模块的页面；

根据所述平台类型，查找相应的设备，并向所述设备发送页面展示指令，所述页面展示指令用于指示所述设备展示所述页面；

向所述客户端发送所述设备的展示界面，以使所述客户端显示所述展示界面。

第三方面，提供了一种页面的预览装置，该装置包括：

组装单元，用于从模块列表中选择页面组件模块，并将选择的页面组件模块组装在页面上；

发送单元，用于向服务端发送页面预览请求，所述页面预览请求包括平台类型以及所述页面，所述页面预览请求用于指示所述服务端根据所述平台类型，查找相应的设备，并通过所述设备展示所述页面；

接收单元，用于接收所述服务端发送的所述设备的展示界面，显示所述展示界面。

第四方面，提供了一种页面的预览装置，该装置包括：

接收单元，用于接收客户端发送的页面预览请求，所述页面预览请求包括平台类型以及包含页面组件模块的页面；

查找单元，用于根据所述接收单元接收的所述平台类型，查找相应的设备，并向所述设备发送页面展示指令，所述页面展示指令用于指示所述设备展示所述页面；

发送单元，用于向所述客户端发送所述设备的展示界面，以使所述客户端显示所述展示界面。

本申请提供的页面的预览方法及装置，在页面中组装页面组件模块之后，可以向服务端发送页面预览请求；服务端在接收到页面预览请求之后，根据页面预览请求中的平台类型，从设备池中选取对应于该平台类型的设备，并通过该设备显示上述页面；服务端实时地将设备的显示界面发送给客户端，从而客户端可以显示真实环境下页面的显示效果，这既可以提高在真实环境下页面显示的正确性，还可以确保页面的显示符合预期。

附图说明

图1为本申请提供的页面的管理界面的示意图；

图2为本申请一种实施例提供的页面的预览方法流程图；

图3为本申请提供的页面组件模块的示意图之一；

图4为本申请提供的页面组件模块的示意图之二；

图5为本申请另一种实施例提供的页面的预览方法流程图；

图6为本申请再一种实施例提供的页面的预览装置示意图；

图7为本申请又一种实施例提供的页面的预览装置示意图。

具体实施方式

下面结合附图，对本发明的实施例进行描述。

本申请实施例提供的页面的预览方法及装置适用于在可视化页面搭建平台(如，CMS)中创建页面时，对创建的页面在真实环境下进行预览的场景。需要说明的是，本申请的可视化页面搭建平台包括客户端和服务端。

客户端可以提供用于创建页面以及配置页面中的页面组件模块的管理界面，该管理界面可以如图1所示，图1中，包括模块列表、平台配置区域、编辑区域以及可视化区域等四个部分。

模块列表(也称组件库)中包含至少一个页面组件模块(简称组件)，通过模块列表客户端可以接收用户输入的选择指令；客户端根据该选择指令，可以从模块列表中选择一个或多个页面组件模块。通过平台配置区域可以接收用户输入的第一配置指令；客户端根据该第一配置指令，可以配置至少一种平台类型(如，IOS、Andriod或者个人电脑等)；可以理解的是，当在平台配置区域配置多种平台类型时，则可以在编辑区域对对应于每种平台类型的页面进行配置。通过编辑区域可以接收用户输入的第二配置指令；客户端根据该第二配置指令，可以对上述选择的一个或多个页面组件模块进行配置。可视化区域用于显示真实环境下页面的显示效果。

需要说明的是，作为示例性说明，上述只是配置了不同操作系统的平台类型，在实际应用中，可能同一页面在同一操作系统类型但版本不同的设备上页面的显示效果也不同，所以在平台配置区域也可以配置同一操作系统类型版本不同的平台类型，如，IOS7.0和IOS8.0等。此外，还可以配置不同类型浏览器或者同一类型浏览器版本不同的平台类型，如，IE7浏览器以及IE8浏览器等，本申请对此不作限定。

服务端包括设备池，其中，设备池包括多种平台类型的设备，如，IOS设备，Andriod设备以及个人电脑等。具体地，当服务端接收到客户端发送的页面预览请求时，根据页面预览请求中包括的平台类型，从设备池中查找对应于该平台类型的设备；若该设备空闲，则指示该设备展示客户端请求预览的页面，并利用RTP或者VNC协议将设备的展示界面实时发送给客户端，从而客户端可以预览真实环境下页面的显示效果。

需要说明的是，上述设备池中还可以包括同一操作系统类型版本不同的设备，如，IOS7.0设备以及IOS8.0设备等。此外，上述设备池中还可以包括不同类型浏览器或者同一类型浏览器版本不同的设备，如，IE7浏览器的设备以及IE8浏览器的设备等。

图2为本申请一种实施例提供的页面的预览方法流程图。该方法的执行主体可以为客户端，如图2所示，该方法具体可以包括：

步骤210，从模块列表中选择页面组件模块，并将选择的页面组件模块组装在页面上。

可以理解的是，在执行步骤210之前，客户端可以先接收用户的创建页面指令，根据该创建页面指令，创建页面后就可以跳转至图1所示的管理界面。客户端通过该管理界面中的模块列表可以接收选择指令，根据该选择指令从模块列表中选择一个或多个页面组件模块。以淘宝网页面为例来说，页面组件模块可以为：“路径导航”、“商品列表”以及“活动说明”等。

从模块列表中选择一个或多个页面组件模块之后，就可以将该一个或多个页面组件模块组装到上述创建的页面中。组装在页面中的页面组件模块被再次选中时，即可激活图1中的编辑区域和平台配置区域。

可选地，在图1中的平台配置区域被激活之后，可以通过平台配置区域接收用户输入的第一配置指令，并根据该第一配置指令，配置页面对应的平台类型。如，根据第一配置指令，可以先配置“windows”、“mac”以及“mobi le”第一级的平台类型，之后，在第一级的平台类型下可以配置第二级的平台类型，如在“mobi le”中可以再配置“winphone”、“ios”、“android”以及“uc”等。

在平台配置区域配置不同的平台类型之后，在编辑区域可以接收用户输入的第二配置指令；根据该第二配置指令，可以配置对应于每种平台类型的页面组件模块的显示内容和显示样式。由此，达到了在不同的平台类型下配置不同的页面的目的，从而可以提高页面显示的正确性。

以页面组件模块为“商品列表”为例来说，配置“商品列表”的显示内容如下：配置商品的总数，配置每个商品对应的图片、文案、链接以及价格等；配置“商品列表”的显示样式如下：配置在不同设备分辨率、像素精度下每行显示的商品个数以及图片的清晰度等。

再以页面组件模块为“路径导航”为例来说，对应于平台类型为“mac”的页面组件模块的显示内容和显示样式如图3所示，而对应于平台类型为“IOS”的页面组件模块的显示内容和显示样式如图4所示。

当然，在实际应用中，如果页面组件模块支持对应于某一平台类型呈现特定的信息时，则根据上述第二配置指令，还可以对特定的信息进行配置。如，在平台类型为IE7时，可以配置“商品列表”的特定的信息为“浏览器版本低”，在完成上述配置之后。当通过IE7浏览器访问包含商品列表的页面时，可以提示“浏览器版本低”等信息。

步骤220，向服务端发送页面预览请求，页面预览请求包括平台类型以及页面，页面预览请求用于指示服务端根据平台类型，查找相应的设备，并通过设备展示页面。

客户端在将页面组件模块组装到页面之后，或者，在配置了页面对应的平台类型以及对应于每种平台类型的页面组件模块的显示内容和显示样式之后，可以向服务端发送页面预览请求，该页面预览请求包括平台类型和页面。可以理解的是，若客户端没有根据配置指令，配置页面对应的平台类型时，则此处的平台类型可以是客户端默认的平台类型。此外，上述客户端将页面发送至服务端的过程也可以称为将页面发布到开发环境。

服务端在接收到页面预览请求之后，可以根据页面预览请求中的平台类型，从设备池中查找对应于该平台类型的设备；并判断该设备是否空闲，若该设备空闲，则根据该设备的唯一标识(如，IP地址)向该设备发送指示消息，如，在该设备为IOS设备时，上述指示消息可以为指令：openurl(××××)，其中，“××××”可以为页面的链接地址，该链接地址可以是由客户端配置，或者也可以由服务端随机分配；或者，在该设备为android设备时，则上述指示消息可以为指令：adb(××××)；该设备在接收到上述指示消息之后，展示客户端请求预览的页面。

在一种具体实现方式中，服务端可以通过表1来记录设备池中各设备的平台类型以及标识等信息。

表1

具体地，当客户端发送的页面预览请求包括的平台类型为IOS时，服务端可以将IOS与表1中各设备的平台类型进行比对，因为设备1的平台类型为IOS，则可以将设备1选取为待展示页面的设备；若设备1空闲，则可以根据标识“192.168.2.22”，向设备1发送上述指示消息，从而由设备1展示客户端请求预览的页面。

步骤230，接收服务端发送的设备的展示界面，显示展示界面。

在设备上展示页面之后，服务端可以利用实时传输协议(Real-time TransportProtocol，RTP)或者虚拟网络计算机(Virtual Network Computer，VNC)协议将设备的展示界面实时发送给客户端，客户端通过图1中的可视化区域显示服务端发送的展示界面，该过程也可以称为将设备的展示界面映象到客户端的可视化区域。由此，客户端的用户就可以预览真实环境下页面的显示效果，当客户端的用户发现该页面显示不正确或者显示效果不符合预期时，重新对该页面进行配置，直至该页面在真实环境下的显示效果符合预期，这既可以提高在真实环境下页面显示的正确性，还可以确保页面的显示符合预期。

当然，在实际应用中，服务端也可以利用其它协议将设备的展示界面实时发送给客户端，本申请对此不作限定。

本申请提供的页面的预览方法，在页面中组装页面组件模块之后，可以向服务端发送页面预览请求；服务端在接收到页面预览请求之后，根据页面预览请求中的平台类型，从设备池中选取对应于该平台类型的设备，并通过该设备显示上述页面；服务端实时地将设备的显示界面发送给客户端，从而客户端可以显示真实环境下页面的显示效果，这既可以提高在真实环境下页面显示的正确性，还可以确保页面的显示符合预期。

图5为本申请另一种实施例提供的页面的预览方法流程图。该方法的执行主体可以为服务端，如图5所示，该方法具体可以包括：

步骤510，接收客户端发送的页面预览请求，页面预览请求包括平台类型以及包含页面组件模块的页面。

客户端在将页面组件模块组装到页面之后，或者，在配置了页面对应的平台类型以及对应于每种平台类型的页面组件模块的显示内容和显示样式之后，可以向服务端发送页面预览请求，该页面预览请求包括平台类型和页面。可以理解的是，若客户端没有根据配置指令，配置页面对应的平台类型时，则此处的平台类型可以是客户端默认的平台类型。此外，上述客户端将页面发送至服务端的过程也可以称为将页面发布到开发环境。

步骤520，根据平台类型，查找相应的设备，并向设备发送页面展示指令，页面展示指令用于指示设备展示页面。

服务端在接收到页面预览请求之后，可以根据页面预览请求中的平台类型，从设备池中查找对应于该平台类型的设备；并判断该设备是否空闲，若该设备空闲，则根据该设备的唯一标识(如，IP地址)向该设备发送指示消息，如，在该设备为IOS设备时，上述指示消息可以为指令：openurl(××××)，其中，“××××”可以为页面的链接地址，该链接地址可以是由客户端配置，或者也可以由服务端随机分配；或者，在该设备为android设备时，则上述指示消息可以为指令：adb(××××)；该设备在接收到上述指示消息之后，展示客户端请求预览的页面。

步骤530，向客户端发送设备的展示界面，以使客户端显示展示界面。

在设备上展示页面之后，服务端可以利用RTP或者VNC协议将设备的展示界面实时发送给客户端，客户端通过图1中的可视化区域显示服务端发送的展示界面，该过程也可以称为将设备的展示界面映象到客户端的可视化区域。由此，客户端的用户就可以预览真实环境下页面的显示效果，从而客户端可以显示真实环境下页面的显示效果，这提高了页面显示的准确性。

与上述页面的预览方法对应地，本申请实施例还提供的一种页面的预览装置，如图6所示，该装置包括：

组装单元601，用于从模块列表中选择页面组件模块，并将选择的页面组件模块组装在页面上。

发送单元602，用于向服务端发送页面预览请求，该页面预览请求包括平台类型以及页面，页面预览请求用于指示服务端根据平台类型，查找相应的设备，并通过设备展示页面。

接收单元603，用于接收服务端发送的设备的展示界面，显示展示界面。

接收单元603具体用于：

利用实时传输协议RTP或者虚拟网络计算机VNC协议接收服务端返回的页面的展示界面。

可选地，该装置还可以包括：配置单元604；

接收单元603，还用于接收用户输入的配置指令；

配置单元604，用于根据接收单元603接收的配置指令，配置相应的平台类型，并配置对应于该平台类型的页面组件模块的显示内容和显示样式。

本申请实施例装置的各功能模块的功能，可以通过上述方法实施例的各步骤来实现，因此，本申请提供的装置的具体工作过程，在此不复赘述。

本申请实施例提供的页面的预览装置，组装单元601从模块列表中选择页面组件模块，并将选择的页面组件模块组装在页面上；发送单元602向服务端发送页面预览请求，该页面预览请求包括平台类型以及页面，页面预览请求用于指示服务端根据平台类型，查找相应的设备，并通过设备展示页面；接收单元603接收服务端发送的设备的展示界面，显示展示界面。由此，既可以提高在真实环境下页面显示的正确性，还可以确保页面的显示符合预期。

与上述页面的预览方法对应地，本申请实施例还提供的一种页面的预览装置，如图7所示，该装置包括：

接收单元701，用于接收客户端发送的页面预览请求，该页面预览请求包括平台类型以及包含页面组件模块的页面。

查找单元702，用于根据接收单元701接收的平台类型，查找相应的设备，并向设备发送页面展示指令，该页面展示指令用于指示设备展示页面。

发送单元703，用于向客户端发送设备的展示界面，以使客户端显示展示界面。

发送单元703具体用于：

利用实时传输协议RTP或者虚拟网络计算机VNC协议向客户端发送设备的展示界面。

本申请实施例装置的各功能模块的功能，可以通过上述方法实施例的各步骤来实现，因此，本申请提供的装置的具体工作过程，在此不复赘述。

本申请实施例提供的页面的预览装置，接收单元701接收客户端发送的页面预览请求，该页面预览请求包括平台类型以及包含页面组件模块的页面；查找单元702根据平台类型，查找相应的设备，并向设备发送页面展示指令，该页面展示指令用于指示设备展示页面；发送单元703向客户端发送设备的展示界面，以使客户端显示展示界面。由此，既可以提高在真实环境下页面显示的正确性，还可以确保页面的显示符合预期。

专业人员应该还可以进一步意识到，结合本文中所公开的实施例描述的各示例的对象及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

以上所述的具体实施方式，对本申请的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本申请的具体实施方式而已，并不用于限定本申请的保护范围，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (8)

1.一种页面的预览方法，其特征在于，由客户端按照用户通过用于创建页面以及配置页面中的页面组件模块的管理界面的配置指令，在所述管理界面实时展示所创建的页面，所述管理界面包括模块列表、平台配置区域、编辑区域以及可视化区域；该方法包括：

从所述模块列表中选择页面组件模块，并将选择的页面组件模块通过所述编辑区域组装在页面上，所述页面还通过所述平台配置区域配置有平台类型，以及对应于所述平台类型的所述页面组件模块的显示内容和显示样式；

向服务端发送页面预览请求，所述页面预览请求包括平台类型以及所述页面，所述页面预览请求用于指示所述服务端根据所述平台类型，查找相应的设备，并通过所述设备展示所述页面；

接收所述服务端发送的所述设备的展示界面，利用所述可视化区域映象显示所述展示界面。

2.根据权利要求1所述的方法，其特征在于，所述接收所述服务端返回的所述页面的展示界面，具体为：

利用实时传输协议RTP或者虚拟网络计算机VNC协议接收所述服务端返回的所述页面的展示界面。

3.一种页面的预览方法，其特征在于，所述方法包括：

接收客户端发送的页面预览请求，所述页面预览请求包括平台类型以及包含页面组件模块的页面，所述页面配置有对应于所述平台类型的所述页面组件模块的显示内容和显示样式，所述页面基于所述客户端接收的用户通过用于创建页面以及配置页面中的页面组件模块的管理界面的配置指令创建，所述管理界面包括模块列表、平台配置区域、编辑区域以及可视化区域，所述页面组件模块所述模块列表选择，并通过所述编辑区域组装在页面上，所属平台类型通过所述平台配置区域配置；

根据所述平台类型，查找相应的设备，并向所述设备发送页面展示指令，所述页面展示指令用于指示所述设备展示所述页面；

向所述客户端发送所述设备的展示界面，以使所述客户端利用所述可视化区域映象显示所述展示界面。

4.根据权利要求3所述的方法，其特征在于，所述向所述客户端发送所述设备的展示界面，具体为：

利用实时传输协议RTP或者虚拟网络计算机VNC协议向所述客户端发送所述设备的展示界面。

5.一种页面的预览装置，其特征在于，由客户端按照用户通过用于创建页面以及配置页面中的页面组件模块的管理界面的配置指令，在所述管理界面实时展示所创建的页面，所述管理界面包括模块列表、平台配置区域、编辑区域以及可视化区域；该装置包括：

组装单元，用于从所述模块列表中选择页面组件模块，并将选择的页面组件模块通过所述编辑区域组装在页面上，所述页面还通过所述平台配置区域配置有平台类型，以及对应于所述平台类型的所述页面组件模块的显示内容和显示样式；

发送单元，用于向服务端发送页面预览请求，所述页面预览请求包括平台类型以及所述页面，所述页面预览请求用于指示所述服务端根据所述平台类型，查找相应的设备，并通过所述设备展示所述页面；

接收单元，用于接收所述服务端发送的所述设备的展示界面，利用所述可视化区域映象显示所述展示界面。

6.根据权利要求5所述的装置，其特征在于，所述接收单元具体用于：

利用实时传输协议RTP或者虚拟网络计算机VNC协议接收所述服务端返回的所述页面的展示界面。

7.一种页面的预览装置，其特征在于，所述装置包括：

接收单元，用于接收客户端发送的页面预览请求，所述页面预览请求包括平台类型以及包含页面组件模块的页面，所述页面还配置有平台类型，以及对应于所述平台类型的所述页面组件模块的显示内容和显示样式，所述页面基于所述客户端接收的用户通过用于创建页面以及配置页面中的页面组件模块的管理界面的配置指令创建，所述管理界面包括模块列表、平台配置区域、编辑区域以及可视化区域，所述页面组件模块所述模块列表选择，并通过所述编辑区域组装在页面上，所属平台类型通过所述平台配置区域配置；

查找单元，用于根据所述接收单元接收的所述平台类型，查找相应的设备，并向所述设备发送页面展示指令，所述页面展示指令用于指示所述设备展示所述页面；

发送单元，用于向所述客户端发送所述设备的展示界面，以使所述客户端利用所述可视化区域映象显示所述展示界面。

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

利用实时传输协议RTP或者虚拟网络计算机VNC协议向所述客户端发送所述设备的展示界面。

Images