A page rendering method, apparatus, device, and storage medium

Abstract

This application discloses a page rendering method, apparatus, device, and storage medium. The method includes: in response to a details viewing operation triggered for target promotional information, obtaining target skeleton screen description information from the details page jump parameters of the target promotional information; the target skeleton screen description information is generated based on a skeleton screen description protocol according to the component layout structure in the target details page, and the skeleton screen description protocol includes a mapping relationship between component types and component feature description templates; parsing the target skeleton screen description information to determine the skeleton screen element corresponding to the target component in the target details page, as well as the layout position and layout style of the skeleton screen element; and rendering and displaying the target skeleton screen page corresponding to the target details page based on the skeleton screen element and its layout position and layout style. This method is applicable to rendering corresponding skeleton screen pages for promotional information details pages with diverse layout structures.

Description

Technical Field

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

[0002] A skeleton screen is a preliminary layout of the page displayed before the page rendering data is fully loaded. It includes placeholder graphics in areas where data is waiting to be loaded. Once the actual page rendering data is obtained, the skeleton screen is replaced, and the actual page content is displayed. Displaying the preliminary layout while the page is loading can alleviate user anxiety while waiting for the page to load, making the loading process more natural and smooth.

[0003] In related technologies, skeleton screen rendering data is typically pre-generated and integrated into the corresponding application. Specifically, when creating an application, developers can upload page layout code to a backend server. The backend server can then generate corresponding skeleton screen rendering data based on this code and integrate it into the application. When a user triggers a view of a page within this application via a terminal device, the device can render and display the corresponding skeleton screen page based on the integrated skeleton screen rendering data before loading the actual page data.

[0004] However, the skeleton screen rendering method described above has certain limitations. It is only applicable to pages with a fixed layout structure in an application, such as the application's homepage or product display pages. It is not suitable for promotional information detail pages with diverse layout structures (such as advertising landing pages). This is because the number of promotional messages displayed in an application is usually extremely large, and the layout structure of promotional information detail pages is rich and varied, with rapidly updated display styles. It is obviously impossible to integrate skeleton screen rendering data corresponding to various promotional information detail pages in an application. Summary of the Invention

[0005] This application provides a page rendering method, apparatus, device, and storage medium, which is applicable to rendering skeleton screen pages corresponding to promotional information detail pages with diverse layout structures, and can improve the user's viewing experience while waiting for the promotional information detail page to load.

[0006] In view of the above, the first aspect of this application provides a page rendering method, the method comprising:

[0007] In response to a details viewing operation triggered by a target promotional information, target skeleton screen description information is obtained from the details page jump parameters of the target promotional information; the target skeleton screen description information is generated based on the skeleton screen description protocol according to the component layout structure in the target details page, the skeleton screen description protocol includes the mapping relationship between component types and component feature description templates, and the target details page is the details page corresponding to the target promotional information;

[0008] The target skeleton screen description information is parsed to determine the skeleton screen element corresponding to the target component in the target details page, as well as the layout position and layout style of the skeleton screen element;

[0009] Based on the skeleton screen element, and the layout position and layout style of the skeleton screen element, the target skeleton screen page corresponding to the target details page is rendered and displayed.

[0010] A second aspect of this application provides a page rendering apparatus, the apparatus comprising:

[0011] The information acquisition module is used to respond to the details viewing operation triggered for the target promotion information, and to obtain the target skeleton screen description information from the details page jump parameters of the target promotion information; the target skeleton screen description information is generated based on the skeleton screen description protocol according to the component layout structure in the target details page, the skeleton screen description protocol includes the mapping relationship between component types and component feature description templates, and the target details page is the details page corresponding to the target promotion information;

[0012] The information parsing module is used to parse the target skeleton screen description information, determine the skeleton screen element corresponding to the target component in the target details page, and the layout position and layout style of the skeleton screen element;

[0013] The skeleton screen rendering module is used to render and display the target skeleton screen page corresponding to the target details page based on the skeleton screen element and the layout position and layout style of the skeleton screen element.

[0014] A third aspect of this application provides an apparatus comprising a processor and a memory:

[0015] The memory is used to store computer programs;

[0016] The processor is configured to perform the steps of the page rendering method as described in the first aspect above, according to the computer program.

[0017] A fourth aspect of this application provides a computer-readable storage medium for storing a computer program for performing the steps of the page rendering method described in the first aspect.

[0018] A fifth aspect of this application provides a computer program product or computer program including computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the steps of the page rendering method described in the first aspect.

[0019] As can be seen from the above technical solutions, the embodiments of this application have the following advantages:

[0020] This application provides a page rendering method that innovatively proposes a skeleton screen description protocol. Based on this protocol, skeleton screen description information corresponding to the promotional information details page can be generated, and this skeleton screen description information can be added to the promotional information details page redirection parameters. Accordingly, when a user triggers a details viewing operation on the promotional information, before the page rendering data of the promotional information details page is loaded, the skeleton screen description information can be obtained from the promotional information details page redirection parameters, and the skeleton screen page corresponding to the promotional information details page is rendered and displayed based on this skeleton screen description information. For promotional information details pages with diverse layout structures, describing the corresponding skeleton screen page in the above manner and carrying the skeleton screen description information in the promotional information details page redirection parameters enables the application delivering the promotional information to successfully render the skeleton screen page corresponding to the promotional information details page, helping to improve the user's viewing experience while waiting for the promotional information details page to load. Attached Figure Description

[0021] Figure 1 This is a schematic diagram illustrating an application scenario of the page rendering method provided in the embodiments of this application;

[0022] Figure 2 A flowchart illustrating the page rendering method provided in an embodiment of this application;

[0023] Figure 3 A schematic diagram of the target skeleton screen page provided in an embodiment of this application;

[0024] Figure 4 A flowchart illustrating the method for generating skeleton screen description information provided in an embodiment of this application;

[0025] Figure 5 A schematic diagram illustrating the styles of various components provided in the embodiments of this application;

[0026] Figure 6 A schematic diagram of the target details page provided in an embodiment of this application;

[0027] Figure 7 This is a schematic diagram of the structure of a first type of page rendering apparatus provided in an embodiment of this application;

[0028] Figure 8 This is a schematic diagram of the structure of a second page rendering apparatus provided in an embodiment of this application;

[0029] Figure 9 This is a schematic diagram of the structure of a third page rendering device provided in the embodiments of this application;

[0030] Figure 10 This is a schematic diagram of the structure of the fourth page rendering device provided in the embodiments of this application;

[0031] Figure 11 This is a schematic diagram of the structure of the fifth page rendering device provided in the embodiments of this application;

[0032] Figure 12 This is a schematic diagram of the structure of the terminal device provided in the embodiments of this application;

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

[0034] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of the present application.

[0035] The terms “first,” “second,” “third,” “fourth,” etc. (if present) in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a particular order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms “comprising” and “having,” and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0036] In related technologies, skeleton screen rendering data is typically generated during application development and integrated into the application's codebase. When a specific page of the application needs to be displayed, the skeleton screen rendering data corresponding to that page can be obtained from the application's codebase, and then the corresponding skeleton screen page can be rendered and displayed based on that data. However, this method is only suitable for pages with a simple and fixed layout structure within the application, and is not suitable for promotional information detail pages with diverse layout structures.

[0037] To address the problems existing in the aforementioned related technologies, this application provides a page rendering method. This method can render corresponding skeleton screen pages for promotional information detail pages with diverse layout structures, thereby improving the user's viewing experience while waiting for the promotional information detail page to load.

[0038] Specifically, in the page rendering method provided in this application embodiment, in response to a details viewing operation triggered for target promotional information, target skeleton screen description information is obtained from the details page jump parameters of the target promotional information. This target skeleton screen description information is generated based on the skeleton screen description protocol according to the component layout structure in the target details page. The skeleton screen description protocol here includes the mapping relationship between component types and component feature description templates. The target details page here is the details page corresponding to the target promotional information. Furthermore, the target skeleton screen description information is parsed to determine the skeleton screen element corresponding to the target component in the target details page, as well as the layout position and layout style of the skeleton screen element. Finally, based on the skeleton screen element and its layout position and layout style, the target skeleton screen page corresponding to the target details page is rendered and displayed.

[0039] The aforementioned page rendering method innovatively proposes a skeleton screen description protocol. Based on this protocol, skeleton screen description information corresponding to the promotional information details page can be generated, and this skeleton screen description information can be added to the details page redirection parameters of the promotional information. When a user triggers a details viewing operation for the promotional information, the skeleton screen description information can be obtained from the details page redirection parameters of the promotional information, and the corresponding skeleton screen page of the promotional information details page can be rendered based on this skeleton screen description information. For promotional information details pages with diverse layout structures, describing the corresponding skeleton screen page of the promotional information details page in the above manner and carrying the skeleton screen description information in the details page redirection parameters of the promotional information can enable the application that is delivering the promotional information to successfully render the corresponding skeleton screen page of the promotional information details page, which helps to improve the user's viewing experience while waiting for the promotional information details page to load.

[0040] It should be understood that the page rendering method provided in this application embodiment can be applied to terminal devices that support application operation, such as smartphones, computers, tablets, personal digital assistants (PDAs), etc.

[0041] To facilitate understanding of the page rendering method provided in the embodiments of this application, the application scenarios of the page rendering method provided in the embodiments of this application will be introduced by way of example below.

[0042] See Figure 1 , Figure 1 This is a schematic diagram illustrating an application scenario of the page rendering method provided in an embodiment of this application. For example... Figure 1 As shown, this application scenario includes terminal device 110, terminal device 120, and server 130. Terminal device 110 is for users of the target application and is used to execute the page rendering method provided in this embodiment. Terminal device 120 has a promotional information delivery client installed. This client supports users in creating promotional information detail pages and promotional information, and can deliver the created promotional information to the target application in response to user-triggered delivery operations. Server 130 is the backend server for the promotional information delivery client. It can cooperate with the client to generate promotional information detail pages, corresponding skeleton screen description information, and promotional information, and push the promotional information to the target application installed on terminal device 110.

[0043] In practical applications, users can create promotional information detail pages through the promotional information delivery client on terminal device 120, and lay out various components accordingly based on actual design requirements. After detecting that the user has confirmed the completion of the layout design for the promotional information detail page, terminal device 120 can send the promotional information detail page to server 130. Then, server 130 can generate skeleton screen description information corresponding to the promotional information detail page based on the skeleton screen description protocol and the component layout structure in the promotional information detail page; the skeleton screen description protocol here includes the mapping relationship between component types and component feature description templates.

[0044] After creating a promotional information details page, users can use the promotional information delivery client to further create promotional information that can be delivered to target applications based on the created details page. This promotional information can also be understood as the entry point for viewing the promotional information details page. When terminal device 120 detects that a user selects to further create promotional information based on a certain promotional information details page through the promotional information delivery client, it can generate a promotional information creation request and send it to server 130. This request carries the identifier of the promotional information details page. Subsequently, server 130 can add the skeleton screen description information corresponding to the promotional information details page and the redirection path of the promotional information details page to the redirection parameters of the promotional information details page.

[0045] At this point, the promotional information client in terminal device 120 and server 130 have completed the creation of promotional information. Server 130 can then use this promotional information as target promotional information and deliver it to the target application installed in terminal device 110. Users can choose whether to view the details of the target promotional information according to their own needs, that is, choose whether to view the promotional information details page of the target promotional information.

[0046] When terminal device 110 detects that a user triggers a details viewing operation for target promotional information through a target application, such as when the user clicks on target promotional information pushed by the target application, terminal device 110 can obtain target skeleton screen information from the details page redirection parameters of the target promotional information. As described above, this target skeleton screen description information is generated based on the skeleton screen description protocol according to the component layout structure in the details page of the target promotional information (hereinafter referred to as the target details page). Then, terminal device 110 can parse the target skeleton screen description information to determine the skeleton screen element corresponding to the target component in the target details page, as well as the layout position and layout style of the skeleton screen element. Furthermore, terminal device 110 can render the skeleton screen page corresponding to the target details page according to the skeleton screen element corresponding to the target component, as well as the layout position and layout style of the skeleton screen element.

[0047] It should be understood that Figure 1 The application scenarios shown are merely examples. In practical applications, promotional information detail pages and promotional information can also be created in other ways. Furthermore, the server used to create the promotional information and the server used to deliver the promotional information can be the same server or different servers. No limitations are made here regarding the application scenarios of the page rendering method provided in this application embodiment.

[0048] The page rendering method provided in this application will be described in detail below through method embodiments.

[0049] See Figure 2, Figure 2 This is a flowchart illustrating the page rendering method provided in an embodiment of this application. The following embodiments describe the page rendering method using a terminal device as the executing entity. Figure 2 As shown, the page rendering method includes the following steps:

[0050] Step 201: In response to a details viewing operation triggered for the target promotional information, obtain the target skeleton screen description information from the details page jump parameters of the target promotional information; the target skeleton screen description information is generated based on the skeleton screen description protocol according to the component layout structure in the target details page, the skeleton screen description protocol includes the mapping relationship between component types and component feature description templates, and the target details page is the details page corresponding to the target promotional information.

[0051] In practical applications, users can use the promotional information delivery platform provided by the target application to deliver promotional information to users of the target application, thereby promoting the content to users of the target application. When users of the target application use the target application on their terminal devices, if they see the target promotional information pushed to them by the target application, they can further choose to trigger a details viewing operation for that promotional information. After the terminal device detects that the user has triggered a details viewing operation for the target promotional information, it can obtain the target skeleton screen description information from the details page jump parameters associated with the target promotional information. This target skeleton screen description information is used to describe the skeleton screen page corresponding to the details page (i.e., the target details page) of the target promotional information.

[0052] For example, a terminal device can display target promotional information on the target application's splash screen when it detects a user launching the target application, or it can display the target promotional information on a specific interface within the target application when it detects a user opening that interface. The user can then click on the target promotional information to view its details. Alternatively, the target application can place the target promotional information within social media feeds, interspersing it with posts from the user's friends. This promotional information can be presented as a mini-program card, which the user can then click to view its details. Another option is to place the target promotional information at the end of a push notification link's details page. For instance, inserting a mini-program card-style target promotional information at the end of a push notification link's page published by the target application. After browsing the content of the push notification link page, the user can click on the target promotional information at the end of the link to view its details.

[0053] It should be understood that the above-mentioned forms of target application pushing target promotional information and the forms of user triggering details viewing operation for target promotional information are only examples. In actual applications, target applications may also use other forms to push target promotional information, and may also support users to trigger details viewing operation for target promotional information through other means. This application does not impose any limitations on the form of target promotional information push or the form of triggering details viewing operation for target promotional information.

[0054] It should be noted that the aforementioned targeted promotional information can essentially be understood as a redirect entry point to the target details page. This targeted promotional information is associated with details page redirection parameters, which include the redirection path to the target details page and the corresponding target skeleton screen description information. In practical applications, after the terminal device detects that a user has triggered a details viewing operation on the targeted promotional information, it needs to obtain the redirection path to the target details page from the details page redirection parameters associated with the targeted promotional information, and obtain the page rendering data of the target details page based on this redirection path. On the other hand, it also needs to obtain the corresponding target skeleton screen description information from the details page redirection parameters associated with the targeted promotional information, and render the corresponding target skeleton screen page based on this target skeleton screen description information.

[0055] It should be understood that the aforementioned targeted promotional information can specifically manifest as a mini-program card capable of carrying a thumbnail promotional information, such as a mini-program card with a static image cover or a mini-program card with a dynamic video cover; the targeted promotional information can also manifest as a pop-up window in an application carrying thumbnail promotional information; the targeted promotional information can also manifest as promotional information occupying the application's splash screen, which can be a static image, a dynamic video, or both. This application does not impose any limitations on the form of the targeted promotional information.

[0056] It should be noted that the target skeleton screen description information carried in the details page redirection parameters is generated based on the skeleton screen description protocol according to the component layout structure in the target details page. The skeleton screen description protocol here is a protocol specifically used to describe skeleton screen layout styles, proposed in this application embodiment; it can also be called the Type Description protocol. This skeleton screen description protocol is negotiated between the promotional information details page editor and the program used to render the promotional information details page, and is used to describe the rules of the skeleton screen page corresponding to the promotional information details page. The skeleton screen description protocol includes a mapping relationship between component types and component feature description templates. The component type refers to the type of components included in the promotional information details page, and the component feature description template corresponding to the component type is the skeleton screen element description method corresponding to the component belonging to that component type. The following will describe in detail the implementation method of generating skeleton screen description information based on the skeleton screen description protocol through another method embodiment.

[0057] In one possible implementation, when the terminal device detects a user's details viewing operation triggered by the target promotional information, it can obtain the target skeleton screen description information from the details page jump parameters of the target promotional information in the following way: in response to the details viewing operation triggered by the target promotional information, a page rendering program is launched, and then the page rendering program parses the details page jump parameters of the target promotional information to obtain the target skeleton screen description information carried therein.

[0058] As an example, when the details page corresponding to the target promotional information (i.e. the target details page) is the landing page of the target mini-program version of the advertisement, the terminal device responds to the details viewing operation triggered for the target promotional information, triggers the launch of the landing page mini-program used to render the mini-program version of the advertisement landing page, and then obtains the target skeleton screen description information from the jump parameters of the details page of the target promotional information through the query channel of the landing page mini-program.

[0059] For example, suppose the target promotional information is a target mini-program card used to carry thumbnail advertising information, and the target details page is a target mini-program version of the advertising landing page that needs to be rendered through the landing page mini-program; after the terminal device detects that the user clicks on the target mini-program card, it can initialize the landing page mini-program runtime environment; after the initialization of the landing page mini-program is completed, it can further obtain the target skeleton screen description information carried in the jump parameters of the details page associated with the target mini-program card through the query channel of the landing page mini-program.

[0060] As another example, when the details page corresponding to the target promotional information (i.e., the target details page) is a target H5 (HTML5, Hyper Text Markup Language 5) page, after the terminal device detects the user's details viewing operation triggered by the target promotional information, the terminal device can launch the page rendering program used to render the H5 page in the application, such as a browser program. Then, the browser program parses the page jump parameters associated with the jump entry point of the target H5 page (i.e., the target promotional information) to obtain the target skeleton screen description information carried in the page jump parameters, which describes the skeleton screen page corresponding to the target H5 page.

[0061] It should be understood that in practical applications, the aforementioned target details page can also be other forms of promotional information details page. Correspondingly, the terminal device can also obtain the target skeleton screen description information from the jump parameters of the details page associated with the target promotional information through corresponding methods. This application does not impose any limitations on the form of the target details page, nor does it impose any limitations on the method of obtaining the target skeleton screen description information from the jump parameters of the details page associated with the target promotional information.

[0062] Step 202: Parse the target skeleton screen description information to determine the skeleton screen element corresponding to the target component in the target details page, as well as the layout position and layout style of the skeleton screen element.

[0063] After obtaining the target skeleton screen description information from the jump parameters of the details page associated with the target promotion information, the terminal device can further parse the target skeleton screen description information to determine the skeleton screen element corresponding to the target component in the target details page corresponding to the target promotion information, as well as the layout position and layout style of the skeleton screen element.

[0064] In practice, the terminal device can parse the target skeleton screen description information to obtain the skeleton screen element description information corresponding to the target component in the target details page; then, based on the component type represented by the skeleton screen element description information, the basic style of the target skeleton screen element corresponding to the target component is determined; furthermore, based on the layout style of the target component represented by the skeleton screen element description information, the basic style of the target skeleton screen element is adjusted to obtain the target layout style of the target skeleton screen element; and the layout position of the target component represented by the skeleton screen element description information is determined as the target layout position of the target skeleton screen element.

[0065] As described above, the target skeleton screen description information is generated based on the skeleton screen description protocol according to the component layout structure in the target details page. The skeleton screen description protocol includes the mapping relationship between component types and component feature description templates. Typically, the target skeleton screen description information generated based on this skeleton screen description protocol includes the skeleton screen element description information corresponding to each target component in the target details page. This skeleton screen element description information can characterize the component type to which its corresponding component belongs, as well as its layout style and layout position.

[0066] Based on this, after obtaining the target skeleton screen description information from the details page redirection parameters, the terminal device can retrieve the skeleton screen element description information corresponding to each target component in the target details page from this description information. For each target component in the target details page, the terminal device can determine the component type, layout style, and layout position of the target component based on the corresponding skeleton screen element description information. Based on the component type, the terminal device can determine the basic style of the target skeleton screen element; based on the layout style, it can adjust the basic style to obtain the target layout style; the layout position of the target component is essentially the target layout position of the target skeleton screen element.

[0067] For example, suppose the target skeleton screen description information is "media-600|text-36-3-0|btn-28-28|mix-L-1-400", where "media-600", "text-36-3-0", "btn-28-28", and "mix-L-1-400" are the skeleton screen element description information corresponding to each target component in the target details page, and the target components corresponding to "media-600", "text-36-3-0", "btn-28-28", and "mix-L-1-400" are arranged in a top-to-bottom order in the target details page.

[0068] When a terminal device determines the skeleton screen elements corresponding to each target component on the target details page, as well as the layout position and style of these skeleton screen elements, it can do so one by one from top to bottom. Specifically, the terminal device can determine the target skeleton screen element corresponding to the target component located at the top of the target details page, as well as its layout position and style, based on the first skeleton screen element description information "media-600" in the target skeleton screen description information. In other words, based on the skeleton screen element description information "media-600", the terminal device can determine that its corresponding target component is a media type component, and the basic style of the skeleton screen element corresponding to the media type component is a rectangle with a length equal to the page width. Based on the skeleton screen element description information "media-600", the height of its corresponding target component can be determined to be 600. Based on this, the basic style of the target skeleton screen element corresponding to the target component is adjusted to obtain a rectangle with a length equal to the page width and a width equal to 600, which is used as the target layout style of the target skeleton screen element. Since the skeleton screen element description information "media-600" is the first character in the skeleton screen description information, the area from the top edge of the target details page to a distance of 600 from that top edge can be considered the target layout position of the target skeleton screen element. Similarly, the terminal device can, in the above manner, determine the target layout position and target layout style of the target skeleton screen elements corresponding to the target components located in the second to fourth positions respectively in the target skeleton screen description information, arranged from top to bottom, on the target details page in the same manner.

[0069] It should be understood that different component types may correspond to different component feature description templates. For skeleton screen element description information generated based on different component feature description templates, the terminal device should parse the skeleton screen element description information in a corresponding manner to determine the layout style and position of the skeleton screen element corresponding to that description information. The following will describe the generation methods of various skeleton screen element description information and the corresponding meanings of various skeleton screen element description information in the method embodiments used to introduce how to generate skeleton screen description information.

[0070] Step 203: Based on the skeleton screen element and its layout position and style, render and display the target skeleton screen page corresponding to the target details page.

[0071] After the terminal device parses the target skeleton screen description information carried in the details page redirection parameters, determines the skeleton screen elements corresponding to each target component in the target details page, as well as the layout style and layout position of the skeleton screen elements, the terminal device can further render the target skeleton screen page corresponding to the target details page based on the skeleton screen elements corresponding to each target component, as well as the layout style and layout position of the skeleton screen elements.

[0072] In practice, after the terminal device determines the target layout style and target layout position of the target skeleton screen element corresponding to each target component, it can render and display the target skeleton screen element at the target layout position based on the target layout style of the target skeleton screen element; in this way, rendering and displaying the target skeleton screen element corresponding to each target component can achieve the effect of rendering and displaying the target skeleton screen page corresponding to the target details page. Figure 3 (a) and (b) are schematic diagrams of two exemplary target skeleton screen pages.

[0073] As mentioned above, the jump parameters for the target promotion information's details page include not only the target skeleton screen description information but also the jump path for the target details page corresponding to the target promotion information. While the terminal device executes steps 201 to 203 above, it also needs to obtain the jump path for the target details page from the jump parameters for the target promotion information's details page, and obtain the page rendering data for the target details page based on the jump path. After obtaining the page rendering data, the terminal device needs to hide the target skeleton screen page and render and display the target details page based on the page rendering data.

[0074] In practical applications, terminal devices need to request page rendering data for the target details page from the backend server based on the jump path in the details page jump parameters before they can render and display the target details page. Since page rendering data is generally large and needs to be transmitted over the network, rendering and displaying the target details page based on this data often takes a considerable amount of time. However, by rendering the target skeleton screen page based on the target skeleton screen description information in the details page jump parameters, the terminal device does not need to obtain large amounts of additional rendering data over the network, thus requiring significantly less time to render and display the target skeleton screen page. Therefore, when the page rendering data for the target details page is not yet available, the corresponding target skeleton screen page can be displayed first, alleviating the user's anxiety while waiting for the target details page to appear.

[0075] The aforementioned page rendering method innovatively proposes a skeleton screen description protocol. Based on this protocol, skeleton screen description information corresponding to the promotional information details page can be generated, and this skeleton screen description information can be added to the details page redirection parameters of the promotional information. When a user triggers a details viewing operation for the promotional information, the skeleton screen description information can be obtained from the details page redirection parameters of the promotional information, and the corresponding skeleton screen page of the promotional information details page can be rendered based on this skeleton screen description information. For promotional information details pages with diverse layout structures, describing the corresponding skeleton screen page of the promotional information details page in the above manner and carrying the skeleton screen description information in the details page redirection parameters of the promotional information can enable the application that is delivering the promotional information to successfully render the corresponding skeleton screen page of the promotional information details page, which helps to improve the user's viewing experience while waiting for the promotional information details page to load.

[0076] The following is a detailed description of the method for generating skeleton screen description information through method embodiments.

[0077] See Figure 4 , Figure 4 This is a flowchart illustrating a method for generating skeleton screen description information according to an embodiment of this application. The following embodiments describe this method using a server as the execution entity. Figure 4 As shown, the method for generating the skeleton screen description information includes the following steps:

[0078] Step 401: Determine the component type of each target component in the target details page, as well as the layout position and layout style of each target component.

[0079] In practical applications, users can create and edit the target promotional information's corresponding detail page (i.e., the target detail page) through the promotional information detail page editor. During the editing process, users can select components from the optional components provided by the promotional information detail page editor to deploy on the target detail page according to their design needs. They can also edit and adjust the layout style of the selected components, and drag and drop the selected components to adjust their position on the target detail page. After confirming the layout of the target detail page, the user can press the confirmation button in the promotional information detail page editor. The editor will then send the user-created target detail page to the server. Upon receiving the target detail page, the server will confirm the component type of each target component, as well as the layout position and style of each target component.

[0080] Taking the target details page as the landing page for a target mini-program ad as an example, users of the target ad can create and edit the landing page using the landing page editor. Specifically, they can select the components to be deployed on the landing page from the optional controls provided in the editor, and adjust the layout style of the selected components. For example, they can adjust the size of the selected components, the style of text elements within them, and their placement, such as dragging and dropping them to the appropriate position on the landing page. Once the landing page editor detects that the user has confirmed the completion of editing the landing page, it can send it to the server. Upon receiving the landing page, the server determines the component type, layout style, and position of each target component within it.

[0081] It should be noted that, typically, the length of a mini-program ad landing page is greater than the device screen length, or even several times the device screen length. This includes many components. Generating the skeleton screen description information corresponding to the mini-program ad landing page based on the layout structure of all components in the mini-program ad landing page often requires a lot of server processing resources. Consequently, a large skeleton screen description information needs to be carried in the jump parameters of the details page associated with the promotion information.

[0082] To reduce the processing resources required by the server and the amount of information carried in the details page redirect parameters, when the target details page is the landing page of the target mini-program version advertisement, the server can only use the components in the first screen of the target mini-program version advertisement landing page as the target components, and generate the skeleton screen description information corresponding to the target mini-program version advertisement landing page based solely on the component layout structure in the first screen of the target mini-program version advertisement landing page.

[0083] That is, after the server obtains the target mini-program version of the ad landing page created through the landing page editor, it can start from the top component of the target mini-program version of the ad landing page and proceed from top to bottom to determine whether the sum of the height of the component and the height of each component above it exceeds the height of the first screen. If not, the component is determined to be the target component. Then, for each target component determined in this way, its component type, as well as its layout position and layout style on the first screen are determined.

[0084] It should be noted that the first screen refers to the page displayed when the user does not interact with the display device (such as not swiping the phone screen) when the landing page of the mini-program advertisement is shown. The height of the first screen can be determined according to the height of the display device screen. For example, for smartphones, the corresponding height of the first screen should be 1536. Of course, this height can also be set to other values ​​according to actual needs. This application does not impose any limitation on the height of the first screen.

[0085] The following example, using a first-screen page height of 1536, illustrates the method for determining the target component. After the server obtains the target mini-program version of the ad landing page uploaded by the landing page editor, it can determine whether any component on the target mini-program version of the ad landing page is a target component, starting from the topmost component and proceeding from top to bottom. Specifically, the server can first determine if the height of the topmost component on the target mini-program ad landing page is less than 1536. If it is, the server designates that component as the target; otherwise, it confirms the target component designation and stops performing this process for subsequent components. If the first component is identified as a target component but the designation is not yet complete, the server can then determine if the sum of the height of the second component and the height of the component above it is less than 1536. If so, the server also designates the second component as a target; otherwise, it confirms the designation and stops performing this process for subsequent components. This process is repeated to determine all target components on the target mini-program ad landing page.

[0086] It should be understood that in practical applications, when the target details page is another type of page, the skeleton screen description information corresponding to the target details page can also be generated based solely on the component layout structure in the first screen of the target details page using the above method.

[0087] In one possible implementation, the server can determine the component type of the target component by: determining the component type of the target component based on the target characteristics corresponding to the target component according to the component type classification rules. Here, the target characteristics corresponding to the target component may include at least one of the following: the type of elements included in the target component, the layout of the elements included in the target component, the layout of the target component in the width direction of the page, and the layout of the target component in the length direction of the page.

[0088] The above component type classification rules are learned in advance from the training data using a rule learning algorithm. Through the rule learning algorithm, a set of rules for judging unseen examples can be learned from the training data. Specifically, these rules are those shown in equation (1):

[0089]

[0090] The part to the right of the logical implication symbol "←" is called the rule body, which represents the premise of the rule. The rule body is composed of the logical literal f. k The conjunctive expression is formed by the conjunctive symbol "∧" representing AND, where each logical literal f k These are all Boolean expressions corresponding to example attribute characteristics. L represents the number of logical literals included in the rule body, also known as the rule length. The part to the left of the logical implication symbol "←" is called the rule header, which represents the result of that rule. It is also a logical literal, used to represent the specified target category or concept.

[0091] In the method provided in the embodiments of this application, an exemplary component type classification rule can be expressed as the rule shown in equation (2):

[0092] Component type ← Contains only one type of element = (Yes / No) ∧ Fills the screen width = (Yes / No) ∧ Continuous along the screen length = (Yes / No) ∧ Text and image combination = (Yes / No) ∧ Text occupies a single area = (Yes / No) (2)

[0093] "Contains only one type of element" means the component contains only one type of element, such as a component containing only text or only images. "Fills the screen width" means the component's width equals the screen width, meaning it contains only one component that fills the entire screen width within a certain length range. "Continuous along the screen length" means the elements within a component do not have any interrupting blank areas along the screen's length, such as a component containing only images or videos. "Text and image combination" means the component contains both images and text. "Text occupies a dedicated area" means the text occupies a dedicated sub-area within the component.

[0094] This application proposes an exemplary component type classification rule, as shown in Table 1:

[0095] Table 1

[0096]

[0097] Among them, media type components, also known as region type components, are characterized by their single component element and large continuous area occupied by the screen. They typically include at least components for displaying images, components for displaying videos, components for displaying audio, and carousel components. An example media type component is as follows: Figure 5 As shown in (a) in the figure; when a target component is determined to contain only one type of element, fill the screen width, be continuous in the screen length direction, not be a combination of text and graphics, and not have text occupying a single area, the target component can be determined to be a media type component.

[0098] A form-type component includes at least a component for hosting an input box control. An example form-type component is as follows: Figure 5 As shown in (b) in the figure; when a target component is determined to contain more than one type of element, fills the screen width, is not continuous in the screen length direction, does not combine text and images, and the text does not occupy a single area, the target component can be determined to be a form type component.

[0099] Text-type components are typically composed of arranged text content, and at least include components for carrying the text content. An example text-type component is as follows: Figure 5 As shown in (c) in the figure; when a target component is determined to contain only one type of element, does not fill the screen width, is not continuous in the screen length direction, does not combine text and graphics, and the text occupies a single area, the target component can be determined to be a text-type component.

[0100] Button-type components typically occupy only a small area of ​​the screen and include at least components for hosting function buttons, components for hosting navigation links, components for hosting program navigation interfaces, and components for hosting smartphones. An example button-type component is... Figure 5 As shown in (d) in the figure; when a target component is determined to contain more than one type of element, does not fill the screen width, is not continuous in the screen length direction, does not combine text and graphics, and the text does not occupy a single area, the target component can be determined to be a button type component.

[0101] Combination-type components typically include graphic and textual layouts with a clear arrangement direction. They include at least components for supporting combinations of multiple elements, such as shelf components. An example of a combination-type component is... Figure 5 As shown in (e) in the figure; when a target component is determined to contain more than one type of element, does not fill the screen width, is not continuous in the screen length direction, is a combination of text and graphics, and the text occupies a single area, the target component can be determined to be a composite type component.

[0102] It should be understood that the component type classification rules shown in Table 1 above are only examples. In actual applications, other types of component type classification rules can be set according to actual needs. This application does not impose any limitations on these component type classification rules.

[0103] Step 402: For each target component, determine the target component feature description template corresponding to the component type of the target component based on the skeleton screen description protocol; generate skeleton screen element description information corresponding to the target component according to the layout position and layout style of the target component and the target component feature description template.

[0104] Step 403: Combine the skeleton screen element description information corresponding to each of the target components in the target details page to generate the target skeleton screen description information.

[0105] After the server identifies the target components in the target details page, it can determine a component feature description template corresponding to the component type of each target component based on the skeleton screen description protocol. This template serves as the target component feature description template. Then, based on this template, and according to the layout style and position of the target component, the server generates the corresponding skeleton screen element description information. Finally, by combining the skeleton screen element description information for each target component, the server obtains the target skeleton screen description information for the target details page.

[0106] An exemplary skeleton screen description protocol is shown in Table 2, which includes: component feature description templates corresponding to media type components, component feature description templates corresponding to form type components, component feature description templates corresponding to text-like type components, component feature description templates corresponding to button type components, and component feature description templates corresponding to composite type components.

[0107] Table 2

[0108]

[0109] Based on the skeleton screen description protocol shown in Table 2, for Figure 6When generating the target skeleton screen description information for the target details page, the server can first generate the corresponding skeleton screen element description information for the media type component at the top of the target details page that carries the image. Specifically, the server first determines that the component feature description template corresponding to the media type component is "media-height". Since the height of this media type component is 600, the corresponding skeleton screen element description information "media-600" can be generated. Based on its layout position on the target details page, the skeleton screen element description information "media-600" is placed at the first position of the target skeleton screen description information. Then, for the text-like component that carries text in the second position on the target details page, the server generates the corresponding skeleton screen element description information. Specifically, the server first determines that the component feature description template corresponding to the text-like component is "text-fontsize-lines-align". Then, based on the layout style of this text-like component, the corresponding skeleton screen element description information "text-36-3-0" is generated. Based on its layout position on the target details page, the skeleton screen element description information "text-36-3-0" is placed at the second position of the target skeleton screen description information. Similarly, the server can further generate corresponding skeleton screen element description information "btn-28-28" and "mix-L-1-340" for the button type component (located in the third position) and the combination type component (located in the fourth position) on the target details page, respectively, and place them in the third and fourth positions of the target skeleton screen description information. Thus, the final target skeleton screen description information for the target details page is "media-600|text-36-3-0|btn-28-28|mix-L-2-340".

[0110] It should be understood that the above skeleton screen description protocol is merely an example. In practical applications, the skeleton screen description protocol can also take other forms, and it can be extended according to actual needs. This application does not impose any limitations on the form of the skeleton screen description protocol. Furthermore, the above method for generating skeleton screen description information is also just an example. In practical applications, the server can also use other methods to generate corresponding skeleton screen description information based on the skeleton screen element description information corresponding to each target component.

[0111] After generating the target skeleton screen description information corresponding to the target details page using the above method, the server can further generate a redirect entry point for the target details page based on this target skeleton screen description information. Specifically, when the server detects that a user has triggered an operation to generate target promotional information based on the target details page through the promotional information delivery client, the server can obtain the target skeleton screen description information corresponding to the target details page and add this description information and the redirect path of the target details page to the redirect parameters of the target promotional information's details page accordingly, thereby generating target promotional information that can serve as a redirect entry point for the target details page.

[0112] For example, when the target details page is the landing page of the target mini-program version advertisement, the server can generate target promotion information in the following way: determine the target mini-program version advertisement landing page selected by the advertising client in the candidate mini-program version advertisement landing pages, and then obtain the target skeleton screen description information corresponding to the target mini-program version advertisement landing page; then, configure the target skeleton screen description information and the jump path of the target mini-program version advertisement landing page in the jump parameters of the details page of the target promotion information.

[0113] Specifically, when the server creates a mini-program card (i.e., target promotion information) for redirecting to the landing page of the mini-program version of the advertisement, it can first determine the target mini-program advertisement landing page selected by the advertising user through the advertising client in the candidate mini-program version of the advertisement landing page; then, it obtains the target skeleton screen description information previously generated by the server based on the target mini-program advertisement landing page, and writes the target skeleton screen description information into the details page redirection parameters of the target promotion information, such as "pages / index / index?skeletonprotocol=media-600|text-36-3-0|btn-28-28|mix-L-1-400", thus generating the corresponding target promotion information.

[0114] It should be understood that the server can also use a similar method to generate corresponding target promotion information for other types of target detail pages.

[0115] Using the above method, the server can generate corresponding target skeleton screen description information based on the component layout structure of the target details page, and further generate target promotional information based on this target skeleton screen description information. For promotional information details pages with diverse layout structures, describing the corresponding skeleton screen page in the above manner and carrying the skeleton screen description information in the promotional information details page redirection parameters allows the application delivering the promotional information to successfully render the corresponding skeleton screen page of the promotional information details page, helping to improve the user's viewing experience while waiting for the promotional information details page to load.

[0116] To facilitate a further understanding of the methods provided in the embodiments of this application, the following uses the method provided in the embodiments of this application for rendering the skeleton screen page corresponding to the landing page of the mini-program version of the advertisement as an example to provide an overall exemplary description of the methods provided in the embodiments of this application.

[0117] First, the components in the landing pages of the mini-program ads need to be categorized. Here, a rule-learning algorithm can be used to learn rules for identifying unseen examples from a large number of mini-program ad landing pages, i.e., to learn component type classification rules. An exemplary component type classification rule expression is shown below:

[0118] Component Type ← Contains only one type of element = (Yes / No) ∧ Fills the screen width = (Yes / No) ∧ Continuous along the screen length = (Yes / No) ∧ Text and image combination = (Yes / No) ∧ Text occupies a single area = (Yes / No)

[0119] For specific component type classification rules, please refer to Table 1 above.

[0120] After determining the component type classification rules applicable to the landing page of the mini-program version of the advertisement, a skeleton screen description protocol can be further formulated based on the component type classification rules. An exemplary skeleton screen description protocol can be found in Table 2 above. This skeleton screen description protocol can be extended according to actual needs.

[0121] Furthermore, based on the determined component type classification rules and skeleton screen description protocol, the server can generate corresponding target skeleton screen description information for the target mini-program version ad landing page created and edited by the user. In specific implementation, the server can first determine the components included in the first screen of the target mini-program version ad landing page as target components. Then, for each target component, its component type is determined based on the aforementioned component type classification rules. Subsequently, based on the skeleton screen description protocol, the server generates the skeleton screen element description information corresponding to the target component according to its component type, layout style, and layout position. Finally, the server combines the skeleton screen element description information corresponding to each target component to obtain the target skeleton screen description information corresponding to the target mini-program version ad landing page, such as "media-600|text-36-3-0|btn-28-28|mix-L-1-340".

[0122] When the server detects that a user creates a mini-program card (i.e., a target ad) to display the target mini-program ad landing page through the ad delivery client, based on the aforementioned target mini-program ad landing page, the server can write the target skeleton screen description information corresponding to the target mini-program ad landing page into the details page redirect parameters of the target ad, such as "pages / index / index?skeletonprotocol=media-600|text-36-3-0|btn-28-28|mix-L-1-400"; and also write the redirect path of the target mini-program ad landing page into the details page redirect parameters of the target ad.

[0123] Once the targeted ad is placed in the target application, users can click on it to trigger the viewing of the target mini-program version of the ad landing page. After the terminal device detects that the user has clicked on the targeted ad, it can initialize the runtime environment of the landing page mini-program. After the landing page mini-program starts, it can obtain the content of skeletonprotocol in the details page jump parameter from the query in the startup parameters, parse the target skeleton screen description information, and then render and display the target skeleton screen page corresponding to the target mini-program version of the ad landing page based on the layout style and layout position of each skeleton screen element described in the target skeleton screen description information.

[0124] At the same time, the landing page mini-program will also request the server to provide the page rendering data of the target mini-program version of the ad landing page based on the jump path of the target mini-program version of the ad landing page in the jump parameters of the details page. After obtaining the page rendering data of the target mini-program version of the ad landing page, the landing page mini-program hides the target skeleton screen page and renders and displays the target mini-program version of the ad landing page based on the page rendering data.

[0125] In response to the page rendering method described above, this application also provides a corresponding page rendering apparatus so that the above page rendering method can be applied and implemented in practice.

[0126] See Figure 7 , Figure 7 The above text Figure 2 The diagram shows a structural schematic of a page rendering device 700 corresponding to the page rendering method illustrated. (See attached diagram.) Figure 7 As shown, the page rendering device 700 includes:

[0127] The information acquisition module 701 is used to respond to a details viewing operation triggered for the target promotion information and obtain target skeleton screen description information from the details page jump parameters of the target promotion information; the target skeleton screen description information is generated based on the skeleton screen description protocol according to the component layout structure in the target details page, the skeleton screen description protocol includes the mapping relationship between component types and component feature description templates, and the target details page is the details page corresponding to the target promotion information;

[0128] The information parsing module 702 is used to parse the target skeleton screen description information, determine the skeleton screen element corresponding to the target component in the target details page, and the layout position and layout style of the skeleton screen element;

[0129] The skeleton screen rendering module 703 is used to render and display the target skeleton screen page corresponding to the target details page based on the skeleton screen element and the layout position and layout style of the skeleton screen element.

[0130] Optional, in Figure 7 Based on the page rendering device shown, see Figure 8 , Figure 8 This is a schematic diagram of another page rendering apparatus 800 provided in an embodiment of this application. Figure 8 As shown, the device further includes: a skeleton screen description information generation module 801; the skeleton screen description information generation module 801 includes:

[0131] The component information determination unit 8011 is used to determine the component type of each target component in the target details page, as well as the layout position and layout style of each target component.

[0132] The skeleton screen element information generation unit 8012 is used to determine, for each target component, a target component feature description template corresponding to the component type of the target component based on the skeleton screen description protocol; and to generate skeleton screen element description information corresponding to the target component based on the layout position and layout style of the target component and the target component feature description template.

[0133] The skeleton screen description information generation unit 8013 is used to combine the skeleton screen element description information corresponding to each of the target components in the target details page to generate the target skeleton screen description information.

[0134] Optional, in Figure 8 Based on the page rendering device shown, when the target details page is a target mini-program version advertisement landing page, the target mini-program version advertisement landing page is an advertisement details page that needs to be rendered and displayed through the landing page mini-program; the component information determining unit 8011 is specifically used for:

[0135] Obtain the target mini-program version ad landing page created using the landing page editor;

[0136] Starting from the topmost component in the target mini-program version of the ad landing page, proceed from top to bottom for each component in the target mini-program version of the ad landing page, and determine whether the sum of the height of the component and the height of each component above it exceeds the height of the first screen. If not, then the component is determined to be the target component.

[0137] Determine the component type of each target component, as well as the layout position and layout style of each target component on the first screen page.

[0138] Optional, in Figure 8 Based on the page rendering device shown, the component information determination unit 8011 is specifically used for:

[0139] Based on the component type classification rules, the component type of the target component is determined according to the target features corresponding to the target component; the target features corresponding to the target component include at least one of the following: the element type included in the target component, the layout of the elements included in the target component, the layout of the target component in the page width direction, and the layout of the target component in the page length direction.

[0140] Optional, in Figure 7 or Figure 8 Based on the page rendering device shown, the skeleton screen description protocol includes at least: component feature description templates corresponding to media type components, component feature description templates corresponding to form type components, component feature description templates corresponding to text-like type components, component feature description templates corresponding to button type components, and component feature description templates corresponding to combination type components.

[0141] The media type component includes at least a component for carrying images, a component for carrying videos, a component for carrying audio, and a carousel component; the form type component includes at least a component for carrying input box controls; the text-like type component includes at least a component for carrying text content; the button type component includes at least a component for carrying function buttons, a component for carrying jump links, and a component for carrying program jump interfaces; the combination type component includes at least a component for carrying combinations of multiple elements.

[0142] Optional, in Figure 7 Based on the page rendering device shown, see Figure 9 , Figure 9 This is a schematic diagram of another page rendering apparatus 900 provided in an embodiment of this application. (See attached diagram.) Figure 9 As shown, the information acquisition module 701 includes:

[0143] The program startup unit 901 is used to start the page rendering program in response to a details viewing operation triggered for the target promotion information;

[0144] The information acquisition unit 902 is used to parse the details page jump parameters of the target promotion information through the page rendering program and obtain the target skeleton screen description information.

[0145] Optional, in Figure 9 Based on the page rendering device shown, when the target details page is a target mini-program version advertisement landing page, the target mini-program version advertisement landing page is an advertisement details page that needs to be rendered and displayed through the landing page mini-program; the program startup unit 901 is specifically used for:

[0146] In response to a details viewing action triggered by the target promotional information, the landing page mini-program is launched.

[0147] The information acquisition unit 902 is specifically used for:

[0148] The target skeleton screen description information is obtained from the jump parameters of the target promotion information's details page through the query channel of the landing page mini program.

[0149] Optional, in Figure 8 or Figure 9 Based on the page rendering device shown, see Figure 10 , Figure 10 This is a schematic diagram of another page rendering apparatus 1000 provided in an embodiment of this application. (See attached diagram.) Figure 10 As shown, the device also includes:

[0150] The promotion information generation module 1001 is used to determine the target mini-program version ad landing page selected by the ad delivery client in the candidate mini-program version ad landing page; obtain the target skeleton screen description information corresponding to the target mini-program version ad landing page; and configure the target skeleton screen description information and the jump path of the target mini-program version ad landing page in the jump parameters of the details page of the target promotion information.

[0151] Optional, in Figure 7 Based on the page rendering device shown, the information parsing module 702 is specifically used for:

[0152] Parse the target skeleton screen description information to obtain the skeleton screen element description information corresponding to the target component;

[0153] Based on the component type represented by the skeleton screen element description information, determine the basic style of the target skeleton screen element corresponding to the target component; based on the layout style of the target component represented by the skeleton screen element description information, adjust the basic style to obtain the target layout style of the target skeleton screen element; determine the layout position of the target component represented by the skeleton screen element description information as the target layout position of the target skeleton screen element.

[0154] Optional, in Figure 7 Based on the page rendering device shown, see Figure 11 , Figure 11 This is a schematic diagram of another page rendering apparatus 1100 provided in an embodiment of this application. (See attached diagram.) Figure 11 As shown, the device also includes:

[0155] The jump path acquisition module 1101 is used to acquire the jump path of the target details page from the jump parameters of the details page of the target promotion information;

[0156] The rendering data acquisition module 1102 is used to acquire the page rendering data of the target details page based on the jump path;

[0157] The details page rendering module 1103 is used to hide the target skeleton screen page after obtaining the page rendering data, and to render and display the target details page based on the page rendering data.

[0158] The aforementioned page rendering device innovatively proposes a skeleton screen description protocol. Based on this protocol, skeleton screen description information corresponding to the promotional information details page can be generated, and this skeleton screen description information can be added to the details page redirection parameters of the promotional information. When a user triggers a details viewing operation for the promotional information, the skeleton screen description information can be obtained from the details page redirection parameters of the promotional information, and the corresponding skeleton screen page of the promotional information details page can be rendered based on this skeleton screen description information. For promotional information details pages with diverse layout structures, describing the corresponding skeleton screen page of the promotional information details page in the above manner and carrying the skeleton screen description information in the details page redirection parameters of the promotional information can enable the application that is delivering the promotional information to successfully render the corresponding skeleton screen page of the promotional information details page, which helps to improve the user's viewing experience while waiting for the promotional information details page to load.

[0159] This application also provides a device for rendering a page, which may specifically be a terminal device; this application also provides a device for generating skeleton screen description information, which may specifically be a server; the terminal device and server provided in this application will be described below from the perspective of hardware physicalization.

[0160] See Figure 12 , Figure 12 This is a schematic diagram of the structure of the terminal device provided in the embodiments of this application. For example... Figure 12 As shown, for ease of explanation, only the parts related to the embodiments of this application are shown. For specific technical details not disclosed, please refer to the method section of the embodiments of this application. The terminal can be any terminal device including mobile phones, tablets, personal digital assistants (PDAs), point-of-sales terminals (POS), in-vehicle computers, etc. Taking a computer as an example:

[0161] Figure 12 This is a block diagram illustrating a portion of the structure of a computer associated with the terminal provided in an embodiment of this application. (Reference) Figure 12 The computer includes: a radio frequency (RF) circuit 1210, a memory 1220, an input unit 1230, a display unit 1240, a sensor 1250, an audio circuit 1260, a wireless fidelity (WiFi) module 1270, a processor 1280, and a power supply 1290, etc. Those skilled in the art will understand that... Figure 12The computer architecture shown does not constitute a limitation on the computer and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0162] The memory 1220 can be used to store software programs and modules. The processor 1280 executes various computer functions and data processing by running the software programs and modules stored in the memory 1220. The memory 1220 may mainly include a program storage area and a data storage area. The program storage area may store the operating system, application programs required for at least one function (such as sound playback function, image playback function, etc.), etc.; the data storage area may store data created according to the use of the computer (such as audio data, telephone directory, etc.). In addition, the memory 1220 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other volatile solid-state storage device.

[0163] The processor 1280 is the control center of the computer, connecting various parts of the computer through various interfaces and lines. It performs various computer functions and processes data by running or executing software programs and / or modules stored in the memory 1220, and by calling data stored in the memory 1220. Optionally, the processor 1280 may include one or more processing units; preferably, the processor 1280 may integrate an application processor and a modem processor, wherein the application processor mainly handles the operating system, user interface, and applications, and the modem processor mainly handles wireless communication. It is understood that the modem processor may also not be integrated into the processor 1280.

[0164] In this embodiment of the application, the processor 1280 included in the terminal also has the following functions:

[0165] In response to a details viewing operation triggered by a target promotional information, target skeleton screen description information is obtained from the details page jump parameters of the target promotional information; the target skeleton screen description information is generated based on the skeleton screen description protocol according to the component layout structure in the target details page, the skeleton screen description protocol includes the mapping relationship between component types and component feature description templates, and the target details page is the details page corresponding to the target promotional information;

[0166] The target skeleton screen description information is parsed to determine the skeleton screen element corresponding to the target component in the target details page, as well as the layout position and layout style of the skeleton screen element;

[0167] Based on the skeleton screen element, and the layout position and layout style of the skeleton screen element, the target skeleton screen page corresponding to the target details page is rendered and displayed.

[0168] Optionally, the processor 1280 is further configured to execute steps of any implementation of the page rendering method provided in the embodiments of this application.

[0169] See Figure 13 , Figure 13 This is a schematic diagram of the structure of a server 1300 provided in an embodiment of this application. The server 1300 can vary significantly due to different configurations or performance, and may include one or more central processing units (CPUs) 1322 (e.g., one or more processors) and memory 1332, and one or more storage media 1330 (e.g., one or more mass storage devices) for storing application programs 1342 or data 1344. The memory 1332 and storage media 1330 can be temporary or persistent storage. The program stored in the storage media 1330 may include one or more modules (not shown in the diagram), each module including a series of instruction operations on the server. Furthermore, the CPU 1322 may be configured to communicate with the storage media 1330 and execute the series of instruction operations stored in the storage media 1330 on the server 1300.

[0170] Server 1300 may also include one or more power supplies 1326, one or more wired or wireless network interfaces 1350, one or more input / output interfaces 1358, and / or one or more operating systems, such as Windows Server™, Mac OS X™, Unix™, Linux™, FreeBSD™, etc.

[0171] The steps performed by the server in the above embodiments can be based on this Figure 13 The server structure shown.

[0172] CPU 1322 is used to perform the following steps:

[0173] Determine the component type, layout position, and layout style of each target component in the target details page;

[0174] For each target component, a target component feature description template corresponding to the component type of the target component is determined based on the skeleton screen description protocol; skeleton screen element description information corresponding to the target component is generated according to the layout position and layout style of the target component and the target component feature description template.

[0175] The target skeleton screen description information is generated by combining the description information of the skeleton screen elements corresponding to each target component in the target details page.

[0176] Optionally, the CPU 1322 can also be used to execute any of the steps of the skeleton screen information generation method provided in the embodiments of this application.

[0177] This application also provides a computer-readable storage medium for storing a computer program that executes any one of the page rendering method and skeleton screen information generation method described in the foregoing embodiments.

[0178] This application also provides a computer program product or computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform any one of the page rendering method and skeleton screen information generation method described in the foregoing embodiments.

[0179] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0180] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be an indirect coupling or communication connection between apparatuses or units through some interfaces, and may be electrical, mechanical, or other forms.

[0181] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0182] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0183] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes: USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, optical disks, and other media capable of storing computer programs.

[0184] It should be understood that in this application, "at least one (item)" means one or more, and "more than" means two or more. "And / or" is used to describe the relationship between related objects, indicating that three relationships can exist. For example, "A and / or B" can represent three cases: only A exists, only B exists, and both A and B exist simultaneously, where A and B can be singular or plural. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. "At least one (item) of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one (item) of a, b, or c can represent: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, and c can be single or multiple.

[0185] The above-described embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit them. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application.

Claims

1. A page rendering method, characterized in that, The method, applied to promotional information detail pages with diverse layout structures, includes: In response to a details viewing operation triggered by a target promotional information, target skeleton screen description information is obtained from the details page jump parameters of the target promotional information. The target skeleton screen description information is generated based on the component layout structure in the target details page according to the skeleton screen description protocol. The skeleton screen description protocol includes the mapping relationship between component types and component feature description templates. The skeleton screen description protocol is negotiated between the promotional information details page editor and the program used to render the promotional information details page, and is used to describe the rules of the skeleton screen page corresponding to the promotional information details page. The component type refers to the type of the components included in the promotional information details page. The component feature description template corresponding to the component type is the skeleton screen element description method corresponding to the component belonging to that component type. The target details page is the details page corresponding to the target promotional information. The target promotional information is the jump entry point of the target details page. The details page jump parameters include the jump path of the target details page and the target skeleton screen description information corresponding to the target details page. The target skeleton screen description information is parsed to determine the skeleton screen element corresponding to the target component in the target details page, as well as the layout position and layout style of the skeleton screen element; Based on the skeleton screen element, and the layout position and layout style of the skeleton screen element, render and display the target skeleton screen page corresponding to the target details page; The target skeleton screen description information is generated in the following manner: Determine the component type, layout position, and layout style of each target component in the target details page; For each target component, a target component feature description template corresponding to the component type of the target component is determined based on the skeleton screen description protocol; skeleton screen element description information corresponding to the target component is generated according to the layout position and layout style of the target component and the target component feature description template. The target skeleton screen description information is generated by combining the description information of the skeleton screen elements corresponding to each target component in the target details page.

2. The method according to claim 1, characterized in that, When the target details page is a target mini-program version ad landing page, the target mini-program version ad landing page is an ad details page that needs to be rendered and displayed through the landing page mini-program; Determining the component type, layout position, and layout style of each target component in the target details page includes: Obtain the target mini-program version ad landing page created using the landing page editor; Starting from the topmost component in the target mini-program version of the ad landing page, proceed from top to bottom for each component in the target mini-program version of the ad landing page, and determine whether the sum of the height of the component and the height of each component above it exceeds the height of the first screen. If not, then the component is determined to be the target component. Determine the component type of each target component, as well as the layout position and layout style of each target component on the first screen page.

3. The method according to claim 1 or 2, characterized in that, Determining the component type of each target component in the target details page includes: Based on the component type classification rules, the component type of the target component is determined according to the target features corresponding to the target component; the target features corresponding to the target component include at least one of the following: the element type included in the target component, the layout of the elements included in the target component, the layout of the target component in the page width direction, and the layout of the target component in the page length direction.

4. The method according to any one of claims 1 to 2, characterized in that, The skeleton screen description protocol includes at least: component feature description templates for media type components, component feature description templates for form type components, component feature description templates for text-like type components, component feature description templates for button type components, and component feature description templates for combo type components; The media type component includes at least a component for carrying images, a component for carrying videos, a component for carrying audio, and a carousel component; the form type component includes at least a component for carrying input box controls; the text-like type component includes at least a component for carrying text content; the button type component includes at least a component for carrying function buttons, a component for carrying jump links, and a component for carrying program jump interfaces; the combination type component includes at least a component for carrying combinations of multiple elements.

5. The method according to claim 1, characterized in that, The response to the details viewing operation triggered for the target promotional information includes obtaining the target skeleton screen description information from the details page redirection parameters of the target promotional information, including: In response to a details viewing operation triggered by the target promotional information, the page rendering process is started; The page rendering program parses the details page redirection parameters of the target promotion information to obtain the target skeleton screen description information.

6. The method according to claim 5, characterized in that, When the target details page is a target mini-program version ad landing page, the target mini-program version ad landing page is an ad details page that needs to be rendered and displayed through the landing page mini-program. The step of launching the page rendering program in response to a details viewing operation triggered for the target promotion information includes: In response to a details viewing action triggered by the target promotional information, the landing page mini-program is launched. The step of parsing the detail page redirection parameters of the target promotional information through the page rendering program to obtain the target skeleton screen description information includes: The target skeleton screen description information is obtained from the jump parameters of the target promotion information's details page through the query channel of the landing page mini program.

7. The method according to claim 2 or 6, characterized in that, The target promotion information is generated in the following manner: Determine the target mini-program version ad landing page selected by the ad delivery client in the candidate mini-program version ad landing page; Obtain the target skeleton screen description information corresponding to the target mini-program version ad landing page; Configure the target skeleton screen description information and the jump path of the target mini-program version advertisement landing page in the jump parameters of the details page of the target promotion information.

8. The method according to claim 1, characterized in that, The step of parsing the target skeleton screen description information and determining the skeleton screen element corresponding to the target component in the target details page, as well as the layout position and layout style of the skeleton screen element, includes: Parse the target skeleton screen description information to obtain the skeleton screen element description information corresponding to the target component; Based on the component type represented by the skeleton screen element description information, determine the basic style of the target skeleton screen element corresponding to the target component; based on the layout style of the target component represented by the skeleton screen element description information, adjust the basic style to obtain the target layout style of the target skeleton screen element; determine the layout position of the target component represented by the skeleton screen element description information as the target layout position of the target skeleton screen element.

9. The method according to claim 1, characterized in that, The method further includes: Obtain the redirect path of the target details page from the redirect parameters of the target promotion information details page; Based on the jump path, obtain the page rendering data of the target details page; After obtaining the page rendering data, the target skeleton screen page is hidden, and the target details page is rendered and displayed based on the page rendering data.

10. A page rendering apparatus, characterized in that, The device, used for promotional information detail pages with diverse layouts, includes: The information acquisition module is used to respond to a details viewing operation triggered for the target promotional information, and to obtain the target skeleton screen description information from the details page jump parameters of the target promotional information. The target skeleton screen description information is generated based on the skeleton screen description protocol according to the component layout structure in the target details page. The skeleton screen description protocol includes the mapping relationship between component types and component feature description templates. The skeleton screen description protocol is negotiated between the promotional information details page editor and the program used to render the promotional information details page, and is used to describe the rules of the skeleton screen page corresponding to the promotional information details page. The component type refers to the type of the components included in the promotional information details page. The component feature description template corresponding to the component type is the skeleton screen element description method corresponding to the component belonging to that component type. The target details page is the details page corresponding to the target promotional information. The target promotional information is the jump entry point of the target details page. The details page jump parameters include the jump path of the target details page and the target skeleton screen description information corresponding to the target details page. The information parsing module is used to parse the target skeleton screen description information, determine the skeleton screen element corresponding to the target component in the target details page, and the layout position and layout style of the skeleton screen element; The skeleton screen rendering module is used to render and display the target skeleton screen page corresponding to the target details page based on the skeleton screen element and the layout position and layout style of the skeleton screen element. The skeleton screen description information generation module includes: The component information determination unit is used to determine the component type of each target component in the target details page, as well as the layout position and layout style of each target component. The skeleton screen element information generation unit is used to determine, for each target component, a target component feature description template corresponding to the component type of the target component based on the skeleton screen description protocol; and to generate skeleton screen element description information corresponding to the target component based on the layout position and layout style of the target component and the target component feature description template. The skeleton screen description information generation unit is used to combine the skeleton screen element description information corresponding to each of the target components in the target details page to generate the target skeleton screen description information.

11. The apparatus according to claim 10, characterized in that, When the target details page is a target mini-program version ad landing page, the target mini-program version ad landing page is an ad details page that needs to be rendered and displayed through the landing page mini-program; The component information determination unit is specifically used for: Obtain the target mini-program version ad landing page created using the landing page editor; Starting from the topmost component in the target mini-program version of the ad landing page, proceed from top to bottom for each component in the target mini-program version of the ad landing page, and determine whether the sum of the height of the component and the height of each component above it exceeds the height of the first screen. If not, then the component is determined to be the target component. Determine the component type of each target component, as well as the layout position and layout style of each target component on the first screen page.

12. The apparatus according to claim 10 or 11, characterized in that, The component information determination unit is specifically used for: Based on the component type classification rules, the component type of the target component is determined according to the target features corresponding to the target component; the target features corresponding to the target component include at least one of the following: the element type included in the target component, the layout of the elements included in the target component, the layout of the target component in the page width direction, and the layout of the target component in the page length direction.

13. The apparatus according to any one of claims 10 to 11, characterized in that, The skeleton screen description protocol includes at least: component feature description templates for media type components, component feature description templates for form type components, component feature description templates for text-like type components, component feature description templates for button type components, and component feature description templates for combo type components; The media type component includes at least a component for carrying images, a component for carrying videos, a component for carrying audio, and a carousel component; the form type component includes at least a component for carrying input box controls; the text-like type component includes at least a component for carrying text content; the button type component includes at least a component for carrying function buttons, a component for carrying jump links, and a component for carrying program jump interfaces; the combination type component includes at least a component for carrying combinations of multiple elements.

14. The apparatus according to claim 10, characterized in that, The information acquisition module includes: The program startup unit is used to start the page rendering program in response to a details viewing operation triggered for the target promotional information; The information acquisition unit is used to parse the details page redirection parameters of the target promotion information through the page rendering program, and obtain the target skeleton screen description information.

15. The apparatus according to claim 14, characterized in that, When the target details page is a target mini-program version ad landing page, the target mini-program version ad landing page is an ad details page that needs to be rendered and displayed through the landing page mini-program. The program startup unit is specifically used for: In response to a details viewing action triggered by the target promotional information, the landing page mini-program is launched. The information acquisition unit is specifically used for: The target skeleton screen description information is obtained from the jump parameters of the target promotion information's details page through the query channel of the landing page mini program.

16. The apparatus according to claim 11 or 15, characterized in that, The device further includes: The promotion information generation module is used to determine the target mini-program version ad landing page selected by the ad delivery client in the candidate mini-program version ad landing page; obtain the target skeleton screen description information corresponding to the target mini-program version ad landing page; and configure the target skeleton screen description information and the jump path of the target mini-program version ad landing page in the jump parameters of the details page of the target promotion information.

17. The apparatus according to claim 10, characterized in that, The information parsing module is specifically used for: Parse the target skeleton screen description information to obtain the skeleton screen element description information corresponding to the target component; Based on the component type represented by the skeleton screen element description information, determine the basic style of the target skeleton screen element corresponding to the target component; based on the layout style of the target component represented by the skeleton screen element description information, adjust the basic style to obtain the target layout style of the target skeleton screen element; determine the layout position of the target component represented by the skeleton screen element description information as the target layout position of the target skeleton screen element.

18. The apparatus according to claim 10, characterized in that, The device further includes: The jump path acquisition module is used to obtain the jump path of the target details page from the jump parameters of the details page of the target promotion information; The rendering data acquisition module is used to acquire the page rendering data of the target details page based on the jump path; The details page rendering module is used to obtain the page rendering data, hide the target skeleton screen page, and render and display the target details page based on the page rendering data.

19. A device, characterized in that, The device includes a processor and a memory; The memory is used to store computer programs; The processor is configured to execute the page rendering method according to any one of claims 1 to 9 according to the computer program.

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

21. A computer program product, characterized in that, The computer program product includes computer instructions, which are executed by the processor of the computer device to cause the computer device to perform the page rendering method according to any one of claims 1 to 9.

Images