CN116991397A - 页面预览方法、装置、设备、存储介质和产品 - Google Patents

Abstract

本申请实施例公开了一种页面预览方法、装置、设备、存储介质和产品，属于计算机技术领域。该方法包括：基于目标页面中组件的组件构成信息，获取所述目标页面在预览场景下的第一预览需求信息；基于所述第一预览需求信息，生成适配层，所述适配层包括第一指令数据；获取目标页面的第二指令数据；基于所述第一指令数据，对所述第二指令数据进行提取，得到第三指令数据；基于所述第三指令数据和为所述目标页面配置的内容数据，渲染所述目标页面的预览页面。该方案中，预览场景和投放场景能够共用一套指令数据，开发人员只需维护一套指令数据即可，能够降低指令数据的维护难度。

Description

页面预览方法、装置、设备、存储介质和产品

技术领域

本申请涉及计算机技术领域，特别涉及一种页面预览方法、装置、设备、存储介质和产品。

背景技术

随着计算机技术的不断发展，各种各样的应用程序层出不穷，开发人员在开发应用程序过程中，需要在管理端(PC端)上预览应用程序的页面，根据该页面的显示效果，调整该页面的内容数据直到显示效果满足需求，才将该应用程序上线。

相关技术中，开发人员为该页面编写第一指令数据，管理端基于第一指令数据和配置的内容数据，生成该页面的预览数据，从而开发人员可以基于该预览数据预览该页面。由于以上预览场景中，开发人员只需要查看该页面的显示效果，不需要进行其他功能的测试。而在将应用程序上线后，用户可能会需要使用该页面中的其他功能，因此，开发人员确定该页面的显示效果之后，还需要为该页面编写第二指令数据，管理端基于第二指令数据和该页面的内容数据，生成该页面的投放数据，将该投放数据存储到服务器中，后续使得用户端(移动端)从服务器中获取该页面的投放数据来访问该页面，从而实现该应用程序的上线。

后续，开发人员需要维护第一指令数据和第二指令数据这两套指令数据，提高了指令数据的维护难度。

发明内容

本申请实施例提供了页面预览方法、装置、设备、存储介质和产品，能够降低指令数据的维护难度。所述技术方案如下：

一方面，提供了一种页面预览方法，所述方法包括：

基于目标页面中组件的组件构成信息，获取所述目标页面在预览场景下的第一预览需求信息，所述组件构成信息用于表示构成所述目标页面的组件的构成情况，所述第一预览需求信息用于表示预览所述目标页面需要的组件的显示样式数据；

基于所述第一预览需求信息，生成适配层，所述适配层包括第一指令数据，所述第一指令数据用于提取所述显示样式数据；

获取目标页面的第二指令数据，所述第二指令数据包括所述组件的显示样式数据和交互逻辑数据；

基于所述第一指令数据，对所述第二指令数据进行提取，得到第三指令数据，所述第三指令数据包括所述组件的显示样式数据；

基于所述第三指令数据和为所述目标页面配置的内容数据，渲染所述目标页面的预览页面，所述内容数据用于表示为所述组件配置的显示内容，所述预览页面用于呈现所述目标页面的显示效果。

另一方面，提供了一种页面预览装置，所述装置包括：

第一获取模块，用于基于目标页面中组件的组件构成信息，获取所述目标页面在预览场景下的第一预览需求信息，所述组件构成信息用于表示构成所述目标页面的组件的构成情况，所述第一预览需求信息用于表示预览所述目标页面需要的组件的显示样式数据；

第一生成模块，用于基于所述第一预览需求信息，生成适配层，所述适配层包括第一指令数据，所述第一指令数据用于提取所述显示样式数据；

第二获取模块，用于获取目标页面的第二指令数据，所述第二指令数据包括所述组件的显示样式数据和交互逻辑数据；

提取模块，用于基于所述第一指令数据，对所述第二指令数据进行提取，得到第三指令数据，所述第三指令数据包括所述组件的显示样式数据；

渲染模块，用于基于所述第三指令数据和为所述目标页面配置的内容数据，渲染所述目标页面的预览页面，所述内容数据用于表示为所述组件配置的显示内容，所述预览页面用于呈现所述目标页面的显示效果。

在一种可能实现方式中，所述第一生成模块，包括：

第一获取单元，用于获取所述组件的组件功能信息，所述组件功能信息用于表示所述组件的功能；

第二获取单元，用于基于所述组件功能信息，获取所述目标页面在所述预览场景下的第二预览需求信息，所述第二预览需求信息用于表示所述组件的功能中影响所述目标页面的显示效果的目标功能；

生成单元，用于基于所述第一预览需求信息和所述第二预览需求信息，生成所述第一指令数据，所述第一指令数据用于提取所述显示样式数据和所述目标功能对应的交互逻辑数据。

在一种可能实现方式中，所述适配层还包括第四指令数据；所述第一生成模块，还包括：

第三获取单元，用于获取管理端本地的第一数据格式和服务端的第二数据格式；

第四获取单元，用于基于所述第一数据格式和所述第二数据格式，获取所述目标页面在所述预览场景下的第三预览需求信息，所述第三预览需求信息用于表示预览所述目标页面需要的数据的数据格式；

所述生成单元，用于基于所述第三预览需求信息，生成所述第四指令数据，所述第四指令数据用于将所述内容数据从所述第一数据格式转换为所述第二数据格式。

在一种可能实现方式中，所述渲染模块，用于基于所述第四指令数据，对所述内容数据进行格式转换，得到转换后的内容数据；基于所述第三指令数据和所述转换后的内容数据，渲染所述目标页面的预览页面。

在一种可能实现方式中，所述装置还包括以下至少一个模块：

投放模块，用于基于前端构建工具的第一入口，对所述第二指令数据和所述内容数据进行打包，得到所述目标页面的投放数据，存储所述投放数据；响应于用户端的访问请求，向所述用户端发送已存储的所述投放数据，以使所述用户端基于所述投放数据访问所述目标页面；

预览模块，用于基于所述前端构建工具的第二入口，获取所述适配层，对所述第二指令数据、所述适配层和所述内容数据进行打包，得到所述目标页面的预览数据，存储所述预览数据；响应于管理端对所述目标页面的预览请求，基于已存储的所述预览数据，显示所述目标页面。

在一种可能实现方式中，所述第二指令数据是基于第一前端框架编写的指令数据，且所述第二指令数据包括所述第一前端框架的数据库；所述装置还包括：

替换模块，用于将所述第二指令数据中所述第一前端框架的数据库替换成第二前端框架的数据库，得到第五指令数据，所述第二前端框架是基于所述第一前端框架编辑的框架，所述第二前端框架与所述第一前端框架兼容，且所述第二前端框架的数据库的数据量小于所述第一前端框架的数据量；

第二生成模块，用于基于所述第五指令数据和所述内容数据，生成所述目标页面的投放数据，存储所述投放数据；

发送模块，用于响应于用户端的访问请求，向所述用户端发送已存储的所述投放数据，以使所述用户端基于所述投放数据访问所述目标页面。

另一方面，提供了一种计算机设备，所述计算机设备包括处理器和存储器，所述存储器用于存储至少一段计算机程序，所述至少一段计算机程序由所述处理器加载并执行以实现上述各个方面的各种可选实现方式中提供的页面预览方法。

另一方面，提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一段计算机程序，所述至少一段计算机程序由处理器加载并执行以实现上述各个方面的各种可选实现方式中提供的页面预览方法。

另一方面，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机程序代码，该计算机程序代码存储在计算机可读存储介质中，计算机设备的处理器从计算机可读存储介质读取该计算机程序代码，处理器执行该计算机程序代码，使得该计算机设备执行上述各个方面的各种可选实现方式中提供的页面预览方法。

本申请实施例提供了一种页面预览方法、装置、设备、存储介质和产品，考虑到预览场景不需要测试页面的交互功能，而投放场景中需要页面有交互功能。因此，在预览场景中拿到不仅包括显示样式数据还包括交互逻辑数据的第二指令数据之后，可以基于适配层对第二指令数据进行提取，拿到预览场景需要的第三指令数据，来进行页面预览，使得预览能够正常进行。而由于第二指令数据不仅包括显示样式数据还包括交互逻辑数据，因此，第二指令数据还适用于投放场景，使得预览场景和投放场景能够共用一套指令数据，也即是，第二指令数据。由于预览场景和投放场景能够共用一套指令数据，那么开发人员只需维护一套指令数据即可，能够降低指令数据的维护难度。

附图说明

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

图1是本申请实施例提供的一种页面预览方法的实施环境的示意图；

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

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

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

图5是本申请实施例提供的另一种配置页面的示意图；

图6是本申请实施例提供的一种生成投放数据和预览数据的流程图；

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

图8是本申请实施例提供的一种页面预览装置的框图；

图9是本申请实施例提供的另一种页面预览装置的框图；

图10是本申请实施例提供的一种终端的结构框图；

图11是本申请实施例提供的一种服务器的结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

本申请中术语“第一”、“第二”等字样用于对作用和功能基本相同的相同项或相似项进行区分，应理解，“第一”、“第二”、“第n”之间不具有逻辑或时序上的依赖关系，也不对数量和执行顺序进行限定。

本申请中术语“至少一个”是指一个或多个，“多个”的含义是指两个或两个以上。

需要说明的是，本申请所涉及的信息(包括但不限于用户设备信息、用户个人信息等)、数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)以及信号，均为经用户授权或者经过各方充分授权的，且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。例如，本申请中涉及到的内容数据等都是在充分授权的情况下获取的。

以下，对本申请的应用场景进行介绍：

本申请实施例提供的页面预览方法可以应用于页面的开发场景、维护场景等多种场景中，本申请实施例对应用场景不做限定。

例如，应用于页面开发场景。

开发人员在页面开发时，需要为预览场景和投放场景分别编写两套指令数据，如果采用本申请实施例提供的页面预览方法，能够使得预览场景和投放场景共用一套指令数据，提高了页面开发效率。

又如，应用于页面维护场景。

由于开发人员在页面开发时，需要为预览场景和投放场景分别编写两套指令数据，因此，在页面维护时，需要同时维护这两套指令数据，如果采用本申请实施例提供的页面预览方法，能够使得预览场景和投放场景共用一套指令数据，开发人员只需维护一套代码即可，降低了代码维护的难度。

需要说明的是，本申请实施例提供的页面预览方法还可以应用于其他场景，本申请实施例对此不做限定。

以下，对本申请涉及的实施环境进行介绍：

本申请实施例提供的页面预览方法，能够由计算机设备执行。在一些实施例中，该计算机设备包括终端。该终端是智能手机、平板电脑、笔记本电脑、台式计算机、智能语音交互设备、智能家电、车载终端等，但并不限于此。在一些实施例中，该终端为管理端，该管理端用于开发页面的指令数据，为该页面配置内容数据，并且基于指令数据和内容数据，预览该页面。

在一些实施例中，该计算机设备包括终端和服务器。下面首先以计算机设备包括第一终端101、第二终端102和服务器103为例，介绍一下本申请实施例提供的页面预览方法的实施环境示意图。参见图1，该实施环境包括第一终端101、第二终端102和服务器103。第一终端101和服务器103能够通过有线或无线通信方式进行之间或间接地连接，第二终端102和服务器103能够通过有线或无线通信方式进行之间或间接地连接，本申请在此不做限制。

在一些实施例中，该计算机设备为服务器，该服务器是独立的服务器也能够是多个物理服务器工程的服务器集群或者分布式***，还能够是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN(ContentDelivery Network内容分发网络)、以及大数据和人工智能平台等基础云计算服务的云服务器。

在一些实施例中，服务器103主要承担计算工作，第一终端101和第二终端102承担次要计算工作；或者，服务器103承担次要计算服务，第一终端101和第二终端102承担主要计算工作；或者，服务器103、第一终端101和第二终端102之间采用分布式计算架构进行协同计算。

在一些实施例中，第一终端101为开发人员使用的管理端，第二终端为用户端。

在一些实施例中，第一终端101从服务器103中获取页面的指令数据和内容数据，基于指令数据和内容数据，预览该页面。在一些实施例中，第一终端101从本地获取页面的内容数据，从服务器103中获取页面的指令数据，基于指令数据和内容数据，预览该页面。

在一些实施例中，第二终端101从服务器103中获取页面的指令数据和内容数据，基于指令数据和内容数据，渲染该页面。

图2是根据本申请实施例提供的一种页面预览方法的流程图，参见图2，在本申请实施例中以管理端为执行主体进行示例性说明，该页面预览方法包括以下步骤：

201、管理端基于目标页面中组件的组件构成信息，获取该目标页面在预览场景下的第一预览需求信息，该组件构成信息用于表示构成该目标页面的组件的构成情况，该第一预览需求信息用于表示预览该目标页面需要的组件的显示样式数据。

目标页面是目标应用程序提供的任一页面，本申请实施例对目标页面不做限定。在一些实施例中，目标页面为目标物品的落地页。

从后台技术来看，组件是数据和方法的一个封装；从前台表现来看，组件是目标页面中显示的一个对象。组件的组件构成信息，用于表示构成该目标页面的组件的构成情况，例如，目标页面由几个组件构成，分别是哪几个组件等，本申请实施例对组件构成信息不做限定。

预览场景是开发人员在管理端上查看目标页面的显示效果的场景，在该预览场景中开发人员只需查看目标页面的显示效果，无需查看目标页面的其他功能，因此，预览场景下的第一预览需求信息用于表示预览该目标页面需要的数据，该数据包括预览该目标页面需要的组件的显示样式数据。

202、管理端基于第一预览需求信息，生成适配层，该适配层包括第一指令数据，该第一指令数据用于提取该显示样式数据。

在本申请实施例中，预览场景和投放场景共用一套指令数据。其中，预览场景中开发人员只需查看目标页面的显示效果，无需查看目标页面的其他功能，而投放场景中用户不仅查看该目标页面的显示内容，还需要目标页面的其他功能，因此，共用的指令数据必须满足投放场景，从而预览场景中获取的指令数据中存在不必要的数据，本申请实施例中，通过预览需求信息，生成适配层，基于适配层对共用的指令数据进行提取，从共用的指令数据中提取出预览场景需要的指令数据。

203、管理端获取目标页面的第二指令数据，该第二指令数据包括组件的显示样式数据和交互逻辑数据。

本申请实施例中，第二指令数据是预览场景和投放场景共用的指令数据，因此，第二指令数据需要满足预览场景和投放场景的需求，因此，第二指令数据包括组件的显示样式数据和交互逻辑数据。需要说明的是，第二指令数据还可以包括其他数据，本申请实施例对此不做限定。

204、管理端基于第一指令数据，对所述第二指令数据进行提取，得到第三指令数据，第三指令数据包括组件的显示样式数据。

第一指令数据用于提取该显示样式数据，因此，可以基于第一指令数据对第二指令数据进行提取，得到组件的显示样式数据。

205、管理端基于第三指令数据和为目标页面配置的内容数据，渲染目标页面的预览页面，该内容数据用于表示为组件配置的显示内容，预览页面用于呈现目标页面的显示效果。

其中，预览页面是管理端显示的目标页面。

在一些实施例中，开发人员在管理端中为目标页面配置内容数据，因此，管理端可以从本地获取为目标页面配置的内容数据。

本申请实施例提供的页面预览方法，考虑到预览场景不需要测试页面的交互功能，而投放场景中需要页面有交互功能。因此，在预览场景中拿到不仅包括显示样式数据还包括交互逻辑数据的第二指令数据之后，可以基于适配层对第二指令数据进行提取，拿到预览场景需要的第三指令数据，来进行页面预览，使得预览能够正常进行。而由于第二指令数据不仅包括显示样式数据还包括交互逻辑数据，因此，第二指令数据还适用于投放场景，使得预览场景和投放场景能够共用一套指令数据，也即是，第二指令数据。由于预览场景和投放场景能够共用一套指令数据，那么开发人员只需维护一套指令数据即可，能够降低指令数据的维护难度。

图3是本申请实施例提供的一种页面预览方法的流程图。本申请实施例以执行主体为管理端为例进行示例性说明，该页面预览方法包括以下步骤：

301、管理端基于目标页面中组件的组件构成信息，获取目标页面在预览场景下的第一预览需求信息。

该组件构成信息用于表示构成目标页面的组件的构成情况。在一些实施例中，组件构成信息包括目标页面中各个组件的组件标识。管理端基于目标页面中组件的组件构成信息，获取目标页面在预览场景下的第一预览需求信息，包括：管理端基于目标页面中各个组件的组件标识，确定各个组件的显示样式数据，将该显示样式数据确定为第一预览需求信息。在一些实施例中，管理端基于目标页面中组件的组件构成信息，获取目标页面在预览场景下的第一预览需求信息，包括：管理端基于目标页面中各个组件的组件标识，确定各个组件中显示样式数据的数据类型，将该数据类型确定为第一预览需求信息。

需要说明的是，本申请实施例对预览需求信息的数据格式和数据内容不做限定，只需保证预览需求信息能够表示预览目标页面需要的数据即可。

302、管理端获取组件的组件功能信息，基于组件功能信息，获取目标页面在预览场景下的第二预览需求信息。

该组件功能信息用于表示该组件的功能，例如，该功能是：切换显示内容功能、上报数据功能、页面跳转功能、计数访问人数等任一功能，本申请实施例对此不做限定。

组件中的一些功能会影响组件的显示效果，例如，切换显示内容功能等。一些功能不会影响组件的显示效果，例如，上报数据功能、计数访问人数功能等。由于预览场景中只需要查看目标页面的显示效果，因此，在预览场景中，组件只需要具备影响显示效果的功能即可，其他功能无需具备。因此，第二预览需求信息用于表示组件的功能中影响目标页面的显示效果的目标功能。

在一些实施例中，组件功能信息包括多个功能的功能标识，管理端基于组件功能信息，获取目标页面在预览场景下的第二预览需求信息，包括：管理端基于组件功能信息，确定组件的功能中影响目标页面的显示效果的目标功能，将目标功能的功能标识确定为第二预览需求信息。

303、管理端获取管理端本地的第一数据格式和服务端的第二数据格式，基于第一数据格式和第二数据格式，获取目标页面在预览场景下的第三预览需求信息。

需要说明的是，管理端用于为目标页面配置内容数据，因此，在预览场景中，是从本地获取内容数据。而投放场景中，用户端从后台服务器中获取数据，渲染目标页面。而管理端本地的数据格式为第一数据格式，服务端本地的数据格式为第二数据格式，因此，投放场景和预览场景中的数据格式不同。

由于本申请实施例中，管理端和使用端(也即是预览场景和使用场景)需要共用一套指令数据，也即是相同的数据格式，因此，需要进行数据格式转换，才能保证页面渲染的正常进行。因此，第三预览需求信息用于表示预览目标页面需要的数据的数据格式。

在一些实施例中，第三预览需求信息包括第二数据格式。在一些实施例中，第三预览需求信息包括第一数据格式和第二数据格式，还包括第一数据格式和第二数据格式的转化关系：将第一数据格式转换为第二数据格式。本申请实施例对第三预览需求信息不做限定。

304、管理端基于第一预览需求信息、第二预览需求信息和第三预览需求信息，生成适配层。

在一种可能实现方式中，适配层包括第一指令数据和第四指令数据。管理端基于第一预览需求信息、第二预览需求信息和第三预览需求信息，生成适配层，包括：基于第一预览需求信息和第二预览需求信息，生成第一指令数据，该第一指令数据用于提取显示样式数据和目标功能对应的交互逻辑数据；基于第三预览需求信息，生成第四指令数据，第四指令数据用于将内容数据从第一数据格式转换为第二数据格式。

需要说明的是，在已知多个数据中需要提取的数据的情况下，可以基于需要提取的数据编写第一指令数据，以使第一指令数据从多个数据中提取出需要的数据，本申请实施例对第一指令数据不做限定，仅是进行示例性说明。

在一种可能实现方式中，管理端基于第一预览需求信息，生成第一指令数据包括：管理端所基于第一预览需求信息，确定显示样式数据的数据类型，生成用于获取该数据类型的数据的第一指令数据。

在另一种可能实现方式中，管理端基于一预览需求信息，生成第一指令数据包括：管理端基于预览目标页面需要的组件的显示样式数据，确定该显示样式数据所属的字段，生成用于获取该字段的字段值的第一指令数据。

在一些实施例中，目标页面包括多个组件，每个组件的显示样式数据和目标功能不用，为了使得适配层能够更加准确地进行数据提取，可以针对各个组件分别生成适配层，也即是，为需要进行提取的组件分别设置一个适配层，后续，通过该适配层对该组件的指令数据进行提取。

在一些实施例中，适配层为model层，model层用来提炼数据，即从配置页面中或者从后台服务器中获取的数据先经过model层的提炼，然后再传输给组件去渲染，model层相当于做了层适配，使得数据满足组件的渲染要求，能够让组件不带业务处理逻辑，使得组件能够保持干净。

例如，目标页面中的一个业务组件为Marketing，发送该业务组件的数据包括data(参数)和action(交互逻辑数据)，通过该业务组件Marketing进行提炼，得到data的值，将data的值返回给业务组件Marketing进行渲染。

需要说明的是，本申请实施例仅是以获取第一预览需求信息、第二预览需求信息和第三预览需求信息，基于第一预览需求信息、第二预览需求信息和第三预览需求信息，生成适配层为例进行示例性说明。

而在另一实施例中，管理端获取第一预览需求信息，基于第一预览需求信息生成适配层。

在另一实施例中，管理端获取第一预览需求信息和第二预览需求信息，基于第一预览需求信息和第二预览需求信息，生成适配层。在一种可能实现方式中，适配层包括第一指令数据。管理端基于目标页面中组件的组件构成信息，获取目标页面在预览场景下的第一预览需求信息；获取组件的组件功能信息，基于组件功能信息，获取目标页面在预览场景下的第二预览需求信息，基于第一预览需求信息和第二预览需求信息，生成第一指令数据，该第一指令数据用于提取显示样式数据和目标功能对应的交互逻辑数据。

在另一实施例中，管理端获取第一预览需求信息和第三预览需求信息，基于第一预览需求信息和第三预览需求信息，生成适配层。在一种可能实现方式中，适配层包括第一指令数据和第四指令数据。管理端基于目标页面中组件的组件构成信息，获取目标页面在预览场景下的第一预览需求信息；获取管理端本地的第一数据格式和服务端的第二数据格式；基于第一数据格式和第二数据格式，获取目标页面在预览场景下的第三预览需求信息；基于第一预览需求信息，生成第一指令数据，该第一指令数据用于提取显示样式数据，基于第三预览需求信息，生成第四指令数据，该第四指令数据用于将内容数据从第一数据格式转换为第二数据格式。

305、管理端获取目标页面的第二指令数据。

本申请实施例中，指令数据指代代码。本申请实施例中，第二指令数据是预览场景和投放场景共用的指令数据。在一些实施例中，第二指令数据是开发人员在管理端编写的指令数据。

在一些实施例中，管理端为PC端，用户端为移动端。PC端和移动端的尺寸不同，而本申请实施例中，开发人员在管理端预览页面时，希望PC端与移动端的显示相同，以保证预览效果。在一种可能实现方式中，第二指令数据中通过rem(font size of the rootelement，相对于根元素的尺寸)技术来控制目标页面在不同尺寸下的显示。其中，根元素的尺寸可以根据显示屏幕的尺寸来确定，目标页面中其他元素的尺寸可以根据相对于根元素的尺寸来确定。其中，rem是页面响应式布局的一种实现方案。

例如，对于用户端，用户端的设备分辨率为750像素，则使用100像素作为1rem。在管理端，如果加载目标页面的窗口的宽为375像素，根据375像素和750像素的比值，进行相应的调整，也即是使用50像素作为1rem。通过1rem，使得用户端和管理端显示的目标页面中各个元素尺寸一致。

需要说明的是，在编写指令数据时，显示样式数据中尺寸的单位可以是像素，在通过前端构建工具对指令数据打包时，将像素单位转变成rem单位。

306、管理端基于适配层，对第二指令数据进行提取，得到第三指令数据。

该适配层包括第一指令数据和第四指令数据，其中，第一指令数据用于从第二指令数据中提取数据，第四指令数据用于将内容数据从第一数据格式转换为第二数据格式。因此，管理端基于适配层，对第二指令数据进行提取，得到第三指令数据，包括：管理端基于第一指令数据，对第二指令数据进行提取，得到第三指令数据。

例如，组件A的显示样式数据包括显示位置数据和显示尺寸数据，组件A的方法函数包括点击暂停函数和计数函数。通过组件A的适配层，对组件A的第二指令数据进行提取，即可得到组件A的显示位置数据、显示尺寸数据点击暂停函数。

307、管理端基于适配层，对为目标页面配置的内容数据进行格式转换，得到转换后的内容数据。

本申请实施例中，管理端用于为目标页面配置内容数据，因此，获取的内容数据是从管理端本地获取的，因此，内容数据的数据格式为第一数据格式。而预览场景和投放场景共用一套指令数据，因此，该指令数据与服务端的第二数据格式匹配，为了使管理端顺利预览该目标页面，在获取为目标页面配置的内容数据之后，对该内容数据进行格式转换，得到转换后的内容数据，后续基于转换后的内容数据进行预览。

另外，本申请实施例还对管理端为目标页面配置内容数据的过程进行示例性说明：

在一种可能实现方式中，如图4所示，管理端显示目标页面的配置页面。可选地，该配置页面包括多个输入框，该多个输入框与目标页面中的多个组件匹配，用于为该多个组件配置显示内容。

308、管理端基于第三指令数据和转换后的内容数据，渲染目标页面的预览页面。

在一种可能实现方式中，如图4所示，配置页面包括预览框，管理端基于第三指令数据和转换后的内容数据，渲染目标页面的预览页面，包括：管理端基于第三指令数据和转换后的内容数据，在预览框中渲染目标页面的预览页面。

在另一种可能实现方式中，管理端基于第三指令数据和转换后的内容数据，渲染目标页面的预览页面时，从配置页面跳转至该预览页面，也就是说，配置页面和预览页面是两个不同的页面。在一些实施例中，通过iframe(可嵌入第三方页面的一个元素)的方式引入预览页面。可选地，配置页面还用于配置目标页面的地址域名。在管理端预览目标页面时，使用的是管理端的域名，由于目标页面的地址域名与管理端的域名不一致，因此，预览页面与其他页面之间无法直接通讯。本申请实施例中，使用postMessage的方式跨窗口传输数据，例如，从配置页面中传输数据至预览页面。

在另一种可能实现方式中，如图5所示，管理端基于第三指令数据和转换后的内容数据，渲染目标页面的预览页面包括：基于第三指令数据和转化后的内容数据，生成预览数据，基于该预览数据生成该目标页面的图形码，通过其他终端扫描该图形码，以在其他终端上预览该目标页面。该图形码可以是二维码、条形码等任一图形码，本申请实施例对图形码不做限定。

在另一种可能实现方式中，管理端既显示预览框，又显示图形码，本申请实施例对管理端的显示内容不做限定。

需要说明的是，在预览场景中，开发人员需要根据预览页面的显示效果在配置页面中进行调整，因此，在渲染出预览页面之后，如果开发人员在配置页面中进行更改，预览页面也会随之更改。

在一种可能实现方式中，在管理端的配置页面中，响应于任一内容数据的更改操作，触发window.postMessage方法，以使更新后的内容数据传输到预览页面中。并且，预览页面中，设置有window.addListener(‘message’)的监听事件代码，监听从配置页面传过来的数据，并更新到预览页面中。

本申请实施例提供了一种页面预览方法、装置、设备、存储介质和产品，考虑到预览场景不需要测试页面的交互功能，而投放场景中需要页面有交互功能。因此，在预览场景中拿到不仅包括显示样式数据还包括交互逻辑数据的第二指令数据之后，可以基于适配层对第二指令数据进行提取，拿到预览场景需要的第三指令数据，来进行页面预览，使得预览能够正常进行。而由于第二指令数据不仅包括显示样式数据还包括交互逻辑数据，因此，第二指令数据还适用于投放场景，使得预览场景和投放场景能够共用一套指令数据，也即是，第二指令数据。由于预览场景和投放场景能够共用一套指令数据，那么开发人员只需维护一套指令数据即可，能够降低指令数据的维护难度。

另外，通过添加适配层的方式来使得预览场景和投放场景能够共用一套指令数据，使得指令数据的结构更加清晰。

在开发人员基于配置页面对目标页面配置完成之后，可以生成目标页面的投放数据和预览数据，后续，可以基于预览数据对目标页面进行预览，基于投放数据，对目标页面进行投放。

对于投放数据，在一种可能实现方式中，基于第二指令数据和内容数据，生成目标页面的投放数据，存储该投放数据；响应于用户端对该目标页面的访问请求，向用户端发送已存储的投放数据，以使用户端基于该投放数据访问目标页面。

其中，存储该投放数据可以是将该投放数据存储到服务器中。

对于预览数据，在另一种可能实现方式中，基于第二指令数据、适配层和内容数据，生成目标页面预览数据，存储该预览数据，响应于管理端对目标页面的预览请求，基于已存储的预览数据，显示该目标页面。

其中，存储该预览数据可以是将该预览数据存储到服务器中。

在一些实施例中，开发人员基于前端构建工具编写第二指令数据，并且，可以在前端构建工具中为任一组件添加适配层。本申请实施例中，前端构建工具设置有两个入口，个入口基于编写的第二指令数据生成投放数据，另一个入口，基于编写的第二指令数据和添加的适配层，生成预览数据。

在一种可能实现方式中，如图6所示，基于前端构建工具的第一入口，对该第二指令数据和该内容数据进行打包，得到该目标页面的投放数据，存储该投放数据；响应于用户端的访问请求，向该用户端发送已存储的该投放数据，以使该用户端基于该投放数据访问该目标页面。

基于该前端构建工具的第二入口，获取该适配层，对该第二指令数据、该适配层和该内容数据进行打包，得到该目标页面的预览数据，存储该预览数据；响应于管理端对该目标页面的预览请求，基于已存储的该预览数据，显示该目标页面。

在一些实施例中，前端构建工具为webpack。如图6所示，通过webpack打包之后，可以将打包得到的数据存储到第一服务器和第二服务器，其中，第一服务器提供页面输出功能，第二服务器提供页面的静态资源。在一些实施例中，第一服务器为node服务器，第二服务器为COS服务器。

在一些实施例中，第二指令数据是基于第一前端框架编写的指令数据，且该第二指令数据包括该第一前端框架的数据库；该基于该第三指令数据和为该目标页面配置的内容数据，渲染该目标页面的预览页面之后，该方法还包括：将该第二指令数据中该第一前端框架的数据库替换成第二前端框架的数据库，得到第五指令数据，该第二前端框架是基于该第一前端框架编辑的框架，该第二前端框架与该第一前端框架兼容，且该第二前端框架的数据库的数据量小于该第一前端框架的数据量；基于该第五指令数据和该内容数据，生成该目标页面的投放数据，存储该投放数据；响应于用户端的访问请求，向该用户端发送已存储的该投放数据，以使该用户端基于该投放数据访问该目标页面。

通过将第一前端框架的数据库替换成第二前端框架的数据库，不仅能够保证第二指令数据的性能，还减小了前端框架尺寸，进一步提高了第二指令数据的性能。

在一些实施例中，第一前端框架为react框架，react框架是一种作用于快速构建用户界面交互的javascript前端框架。在一些实施例中，第二前端框架为Preact框架，该Preact框架是基于reactjs的思想，抽取了和重写了部分核心代码组成的一个体积更小的react框架。由于用户端对性能要求较高，因此，react框架来为页面编写指令数据，可以满足用户端对性能的要求，但是使用react框架来为页面编写指令数据的话，所依赖的资源体积会比较大，导致用户端在显示目标页面时，会出现较长时间的白屏，而使用react框架来为页面编写指令数据，在打包时，将react框架替换为Preact框架，不仅不会降低性能，而且会减少所依赖的资源体积，从而能够提高网络传输速度，减少白屏时间。

需要说明的是，为了提高用户端显示目标页面的效率，在用户端访问目标页面时，由服务器对目标页面的HTML(Hyper Text Markup Language，超文本标记语言)文件进行解析、获取目标页面的静态资源等，将解析后的HTML文件和静态资源返回给用户端，用户端基于解析后的HTML文件和静态资源，直接渲染目标页面。

其中，HTML文件是将投放数据存储到服务器中生成的文件。

另外，管理端在访问目标页面时，可以与用户端的显示方式一致，也可以不一致，例如，如图7所示，第一服务器响应于管理端对目标页面的访问请求，调用该目标页面的接口，获取接口数据，基于该接口数据渲染组件，输出HTML文件，向管理端发送该目标页面的HTML文件，由管理端接收该HTML文件，解析该HTML文件，基于解析后的HTML文件从第二服务器中获取静态资源，基于解析后的HTML文件和静态资源，渲染目标页面。后续，还可以基于目标页面触发其他业务接口从而与第一服务器进行交互。

在一些实施例中，本申请实施例提供的方法应用于广告落地页的开发场景。其中，不同广告的落地页的模板相同。也就是说，开发人员可以根据计划设置的组件以及组件功能，开发落地页的一套指令数据，后续，基于该套指令数据和管理端的配置页面，配置出不同广告的落地页。

在一些实施例中，管理端为商家终端，开发人员设计出不同落地页的模板与第二指令数据，商家可以在管理终端上选择适合的模板来配置广告落地页。

图8是根据本申请实施例提供的一种页面预览装置的框图，该装置用于执行上述页面预览方法，参见图8，装置包括：

第一获取模块801，用于基于目标页面中组件的组件构成信息，获取所述目标页面在预览场景下的第一预览需求信息，所述组件构成信息用于表示构成所述目标页面的组件的构成情况，所述第一预览需求信息用于表示预览所述目标页面需要的组件的显示样式数据；

第一生成模块802，用于基于所述第一预览需求信息，生成适配层，所述适配层包括第一指令数据，所述第一指令数据用于提取所述显示样式数据；

第二获取模块803，用于获取目标页面的第二指令数据，所述第二指令数据包括所述组件的显示样式数据和交互逻辑数据；

提取模块804，用于基于所述第一指令数据，对所述第二指令数据进行提取，得到第三指令数据，所述第三指令数据包括所述组件的显示样式数据；

渲染模块805，用于基于所述第三指令数据和为所述目标页面配置的内容数据，渲染所述目标页面的预览页面，所述内容数据用于表示为所述组件配置的显示内容，所述预览页面用于呈现所述目标页面的显示效果。

如图9所示，在一种可能实现方式中，所述第一生成模块802，包括：

第一获取单元8021，用于获取所述组件的组件功能信息，所述组件功能信息用于表示所述组件的功能；

第二获取单元8022，用于基于所述组件功能信息，获取所述目标页面在所述预览场景下的第二预览需求信息，所述第二预览需求信息用于表示所述组件的功能中影响所述目标页面的显示效果的目标功能；

生成单元8023，用于基于所述第一预览需求信息和所述第二预览需求信息，生成所述第一指令数据，所述第一指令数据用于提取所述显示样式数据和所述目标功能对应的交互逻辑数据。

在一种可能实现方式中，所述适配层还包括第四指令数据；所述第一生成模块802，还包括：

第三获取单元8024，用于获取管理端本地的第一数据格式和服务端的第二数据格式；

第四获取单元8025，用于基于所述第一数据格式和所述第二数据格式，获取所述目标页面在所述预览场景下的第三预览需求信息，所述第三预览需求信息用于表示预览所述目标页面需要的数据的数据格式；

所述生成单元8023，用于基于所述第三预览需求信息，生成所述第四指令数据，所述第四指令数据用于将所述内容数据从所述第一数据格式转换为所述第二数据格式。

在一种可能实现方式中，所述渲染模块805，用于基于所述第四指令数据，对所述内容数据进行格式转换，得到转换后的内容数据；基于所述第三指令数据和所述转换后的内容数据，渲染所述目标页面的预览页面。

在一种可能实现方式中，所述装置还包括以下至少一个模块：

投放模块806，用于基于前端构建工具的第一入口，对所述第二指令数据和所述内容数据进行打包，得到所述目标页面的投放数据，存储所述投放数据；响应于用户端的访问请求，向所述用户端发送已存储的所述投放数据，以使所述用户端基于所述投放数据访问所述目标页面；

预览模块807，用于基于所述前端构建工具的第二入口，获取所述适配层，对所述第二指令数据、所述适配层和所述内容数据进行打包，得到所述目标页面的预览数据，存储所述预览数据；响应于管理端对所述目标页面的预览请求，基于已存储的所述预览数据，显示所述目标页面。

在一种可能实现方式中，所述第二指令数据是基于第一前端框架编写的指令数据，且所述第二指令数据包括所述第一前端框架的数据库；所述装置还包括：

替换模块808，用于将所述第二指令数据中所述第一前端框架的数据库替换成第二前端框架的数据库，得到第五指令数据，所述第二前端框架是基于所述第一前端框架编辑的框架，所述第二前端框架与所述第一前端框架兼容，且所述第二前端框架的数据库的数据量小于所述第一前端框架的数据量；

第二生成模块809，用于基于所述第五指令数据和所述内容数据，生成所述目标页面的投放数据，存储所述投放数据；

发送模块810，用于响应于用户端的访问请求，向所述用户端发送已存储的所述投放数据，以使所述用户端基于所述投放数据访问所述目标页面。

需要说明的是：上述实施例提供的页面预览方法在对预览页面时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将计算机设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的页面预览装置与页面预览方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

在本申请实施例中，计算机设备能够被配置为终端或者服务器，当计算机设备被配置为终端时，由终端作为执行主体来实施本申请实施例提供的技术方案；当计算机设备被配置为服务器时，由服务器作为执行主体来实施本申请实施例提供的技术方案；或者，通过终端和服务器之间的交互来实施本申请提供的技术方案，本申请实施例对此不作限定。

图10是本申请实施例提供的一种终端的结构框图。该终端1000用于执行上述实施例中终端执行的步骤，可以是便携式移动终端，比如：笔记本电脑、台式计算机、智能语音交互设备、智能家电、车载终端等。

通常，终端1000包括有：处理器1001和存储器1002。

处理器1001可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器1001可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1001也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器1001可以集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器1001还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器1002可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器1002还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器1002中的非暂态的计算机可读存储介质用于存储至少一个程序代码，该至少一个程序代码用于被处理器1001所执行以实现本申请中方法实施例提供的页面预览方法。

在一些实施例中，终端1000还可选包括有：***设备接口1003和至少一个***设备。处理器1001、存储器1002和***设备接口1003之间可以通过总线或信号线相连。各个***设备可以通过总线、信号线或电路板与***设备接口1003相连。具体地，***设备包括：射频电路1004、显示屏1005、摄像头组件1006、音频电路1007和电源1008中的至少一种。

***设备接口1003可被用于将I/O(Input/Output，输入/输出)相关的至少一个***设备连接到处理器1001和存储器1002。在一些实施例中，处理器1001、存储器1002和***设备接口1003被集成在同一芯片或电路板上；在一些其他实施例中，处理器1001、存储器1002和***设备接口1003中的任意一个或两个可以在单独的芯片或电路板上实现，本申请实施例对此不加以限定。

射频电路1004用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路1004通过电磁信号与通信网络以及其他通信设备进行通信。射频电路1004将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路1004包括：天线***、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路1004可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：万维网、城域网、内联网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路1004还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。

显示屏1005用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏1005是触摸显示屏时，显示屏1005还具有采集在显示屏1005的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器1001进行处理。此时，显示屏1005还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏1005可以为一个，设置终端1000的前面板；在另一些实施例中，显示屏1005可以为至少两个，分别设置在终端1000的不同表面或呈折叠设计；在另一些实施例中，显示屏1005可以是柔性显示屏，设置在终端1000的弯曲表面上或折叠面上。甚至，显示屏1005还可以设置成非矩形的不规则图形，也即异形屏。显示屏1005可以采用LCD(Liquid Crystal Display，液晶显示屏)、OLED(Organic Light-Emitting Diode,有机发光二极管)等材质制备。

摄像头组件1006用于采集图像或视频。可选地，摄像头组件1006包括前置摄像头和后置摄像头。通常，前置摄像头设置在终端的前面板，后置摄像头设置在终端的背面。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中，摄像头组件1006还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。

音频电路1007可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器1001进行处理，或者输入至射频电路1004以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在终端1000的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器1001或射频电路1004的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路1007还可以包括耳机插孔。

电源1008用于为终端1000中的各个组件进行供电。电源1008可以是交流电、直流电、一次性电池或可充电电池。当电源1008包括可充电电池时，该可充电电池可以支持有线充电或无线充电。该可充电电池还可以用于支持快充技术。

在一些实施例中，终端1000还包括有一个或多个传感器1010。该一个或多个传感器1010包括但不限于：加速度传感器1011、陀螺仪传感器1012、压力传感器1013、光学传感器1014以及接近传感器1015。

加速度传感器1011可以检测以终端1000建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器1011可以用于检测重力加速度在三个坐标轴上的分量。处理器1001可以根据加速度传感器1011采集的重力加速度信号，控制显示屏1005以横向视图或纵向视图进行用户界面的显示。加速度传感器1011还可以用于游戏或者用户的运动数据的采集。

陀螺仪传感器1012可以检测终端1000的机体方向及转动角度，陀螺仪传感器1012可以与加速度传感器1011协同采集用户对终端1000的3D动作。处理器1001根据陀螺仪传感器1012采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。

压力传感器1013可以设置在终端1000的侧边框和/或显示屏1005的下层。当压力传感器1013设置在终端1000的侧边框时，可以检测用户对终端1000的握持信号，由处理器1001根据压力传感器1013采集的握持信号进行左右手识别或快捷操作。当压力传感器1013设置在显示屏1005的下层时，由处理器1001根据用户对显示屏1005的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。

光学传感器1014用于采集环境光强度。在一个实施例中，处理器1001可以根据光学传感器1014采集的环境光强度，控制显示屏1005的显示亮度。具体地，当环境光强度较高时，调高显示屏1005的显示亮度；当环境光强度较低时，调低显示屏1005的显示亮度。在另一个实施例中，处理器1001还可以根据光学传感器1014采集的环境光强度，动态调整摄像头组件1006的拍摄参数。

接近传感器1015，也称距离传感器，通常设置在终端1000的前面板。接近传感器1015用于采集用户与终端1000的正面之间的距离。在一个实施例中，当接近传感器1015检测到用户与终端1000的正面之间的距离逐渐变小时，由处理器1001控制显示屏1005从亮屏状态切换为息屏状态；当接近传感器1015检测到用户与终端1000的正面之间的距离逐渐变大时，由处理器1001控制显示屏1005从息屏状态切换为亮屏状态。

本领域技术人员可以理解，图10中示出的结构并不构成对终端1000的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

图11是本申请实施例提供的一种服务器的结构示意图，该服务器1100可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(Central ProcessingUnits，CPU)1101和一个或一个以上的存储器1102，其中，存储器1102中存储有至少一条程序代码，至少一条程序代码由处理器1101加载并执行以实现上述各个方法实施例提供的方法。当然，该服务器还可以具有有线或无线网络接口、键盘以及输入输出接口等部件，以便进行输入输出，该服务器还可以包括其他用于实现设备功能的部件，在此不做赘述。

本申请实施例还提供了一种计算机设备，该计算机设备包括处理器和存储器，该存储器中存储有至少一条程序代码，该至少一条程序代码由该处理器加载并执行上述实施例的页面预览方法中所执行的操作。

本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质中存储有至少一段计算机程序，该至少一段计算机程序由处理器加载并执行以实现如上述实施例中的页面预览方法。

本申请实施例还提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机程序代码，该计算机程序代码存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机程序代码，处理器执行该计算机程序代码，使得该计算机设备执行如上述实施例的页面预览方法中所执行的操作。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来程序代码相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本申请的可选实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (10)

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

基于目标页面中组件的组件构成信息，获取所述目标页面在预览场景下的第一预览需求信息，所述组件构成信息用于表示构成所述目标页面的组件的构成情况，所述第一预览需求信息用于表示预览所述目标页面需要的组件的显示样式数据；

基于所述第一预览需求信息，生成适配层，所述适配层包括第一指令数据，所述第一指令数据用于提取所述显示样式数据；

获取目标页面的第二指令数据，所述第二指令数据包括所述组件的显示样式数据和交互逻辑数据；

基于所述第一指令数据，对所述第二指令数据进行提取，得到第三指令数据，所述第三指令数据包括所述组件的显示样式数据；

基于所述第三指令数据和为所述目标页面配置的内容数据，渲染所述目标页面的预览页面，所述内容数据用于表示为所述组件配置的显示内容，所述预览页面用于呈现所述目标页面的显示效果。

2.根据权利要求1所述的方法，其特征在于，所述基于所述第一预览需求信息，生成适配层，包括：

获取所述组件的组件功能信息，所述组件功能信息用于表示所述组件的功能；

基于所述组件功能信息，获取所述目标页面在所述预览场景下的第二预览需求信息，所述第二预览需求信息用于表示所述组件的功能中影响所述目标页面的显示效果的目标功能；

基于所述第一预览需求信息和所述第二预览需求信息，生成所述第一指令数据，所述第一指令数据用于提取所述显示样式数据和所述目标功能对应的交互逻辑数据。

3.根据权利要求1或2所述的方法，其特征在于，所述适配层还包括第四指令数据；

生成所述第四指令数据的过程，包括：

获取管理端本地的第一数据格式和服务端的第二数据格式；

基于所述第一数据格式和所述第二数据格式，获取所述目标页面在所述预览场景下的第三预览需求信息，所述第三预览需求信息用于表示预览所述目标页面需要的数据的数据格式；

基于所述第三预览需求信息，生成所述第四指令数据，所述第四指令数据用于将所述内容数据从所述第一数据格式转换为所述第二数据格式。

4.根据权利要求3所述的方法，其特征在于，所述基于所述第三指令数据和为所述目标页面配置的内容数据，渲染所述目标页面的预览页面，包括：

基于所述第四指令数据，对所述内容数据进行格式转换，得到转换后的内容数据；

基于所述第三指令数据和所述转换后的内容数据，渲染所述目标页面的预览页面。

5.根据权利要求1所述的方法，其特征在于，所述基于所述第三指令数据和为所述目标页面配置的内容数据，渲染所述目标页面的预览页面之后，所述方法还包括以下至少一种实现方式：

基于前端构建工具的第一入口，对所述第二指令数据和所述内容数据进行打包，得到所述目标页面的投放数据，存储所述投放数据；响应于用户端的访问请求，向所述用户端发送已存储的所述投放数据，以使所述用户端基于所述投放数据访问所述目标页面；

基于所述前端构建工具的第二入口，获取所述适配层，对所述第二指令数据、所述适配层和所述内容数据进行打包，得到所述目标页面的预览数据，存储所述预览数据；响应于管理端对所述目标页面的预览请求，基于已存储的所述预览数据，显示所述目标页面。

6.根据权利要求1所述的方法，其特征在于，所述第二指令数据是基于第一前端框架编写的指令数据，且所述第二指令数据包括所述第一前端框架的数据库；所述基于所述第三指令数据和为所述目标页面配置的内容数据，渲染所述目标页面的预览页面之后，所述方法还包括：

将所述第二指令数据中所述第一前端框架的数据库替换成第二前端框架的数据库，得到第五指令数据，所述第二前端框架是基于所述第一前端框架编辑的框架，所述第二前端框架与所述第一前端框架兼容，且所述第二前端框架的数据库的数据量小于所述第一前端框架的数据量；

基于所述第五指令数据和所述内容数据，生成所述目标页面的投放数据，存储所述投放数据；

响应于用户端的访问请求，向所述用户端发送已存储的所述投放数据，以使所述用户端基于所述投放数据访问所述目标页面。

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

第一获取模块，用于基于目标页面中组件的组件构成信息，获取所述目标页面在预览场景下的第一预览需求信息，所述组件构成信息用于表示构成所述目标页面的组件的构成情况，所述第一预览需求信息用于表示预览所述目标页面需要的组件的显示样式数据；

第一生成模块，用于基于所述第一预览需求信息，生成适配层，所述适配层包括第二指令数据，所述第二指令数据用于提取所述显示样式数据；

第二获取模块，用于获取目标页面的第一指令数据，所述第一指令数据包括所述组件的显示样式数据和交互逻辑数据；

提取模块，用于基于所述第二指令数据，对所述第一指令数据进行提取，得到第三指令数据，所述第三指令数据包括所述组件的显示样式数据；

渲染模块，用于基于所述第三指令数据和为所述目标页面配置的内容数据，渲染所述目标页面的预览页面，所述内容数据用于表示为所述组件配置的显示内容，所述预览页面用于呈现所述目标页面的显示效果。

8.一种计算机设备，其特征在于，所述计算机设备包括处理器和存储器，所述存储器用于存储至少一段计算机程序，所述至少一段计算机程序由所述处理器加载并执行权利要求1至6任一项权利要求所述的页面预览方法。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质用于存储至少一段计算机程序，所述至少一段计算机程序用于执行权利要求1至6任一项权利要求所述的页面预览方法。

10.一种计算机程序产品，包括计算机程序代码，其特征在于，所述计算机程序代码存储在计算机可读存储介质中，计算机设备的处理器从所述计算机可读存储介质读取所述计算机程序代码，所述处理器执行所述计算机程序代码，使得所述计算机设备执行权利要求1至6任一项权利要求所述的页面预览方法。