Page preview method, device, equipment, storage medium and product

Abstract

Embodiments of the application disclose a page preview method, device and equipment, a storage medium and a product, and belong to the technical field of computers. The method comprises the following steps: obtaining first preview requirement information of a target page in a preview scene based on component composition information of components in the target page; generating an adaptation layer based on the first preview requirement information, wherein the adaptation layer comprises first instruction data; obtaining second instruction data of the target page; extracting the second instruction data based on the first instruction data to obtain third instruction data; and rendering a preview page of the target page based on the third instruction data and content data configured for the target page. In the scheme, the preview scene and the delivery scene can share a set of instruction data, and the developer only needs to maintain one set of instruction data, thereby reducing the difficulty of maintaining the instruction data.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a page preview method, apparatus, device, storage medium, and product. Background Technology

[0002] With the continuous development of computer technology, all kinds of applications are emerging. During the development process, developers need to preview the application's pages on the management end (PC). Based on the display effect of the page, they need to adjust the content data of the page until the display effect meets the requirements before launching the application.

[0003] In related technologies, developers write the first instruction data for the page, and the management end generates preview data for the page based on the first instruction data and configured content data. Developers can then preview the page using this preview data. In this preview scenario, developers only need to check the page's display effect and do not need to test other functions. However, after the application is launched, users may need to use other functions on the page. Therefore, after developers determine the page's display effect, they also need to write the second instruction data for the page. The management end generates the page's delivery data based on the second instruction data and the page's content data, stores this delivery data on the server, and subsequently allows users (mobile devices) to retrieve the page's delivery data from the server to access the page, thus launching the application.

[0004] Subsequently, developers need to maintain two sets of instruction data: the first instruction data and the second instruction data, which increases the difficulty of maintaining the instruction data. Summary of the Invention

[0005] This application provides a page preview method, apparatus, device, storage medium, and product, which can reduce the difficulty of maintaining instruction data. The technical solution is as follows:

[0006] On the one hand, a page preview method is provided, the method including:

[0007] Based on the component composition information of the components in the target page, the first preview requirement information of the target page in the preview scenario is obtained. The component composition information is used to indicate the composition of the components that make up the target page, and the first preview requirement information is used to indicate the display style data of the components required to preview the target page.

[0008] Based on the first preview requirement information, an adaptation layer is generated. The adaptation layer includes first instruction data, which is used to extract the display style data.

[0009] Obtain second instruction data from the target page, the second instruction data including the display style data and interaction logic data of the component;

[0010] Based on the first instruction data, the second instruction data is extracted to obtain the third instruction data, which includes the display style data of the component;

[0011] Based on the third instruction data and the content data configured for the target page, a preview page of the target page is rendered. The content data is used to represent the display content configured for the component, and the preview page is used to present the display effect of the target page.

[0012] On the other hand, a page preview device is provided, the device comprising:

[0013] The first acquisition module is used to acquire the first preview requirement information of the target page in the preview scenario based on the component composition information of the components in the target page. The component composition information is used to indicate the composition of the components constituting the target page, and the first preview requirement information is used to indicate the display style data of the components required to preview the target page.

[0014] The first generation module is used to generate an adaptation layer based on the first preview requirement information. The adaptation layer includes first instruction data, which is used to extract the display style data.

[0015] The second acquisition module is used to acquire the second instruction data of the target page, the second instruction data including the display style data and interaction logic data of the component;

[0016] An extraction module is used to extract the second instruction data based on the first instruction data to obtain third instruction data, wherein the third instruction data includes the display style data of the component;

[0017] The rendering module is used to render a preview page of the target page based on the third instruction data and the content data configured for the target page. The content data is used to represent the display content configured for the component, and the preview page is used to present the display effect of the target page.

[0018] In one possible implementation, the first generation module includes:

[0019] The first acquisition unit is used to acquire component function information of the component, wherein the component function information is used to represent the function of the component;

[0020] The second acquisition unit is used to acquire second preview requirement information of the target page in the preview scenario based on the component function information. The second preview requirement information is used to represent the target function of the component that affects the display effect of the target page.

[0021] The generation unit is used to generate the first instruction data based on the first preview requirement information and the second preview requirement information. The first instruction data is used to extract the display style data and the interaction logic data corresponding to the target function.

[0022] In one possible implementation, the adaptation layer further includes fourth instruction data; the first generation module further includes:

[0023] The third acquisition unit is used to acquire the first data format on the local management end and the second data format on the server end.

[0024] The fourth acquisition unit is used to acquire the third preview requirement information of the target page in the preview scenario based on the first data format and the second data format. The third preview requirement information is used to represent the data format of the data required to preview the target page.

[0025] The generation unit is used to generate the fourth instruction data based on the third preview requirement information. The fourth instruction data is used to convert the content data from the first data format to the second data format.

[0026] In one possible implementation, the rendering module is configured to perform format conversion on the content data based on the fourth instruction data to obtain converted content data; and to render a preview page of the target page based on the third instruction data and the converted content data.

[0027] In one possible implementation, the device further includes at least one of the following modules:

[0028] The delivery module is used to package the second instruction data and the content data based on the first entry point of the front-end building tool to obtain the delivery data of the target page and store the delivery data; in response to the access request of the user terminal, it sends the stored delivery data to the user terminal so that the user terminal can access the target page based on the delivery data;

[0029] The preview module is used to obtain the adaptation layer based on the second entry point of the front-end building tool, package the second instruction data, the adaptation layer and the content data to obtain preview data of the target page, and store the preview data; in response to the preview request of the target page from the management terminal, the target page is displayed based on the stored preview data.

[0030] In one possible implementation, the second instruction data is instruction data written based on the first front-end framework, and the second instruction data includes the database of the first front-end framework; the apparatus further includes:

[0031] The replacement module is used to replace the database of the first front-end framework in the second instruction data with the database of the second front-end framework to obtain the fifth instruction data. The second front-end framework is a framework edited based on the first front-end framework. The second front-end framework is compatible with the first front-end framework, and the data volume of the database of the second front-end framework is smaller than the data volume of the first front-end framework.

[0032] The second generation module is used to generate the delivery data of the target page based on the fifth instruction data and the content data, and to store the delivery data;

[0033] The sending module is used to send the stored delivery data to the user terminal in response to the user terminal's access request, so that the user terminal can access the target page based on the delivery data.

[0034] On the other hand, a computer device is provided, the computer device including a processor and a memory, the memory being used to store at least one computer program, the at least one computer program being loaded and executed by the processor to implement the page preview method provided in various alternative implementations of the above aspects.

[0035] On the other hand, a computer-readable storage medium is provided that stores at least one computer program, which is loaded and executed by a processor to implement the page preview method provided in various alternative implementations of the above aspects.

[0036] On the other hand, a computer program product or computer program is provided, which includes computer program code stored in a computer-readable storage medium, wherein a processor of a computer device reads the computer program code from the computer-readable storage medium, and executes the computer program code, causing the computer device to perform the page preview method provided in various alternative implementations of the above aspects.

[0037] This application provides a page preview method, apparatus, device, storage medium, and product. Considering that preview scenarios do not require testing the page's interactive functionality, while deployment scenarios do, interactive functionality is required. Therefore, after obtaining second instruction data in the preview scenario, which includes not only display style data but also interactive logic data, the second instruction data can be extracted based on the adaptation layer to obtain the third instruction data needed for the preview scenario, enabling the page preview to proceed normally. Since the second instruction data includes not only display style data but also interactive logic data, it is also applicable to the deployment scenario, allowing the preview and deployment scenarios to share a single set of instruction data, namely, the second instruction data. Because the preview and deployment scenarios can share a single set of instruction data, developers only need to maintain one set, reducing the difficulty of maintaining instruction data. Attached Figure Description

[0038] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0039] Figure 1 This is a schematic diagram of the implementation environment of a page preview method provided in an embodiment of this application;

[0040] Figure 2 This is a flowchart of a page preview method provided in an embodiment of this application;

[0041] Figure 3 This is a flowchart of another page preview method provided in the embodiments of this application;

[0042] Figure 4 This is a schematic diagram of a configuration page provided in an embodiment of this application;

[0043] Figure 5 This is a schematic diagram of another configuration page provided in an embodiment of this application;

[0044] Figure 6 This is a flowchart illustrating the generation of delivery data and preview data provided in an embodiment of this application;

[0045] Figure 7 This is a flowchart of a page preview method provided in an embodiment of this application;

[0046] Figure 8 This is a block diagram of a page preview device provided in an embodiment of this application;

[0047] Figure 9This is a block diagram of another page preview device provided in the embodiments of this application;

[0048] Figure 10 This is a structural block diagram of a terminal provided in an embodiment of this application;

[0049] Figure 11 This is a schematic diagram of the structure of a server provided in an embodiment of this application. Detailed Implementation

[0050] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0051] In this application, the terms "first," "second," etc., are used to distinguish identical or similar items with essentially the same function. It should be understood that there is no logical or temporal dependency between "first," "second," and "nth," nor is there any limitation on the quantity or execution order.

[0052] In this application, the term "at least one" means one or more, and "multiple" means two or more.

[0053] It should be noted that all information (including but not limited to user device information, user personal information, etc.), data (including but not limited to data used for analysis, stored data, displayed data, etc.), and signals involved in this application have been authorized by the user or fully authorized by all parties, and the collection, use, and processing of related data must comply with the relevant laws, regulations, and standards of the relevant countries and regions. For example, the content data involved in this application were obtained with full authorization.

[0054] The following describes the application scenarios of this application:

[0055] The page preview method provided in this application embodiment can be applied to various scenarios such as page development and maintenance. This application embodiment does not limit the application scenario.

[0056] For example, it can be applied to page development scenarios.

[0057] When developing a page, developers need to write two sets of instruction data for the preview scene and the deployment scene respectively. If the page preview method provided in this application is used, the preview scene and the deployment scene can share a set of instruction data, which improves the page development efficiency.

[0058] For example, it can be used in page maintenance scenarios.

[0059] Since developers need to write two sets of instruction data for the preview scene and the deployment scene respectively when developing the page, they need to maintain these two sets of instruction data at the same time when maintaining the page. If the page preview method provided in this application embodiment is adopted, the preview scene and the deployment scene can share a set of instruction data, and developers only need to maintain one set of code, which reduces the difficulty of code maintenance.

[0060] It should be noted that the page preview method provided in this application embodiment can also be applied to other scenarios, and this application embodiment does not limit it.

[0061] The following describes the implementation environment involved in this application:

[0062] The page preview method provided in this application can be executed by a computer device. In some embodiments, the computer device includes a terminal. The terminal is a smartphone, tablet computer, laptop computer, desktop computer, smart voice interaction device, smart home appliance, vehicle terminal, etc., but is not limited to these. In some embodiments, the terminal is a management terminal, which is used to develop instruction data for the page, configure content data for the page, and preview the page based on the instruction data and content data.

[0063] In some embodiments, the computer device includes a terminal and a server. The following is a schematic diagram illustrating the implementation environment of the page preview method provided in this application, using an example of a computer device including a first terminal 101, a second terminal 102, and a server 103. See also... Figure 1 The implementation environment includes a first terminal 101, a second terminal 102, and a server 103. The first terminal 101 and the server 103 can be connected directly or indirectly through wired or wireless communication, and the second terminal 102 and the server 103 can be connected directly or indirectly through wired or wireless communication. This application does not impose any restrictions on this.

[0064] In some embodiments, the computer device is a server, which can be a standalone server, a server cluster of multiple physical servers, or a distributed system. It can also be a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms.

[0065] In some embodiments, server 103 primarily undertakes computing tasks, while first terminal 101 and second terminal 102 undertake secondary computing tasks; or, server 103 provides secondary computing services, while first terminal 101 and second terminal 102 undertake primary computing tasks; or, server 103, first terminal 101, and second terminal 102 collaborate on computing using a distributed computing architecture.

[0066] In some embodiments, the first terminal 101 is a management terminal used by developers, and the second terminal is a user terminal.

[0067] In some embodiments, the first terminal 101 obtains instruction data and content data of the page from the server 103, and previews the page based on the instruction data and content data. In some embodiments, the first terminal 101 obtains the content data of the page locally, obtains the instruction data of the page from the server 103, and previews the page based on the instruction data and content data.

[0068] In some embodiments, the second terminal 101 obtains the instruction data and content data of the page from the server 103, and renders the page based on the instruction data and content data.

[0069] Figure 2 This is a flowchart of a page preview method provided according to an embodiment of this application. See also... Figure 2 In this embodiment of the application, the management terminal is used as the execution subject for illustrative purposes. The page preview method includes the following steps:

[0070] 201. Based on the component composition information of the components in the target page, the management end obtains the first preview requirement information of the target page in the preview scenario. The component composition information is used to indicate the composition of the components that make up the target page, and the first preview requirement information is used to indicate the display style data of the components required to preview the target page.

[0071] The target page can be any page provided by the target application; this application embodiment does not limit the target page. In some embodiments, the target page is the landing page of the target item.

[0072] From a backend technology perspective, a component is an encapsulation of data and methods; from a frontend presentation perspective, a component is an object displayed on the target page. The component composition information is used to indicate the composition of the components that make up the target page, such as how many components the target page consists of and what those components are. This application embodiment does not limit the component composition information.

[0073] A preview scenario is a scenario where developers view the display effect of a target page on the management end. In this preview scenario, developers only need to view the display effect of the target page and do not need to view other functions of the target page. Therefore, the first preview requirement information in the preview scenario is used to represent the data required to preview the target page. This data includes the display style data of the components required to preview the target page.

[0074] 202. Based on the first preview requirement information, the management end generates an adaptation layer, which includes first instruction data, and the first instruction data is used to extract the display style data.

[0075] In this embodiment, the preview scene and the deployment scene share a set of instruction data. In the preview scene, developers only need to view the display effect of the target page and do not need to view other functions of the target page. However, in the deployment scene, users not only need to view the displayed content of the target page but also need other functions of the target page. Therefore, the shared instruction data must meet the requirements of the deployment scene, resulting in unnecessary data in the instruction data obtained in the preview scene. In this embodiment, an adaptation layer is generated based on the preview requirement information. The shared instruction data is then extracted based on the adaptation layer to extract the instruction data required for the preview scene.

[0076] 203. The management end obtains the second instruction data of the target page, which includes the display style data and interaction logic data of the component.

[0077] In this embodiment, the second instruction data is shared by both the preview and deployment scenarios. Therefore, the second instruction data needs to meet the requirements of both scenarios. Thus, the second instruction data includes component display style data and interaction logic data. It should be noted that the second instruction data may also include other data, but this embodiment does not limit its scope.

[0078] 204. Based on the first instruction data, the management end extracts the second instruction data to obtain the third instruction data, which includes the display style data of the component.

[0079] The first instruction data is used to extract the display style data. Therefore, the second instruction data can be extracted based on the first instruction data to obtain the component's display style data.

[0080] 205. The management end renders a preview page of the target page based on the third instruction data and the content data configured for the target page. The content data is used to represent the display content configured for the component, and the preview page is used to present the display effect of the target page.

[0081] The preview page is the target page displayed on the management side.

[0082] In some embodiments, developers configure content data for the target page in the management console, so the management console can obtain the content data configured for the target page locally.

[0083] The page preview method provided in this application takes into account that the preview scenario does not require testing the page's interactive functions, while the deployment scenario does require the page to have interactive functions. Therefore, after obtaining the second instruction data, which includes not only display style data but also interactive logic data, in the preview scenario, the second instruction data can be extracted based on the adaptation layer to obtain the third instruction data required by the preview scenario, so that the page preview can proceed normally. Since the second instruction data includes not only display style data but also interactive logic data, the second instruction data is also applicable to the deployment scenario, allowing the preview scenario and the deployment scenario to share a set of instruction data, namely, the second instruction data. Because the preview scenario and the deployment scenario can share a set of instruction data, developers only need to maintain one set of instruction data, which can reduce the maintenance difficulty of instruction data.

[0084] Figure 3 This is a flowchart illustrating a page preview method provided in an embodiment of this application. This embodiment uses a management terminal as an example for illustrative purposes, and the page preview method includes the following steps:

[0085] 301. The management end obtains the first preview requirement information of the target page in the preview scenario based on the component composition information of the components in the target page.

[0086] The component composition information is used to represent the composition of the components constituting the target page. In some embodiments, the component composition information includes the component identifiers of each component in the target page. Based on the component composition information of the components in the target page, the management terminal obtains the first preview requirement information of the target page in the preview scenario, including: the management terminal determines the display style data of each component based on the component identifiers of each component in the target page, and determines the display style data as the first preview requirement information. In some embodiments, the management terminal obtains the first preview requirement information of the target page in the preview scenario based on the component composition information of the components in the target page, including: the management terminal determines the data type of the display style data in each component based on the component identifiers of each component in the target page, and determines the data type as the first preview requirement information.

[0087] It should be noted that the embodiments of this application do not limit the data format and data content of the preview requirement information, as long as the preview requirement information can represent the data required by the preview target page.

[0088] 302. The management end obtains the component function information of the component, and based on the component function information, obtains the second preview requirement information of the target page in the preview scenario.

[0089] The component function information is used to indicate the function of the component. For example, the function is any one of the following: switching display content function, reporting data function, page jump function, counting the number of visitors, etc. This application embodiment does not limit this.

[0090] Some functionalities within a component will affect its display, such as the ability to switch displayed content. Other functionalities will not affect the component's display, such as data reporting or counting visitor counts. Since the preview scenario only requires viewing the target page's display, the component only needs to possess the functionalities that affect the display; other functionalities are unnecessary. Therefore, the second preview requirement information is used to represent the target functionalities of the component that affect the target page's display.

[0091] In some embodiments, the component function information includes function identifiers of multiple functions. Based on the component function information, the management terminal obtains the second preview requirement information of the target page in the preview scenario, including: based on the component function information, the management terminal determines the target function among the functions of the component that affects the display effect of the target page, and determines the function identifier of the target function as the second preview requirement information.

[0092] 303. The management terminal obtains the first data format locally and the second data format from the server. Based on the first and second data formats, it obtains the third preview requirement information of the target page in the preview scenario.

[0093] It's important to note that the management console is used to configure content data for the target page; therefore, in the preview scenario, the content data is retrieved locally. In the delivery scenario, however, the user client retrieves data from the backend server to render the target page. The management console uses a primary data format, while the server uses a secondary data format; hence, the data formats differ between the delivery and preview scenarios.

[0094] In this embodiment, the management end and the user end (i.e., the preview scene and the usage scene) need to share a set of instruction data, that is, the same data format. Therefore, data format conversion is required to ensure normal page rendering. Thus, the third preview requirement information is used to represent the data format required by the preview target page.

[0095] In some embodiments, the third preview requirement information includes a second data format. In some embodiments, the third preview requirement information includes a first data format and a second data format, and also includes a conversion relationship between the first data format and the second data format: converting the first data format to the second data format. This application embodiment does not limit the third preview requirement information.

[0096] 304. The management end generates an adaptation layer based on the first preview requirement information, the second preview requirement information, and the third preview requirement information.

[0097] In one possible implementation, the adaptation layer includes first instruction data and fourth instruction data. The management end generates the adaptation layer based on first preview requirement information, second preview requirement information, and third preview requirement information, including: generating first instruction data based on the first and second preview requirement information, which is used to extract display style data and interaction logic data corresponding to the target function; and generating fourth instruction data based on the third preview requirement information, which is used to convert content data from a first data format to a second data format.

[0098] It should be noted that when the data to be extracted from multiple data is known, a first instruction data can be written based on the data to be extracted, so that the first instruction data can extract the required data from multiple data. The embodiments of this application do not limit the first instruction data, but only provide an exemplary description.

[0099] In one possible implementation, the management end generates first instruction data based on the first preview requirement information, including: the management end determines the data type of the display style data based on the first preview requirement information, and generates first instruction data for obtaining data of that data type.

[0100] In another possible implementation, the management end generates first instruction data based on a preview requirement information, including: the management end determines the field to which the display style data belongs based on the display style data of the components required by the preview target page, and generates first instruction data for obtaining the field value of the field.

[0101] In some embodiments, the target page includes multiple components, each with different display style data and target functions. In order to enable the adaptation layer to extract data more accurately, an adaptation layer can be generated for each component. That is, an adaptation layer is set for each component that needs to be extracted. Subsequently, the instruction data of the component is extracted through the adaptation layer.

[0102] In some embodiments, the adaptation layer is the model layer. The model layer is used to refine the data. That is, the data obtained from the configuration page or from the backend server is first refined by the model layer and then transmitted to the component for rendering. The model layer is equivalent to performing a layer adaptation so that the data meets the rendering requirements of the component, allowing the component to be free of business processing logic and keeping the component clean.

[0103] For example, a business component on the target page is called Marketing. The data sent to this business component includes data (parameters) and action (interaction logic data). The data is extracted through the Marketing business component and the data value is returned to the Marketing business component for rendering.

[0104] It should be noted that the embodiments of this application are merely illustrative examples of obtaining first preview requirement information, second preview requirement information and third preview requirement information, and generating an adaptation layer based on the first preview requirement information, second preview requirement information and third preview requirement information.

[0105] In another embodiment, the management end obtains the first preview requirement information and generates an adaptation layer based on the first preview requirement information.

[0106] In another embodiment, the management terminal obtains first preview requirement information and second preview requirement information, and generates an adaptation layer based on the first preview requirement information and second preview requirement information. In one possible implementation, the adaptation layer includes first instruction data. The management terminal obtains first preview requirement information of the target page in the preview scenario based on the component composition information of the components in the target page; obtains component function information of the components; obtains second preview requirement information of the target page in the preview scenario based on the component function information; and generates first instruction data based on the first preview requirement information and second preview requirement information. This first instruction data is used to extract display style data and interaction logic data corresponding to the target function.

[0107] In another embodiment, the management terminal obtains first preview requirement information and third preview requirement information, and generates an adaptation layer based on the first preview requirement information and third preview requirement information. In one possible implementation, the adaptation layer includes first instruction data and fourth instruction data. The management terminal obtains first preview requirement information of the target page in the preview scenario based on the component composition information of the components in the target page; obtains a first data format locally on the management terminal and a second data format on the server side; obtains third preview requirement information of the target page in the preview scenario based on the first data format and the second data format; generates first instruction data based on the first preview requirement information, which is used to extract display style data; and generates fourth instruction data based on the third preview requirement information, which is used to convert content data from the first data format to the second data format.

[0108] 305. The management terminal obtains the second instruction data of the target page.

[0109] In this embodiment, instruction data refers to code. In this embodiment, the second instruction data is instruction data shared by the preview scene and the deployment scene. In some embodiments, the second instruction data is instruction data written by developers on the management terminal.

[0110] In some embodiments, the management terminal is a PC, and the user terminal is a mobile device. The PC and mobile devices have different screen sizes. In this embodiment, developers want the page to display identically on both the PC and mobile devices when previewing it on the management terminal to ensure a good preview effect. In one possible implementation, the second instruction data uses rem (font size of the root element) technology to control the display of the target page at different screen sizes. The size of the root element can be determined based on the screen size, and the sizes of other elements on the target page can be determined relative to the root element. Here, rem is one implementation scheme for responsive page layout.

[0111] For example, on the user's device, if the resolution is 750 pixels, then 100 pixels are used as 1rem. On the management side, if the width of the window loading the target page is 375 pixels, an adjustment is made based on the ratio of 375 pixels to 750 pixels, that is, 50 pixels are used as 1rem. By using 1rem, the size of all elements on the target page displayed on both the user and management sides is made consistent.

[0112] It should be noted that when writing instruction data, the unit of size in the display style data can be pixels. When packaging the instruction data through the front-end build tool, the pixel unit will be converted to rem unit.

[0113] 306. The management end extracts the second instruction data based on the adaptation layer to obtain the third instruction data.

[0114] The adaptation layer includes first instruction data and fourth instruction data. The first instruction data is used to extract data from the second instruction data, and the fourth instruction data is used to convert the content data from a first data format to a second data format. Therefore, the management end extracts the second instruction data based on the adaptation layer to obtain the third instruction data, including: the management end extracts the second instruction data based on the first instruction data to obtain the third instruction data.

[0115] For example, component A's display style data includes display position data and display size data, and component A's method functions include a click-to-pause function and a counting function. By extracting the second instruction data of component A through component A's adapter layer, the display position data, display size data, and click-to-pause function of component A can be obtained.

[0116] 307. The management end, based on the adaptation layer, performs format conversion on the content data configured for the target page to obtain the converted content data.

[0117] In this embodiment, the management terminal is used to configure content data for the target page. Therefore, the acquired content data is obtained locally from the management terminal, and thus, the content data format is the first data format. The preview and deployment scenarios share a set of instruction data; therefore, this instruction data matches the second data format of the server. To enable the management terminal to successfully preview the target page, after acquiring the content data configured for the target page, the content data is format-converted to obtain converted content data. Subsequent previewing is based on this converted content data.

[0118] In addition, this application embodiment also provides an exemplary description of the process of configuring content data for the target page by the management terminal:

[0119] In one possible implementation, such as Figure 4 As shown, the management console displays the configuration page of the target page. Optionally, this configuration page includes multiple input boxes, which match multiple components on the target page, and are used to configure the display content for these components.

[0120] 308. The management terminal renders a preview page of the target page based on the third-party instruction data and the converted content data.

[0121] In one possible implementation, such as Figure 4 As shown, the configuration page includes a preview box. The management terminal renders a preview page of the target page based on the third-party instruction data and the converted content data.

[0122] In another possible implementation, when the management terminal renders the preview page of the target page based on the third-party instruction data and the converted content data, it jumps from the configuration page to the preview page. That is, the configuration page and the preview page are two different pages. In some embodiments, the preview page is introduced via an iframe (an element that can be embedded in a third-party page). Optionally, the configuration page is also used to configure the domain name of the target page. When the management terminal previews the target page, it uses its own domain name. Since the domain name of the target page is different from the domain name of the management terminal, the preview page cannot communicate directly with other pages. In this embodiment, the postMessage method is used to transmit data across windows, for example, transmitting data from the configuration page to the preview page.

[0123] In another possible implementation, such as Figure 5 As shown, the management terminal renders a preview page of the target page based on the third instruction data and the converted content data, including: generating preview data based on the third instruction data and the converted content data; generating a graphic code for the target page based on the preview data; and scanning the graphic code on other terminals to preview the target page on those terminals. The graphic code can be any graphic code such as a QR code or barcode; this embodiment does not limit the graphic code.

[0124] In another possible implementation, the management terminal displays both the preview box and the graphic code. This application embodiment does not limit the content displayed on the management terminal.

[0125] It should be noted that in the preview scene, developers need to make adjustments in the configuration page based on the display effect of the preview page. Therefore, after the preview page is rendered, if the developers make changes in the configuration page, the preview page will also change accordingly.

[0126] In one possible implementation, in the configuration page on the management side, the `window.postMessage` method is triggered in response to any change to content data, so that the updated content data is transmitted to the preview page. Furthermore, the preview page contains a `window.addListener('message')` event listener to listen for data transmitted from the configuration page and update the preview page accordingly.

[0127] This application provides a page preview method, apparatus, device, storage medium, and product. Considering that preview scenarios do not require testing the page's interactive functionality, while deployment scenarios do, interactive functionality is required. Therefore, after obtaining second instruction data in the preview scenario, which includes not only display style data but also interactive logic data, the second instruction data can be extracted based on the adaptation layer to obtain the third instruction data needed for the preview scenario, enabling the page preview to proceed normally. Since the second instruction data includes not only display style data but also interactive logic data, it is also applicable to the deployment scenario, allowing the preview and deployment scenarios to share a single set of instruction data, namely, the second instruction data. Because the preview and deployment scenarios can share a single set of instruction data, developers only need to maintain one set, reducing the difficulty of maintaining instruction data.

[0128] In addition, by adding an adaptation layer, the preview scene and the deployment scene can share the same set of command data, making the structure of the command data clearer.

[0129] After the developers have configured the target page based on the configuration page, they can generate the target page's delivery data and preview data. Subsequently, the target page can be previewed based on the preview data, and the target page can be delivered based on the delivery data.

[0130] In one possible implementation, the target page's delivery data is generated based on the second instruction data and content data, and the delivery data is stored. In response to a user's request to access the target page, the stored delivery data is sent to the user so that the user can access the target page based on the delivery data.

[0131] Storing the delivery data can be done by storing the delivery data on a server.

[0132] In another possible implementation, preview data for the target page is generated based on the second instruction data, the adaptation layer, and the content data. This preview data is then stored. In response to a preview request from the management end for the target page, the target page is displayed based on the stored preview data.

[0133] Storing the preview data can be done by storing the preview data on a server.

[0134] In some embodiments, developers write second instruction data based on a front-end build tool, and can add an adapter layer for any component within the front-end build tool. In this embodiment, the front-end build tool has two entry points: one generates deployment data based on the written second instruction data, and the other generates preview data based on the written second instruction data and the added adapter layer.

[0135] In one possible implementation, such as Figure 6 As shown, based on the first entry point of the front-end building tool, the second instruction data and the content data are packaged to obtain the delivery data of the target page, and the delivery data is stored; in response to the user's access request, the stored delivery data is sent to the user so that the user can access the target page based on the delivery data.

[0136] Based on the second entry point of the front-end building tool, the adapter layer is obtained, and the second instruction data, the adapter layer and the content data are packaged to obtain the preview data of the target page and stored. In response to the preview request of the target page from the management end, the target page is displayed based on the stored preview data.

[0137] In some embodiments, the front-end build tool is webpack. For example... Figure 6 As shown, after bundling with webpack, the bundled data can be stored on a first server and a second server. The first server provides page output functionality, and the second server provides static resources for the page. In some embodiments, the first server is a Node.js server, and the second server is a COS server.

[0138] In some embodiments, the second instruction data is instruction data written based on the first front-end framework, and the second instruction data includes the database of the first front-end framework; after rendering the preview page of the target page based on the third instruction data and the content data configured for the target page, the method further includes: replacing the database of the first front-end framework in the second instruction data with the database of the second front-end framework to obtain fifth instruction data, the second front-end framework being a framework edited based on the first front-end framework, the second front-end framework being compatible with the first front-end framework, and the data volume of the database of the second front-end framework being smaller than the data volume of the first front-end framework; generating delivery data for the target page based on the fifth instruction data and the content data, and storing the delivery data; and in response to an access request from a user, sending the stored delivery data to the user so that the user can access the target page based on the delivery data.

[0139] By replacing the database of the first front-end framework with the database of the second front-end framework, not only can the performance of the second instruction data be guaranteed, but the size of the front-end framework is also reduced, further improving the performance of the second instruction data.

[0140] In some embodiments, the first front-end framework is the React framework, a JavaScript front-end framework used for quickly building user interface interactions. In some embodiments, the second front-end framework is the Preact framework, which is a smaller React framework composed of extracted and rewritten core code based on the ReactJS concept. Because client-side applications have high performance requirements, using the React framework to write command data for the page can meet these requirements. However, using the React framework to write command data for the page results in a large resource footprint, leading to a prolonged blank screen when the target page is displayed on the client side. Replacing the React framework with the Preact framework during packaging not only does not degrade performance but also reduces the size of dependent resources, thereby improving network transmission speed and reducing blank screen time.

[0141] It should be noted that, in order to improve the efficiency of displaying the target page on the user's end, when the user accesses the target page, the server parses the HTML (Hyper Text Markup Language) file of the target page, obtains the static resources of the target page, and returns the parsed HTML file and static resources to the user's end. The user's end then directly renders the target page based on the parsed HTML file and static resources.

[0142] Among them, HTML files are files generated when the data to be deployed is stored on the server.

[0143] Furthermore, when accessing the target page, the management terminal can display the page in the same way as the user terminal, or they can display it differently. For example, ... Figure 7 As shown, the first server responds to the management terminal's access request for the target page by calling the target page's interface, obtaining interface data, rendering components based on the interface data, outputting an HTML file, and sending the HTML file of the target page to the management terminal. The management terminal receives the HTML file, parses it, obtains static resources from the second server based on the parsed HTML file, and renders the target page based on the parsed HTML file and static resources. Subsequently, other business interfaces can be triggered based on the target page to interact with the first server.

[0144] In some embodiments, the method provided in this application is applied to the development of advertising landing pages. The landing pages for different advertisements use the same template. That is, developers can develop a set of instruction data for landing pages based on the planned components and their functions. Subsequently, based on this set of instruction data and the configuration page on the management end, landing pages for different advertisements are configured.

[0145] In some embodiments, the management terminal is the merchant terminal. Developers design different landing page templates and second instruction data, and merchants can select a suitable template to configure the advertising landing page on the management terminal.

[0146] Figure 8 This is a block diagram of a page preview device according to an embodiment of this application. The device is used to perform the above-described page preview method. (See also...) Figure 8 The device includes:

[0147] The first acquisition module 801 is used to acquire the first preview requirement information of the target page in the preview scenario based on the component composition information of the components in the target page. The component composition information is used to indicate the composition of the components constituting the target page, and the first preview requirement information is used to indicate the display style data of the components required to preview the target page.

[0148] The first generation module 802 is used to generate an adaptation layer based on the first preview requirement information. The adaptation layer includes first instruction data, which is used to extract the display style data.

[0149] The second acquisition module 803 is used to acquire the second instruction data of the target page, the second instruction data including the display style data and interaction logic data of the component;

[0150] The extraction module 804 is used to extract the second instruction data based on the first instruction data to obtain third instruction data, wherein the third instruction data includes the display style data of the component;

[0151] The rendering module 805 is used to render a preview page of the target page based on the third instruction data and the content data configured for the target page. The content data is used to represent the display content configured for the component, and the preview page is used to present the display effect of the target page.

[0152] like Figure 9 As shown, in one possible implementation, the first generation module 802 includes:

[0153] The first acquisition unit 8021 is used to acquire component function information of the component, wherein the component function information is used to represent the function of the component;

[0154] The second acquisition unit 8022 is used to acquire second preview requirement information of the target page in the preview scenario based on the component function information. The second preview requirement information is used to represent the target function of the component that affects the display effect of the target page.

[0155] The generation unit 8023 is used to generate the first instruction data based on the first preview requirement information and the second preview requirement information. The first instruction data is used to extract the display style data and the interaction logic data corresponding to the target function.

[0156] In one possible implementation, the adaptation layer further includes fourth instruction data; the first generation module 802 further includes:

[0157] The third acquisition unit 8024 is used to acquire the first data format on the local side of the management terminal and the second data format on the server side.

[0158] The fourth acquisition unit 8025 is used to acquire the third preview requirement information of the target page in the preview scenario based on the first data format and the second data format. The third preview requirement information is used to indicate the data format of the data required to preview the target page.

[0159] The generation unit 8023 is used to generate the fourth instruction data based on the third preview requirement information. The fourth instruction data is used to convert the content data from the first data format to the second data format.

[0160] In one possible implementation, the rendering module 805 is used to perform format conversion on the content data based on the fourth instruction data to obtain converted content data; and to render a preview page of the target page based on the third instruction data and the converted content data.

[0161] In one possible implementation, the device further includes at least one of the following modules:

[0162] The delivery module 806 is used to package the second instruction data and the content data based on the first entry point of the front-end building tool to obtain the delivery data of the target page and store the delivery data; in response to the access request of the user terminal, it sends the stored delivery data to the user terminal so that the user terminal can access the target page based on the delivery data;

[0163] The preview module 807 is used to obtain the adaptation layer based on the second entry point of the front-end building tool, package the second instruction data, the adaptation layer and the content data to obtain preview data of the target page, and store the preview data; in response to the preview request of the target page from the management terminal, the target page is displayed based on the stored preview data.

[0164] In one possible implementation, the second instruction data is instruction data written based on the first front-end framework, and the second instruction data includes the database of the first front-end framework; the apparatus further includes:

[0165] Replacement module 808 is used to replace the database of the first front-end framework in the second instruction data with the database of the second front-end framework to obtain the fifth instruction data. The second front-end framework is a framework edited based on the first front-end framework. The second front-end framework is compatible with the first front-end framework, and the data volume of the database of the second front-end framework is smaller than the data volume of the first front-end framework.

[0166] The second generation module 809 is used to generate the delivery data of the target page based on the fifth instruction data and the content data, and to store the delivery data;

[0167] The sending module 810 is used to send the stored delivery data to the user terminal in response to the user terminal's access request, so that the user terminal can access the target page based on the delivery data.

[0168] It should be noted that the page preview method provided in the above embodiments is only an example of the division of the above functional modules when previewing a page. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the computer device can be divided into different functional modules to complete all or part of the functions described above. In addition, the page preview device and page preview method embodiments provided in the above embodiments belong to the same concept, and their specific implementation process can be found in the method embodiments, which will not be repeated here.

[0169] In this application embodiment, the computer device can be configured as a terminal or a server. When the computer device is configured as a terminal, the terminal acts as the execution subject to implement the technical solution provided in this application embodiment; when the computer device is configured as a server, the server acts as the execution subject to implement the technical solution provided in this application embodiment; or, the technical solution provided in this application can be implemented through the interaction between the terminal and the server. This application embodiment does not limit this.

[0170] Figure 10 This is a structural block diagram of a terminal provided in an embodiment of this application. The terminal 1000 is used to execute the steps executed by the terminal in the above embodiments, and can be a portable mobile terminal, such as a laptop computer, desktop computer, intelligent voice interaction device, smart home appliance, vehicle terminal, etc.

[0171] Typically, terminal 1000 includes a processor 1001 and a memory 1002.

[0172] Processor 1001 may include one or more processing cores, such as a quad-core processor, an octa-core processor, etc. Processor 1001 may be implemented using at least one hardware form selected from DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). Processor 1001 may also include a main processor and a coprocessor. The main processor, also known as a CPU (Central Processing Unit), is used to process data in the wake-up state; the coprocessor is a low-power processor used to process data in the standby state. In some embodiments, processor 1001 may integrate a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content required to be displayed on the screen. In some embodiments, processor 1001 may also include an AI (Artificial Intelligence) processor, which is used to handle computational operations related to machine learning.

[0173] The memory 1002 may include one or more computer-readable storage media, which may be non-transitory. The memory 1002 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices or flash memory devices. In some embodiments, the non-transitory computer-readable storage media in the memory 1002 are used to store at least one program code, which is executed by the processor 1001 to implement the page preview method provided in the method embodiments of this application.

[0174] In some embodiments, the terminal 1000 may also optionally include a peripheral device interface 1003 and at least one peripheral device. The processor 1001, memory 1002, and peripheral device interface 1003 can be connected via a bus or signal line. Each peripheral device can be connected to the peripheral device interface 1003 via a bus, signal line, or circuit board. Specifically, the peripheral device includes at least one of the following: a radio frequency circuit 1004, a display screen 1005, a camera assembly 1006, an audio circuit 1007, and a power supply 1008.

[0175] Peripheral device interface 1003 can be used to connect at least one I / O (Input / Output) related peripheral device to processor 1001 and memory 1002. In some embodiments, processor 1001, memory 1002 and peripheral device interface 1003 are integrated on the same chip or circuit board; in some other embodiments, any one or two of processor 1001, memory 1002 and peripheral device interface 1003 can be implemented on separate chips or circuit boards, and this application embodiment does not limit this.

[0176] The radio frequency (RF) circuit 1004 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. The RF circuit 1004 communicates with communication networks and other communication devices via electromagnetic signals. The RF circuit 1004 converts electrical signals into electromagnetic signals for transmission, or converts received electromagnetic signals back into electrical signals. Optionally, the RF circuit 1004 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a user identity module card, etc. The RF circuit 1004 can communicate with other terminals via at least one wireless communication protocol. This wireless communication protocol includes, but is not limited to: the World Wide Web, metropolitan area networks, intranets, various generations of mobile communication networks (2G, 3G, 4G, and 5G), wireless local area networks, and / or WiFi (Wireless Fidelity) networks. In some embodiments, the RF circuit 1004 may also include circuitry related to NFC (Near Field Communication), which is not limited in this application.

[0177] Display screen 1005 is used to display a UI (User Interface). The UI may include graphics, text, icons, videos, and any combination thereof. When display screen 1005 is a touch display screen, it also has the ability to collect touch signals on or above its surface. These touch signals can be input as control signals to processor 1001 for processing. In this case, display screen 1005 can also be used to provide virtual buttons and / or a virtual keyboard, also known as soft buttons and / or a soft keyboard. In some embodiments, there may be one display screen 1005, serving as the front panel of terminal 1000; in other embodiments, there may be at least two display screens, respectively disposed on different surfaces of terminal 1000 or in a folded design; in still other embodiments, display screen 1005 may be a flexible display screen, disposed on a curved or folded surface of terminal 1000. Furthermore, display screen 1005 may also be configured as a non-rectangular, irregular shape, i.e., a non-rectangular screen. The display screen 1005 can be made of materials such as LCD (Liquid Crystal Display) and OLED (Organic Light-Emitting Diode).

[0178] The camera assembly 1006 is used to acquire images or videos. Optionally, the camera assembly 1006 includes a front-facing camera and a rear-facing camera. Typically, the front-facing camera is located on the front panel of the terminal, and the rear-facing camera is located on the back of the terminal. In some embodiments, there are at least two rear-facing cameras, which are any one of a main camera, a depth-sensing camera, a wide-angle camera, and a telephoto camera, to achieve background blurring by fusion of the main camera and the depth-sensing camera, panoramic shooting by fusion of the main camera and the wide-angle camera, VR (Virtual Reality) shooting, or other fusion shooting functions. In some embodiments, the camera assembly 1006 may also include a flash. The flash can be a single-color temperature flash or a dual-color temperature flash. A dual-color temperature flash refers to a combination of a warm-light flash and a cool-light flash, which can be used for light compensation at different color temperatures.

[0179] The audio circuit 1007 may include a microphone and a speaker. The microphone is used to collect sound waves from the user and the environment, converting the sound waves into electrical signals that are input to the processor 1001 for processing, or input to the radio frequency circuit 1004 for voice communication. For stereo sound acquisition or noise reduction purposes, multiple microphones may be used, each positioned at a different location on the terminal 1000. The microphone may also be an array microphone or an omnidirectional microphone. The speaker is used to convert electrical signals from the processor 1001 or the radio frequency circuit 1004 into sound waves. The speaker may be a conventional diaphragm speaker or a piezoelectric ceramic speaker. When the speaker is a piezoelectric ceramic speaker, it can convert electrical signals not only into audible sound waves but also into inaudible sound waves for purposes such as distance measurement. In some embodiments, the audio circuit 1007 may also include a headphone jack.

[0180] The power supply 1008 is used to power the various components in the terminal 1000. The power supply 1008 can be AC ​​power, DC power, a disposable battery, or a rechargeable battery. When the power supply 1008 includes a rechargeable battery, the rechargeable battery can support wired charging or wireless charging. The rechargeable battery can also be used to support fast charging technology.

[0181] In some embodiments, the terminal 1000 further includes one or more sensors 1010. The one or more sensors 1010 include, but are not limited to: an acceleration sensor 1011, a gyroscope sensor 1012, a pressure sensor 1013, an optical sensor 1014, and a proximity sensor 1015.

[0182] Accelerometer 1011 can detect the magnitude of acceleration along the three coordinate axes of a coordinate system established by terminal 1000. For example, accelerometer 1011 can be used to detect the components of gravitational acceleration along the three coordinate axes. Processor 1001 can control display screen 1005 to display the user interface in either a landscape or portrait view based on the gravitational acceleration signal acquired by accelerometer 1011. Accelerometer 1011 can also be used for games or for acquiring user motion data.

[0183] The gyroscope sensor 1012 can detect the orientation and rotation angle of the terminal 1000. The gyroscope sensor 1012, in conjunction with the accelerometer sensor 1011, can collect 3D motion data from the user on the terminal 1000. Based on the data collected by the gyroscope sensor 1012, the processor 1001 can perform the following functions: motion sensing (e.g., changing the UI based on the user's tilt), image stabilization during shooting, game control, and inertial navigation.

[0184] The pressure sensor 1013 can be disposed on the side bezel of the terminal 1000 and / or on the lower layer of the display screen 1005. When the pressure sensor 1013 is disposed on the side bezel of the terminal 1000, it can detect the user's grip signal on the terminal 1000, and the processor 1001 can perform left / right hand recognition or quick operation based on the grip signal collected by the pressure sensor 1013. When the pressure sensor 1013 is disposed on the lower layer of the display screen 1005, the processor 1001 can control the operable controls on the UI interface based on the user's pressure operation on the display screen 1005. The operable controls include at least one of button controls, scroll bar controls, icon controls, and menu controls.

[0185] An optical sensor 1014 is used to collect ambient light intensity. In one embodiment, the processor 1001 can control the display brightness of the display screen 1005 based on the ambient light intensity collected by the optical sensor 1014. Specifically, when the ambient light intensity is high, the display brightness of the display screen 1005 is increased; when the ambient light intensity is low, the display brightness of the display screen 1005 is decreased. In another embodiment, the processor 1001 can also dynamically adjust the shooting parameters of the camera assembly 1006 based on the ambient light intensity collected by the optical sensor 1014.

[0186] The proximity sensor 1015, also known as a distance sensor, is typically installed on the front panel of the terminal 1000. The proximity sensor 1015 is used to detect the distance between the user and the front of the terminal 1000. In one embodiment, when the proximity sensor 1015 detects that the distance between the user and the front of the terminal 1000 is gradually decreasing, the processor 1001 controls the display screen 1005 to switch from a screen-on state to a screen-off state; when the proximity sensor 1015 detects that the distance between the user and the front of the terminal 1000 is gradually increasing, the processor 1001 controls the display screen 1005 to switch from a screen-off state to a screen-on state.

[0187] Those skilled in the art will understand that Figure 10 The structure shown does not constitute a limitation on terminal 1000 and may include more or fewer components than shown, or combine certain components, or use different component arrangements.

[0188] Figure 11This is a schematic diagram of a server structure provided in an embodiment of this application. The server 1100 can vary significantly due to different configurations or performance. It may include one or more Central Processing Units (CPUs) 1101 and one or more memories 1102. The memories 1102 store at least one line of program code, which is loaded and executed by the processor 1101 to implement the methods provided in the above-described method embodiments. Of course, the server may also have wired or wireless network interfaces, a keyboard, and input / output interfaces for input and output. The server may also include other components for implementing device functions, which will not be elaborated upon here.

[0189] This application also provides a computer device, which includes a processor and a memory. The memory stores at least one piece of program code, which is loaded by the processor and executes the operations performed in the page preview method of the above embodiments.

[0190] This application also provides a computer-readable storage medium storing at least one computer program, which is loaded and executed by a processor to implement the page preview method as described in the above embodiments.

[0191] This application also provides a computer program product or computer program that includes computer program code stored in a computer-readable storage medium. A processor of a computer device reads the computer program code from the computer-readable storage medium and executes the computer program code, causing the computer device to perform the operations performed in the page preview method of the above embodiments.

[0192] Those skilled in the art will understand that all or part of the steps of the above embodiments can be implemented by hardware, or by a program or program code related to hardware. The program can be stored in a computer-readable storage medium, such as a read-only memory, a disk, or an optical disk.

[0193] The above description is merely an optional embodiment of this application and is not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A page preview method, characterized in that, The method includes: Based on the component composition information of the components in the target page, the first preview requirement information of the target page in the preview scenario is obtained. The component composition information is used to indicate the composition of the components that make up the target page, and the first preview requirement information is used to indicate the display style data of the components required to preview the target page. Based on the first preview requirement information, an adaptation layer is generated. The adaptation layer includes first instruction data, which is used to extract the display style data. Obtain second instruction data from the target page, the second instruction data including the display style data and interaction logic data of the component; Based on the first instruction data, the second instruction data is extracted to obtain the third instruction data, which includes the display style data of the component; Based on the third instruction data and the content data configured for the target page, a preview page of the target page is rendered. The content data is used to represent the display content configured for the component, and the preview page is used to present the display effect of the target page.

2. The method according to claim 1, characterized in that, The step of generating an adaptation layer based on the first preview requirement information includes: Obtain the component function information of the component, which is used to represent the function of the component; Based on the component function information, the second preview requirement information of the target page in the preview scenario is obtained. The second preview requirement information is used to represent the target function of the component that affects the display effect of the target page. Based on the first preview requirement information and the second preview requirement information, the first instruction data is generated. The first instruction data is used to extract the display style data and the interaction logic data corresponding to the target function.

3. The method according to claim 1 or 2, characterized in that, The adaptation layer also includes fourth instruction data; The process of generating the fourth instruction data includes: Obtain the first data format from the management terminal and the second data format from the server. Based on the first data format and the second data format, the third preview requirement information of the target page in the preview scenario is obtained. The third preview requirement information is used to represent the data format of the data required to preview the target page. Based on the third preview requirement information, the fourth instruction data is generated, which is used to convert the content data from the first data format to the second data format.

4. The method according to claim 3, characterized in that, The step of rendering a preview page of the target page based on the third instruction data and the content data configured for the target page includes: Based on the fourth instruction data, the content data is format-converted to obtain the converted content data; Based on the third instruction data and the converted content data, a preview page of the target page is rendered.

5. The method according to claim 1, characterized in that, After rendering the preview page of the target page based on the third instruction data and the content data configured for the target page, the method further includes at least one of the following implementation methods: Based on the first entry point of the front-end building tool, the second instruction data and the content data are packaged to obtain the delivery data of the target page, and the delivery data is stored. In response to an access request from a user, the stored delivery data is sent to the user so that the user can access the target page based on the delivery data. Based on the second entry point of the front-end building tool, the adaptation layer is obtained, and the second instruction data, the adaptation layer and the content data are packaged to obtain the preview data of the target page, and the preview data is stored. In response to a preview request from the management terminal for the target page, the target page is displayed based on the stored preview data.

6. The method according to claim 1, characterized in that, The second instruction data is instruction data written based on the first front-end framework, and the second instruction data includes the database of the first front-end framework; After rendering the preview page of the target page based on the third instruction data and the content data configured for the target page, the method further includes: The database of the first front-end framework in the second instruction data is replaced with the database of the second front-end framework to obtain the fifth instruction data. The second front-end framework is a framework edited based on the first front-end framework. The second front-end framework is compatible with the first front-end framework, and the data volume of the database of the second front-end framework is smaller than the data volume of the first front-end framework. Based on the fifth instruction data and the content data, the delivery data for the target page is generated and stored. In response to an access request from a user, the stored delivery data is sent to the user so that the user can access the target page based on the delivery data.

7. A page preview device, characterized in that, The device includes: The first acquisition module is used to acquire the first preview requirement information of the target page in the preview scenario based on the component composition information of the components in the target page. The component composition information is used to indicate the composition of the components constituting the target page, and the first preview requirement information is used to indicate the display style data of the components required to preview the target page. The first generation module is used to generate an adaptation layer based on the first preview requirement information. The adaptation layer includes second instruction data, which is used to extract the display style data. The second acquisition module is used to acquire the first instruction data of the target page, wherein the first instruction data includes the display style data and interaction logic data of the component; An extraction module is used to extract the first instruction data based on the second instruction data to obtain third instruction data, wherein the third instruction data includes the display style data of the component; The rendering module is used to render a preview page of the target page based on the third instruction data and the content data configured for the target page. The content data is used to represent the display content configured for the component, and the preview page is used to present the display effect of the target page.

8. A computer device, characterized in that, The computer device includes a processor and a memory, the memory being used to store at least one computer program, the at least one computer program being loaded by the processor and executed as the page preview method according to any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium is used to store at least one computer program for performing the page preview method according to any one of claims 1 to 6.

10. A computer program product, comprising computer program code, characterized in that, The computer program code is stored in a computer-readable storage medium, and the processor of the computer device reads the computer program code from the computer-readable storage medium. The processor executes the computer program code, causing the computer device to perform the page preview method according to any one of claims 1 to 6.

Images