CN113076499A - 一种页面互动方法、装置、设备、介质及程序产品 - Google Patents

Abstract

本申请公开了一种页面互动方法，该方法包括：页面互动系统显示配置页面，该配置页面包括线上页面的配置区和线上页面的预览区，配置区用于对线上页面的内容和/或样式进行配置，预览区用于通过模拟器展示线上页面，然后接收用户在配置页面触发的互动操作，接着根据互动操作，在配置页面中展示互动结果。该方法中，运营人员对配置页面中的内容进行编辑后，能够快速对编辑后的内容进行预览，提高线上回归的效率，进一步地，该方法摆脱了手机等第三方设备的束缚，提高了回归测试效率以及回归的便捷性。

Description

一种页面互动方法、装置、设备、介质及程序产品

技术领域

本申请涉及计算机技术领域，特别是涉及一种页面互动方法、装置、设备以及计算机可读存储介质、计算机程序产品。

背景技术

随着信息时代的到来，页面例如是第5版超文本标记语言(hyper text markuplanguage，html)页面作为一种可以快速迭代的方案，越来越多地用于承载互联网流量。为了获得较好的分发效果，运营人员可以人为地对页面的内容进行编辑，例如可以根据事件的关注度、文章的点击率(click through rate，CTR)调整事件或者文章的顺序，然后保存后上线。

考虑到线上的展示效果，通常还需要在上线之前，还需要进行线上回归。其中，回归是指修改了旧代码后，重新进行测试以确认修改没有引入新的错误或导致其他代码产生错误。目前，很多应用通常是采用第三方设备如手机等进行内容回归。

然而，手机与后台难以交互，运营人员难以快速查看编辑后的内容是否生效。业界亟需提供一种页面互动方法，以提升回归测试的效率。

发明内容

为了解决上述技术问题，本申请提供了一种页面互动方法，该方法在运营人员对配置页面中的内容进行编辑后，能够快速对编辑后的内容进行预览，提高线上回归的效率。并且摆脱了手机等第三方设备的束缚，提高了回归测试的效率以及回归的便捷性。本申请还提供了上述方法对应的装置、设备、计算机可读存储介质以及计算机程序产品。

第一方面，本申请提供了一种页面互动方法，包括：

显示配置页面，所述配置页面包括线上页面的预览区和所述线上页面的配置区，所述配置区用于配置所述线上页面的内容和/或样式，所述预览区用于通过模拟器展示所述线上页面；

接收用户通过所述配置页面触发的互动操作，根据所述互动操作在所述配置页面中展示互动结果。

在一些可能的实现方式中，所述互动操作包括选中所述配置区的对象的操作，所述根据所述互动操作在所述配置页面中展示互动结果，包括：

在所述配置页面的所述预览区中，通过设定样式展示被选中的对象对应的页面元素。

在一些可能的实现方式中，所述互动操作包括选中所述预览区的页面元素的操作，所述根据所述互动操作在所述配置页面中展示互动结果，包括：

在所述配置页面的所述配置区中，通过设定样式展示被选中的页面元素对应的对象。

在一些可能的实现方式中，所述互动操作包括在所述配置区配置投票信息、图片尺寸、图文样式中的至少一种；

所述根据所述互动操作在所述配置页面中展示互动结果，包括：

在所述配置页面的所述预览区中，根据所述投票信息显示投票窗口；和/或者,

在所述配置页面的所述预览区中，显示与所述图片尺寸对应的图片；和/或者,

在所述配置页面的所述预览区中，根据所述图文样式显示对应的图片和文字。

在一些可能的实现方式中，所述模拟器包括加载器，所述显示配置页面，包括：

接收所述用户配置的所述线上页面的源地址，根据所述源地址通过加载器加载所述线上页面，在所述配置页面的所述预览区展示所述线上页面。

在一些可能的实现方式中，所述模拟器还包括交互引擎，所述交互引擎中包括至少一个适配器；

所述根据所述互动操作在所述配置页面中展示互动结果，包括：

根据所述互动操作确定与所述互动操作对应的适配器；

根据与所述互动操作对应的适配器的交互逻辑，在所述配置页面中展示互动结果。

在一些可能的实现方式中，所述根据与所述互动操作对应的适配器的交互逻辑，在所述配置页面中展示互动结果，包括：

当触发所述互动操作的用户的用户标识与预设标识匹配时，加载与所述互动操作对应的适配器的交互逻辑，根据所述交互逻辑在所述配置页面中展示互动结果。

在一些可能的实现方式中，所述根据与所述互动操作对应的适配器的交互逻辑，在所述配置页面中展示互动结果，包括：

根据与所述互动操作对应的适配器的交互逻辑，从目标接口请求互动数据；

调用加载器按照预配置的加载参数无缓存加载所述互动数据，以在所述配置页面中展示互动结果。

在一些可能的实现方式中，所述线上页面包括落地页。

第二方面，本申请提供了一种页面互动装置，包括：

显示单元，用于显示配置页面，所述配置页面包括线上页面的预览区和所述线上页面的配置区，所述配置区用于配置所述线上页面的内容和/或样式，所述预览区用于通过模拟器展示所述线上页面；

接收单元，用于接收用户通过所述配置页面触发的互动操作；

所述显示单元，还用于根据所述互动操作在所述配置页面中展示互动结果。

在一些可能的实现方式中，所述互动操作包括选中所述配置区的对象的操作，所述显示单元，具体用于在所述配置页面的所述预览区中，通过设定样式展示被选中的对象对应的页面元素。

在一些可能的实现方式中，所述互动操作包括选中所述预览区的页面元素的操作，所述显示单元，具体用于在所述配置页面的所述配置区中，通过设定样式展示被选中的页面元素对应的对象。

在一些可能的实现方式中，所述互动操作包括在所述配置区配置投票信息、图片尺寸、图文样式中的至少一种；

所述显示单元，具体用于：

在所述配置页面的所述预览区中，根据所述投票信息显示投票窗口；和/或者,

在所述配置页面的所述预览区中，显示与所述图片尺寸对应的图片；和/或者,

在所述配置页面的所述预览区中，根据所述图文样式显示对应的图片和文字。

在一些可能的实现方式中，所述模拟器包括加载器，所述接收单元，还用于接收所述用户配置的所述线上页面的源地址；

所述显示单元，具体用于根据所述源地址通过加载器加载所述线上页面，在所述配置页面的所述预览区展示所述线上页面。

在一些可能的实现方式中，所述模拟器还包括交互引擎，所述交互引擎中包括至少一个适配器；所述显示单元，具体用于根据所述互动操作确定与所述互动操作对应的适配器；根据与所述互动操作对应的适配器的交互逻辑，在所述配置页面中展示互动结果。

在一些可能的实现方式中，所述根据与所述互动操作对应的适配器的交互逻辑，所述显示单元，具体用于当触发所述互动操作的用户的用户标识与预设标识匹配时，加载与所述互动操作对应的适配器的交互逻辑，根据所述交互逻辑在所述配置页面中展示互动结果。

在一些可能的实现方式中，所述显示单元，具体用于根据与所述互动操作对应的适配器的交互逻辑，从目标接口请求互动数据；调用加载器按照预配置的加载参数无缓存加载所述互动数据，以在所述配置页面中展示互动结果。

在一些可能的实现方式中，所述线上页面包括落地页。

第三方面，本申请提供一种设备，所述设备包括处理器和存储器。所述处理器、所述存储器进行相互的通信。所述处理器用于执行所述存储器中存储的指令，以使得设备执行如第一方面或第一方面的任一种实现方式中的页面互动方法。

第四方面，本申请提供一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，所述指令指示设备执行上述第一方面或第一方面的任一种实现方式所述的页面互动方法。

第五方面，本申请提供了一种包含指令的计算机程序产品，当其在设备上运行时，使得设备执行上述第一方面或第一方面的任一种实现方式所述的页面互动方法。

本申请在上述各方面提供的实现方式的基础上，还可以进行进一步组合以提供更多实现方式。

附图说明

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

图1为本申请实施例提供的一种页面互动系统的架构图；

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

图3为本申请实施例提供的一种模拟器与后台处理器之间的指令交互图；

图4A至图4D为本申请实施例提供的一种配置页面的示意图；

图5为本申请实施例提供的一种模拟器与后台处理器之间的指令交互图；

图6A至图6B为本申请实施例提供的一种配置页面的示意图；

图7为本申请实施例提供的一种页面互动装置的示意图；

图8为本申请实施例提供的一种设备的结构示意图。

具体实施方式

本申请实施例中的术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。

首先对本申请实施例中所涉及到的一些技术术语进行介绍。

页面在计算机领域是指承载信息，以向用户呈现信息的内容的界面。具体地，具有显示功能的设备可以加载页面对应的文件，从而向用户显示页面。页面文件可以通过计算机语言编写，该计算机语言具体可以是第5版超文本标记语言(hyper text markuplanguage，html)，也记作html5。

同一页面可以被多个设备访问，该页面在同一时间被访问的次数可以记作该页面承载的流量。对于承载流量较高的页面，例如是榜单页、着陆页、引导页等落地页(landingpage)，可以通过html5实现快速迭代。

页面中呈现的信息的内容可以包括热点事件、热门话题等。运营人员可以人为地对多个热点事件或热门话题的排列顺序或者标题等内容进行编辑，以实现页面迭代。在一些示例中，运营人员可以根据事件或话题的关注度、点击率(click through rate，CTR)等调整事件或者话题的排列顺序，然后保存上线。

为了保障上线后的展示效果，运营人员还可以在对页面中呈现的信息的内容进行编辑并保存后，进行线上回归，以预览页面中呈现的信息的内容。目前，运营人员通常是利用第三方设备如手机等进行线上回归，以重新测试人为干预过程中所修改的代码是否引入新的错误或者导致其他代码错误。

然而，第三方设备与后台难以交互，运营人员难以快速地定位并查看编辑后的内容是否生效。

有鉴于此，本申请实施例提供了一种页面互动方法。该方法可以由页面互动系统执行。具体地，页面互动系统显示配置页面，该配置页面包括线上页面的配置区以及线上页面的预览区，配置区用于对线上页面的内容和/或样式进行配置，预览区用于通过模拟器展示线上页面，然后页面互动系统接收用户在配置页面触发的互动操作，根据互动操作在配置页面中展示互动结果。

该方法通过在配置页面中展示互动结果，例如通过高亮方式或者动画效果展示页面中的信息，从而辅助运营人员快速定位至页面编辑的内容，由此提高线上回归的效率。而且，该方法可以实现在页面互动系统中的运营后台进行线上页面的预览，摆脱了手机等第三方设备的束缚，提高了回归效率以及回归的便捷性。此外，预览的线上页面的逻辑代码、用于实现页面互动的逻辑代码与真实的线上页面的逻辑代码独立，不会产生代码污染。预览的线上页面也无需缓存，可以在保存编辑的内容后立即生效，减少等待成本。

为了使得本申请的技术方案更加清楚、易于理解，下面结合附图对本申请实施例提供的页面互动系统的架构进行介绍。

参见图1所示的页面互动系统100的架构示意图，页面互动系统100包括客户端10和服务器20。其中，客户端10部署在终端，终端包括但不限于智能手机、平板电脑、笔记本电脑、个人数字助理(personal digital assistant，PDA)或者智能穿戴设备等。服务器20可以是云服务器，例如是中心云计算集群中的中心服务器，或者是边缘云计算集群中的边缘服务器。当然，服务器20也可以是本地数据中心中的本地服务器，本地数据中心是指用户直接控制的数据中心。

客户端10用于显示配置页面，例如客户端10接收服务器20回传的数据，在客户端10中显示配置页面。客户端10还用于接收用户通过配置页面触发的互动操作，然后发送给服务器20，服务器20根据互动操作，向客户端10回传与互动操作对应的数据，以便客户端10根据与互动操作对应的数据，在配置页面展示互动结果。

在一些实施例中，服务器20中部署有模拟器220和运营子系统240。其中，模拟器220用于通过客户端10在配置页面的预览区展示线上页面，还用于接收用户通过客户端10显示的配置页面触发的互动操作，根据互动操作与运营子系统240进行交互，运营子系统240通过客户端10在配置页面的配置区中展示互动结果。运营子系统240还用于接收用户通过客户端10显示的配置页面触发的互动操作，根据互动操作与模拟器220进行交互，然后模拟器120通过客户端10在配置页面的预览区展示互动结果。

在一些示例中，模拟器220包括加载器222和交互引擎224。其中，加载器122用于通过客户端10在配置页面的预览区展示线上页面，交互引擎224用于与运营子系统240进行交互。交互引擎224包括消息处理模块2242和多个适配器2241。其中，多个适配器2241可以集中部署的方式，也可以是分布式部署的方式。消息处理模块2242用于与运营子系统240进行交互，接收运营子系统240传输的数据，对数据的格式进行转换等处理，适配器2241用于根据消息处理模块2242处理后的数据，提供相应的交互逻辑。加载器222根据适配器2241提供的交互逻辑，通过客户端10在配置页面的预览区展示互动结果。需要说明的是，适配器2241的个数可以是多个，不同适配器2241的功能不同，例如不同的适配器2241在配置页面中展示互动结果的方式不同。在一些实施例中，适配器2241还用于接收用户通过客户端10显示的配置页面的预览区中触发的互动操作，然后将与互动操作相关的数据通过消息处理模块2242传输给运营子系统240。

运营子系统240包括逻辑处理模块242和消息处理模块244。其中，消息处理模块244用于接收消息处理模块2242传输的与互动操作相关的数据，对数据的格式进行转换等处理，逻辑处理模块242用于根据消息处理模块244处理后的数据，通过客户端10在配置页面的配置区中展示互动结果。在一些实施例中，逻辑处理模块242还用于接收用户通过客户端10在配置页面的配置区中触发的互动操作，并通过消息处理模块244传输给模拟器220，以便模拟器220通过客户端10在配置页面的预览区展示互动结果。如此，用户(例如运营人员)根据该互动结果能够快速地定位并确定其在配置页面进行的配置是否生效。

以上对页面互动系统100进行介绍，接下来，将从页面互动系统100的角度对本申请实施例提供的页面互动方法进行详细说明。

参见图2所示的页面互动方法的流程图，该方法包括：

S202：页面互动系统100显示配置页面。

配置页面可以是客户端呈现给用户并支持用户操作的页面。配置页面包括线上页面的预览区和线上页面的配置区。其中，配置区用于配置线上页面的内容和样式，预览区用于通过模拟器220展示线上页面，例如是实时展示线上页面。

其中，线上页面是指上线后正式提供给用户的页面。该线上页面可以直接在具有显示功能的用户设备如终端中进行显示，也可以在运营人员的客户端中通过模型器220进行预览。

以线上页面为热搜榜页面进行示例说明，线上页面的内容包括该线上页面所呈现出的热点事件，在一些实施例中，该线上页面呈现出多个热点事件时，线上页面的内容还包括该多个热点事件的排序信息。线上页面的样式指线上页面的呈现样式，呈现样式可以包括图片样式、文字样式和视频样式中的任意一种或多种的组合，例如呈现样式可以是视频样式，还可以是图文样式等。在一些实施例中，呈现样式还可以是线上页面的内容的样式，例如热点事件标题样式(居中显示、加粗显示、加大显示等)。

在一些实施例中，页面互动系统100可以根据线上页面的源地址，加载并呈现线上页面。具体地，页面互动系统100接收用户配置的线上页面的源地址，根据源地址通过加载器222加载线上页面，在配置页面的预览区展示该线上页面。其中，源地址可以通过统一资源定位符(Uniform Resource Locator，URL)表征。在一些实现方式中，页面互动系统100接收用户配置的URL，该URL可以是指向线上页面(例如html 5页面)，页面互动系统100通过iframe标签的方式，根据该URL通过加载器222加载该线上页面，并在配置页面的预览区中展示该线上页面。

在一些实施例中，页面互动系统100加载线上页面时，还会携带用于表征用户身份信息的参数，用户身份可以分为运营人员和非运营人员，模拟器220可以根据该参数来确定加载线上页面的用户身份。例如参数为“from end”时，则表明用户身份为运营人员。模拟器220确定用户身份为运营人员时，模拟器220挂载交互引擎224，即加载与交互引擎224相关的代码。交互引擎224用于与运营子系统240进行信息交互，以辅助运营人员对线上页面进行配置以及预览等。

在一些实现方式中，运营人员对线上页面进行配置后，页面交互系统100加载线上页面进行预览时，还可以携带加载参数，模拟器220可以根据该加载参数确定加载器122加载线上页面的逻辑。在一些示例中，加载参数可以是“nocache”，模拟器220可以根据该加载参数确定加载器122采用无缓存的方式加载线上页面。如此，页面交互系统100能够无缓存加载线上页面，以便用户对线上页面的内容或样式进行重配置后，页面交互系统100可以快速地响应用户的配置操作，例如在预览区展示配置后的线上页面。

需要说明的是，该线上页面为页面交互系统100预览的线上页面，与真实的线上页面不同。真实的线上页面可以是网页中真实展示的页面，用户对预览的页面进行重配置过程中，页面交互系统100不会改变真实的线上页面。如此，该方法能够实现预览的线上页面的逻辑代码与真实的线上页面的逻辑代码解耦。

在一些实施例中，页面互动系统100在加载线上页面时，还会携带有用户个性化信息的参数，模拟器220可以根据用户个性化信息的参数，加载线上页面，如此，该线上页面包括用户的个性化设置，例如地域设置、兴趣设置。

在一些实施例中，页面互动系统100在预览区展示线上页面后，用户可以在配置区对该线上页面的内容或样式进行配置，下面分别介绍。

在一些示例中，用户可以对线上页面的内容进行配置。例如线上页面包括10个热点事件，随着热点事件受关注程度的变化，用户可以在配置区对热点事件的标题、热点事件的排列顺序等内容进行配置。在一些实施例中，用户还可以将受关注程度最高的热点事件在线上页面中置顶，以突显该热点事件。

延续上例，用户还可以对线上页面的样式进行配置。在一些实施例中，用户在配置区可以将呈现热点事件的样式由文字样式修改为图文样式，在另一些实施例中，用户在配置区可以将呈现热点事件的样式由图文样式修改为视频样式。用户可以根据热点事件的相关信息，对呈现热点事件的样式进行修改，例如热点事件的相关信息中包括图片和文字时，用户可以将呈现该热点事件的样式在图文样式、图片样式、文字样式中进行修改。

在另一些示例中，用户可以既对线上页面的内容进行配置，又对线上页面的样式进行配置，具体内容可以参见以上实施例中的介绍，此处不再赘述。

用户在配置区对线上页面的内容或样式进行配置后，页面互动系统100可以通过模拟器220在预览区展示配置后的线上页面，以实现对用户配置后的线上页面进行实时预览。

S204：页面互动系统100接收用户通过配置页面触发的互动操作。

互动操作是指用户与客户端10之间进行交互的操作，例如互动操作可以是选中配置区的对象的操作，对象可以是配置区中热点事件所对应的对象。再例如互动操作可以是选中预览区的页面元素的操作，页面元素可以是热点事件在线上页面中所对应的元素。

在一些实现方式中，用户可以在页面互动系统显示的配置页面中进行点击操作，例如点击配置区中的对象或者预览区中的页面元素，页面互动系统100可以接收用户在配置页面触发的点击操作。

在一些实施例中，互动操作还可以是在配置区中配置投票信息、图片尺寸、图文样式中的至少一种。用户可以对客户端10显示的配置页面的配置区中对象的进行配置操作，例如配置投票信息，以在线上页面中增加投票窗口、配置图片尺寸，以在线上页面中显示与该图片尺寸对应的图片、配置图文样式，以在线上页面中显示对应的图片和文字等。页面互动系统100可以接收用户在配置页面触发的配置操作。

S206：页面互动系统100根据互动操作在配置页面中展示互动结果。

互动结果是指用户在客户端10上显示的配置页面中触发互动操作后，客户端10展示的结果，不同的互动操作，客户端10展示的结果不同。

在一些实施例中，当互动操作为选择配置区的对象的操作时，页面互动系统100在配置页面的预览区中，通过设定样式展示被选中的对象对应的页面元素。其中，设定样式可以是用户个性化设定的样式，也可以是页面互动系统100默认设定的样式。在另一些实施例中，当互动操作为选择预览区的页面元素的操作时，页面互动系统100在配置页面的配置区中，通过设定样式展示被选中的页面元素对应的对象。在一些示例中，设定样式可以是高亮，还可以是特殊标记(例如五角星标记或圈住被选中的对象)。

在一些实施例中，当互动操作为在配置区配置投票信息时，页面互动系统100可以在配置页面的预览区中，根据该投票信息显示投票窗口，以便非运营人员可以针对线上页面的内容进行投票，例如针对热点事件在投票窗口中选择不同的看法。当互动操作为在配置区配置图片尺寸时，页面互动系统100可以在配置页面的预览区中，显示与图片尺寸对应的图片，如此用户可以对线上页面的内容中图片的图片尺寸进行配置。当互动操作为在配置区配置图文样式时，页面互动系统100在配置页面的预览区中，根据图文样式显示对应的图片和文字。如此用户可以对线上页面的内容中图片和文字的样式进行配置。

在一些实施例中，页面互动系统100可以根据互动操作，确定与互动操作对应的适配器2241，然后根据该适配器2241的交互逻辑，在配置页面中展示互动结果。在一些实现方式中，交互引擎224中封装至少一个适配器2241，例如交互引擎224中封装两个适配器，第一适配器和第二适配器。其中，第一适配器和第二适配器的功能不同。

在一些实施例中，互动操作为在配置区配置投票信息时，第一适配器用于提供投票信息的交互逻辑，模拟器220调用第一适配器，通过客户端10在配置页面的预览区中展示投票信息对应的投票窗口。在另一些实施例中，互动操作为选中配置区的对象的操作时，第二适配器用于提供高亮显示的交互逻辑，模拟器10调用第二适配器，通过客户端10在配置页面的预览区中高亮展示该对象对应的页面元素。

在一些实施例中，页面互动系统100还可以将触发互动操作的用户的用户标识与预设标识进行比较，当用户标识与预设标识匹配时，加载互动操作对应的适配器的交互逻辑，并根据交互逻辑在配置页面中展示互动结果。其中，用户标识可以是用户名、用户身份标识号码(identity，ID)等。预设标识可以是运营人员的标识。在另一些实施例中，页面互动系统100确定触发互动操作的用户的用户标识与预设标识不匹配时，则确定该用户为非运营人员，则不会在配置页面中向非运营人员展示互动结果。

在一些实现方式中，页面互动系统100可以根据与互动操作对应的适配器的交互逻辑，从目标接口请求互动数据，目标接口可以是无缓存接口，通过该无缓存接口，能够不经过缓存直接获取互动数据，互动数据可以是用户在配置页面中触发的操作所对应的数据，例如对线上页面中页面元素的进行配置操作对应的数据等。然后，页面互动系统100调用加载器按照预设的加载参数无缓存加载互动数据，预配置的加载参数可以是“nocache”，其表示无缓存加载。如此，该方法中，运营人员在对配置页面中的内容和/或样式进行编辑后，能够实现在配置页面中快速地展示编辑后的预览结果，提高了线上回归的效率。

接下来，以配置落地页的场景，对本申请实施例提供的页面互动方法进行介绍。

参见图3所示的页面互动方法的指令交互图，以及图4A至图4D所示的客户端10的配置页面。下面介绍用户通过客户端10查看配置区中对象对应的页面元素在预览区的预览结果，如图3所示，该方法包括：

S302：客户端10接收用户对配置区中对象的选中操作。

图4A示出了一种客户端10的配置页面40的示意图，在一些实施例中，客户端10可以在配置页面40的上方弹出源地址输入窗口41，输入窗口41包括输入区411和确定控件412，用户可以在输入区411输入落地页的源地址，通过确定控件412提交给客户端10，如此，客户端10能够接收用户配置的落地页的源地址。

需要说明的是，客户端10通过在配置页面40上方弹窗的方式，接收用户输入的源地址仅仅是一种示意，本申请对此不进行限定，本领域技术人员可以根据实际需要选择其他的方式，以使客户端10接收用户配置的源地址，例如接收用户通过其他客户端发送的源地址等。

参见图4B，客户端10接收用户配置的落地页的源地址后，可以在配置页面40的预览区42展示落地页421，在配置区43中展示可以配置的内容，例如设置顶组、修改置顶组中对象的排序、编辑置顶内容等。

预览区42包括多个页面元素(如图4B中虚线框内)，如页面元素4211、页面元素4212、页面元素4213、页面元素4214等。每个页面元素均与相应的热点事件相对应，例如页面元素4211对应“张女士资助多名贫困学生”。

配置区43包括置顶组配置区431和页面内容配置区432。用户可以在置顶组配置区431修改页面元素在落地页中的排序，也可以在落地页中添加新的页面元素(如新的热点事件对应的页面元素)。页面内容配置区432中展示了与落地页421中页面元素对应的对象。图4B中示出了对象4321、对象4322和对象4323。在页面内容配置区432中，还支持用户在页面内容配置区321中的对对象进行快速搜索。

配置区43的对象可以是线上页面中热点事件所对应的对象，用户可以对配置区43中对象进行配置。在一些实施例中，用户可以通过在页面配置区432中选择不同的标签，以对不同的内容进行配置。以用户选择事件详情为例，用户可以对配置区43中对象4321进行配置，例如编辑对象4321的标题、摘要等。

在一些实现方式中，用户可以将对象4321的标题修改为“快速了解XX高峰论坛内容”，并对为对象4321增加相关的配图，将对象4321的编辑为图文样式，进一步地，用户还可以编辑对象4321对应的页面元素4213在落地页中的位置，例如将页面元素4213配置为在落地页的头部显示。在另一些实施例中，用户还可以在页面内容配置区432中滑动页面，从而对其他对象进行配置。

在另一些实施例中，用户还可以在配置区43中添加新的对象，新的对象可以是新增的热点事件对应的对象。例如，用户可以在配置区43中添加标题为“XX手机今日上线”的热点事件对应的对象，并配置该对象在预览区中的样式(例如文字样式)。

参见图4C，用户在完成对对象4321的配置后，客户端10可以实时在预览区42中预览配置后的对象4321对应的页面元素4213的预览效果、也可以在预览区42中预览新的对象4324对应的页面元素4215。以用户选中对象4321为例，用户可以在配置区43中点击对象4321，以对对象4321进行选中操作，如此客户端10能够接收用户对配置区43的对象的选中操作，以便客户端10根据该选中操作在预览区42显示对象4321对应的页面元素4213。

S304：客户端10向运营子系统240发送被选中的对象的标识。

在一些实施例中，客户端10可以通过postMessage函数与服务器20进行信息交互，例如客户端10向服务器20的运营子系统240发送被选中的对象的标识。

在一些实施例中，客户端10保存有对象与标识的对应关系，用户在配置区43选中对象4321后，客户端10根据该对应关系获取对象4321的标识。该标识用于标记对象4321，例如标识可以是组号(group ID)。在一些实施例中，热点事件为文章时，标识可以是该文章的组号。

S306：运营子系统240向模拟器220发送被选中的对象的标识。

运营子系统240接收到客户端10发送被选中的对象4321的标识后，运营子系统240将该标识传输给模拟器220，以便模拟器220根据该标识确定与对象4321对应的页面元素。

S308：模拟器220确定标识对应的页面元素。

在一些实施例中，模拟器220中保存有页面元素与标识的对应关系，模拟器220根据运营子系统240发送的对象4321的标识，确定与对象4321对应的页面元素(如图4C中页面元素4213)。

S310：模拟器220根据设定样式，生成页面元素的加载信息。

以设定样式为高亮为例，模拟器220可以根据该样式，生成页面元素4213的加载信息，以对页面元素4213进行高亮显示。

S312：模拟器220向运营子系统240发送页面元素的加载信息。

S314：运营子系统240向客户端10发送页面元素的加载信息。

在一些实施例中，模拟器220可以先将页面元素的加载信息传输给运营子系统240，再由运营子系统240将页面元素的加载信息传输给客户端10。在另一些实施例中，模拟器220也可以直接将页面元素的加载信息传输给客户端10。本申请实施例对此不进行限定，本领域技术人员可以根据实际需要设置模拟器220向客户端10传输页面元素的加载信息的方式。

S316：客户端10根据加载信息，在预览区中按照设定样式展示对象对应的页面元素。

其中，加载信息根据设定样式获得，客户端10能够根据接收到的页面元素4213的加载信息，确定设定样式。然后客户端10根据该设定样式，在预览区42中展示页面元素4213。

如图4D所示，客户端10在预览区42中对页面元素4213进行了高亮显示，以在预览区42中突显与对象4321对应的页面元素4213。在一些实现方式中，若预览区42的当前页面不包括页面元素4213，客户端10可以将当前页面滚动到包括页面元素4213的状态，以便用户及时地查看到对象4321在预览区42中对应的页面元素4213的位置。如此，用户能够通过突显后的页面元素4213，在预览区42中快速地定位到4页面元素4213的位置，从而查看对象4321对应的页面元素4213在预览区42中的预览结果，提高了回归测试效率。

进一步地，该预览区42中展示的线上页面为模拟器220预览的线上页面，该预览的线上页面的逻辑代码、用于实现页面互动的逻辑代码与真实的线上页面的逻辑代码独立，并不会对真实的线上页面产生影响，实现了预览的线上页面的逻辑代码、用于实现页面互动的逻辑代码与真实的线上页面的逻辑代码的解耦。

在一些实施例中，模拟器220判断预览区42中不存在与该标识对应的页面元素，即在预览区中不存在与对象4321对应的页面元素的预览结果，此时可以确定该对象预览失败，并通过客户端10反馈提示信息，以提示预览失败。

基于上述内容描述，该方法通过客户端10的配置页面40中，接收用户对配置区43中对象的选中操作，向服务器20发送被选中的对象的标识，以便服务器20确定该标识对应的页面元素，并根据设定的样式生成页面元素的加载信息，然后回传给客户端10。客户端10根据该加载信息在预览区42中展示被选中的对象对应的页面元素，例如通过高亮方式或动画效果展示该页面元素，从而辅助运营人员快速定位到被选中的对象在预览区42中对应的页面元素的位置，如此提高了线上回归的效率。并且，预览的线上页面无需缓存，可以在保存编辑的内容后，实现在客户端10上实时展示，减少了等待成本，摆脱了手机等第三方设备的束缚，提高了回归测试的便捷性。进一步地，预览的线上页面的逻辑代码、用于实现页面互动的逻辑代码与真实的线上页面的逻辑代码的相互独立，实现了逻辑的解耦。

接下来，结合图5所示的页面互动方法的指令交互图，以及图6A至图6B所示的客户端10的配置页面，介绍用户通过客户端10查看预览区42中页面元素对应的对象在配置区43中的位置，如图5所示，该方法包括：

S502：客户端10接收用户对预览区中页面元素的选中操作。

页面元素可以是热点事件在线上页面中所对应的元素。在一些实施例中，客户端10在预览区42展示线上页面(如落地页)，用户可以在预览区42中点击页面元素，以对页面元素进行选中，如图6A所示，用户可以点击预览区42中的页面元素4214，如此客户端10能够接收用户对预览区42的页面元素4214的选中操作。

S504：客户端10向模拟器220发送被选中的页面元素的标识。

在一些实施例中，模拟器220保存有页面元素与标识的对应关系，用户在预览区42选中页面元素4214后，模拟器220根据该对应关系获取页面元素4214的标识。

S506：模拟器220向运营子系统240发送被选中的页面元素的标识。

模拟器220将该标识发送给运营子系统240，以便运营子系统240根据标识确定被选中的页面元素4214对应的对象4323。

在一些实施例中，客户端10也可以直接向运营子系统240发送页面元素4214的标识。本申请实施例对此不进行限定，本领域技术人员可以根据实际需要设置客户端10向服务器20传输页面元素4214的标识的方式。

S508：运营子系统240确定标识对应的对象。

在一些实施例中，运营子系统240中保存有对象与标识的对应关系，运营子系统可以根据模拟器220发送的标识，确定该标识对应的对象。

S510：运营子系统240根据设定样式，生成对象的加载信息。

以设定样式为高亮为例，运营子系统240可以根据该样式，生成对象4323的加载信息，以便客户端对对象4323进行高亮显示。

S512：运营子系统240向客户端10发送对象的加载信息。

运营子系统240将对象4323的加载信息发送给客户端10，以便客户端10根据该加载信息在配置区43中按照设定样式加载对象4323。

S514：客户端10根据加载信息，在配置区中按照设定样式展示页面元素对应的对象。

其中，加载信息根据设定样式获得，客户端10能够根据接收到的对象4323的加载信息，确定设定样式。然后客户端10根据设定样式，在配置区43中展示对象4323。

如图6B所示，客户端10在配置区43中对对象4323进行了高亮显示，以在配置区43中突显与页面元素4214对应的对象4323。在另一些实现方式中，若配置区43的当前页面不包括对象4323时，客户端可以将当前页面滚动到包括对象4323的状态，以便用户及时地查看到页面元素4214在配置区43中对应的对象4323。如此，用户能够通过突显后的对象4323，在配置区43中快速地定位到页面元素4214对应的对象4323的位置，以便用户对该对象4323进行配置等操作，提高线上页面的配置效率。

基于上述内容描述，该方法通过客户端10的配置页面40中，接收用户对预览区42中页面元素的选中操作，向服务器20发送被选中的页面元素的标识，以便服务器20确定该标识对应的对象，并根据设定的样式生成对象的加载信息，然后回传给客户端10。客户端10根据该加载信息在配置区43中展示被选中的页面元素对应的对象，例如通过高亮方式或动画效果展示该对象，从而辅助运营人员快速定位到被选中的页面元素在配置区43中对应的对象的位置，以便于运营人员对该对象进行配置，提高了运营人员的配置效率。并且，用户在预览区42中选中页面元素后，客户端10上实时展示该页面元素对应的对象，减少了等待成本。

上文结合图1至图6B对本申请实施例提供的页面互动方法进行了详细介绍，下面将结合附图对本申请实施例提供的装置、设备进行介绍。

参见图7所示的页面互动装置的结构示意图，该装置700包括：

显示单元702，用于显示配置页面，所述配置页面包括线上页面的预览区和所述线上页面的配置区，所述配置区用于配置所述线上页面的内容和/或样式，所述预览区用于通过模拟器展示所述线上页面；

接收单元704，用于接收用户通过所述配置页面触发的互动操作；

所述显示单元702，还用于根据所述互动操作在所述配置页面中展示互动结果。

在一些可能的实现方式中，所述互动操作包括选中所述配置区的对象的操作，所述显示单元702，具体用于在所述配置页面的所述预览区中，通过设定样式展示被选中的对象对应的页面元素。

在一些可能的实现方式中，所述互动操作包括选中所述预览区的页面元素的操作，所述显示单元702，具体用于在所述配置页面的所述配置区中，通过设定样式展示被选中的页面元素对应的对象。

在一些可能的实现方式中，所述互动操作包括在所述配置区配置投票信息、图片尺寸、图文样式中的至少一种；

所述显示单元702，具体用于：

在所述配置页面的所述预览区中，根据所述投票信息显示投票窗口；和/或者,

在所述配置页面的所述预览区中，显示与所述图片尺寸对应的图片；和/或者,

在所述配置页面的所述预览区中，根据所述图文样式显示对应的图片和文字。

在一些可能的实现方式中，所述模拟器包括加载器，所述接收单元704，还用于接收所述用户配置的所述线上页面的源地址；

所述显示单元702，具体用于根据所述源地址通过加载器加载所述线上页面，在所述配置页面的所述预览区展示所述线上页面。

在一些可能的实现方式中，所述模拟器还包括交互引擎，所述交互引擎中包括至少一个适配器；所述显示单元702，具体用于根据所述互动操作确定与所述互动操作对应的适配器；根据与所述互动操作对应的适配器的交互逻辑，在所述配置页面中展示互动结果。

在一些可能的实现方式中，所述根据与所述互动操作对应的适配器的交互逻辑，所述显示单元702，具体用于当触发所述互动操作的用户的用户标识与预设标识匹配时，加载与所述互动操作对应的适配器的交互逻辑，根据所述交互逻辑在所述配置页面中展示互动结果。

在一些可能的实现方式中，所述显示单元702，具体用于根据与所述互动操作对应的适配器的交互逻辑，从目标接口请求互动数据；调用加载器按照预配置的加载参数无缓存加载所述互动数据，以在所述配置页面中展示互动结果。

在一些可能的实现方式中，所述线上页面包括落地页。

根据本申请实施例的页面互动装置700可对应于执行本申请实施例中描述的方法，并且页面互动装置700的各个模块/单元的上述和其它操作和/或功能为了实现上述方法实施例中的方法的流程，为了简洁，在此不再赘述。

本申请实施例还提供了一种页面互动设备。该页面互动设备可以是运行有客户端10的设备，该页面互动设备用于实现如图7所示实施例中页面互动装置700的功能。下面以运行有客户端10的设备为例，对页面互动设备的硬件架构进行说明。

图8提供了一种运行有客户端10的设备的结构示意图，如图8所示，该设备包括总线801、处理器802、通信接口803和存储器804。处理器802、存储器804和通信接口803之间通过总线801通信。

总线801可以是外设部件互连标准(peripheral component interconnect，PCI)总线或扩展工业标准结构(extended industry standard architecture，EISA)总线等。总线可以分为地址总线、数据总线、控制总线等。为便于表示，图8中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

处理器802可以为中央处理器(central processing unit，CPU)、图形处理器(graphics processing unit，GPU)、微处理器(micro processor，MP)或者数字信号处理器(digital signal processor，DSP)等处理器中的任意一种或多种。

通信接口803用于和外部通信。例如通信接口803可以用于和服务器20通信。通信接口用于向服务器20发送被选中的对象的标识等，以便服务器20根据该该对象的标识确定与该对象对应的页面元素，生成该页面元素的加载信息并发送给终端，终端上运行的客户端10可以根据该加载信息在预览区中按照设定样式展示对象对应的页面元素。

存储器804可以包括易失性存储器(volatile memory)，例如随机存取存储器(random access memory，RAM)。存储器804还可以包括非易失性存储器(non-volatilememory)，例如只读存储器(read-only memory，ROM)，快闪存储器，硬盘驱动器(hard diskdrive，HDD)或固态驱动器(solid state drive，SSD)。

存储器804中存储有可执行代码，处理器802执行该可执行代码以执行前述实施例中页面互动方法。

具体地，在实现图7所示实施例的情况下，且图7实施例中所描述的页面互动装置700的各模块或单元为通过软件实现的情况下，执行图7中的各模块/单元功能所需的软件或程序代码可以部分或全部存储在存储器804中。处理器802执行存储器804中存储的各单元对应的程序代码，执行前述实施例中页面互动方法。

本申请实施例还提供了一种计算机可读存储介质。所述计算机可读存储介质可以是计算设备能够存储的任何可用介质或者是包含一个或多个可用介质的数据中心等数据存储设备。所述可用介质可以是磁性介质(例如软盘、硬盘、磁带)、光介质(例如DVD)、或者半导体介质(例如固态硬盘)等。该计算机可读存储介质包括指令，所述指令指示计算设备执行上述应用于页面互动装置700的页面互动方法。

本申请实施例还提供了一种计算机程序产品，所述计算机程序产品包括一个或多个计算机指令。在计算设备上加载和执行所述计算机指令时，全部或部分地产生按照本申请实施例所述的流程或功能。

所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机或数据中心进行传输。

所述计算机程序产品被计算机执行时，所述计算机执行本申请实施例中页面互动方法的任一方法。该计算机程序产品可以为一个软件安装包，在需要使用前本申请实施例中页面互动方法的任一方法的情况下，可以下载该计算机程序产品并在计算机上执行该计算机程序产品。

上述各个附图对应的流程或结构的描述各有侧重，某个流程或结构中没有详述的部分，可以参见其他流程或结构的相关描述。

Claims (13)

1.一种页面互动方法，其特征在于，包括：

显示配置页面，所述配置页面包括线上页面的预览区和所述线上页面的配置区，所述配置区用于配置所述线上页面的内容和/或样式，所述预览区用于通过模拟器展示所述线上页面；

接收用户通过所述配置页面触发的互动操作，根据所述互动操作在所述配置页面中展示互动结果。

2.根据权利要求1所述的方法，其特征在于，所述互动操作包括选中所述配置区的对象的操作，所述根据所述互动操作在所述配置页面中展示互动结果，包括：

在所述配置页面的所述预览区中，通过设定样式展示被选中的对象对应的页面元素。

3.根据权利要求1所述的方法，其特征在于，所述互动操作包括选中所述预览区的页面元素的操作，所述根据所述互动操作在所述配置页面中展示互动结果，包括：

在所述配置页面的所述配置区中，通过设定样式展示被选中的页面元素对应的对象。

4.根据权利要求1所述的方法，其特征在于，所述互动操作包括在所述配置区配置投票信息、图片尺寸、图文样式中的至少一种；

所述根据所述互动操作在所述配置页面中展示互动结果，包括：

在所述配置页面的所述预览区中，根据所述投票信息显示投票窗口；和/或者,

在所述配置页面的所述预览区中，显示与所述图片尺寸对应的图片；和/或者,

在所述配置页面的所述预览区中，根据所述图文样式显示对应的图片和文字。

5.根据权利要求1至4任一项所述的方法，其特征在于，所述模拟器包括加载器，所述显示配置页面，包括：

接收所述用户配置的所述线上页面的源地址，根据所述源地址通过加载器加载所述线上页面，在所述配置页面的所述预览区展示所述线上页面。

6.根据权利要求5所述的方法，其特征在于，所述模拟器还包括交互引擎，所述交互引擎中包括至少一个适配器；

所述根据所述互动操作在所述配置页面中展示互动结果，包括：

根据所述互动操作确定与所述互动操作对应的适配器；

根据与所述互动操作对应的适配器的交互逻辑，在所述配置页面中展示互动结果。

7.根据权利要求6所述的方法，其特征在于，所述根据与所述互动操作对应的适配器的交互逻辑，在所述配置页面中展示互动结果，包括：

当触发所述互动操作的用户的用户标识与预设标识匹配时，加载与所述互动操作对应的适配器的交互逻辑，根据所述交互逻辑在所述配置页面中展示互动结果。

8.根据权利要求6或7所述的方法，其特征在于，所述根据与所述互动操作对应的适配器的交互逻辑，在所述配置页面中展示互动结果，包括：

根据与所述互动操作对应的适配器的交互逻辑，从目标接口请求互动数据；

调用加载器按照预配置的加载参数无缓存加载所述互动数据，以在所述配置页面中展示互动结果。

9.根据权利要求1至4任一项所述的方法，其特征在于，所述线上页面包括落地页。

10.一种页面互动装置，其特征在于，包括：

显示单元，用于显示配置页面，所述配置页面包括线上页面的预览区和所述线上页面的配置区，所述配置区用于配置所述线上页面的内容和/或样式，所述预览区用于通过模拟器展示所述线上页面；

接收单元，用于接收用户通过所述配置页面触发的互动操作；

所述显示单元，还用于根据所述互动操作在所述配置页面中展示互动结果。

11.一种设备，其特征在于，所述设备包括处理器和存储器；

所述处理器用于执行所述存储器中存储的指令，以使得所述设备执行如权利要求1至9中任一项所述的方法。

12.一种计算机可读存储介质，其特征在于，包括指令，所述指令指示设备执行如权利要求1至9中任一项所述的方法。

13.一种计算机程序产品，其特征在于，当所述计算机程序产品在计算机上运行时，使得计算机执行如权利要求1至9中任一项所述的方法。

Images