Page rendering method and device, server and storage medium

Abstract

The present disclosure provides a page rendering method and device, a server and a storage medium, and belongs to the technical field of software development. The method comprises the following steps: determining a target rendering framework and a first page component corresponding to a target page to be rendered; converting the first page component into a second page component through a syntax interpreter corresponding to the target rendering framework, the second page component being a page component executable by the target rendering framework; determining an interface protocol of the target rendering framework, the interface protocol being used to record a component interface of a basic component used by the target rendering framework; and running the second page component according to the interface protocol to obtain the target page. The first page component only needs to be converted through the syntax interpreter to generate a version of the page component corresponding to the rendering framework, so that the page component does not need to be reprogrammed for the target rendering framework, thereby reducing the workload of page developers and improving the development efficiency.

Description

Technical Field

[0001] This disclosure relates to the field of software development technology, and in particular to a page rendering method, apparatus, server, and storage medium. Background Technology

[0002] With the development of software development technology, various applications are emerging in large numbers. These applications can render pages containing different information to display different information to users. As applications continue to evolve, developers generally use their own rendering frameworks for page rendering.

[0003] In related technologies, when developers develop pages, they need to write a page component library corresponding to the selected rendering framework. Then, when rendering the page, they can refer to the page components in the page component library corresponding to the rendering framework to realize page rendering and obtain the target page.

[0004] In the aforementioned technologies, since different rendering frameworks use different development languages, when a page containing the same information needs to be rendered in multiple applications, it is necessary to write a set of page components for each rendering framework of each application. This is cumbersome and results in a long application development cycle. Summary of the Invention

[0005] This disclosure provides a page rendering method, apparatus, server, and storage medium, which can simplify the page development process and shorten the application development cycle. The technical solution is as follows:

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

[0007] Determine the target rendering framework corresponding to the target page to be rendered, and determine the first page component of the target page to be rendered, wherein the first page component is a page component written in a specified development language;

[0008] The first page component is transformed into a second page component by a syntax interpreter corresponding to the target rendering framework, and the second page component is a page component that can be run by the target rendering framework.

[0009] The interface protocol of the target rendering framework is determined, and the interface protocol is used to record the component interfaces of the basic components used by the target rendering framework;

[0010] According to the interface protocol, the second page component is run to obtain the target page.

[0011] In one possible implementation, the step of converting the first page component into a second page component using a syntax interpreter corresponding to the target rendering framework includes:

[0012] The first page component is converted into a syntax tree object by the syntax interpreter, and the first page component includes multiple first basic components;

[0013] By using the syntax interpreter, the component properties and style text of each first basic component in the syntax tree object are modified to obtain multiple second basic components;

[0014] The plurality of second basic components are combined to form the second page component.

[0015] In another possible implementation, the syntax interpreter modifies the component properties and style text of each first basic component in the syntax tree object to obtain multiple second basic components, including:

[0016] For each first basic component in the syntax tree object, the syntax interpreter transforms the first component property of the first basic component into a second component property and the first style text of the first basic component into a second style text. The second component property is a component property that can be read by the target rendering framework, and the second style text is style text that can be read by the target rendering framework.

[0017] The second basic component is generated based on the second component attributes and the second style text.

[0018] In another possible implementation, the step of converting the first component property of the first basic component into a second component property and the first style text of the first basic component into a second style text via the syntax interpreter includes:

[0019] Invoke the first correspondence between the first component property and the second component property of the basic component in the syntax interpreter; convert the first component property of the first basic component into the second component property according to the first correspondence and the first component property of the first basic component;

[0020] The second correspondence between the first style text and the second style text of the basic component in the syntax interpreter is invoked; based on the second correspondence and the first style text of the first basic component, the first style text of the first basic component is converted into the second style text.

[0021] In another possible implementation, the step of running the second page component according to the interface protocol to obtain the target page includes:

[0022] Determine each of the second basic components included in the second page component;

[0023] The component interface of each second basic component is invoked according to the interface protocol;

[0024] Render the page display effect corresponding to each second basic component according to the component interface of each second basic component;

[0025] Based on the page display effect corresponding to each of the second basic components, each of the second basic components is rendered to obtain the target page.

[0026] In another possible implementation, the step of calling the component interface of each of the second basic components according to the interface protocol includes:

[0027] According to the interface protocol, the component interface of each second basic component is determined from the component adaptation layer; the component interface is called; wherein, the component adaptation layer includes the correspondence between the component interface of the third basic component and the component interface adapted by the target rendering framework, and the third basic component is a basic component in the basic component library based on the specified development language.

[0028] In another possible implementation, before determining the component interface of each second base component from the component adaptation layer according to the interface protocol, the method further includes:

[0029] Determine the basic component library;

[0030] For each specified rendering framework, determine the component interface of each third basic component in the basic component library under the rendering framework, based on the development language of the rendering framework.

[0031] Based on the component interfaces adapted to each rendering framework and the component interfaces of the third basic component in the component library, determine the correspondence between the component interfaces of the third basic component and the component interfaces adapted to the target rendering framework.

[0032] Based on the correspondence between the component interface of the third basic component and the component interface adapted to the target rendering framework, the component adaptation layer of the rendering framework is generated.

[0033] On the other hand, a page rendering apparatus is provided, the apparatus comprising:

[0034] The first determining module is used to determine the target rendering framework corresponding to the target page to be rendered, and to determine the first page component of the target page to be rendered, wherein the first page component is a page component written in a specified development language;

[0035] The conversion module is used to convert the first page component into a second page component through a syntax interpreter corresponding to the target rendering framework, wherein the second page component is a page component that can be run by the target rendering framework.

[0036] The second determining module is used to determine the interface protocol of the target rendering framework, wherein the interface protocol is used to record the component interfaces of the basic components used by the target rendering framework.

[0037] The running module is used to run the second page component according to the interface protocol to obtain the target page.

[0038] In one possible implementation, the conversion module includes:

[0039] A conversion unit is used to convert the first page component into a syntax tree object through the syntax interpreter, wherein the first page component includes a plurality of first basic components;

[0040] The modification unit is used to modify the component properties and style text of each first basic component in the syntax tree object through the syntax interpreter to obtain multiple second basic components;

[0041] A component unit is used to assemble the plurality of second basic components into the second page component.

[0042] In another possible implementation, the modification unit includes:

[0043] The transformation subunit is used to transform the first component property of each first basic component in the syntax tree object into a second component property and the first style text of the first basic component into a second style text through the syntax interpreter. The second component property is a component property that can be read by the target rendering framework, and the second style text is style text that can be read by the target rendering framework.

[0044] Generate sub-units to generate the second basic component based on the second component attributes and the second style text.

[0045] In another possible implementation, the transformation subunit is configured to invoke a first correspondence between a first component attribute and a second component attribute of a base component in the syntax interpreter; convert the first component attribute of the first base component into the second component attribute according to the first correspondence and the first component attribute of the first base component; invoke a second correspondence between a first style text and a second style text of a base component in the syntax interpreter; and convert the first style text of the first base component into the second style text according to the second correspondence and the first style text of the first base component.

[0046] In another possible implementation, the runtime module includes:

[0047] A determining unit is configured to determine each of the second basic components included in the second page component;

[0048] The calling unit is used to call the component interface of each of the second basic components according to the interface protocol;

[0049] The rendering unit is used to render the page display effect corresponding to each second basic component according to the component interface of each second basic component; and to render each second basic component based on the page display effect corresponding to each second basic component to obtain the target page.

[0050] In another possible implementation, the calling unit is configured to determine the component interface of each second basic component from the component adaptation layer according to the interface protocol; and call the component interface; wherein the component adaptation layer includes the correspondence between the component interface of the third basic component and the component interface adapted by the target rendering framework, and the third basic component is a basic component in the basic component library based on a specified development language.

[0051] In another possible implementation, the device further includes:

[0052] The third determining module is used to determine the basic component library;

[0053] The fourth determining module is used to determine, for each specified rendering framework, the component interface of each third basic component in the basic component library under the rendering framework, according to the development language of the rendering framework.

[0054] The fifth determining module is used to determine the correspondence between the component interface of the third basic component and the component interface adapted by the target rendering framework, based on the component interface adapted by each rendering framework and the component interface of the third basic component in the component library.

[0055] The generation module is used to generate the component adaptation layer of the rendering framework based on the correspondence between the component interface of the third basic component and the component interface adapted to the target rendering framework.

[0056] On the other hand, a server is provided, the server including a processor and a memory, the memory storing at least one piece of program code, the program code being loaded and executed by the processor to perform the operations performed in the above-described page rendering method.

[0057] On the other hand, a computer-readable storage medium is provided, wherein at least one piece of program code is stored in the computer-readable storage medium, the program code being loaded and executed by a processor to perform the operations performed in the above-described page rendering method.

[0058] On the other hand, a computer program product or computer program is provided, the computer program product or computer program including computer program code stored in a computer-readable storage medium, a processor of a computer device reading the computer program code from the computer-readable storage medium, the processor executing the computer program code, causing the computer device to perform the operations performed in the above-described page rendering method.

[0059] The beneficial effects of the technical solutions provided in this disclosure are:

[0060] In this embodiment of the disclosure, in response to rendering a target page under the target rendering framework, it is only necessary to obtain the first page component of the target page that has been written in advance, and to convert the first page component through the syntax interpreter to obtain the page component that can be rendered under the target rendering framework. Therefore, it is not necessary to rewrite the page component for the target rendering framework, which reduces the workload of page developers and improves development efficiency. Attached Figure Description

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

[0062] Figure 1 This is an implementation environment for a page rendering method provided according to an embodiment of this disclosure;

[0063] Figure 2 This is a schematic diagram of a page rendering method flow according to an exemplary embodiment;

[0064] Figure 3 This is a schematic diagram of a page rendering method flow according to an exemplary embodiment;

[0065] Figure 4 This is a schematic diagram of a page rendering method flow according to an exemplary embodiment;

[0066] Figure 5 This is a schematic diagram of a page rendering method flow according to an exemplary embodiment;

[0067] Figure 6This is a schematic diagram of a target page provided according to an exemplary embodiment;

[0068] Figure 7 This is a schematic diagram of a target page provided according to an exemplary embodiment;

[0069] Figure 8 This is a schematic diagram of a page rendering method flow according to an exemplary embodiment;

[0070] Figure 9 This is a block diagram of a page rendering apparatus provided according to an embodiment of the present disclosure;

[0071] Figure 10 This is a block diagram of a page rendering apparatus provided according to an embodiment of the present disclosure;

[0072] Figure 11 This is a schematic diagram of the structure of a server provided according to an embodiment of the present disclosure. Detailed Implementation

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

[0074] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numerals in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this disclosure. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this disclosure as detailed in the appended claims.

[0075] Figure 1 This is a schematic diagram illustrating the implementation environment of a page rendering method according to exemplary embodiments of the present disclosure. See also Figure 1 The implementation environment includes a system architecture diagram comprising a first terminal 101, a second terminal 102, and a server 103. Both the first terminal 101 and the second terminal 102 can connect to the server 103 via a wireless network.

[0076] The first terminal 101 is used by page developers. Developers design and develop target pages through the first terminal 101, sending the page components of the target page to the server 103. The server 103 then renders the target page based on these page components and sends the rendered page to the second terminal 102. The second terminal 102 receives the rendered target page and displays it on the display screen.

[0077] The second terminal 102 can install multiple applications, which can have different functions and can display the same page content. For example, the second terminal 102 can install a first application and a second application, where the first application is a browser application and the second application is a social application. Both the first application and the second application can display a target page, which can contain information such as news.

[0078] The first terminal 101 and the second terminal 102 can be the same terminal or different terminals. Both the first terminal 101 and the second terminal 102 can be mobile phones, computers, tablets, or wearable devices, etc. The server 103 can be a single server 103, a cluster of multiple servers 103, or a cloud server 103, etc. In this embodiment, no specific limitations are made.

[0079] Figure 2 This is a flowchart illustrating a page rendering method according to an exemplary embodiment. Figure 2 As shown, the method includes the following steps:

[0080] Step 201: Determine the target rendering framework corresponding to the target page to be rendered, and determine the first page component of the target page to be rendered, wherein the first page component is a page component written in a specified development language.

[0081] Step 202: Using the syntax interpreter corresponding to the target rendering framework, the first page component is transformed into a second page component, which is a page component that can be run by the target rendering framework.

[0082] Step 203: Determine the interface protocol of the target rendering framework. This interface protocol is used to record the component interfaces of the basic components used by the target rendering framework.

[0083] Step 204: Run the second page component according to the interface protocol to obtain the target page.

[0084] In one possible implementation, the first page component is transformed into a second page component using a syntax interpreter corresponding to the target rendering framework, including:

[0085] The syntax interpreter transforms the first page component into a syntax tree object, which includes multiple first base components.

[0086] By using this syntax interpreter, the component properties and style text of each first basic component in the syntax tree object are modified to obtain multiple second basic components;

[0087] The multiple second basic components are combined to form the second page component.

[0088] In another possible implementation, the syntax interpreter modifies the component properties and style text of each first basic component in the syntax tree object to obtain multiple second basic components, including:

[0089] For each first basic component in the syntax tree object, the syntax interpreter transforms the first component property of the first basic component into a second component property and the first style text of the first basic component into a second style text. The second component property is a component property that can be read by the target rendering framework, and the second style text is style text that can be read by the target rendering framework.

[0090] The second basic component is generated based on the second component's attributes and the second style text.

[0091] In another possible implementation, the syntax interpreter transforms the first component property of the first base component into a second component property, and the first style text of the first base component into second style text, including:

[0092] Invoke the first correspondence between the first component property and the second component property of the basic component in the syntax interpreter; based on the first correspondence and the first component property of the first basic component, convert the first component property of the first basic component into the second component property;

[0093] Invoke the second correspondence between the first style text and the second style text of the basic component in the syntax interpreter; based on the second correspondence and the first style text of the first basic component, convert the first style text of the first basic component into the second style text.

[0094] In another possible implementation, the second page component is run according to the interface protocol to obtain the target page, including:

[0095] Identify each of the second base components included in this second page component;

[0096] The component interface of each second basic component is called according to the interface protocol;

[0097] Based on the component interface of each second basic component, render the page display effect corresponding to each second basic component;

[0098] Based on the page display effect corresponding to each second basic component, render each second basic component to obtain the target page.

[0099] In another possible implementation, the component interface of each second basic component is invoked according to the interface protocol, including:

[0100] According to the interface protocol, the component interface of each second basic component is determined from the component adaptation layer; the component interface is called; wherein, the component adaptation layer includes the correspondence between the component interface of the third basic component and the component interface adapted by the target rendering framework, and the third basic component is a basic component in the basic component library based on the specified development language.

[0101] In another possible implementation, before determining the component interface of each second base component from the component adaptation layer according to the interface protocol, the method further includes:

[0102] Determine the basic component library;

[0103] For each specified rendering framework, determine the component interface of each third basic component in the basic component library under that rendering framework, based on the development language of that rendering framework.

[0104] Based on the component interfaces adapted to each rendering framework and the component interfaces of the third basic component in the component library, determine the correspondence between the component interfaces of the third basic component and the component interfaces adapted to the target rendering framework.

[0105] Based on the correspondence between the component interface of the third basic component and the component interface adapted to the target rendering framework, the component adaptation layer of the rendering framework is generated.

[0106] In this embodiment of the disclosure, in response to rendering a target page under a target rendering framework, it is only necessary to obtain the first page component of the target page that has been written in advance, and to convert the first page component through a syntax interpreter to obtain the page component that can be rendered under the target rendering framework. Therefore, it is not necessary to rewrite the page component for the target rendering framework, which reduces the workload of page developers and improves development efficiency.

[0107] Figure 3 This is a flowchart illustrating a page rendering method according to an exemplary embodiment. Figure 3 As shown, the method includes the following steps:

[0108] Step 301: The server determines the target rendering frame corresponding to the target page to be rendered.

[0109] The target rendering framework is the rendering framework corresponding to the application displaying the target page. Optionally, the target rendering framework can be any rendering framework, such as Vue (a framework for building interactive pages), React (a framework for building user interfaces), Weex (a framework for developing native applications), React Native (an open-source cross-platform mobile application development framework), etc.

[0110] The target page to be rendered is a page designed and developed by the page developers. The first terminal sends the first page component corresponding to the target page developed by the page developers to the server; the server renders the target page to be rendered and sends the relevant data of the rendered target page to the second terminal, which then displays the target page.

[0111] In one possible implementation, when the server receives a first page component sent by the first terminal, it determines the rendering framework corresponding to at least one syntax interpreter currently stored in the server as the target rendering framework. In this implementation, the server determines at least one target rendering framework so that the first page component can be subsequently converted into a second page component corresponding to that target rendering framework. Therefore, when sending relevant data for the target page to the second terminal, it is unnecessary to further convert the first page component; the page data corresponding to the second page component can be sent directly, improving page rendering efficiency.

[0112] In another possible implementation, the server receives a page rendering request from the second terminal and determines the target rendering frame corresponding to the target page based on the page rendering request. Here, the page rendering request is sent to the server by the second terminal when displaying the target page. Optionally, the page rendering request carries a page identifier of the target page. The server receives the page rendering request, determines the page identifier of the target page from the page rendering request, determines the rendering frame of the target page based on the page identifier, and identifies the rendering frame of the target page as the target rendering frame. Optionally, the page rendering request carries a frame identifier of the rendering frame corresponding to the target page. Accordingly, the server can parse the page rendering request to obtain the frame identifier and determine the target rendering frame corresponding to the target page of the page rendering request based on the frame identifier.

[0113] In this implementation, the server determines the page identifier corresponding to the target page only when it receives the page rendering request sent by the second terminal. This allows the server to render the page only based on the page displayed by the second terminal, preventing the page components from occupying the server's storage space after conversion and reducing the server's workload.

[0114] It should be noted that the number of target rendering frames can be one or more; however, in this embodiment, the number of target rendering frames is not specifically limited. For example, see... Figure 4 The server can simultaneously designate rendering frames 401, 402, and 403 as target rendering frames, and perform page rendering for each rendering frame to generate pages for different applications for users to browse.

[0115] Step 302: The server determines the first page component of the target page to be rendered, which is a page component written in a specified programming language.

[0116] The first page component is a page component developed by a page developer through a first terminal. Optionally, the first page component includes multiple first basic components. The specified development language can be any type of development language. Optionally, the execution development language is a DSL (Domain Specific Language) designed by the page developer for this solution. Optionally, the DSL is a development language defined by the page developer, or a development language corresponding to any rendering framework. In this embodiment of the disclosure, the development language of the first page component is not specifically limited.

[0117] In one possible implementation, when the server receives a page component sent by the first terminal, it identifies the received page component as the first page component of the target page to be rendered. In this implementation, the server directly transforms the received page component into a second page component, eliminating the need for further transformation when the second terminal obtains page data. This allows the server to directly send the relevant data of the target page to the second terminal, improving page rendering efficiency.

[0118] In another possible implementation, the server receives a page rendering request from the second terminal and determines the first page component based on the page rendering request. Optionally, the page rendering request carries a page identifier of the target page. The server receives the page rendering request, determines the page identifier of the target page from the page rendering request, and determines the first page component of the target page based on the page identifier.

[0119] In this implementation, the server determines the first page component corresponding to the target page only when it receives the page rendering request sent by the second terminal. This allows the server to render the page only based on the page displayed by the second terminal, preventing the page component from occupying the server's storage space after conversion and reducing the server's workload.

[0120] Alternatively, the first page component may be composed of multiple first basic components developed by the page developers based on the target page to be rendered, and these multiple first basic components are combined to form the first page component. Optionally, before rendering the target page, the page developers may write a basic component library based on a specified programming language. This basic component library includes multiple third basic components used to represent the displayed content and user interaction effects on the page. In response to rendering the target page to be rendered, multiple first basic components are selected from the pre-written basic component library, and these selected first basic components are combined to form the first page component.

[0121] It should be noted that, optionally, the server first determines the target rendering frame and then determines the first page component; optionally, the server first determines the first page component and then determines the target rendering frame; optionally, the server determines both the target rendering frame and the first page component simultaneously. Correspondingly, the server executes step 301 first and then step 302; or, the server executes step 302 first and then step 301; or, the server executes both steps 301 and 302 simultaneously. In this embodiment, the order in which the server executes steps 301 and 302 is not specifically limited.

[0122] Step 303: Using the syntax interpreter, the first page component is converted into a syntax tree object.

[0123] The syntax interpreter is a tool designed based on the development language of the first page component, used for language conversion. In this step, the server uses the syntax interpreter to parse the syntax of the first page component and generate a syntax tree object. This syntax tree object includes multiple first base components corresponding to the first page component. The node structure of the syntax tree object is determined based on the nesting relationship of the at least one base page component within the syntax tree object.

[0124] Accordingly, prior to this step, the server determines the syntax interpreter corresponding to the target rendering framework. This process can be implemented through the following steps (1)-(3), including:

[0125] (1) The server determines the executable development language of the target rendering framework.

[0126] Among them, the server determines the description syntax of the component properties, style text, and other data of the page components used when developing page components in the executable development language of each target rendering framework.

[0127] (2) The server determines the correspondence between the component attributes and style text of the first page component and the page component corresponding to the target rendering framework based on the executable development language of the target rendering framework and the specified development language.

[0128] In this step, the server determines the executable development language of the page component under the target rendering framework and the description syntax of the first page component in the specified development language; it establishes a correspondence between the description methods of the same object in different development languages, and obtains the correspondence between the component attributes and style text of the first page component and the page component corresponding to the target rendering framework.

[0129] (3) The server stores the correspondence between the component attributes and style text of the first page component and the page component corresponding to the target rendering frame in the syntax interpreter to obtain the syntax interpreter corresponding to the target rendering frame.

[0130] In this step, the server stores the correspondence between the component properties and style text of the first page component and the page component corresponding to the target rendering frame in the syntax interpreter, thus obtaining the syntax interpreter corresponding to the target rendering frame.

[0131] It should be noted that, optionally, the syntax interpreter is generated by the server, or it may be generated by another electronic device. In response to the syntax interpreter being generated by another electronic device, the server sends a request to the other electronic device based on the target rendering framework. This request requests the syntax interpreter corresponding to the target rendering framework. The other electronic device determines the syntax interpreter corresponding to the target rendering framework based on the received request and sends the syntax interpreter to the server. The server receives the syntax interpreter sent by the other electronic device. The process by which the other electronic device generates the syntax interpreter is similar to the process by which the server generates the syntax interpreter, and will not be described in detail here.

[0132] In this implementation, the syntax interpreter is generated by other electronic devices. The server only needs to obtain the syntax interpreter from the other electronic devices when it uses the syntax interpreter, which reduces the requirements on the server. Furthermore, when adding a new rendering framework, it is only necessary to generate the syntax interpreter for the new rendering framework in other electronic devices, making it easier to extend various self-rendering frameworks.

[0133] Step 304: The server uses the syntax interpreter to modify the component properties and style text of each first basic component in the syntax tree object to obtain multiple second basic components.

[0134] The syntax tree object contains code files representing the first page components in a tree structure. The server determines the component properties and style text of multiple first base components of the first page components by traversing the syntax tree object.

[0135] The first style text includes style items and style units for the first page component, which describe the page style. For example, the style item is the height of the window in the page component, and the style unit is the unit used in the development language of the page component to measure the style items, which can be px (pixels), sp (scaled pixels), or mm (millimeters), etc. Component attributes include the page component's component tag, style class (className), and other attributes.

[0136] In this step, the server converts the component properties and style text of each first basic component in the syntax tree object into the component properties and style text corresponding to the target rendering framework. Based on the converted component properties and style text, the server generates the second basic component. This process can be achieved through the following steps (1)-(2):

[0137] (1) For each first basic component in the syntax tree object, the server uses the syntax interpreter to convert the first component property of the first basic component into the second component property, and the first style text of the first basic component into the second style text. The second component property is a component property that can be read by the target rendering framework, and the second style text is a style text that can be read by the target rendering framework.

[0138] In this step, the server can convert the component attributes and text styles of the first page components respectively. This process can be achieved through the following steps (1-1)-(1-2), including:

[0139] (1-1) The server converts the first component property of the first page component in the syntax tree object into a second component property that can be read by the target rendering framework.

[0140] See Figure 5 In this step, the server reads the syntax tree object of the first page component, determines the first component attribute 501 of the first page component from the syntax tree object, and performs component attribute conversion on the first component attribute. In one possible implementation, the server adapts the first component attribute of the first page component to the target rendering framework, converting the first component attribute into a second component attribute. Optionally, the server invokes the correspondence between the component attributes of the first page component and the second page component in the syntax interpreter, converting the first component attribute into the second component attribute. Correspondingly, the server invokes the first correspondence between the first component attribute and the second component attribute of the base component in the syntax interpreter; based on the first correspondence and the first component attribute of the first base component, it converts the first component attribute of the first base component into the second component attribute.

[0141] (1-2) The server converts the first style text of the first page component in the syntax tree object into the second style text that can be read by the target rendering framework.

[0142] The style text includes code describing the component styles and units of the target page to be rendered. Continue participating Figure 5 In this step, the server determines the first style text 502 corresponding to the first page component, performs style text conversion on the first style text, and converts the code file describing the first page component in the first page component into a second style text that can be read by the target rendering framework. Optionally, the server invokes a second correspondence between the first style text and the second style text of the basic component in the syntax interpreter; based on the second correspondence and the first style text of the first basic component, the first style text of the first basic component is converted into the second style text.

[0143] It should be noted that for the different units used in the first page component and the second page component, the server can first convert the style data in the first page component into the page component data under the target rendering framework according to the unit base relationship, and then convert the unit code of the first page component into the unit code under the target rendering framework.

[0144] Another point to note is that, optionally, the server first converts the first component attribute into the second component attribute, and then converts the first style text into the second style text; optionally, the server first converts the first style text into the second style text, and then converts the first component attribute into the second component attribute; optionally, the server simultaneously converts the first component attribute into the second component attribute and the first style text into the second style text. Correspondingly, the server executes step (1-1) first, and then step (1-2); or, the server executes step (1-2) first, and then step (1-1); or, the server executes both steps (1-1) and (1-2) simultaneously. In this embodiment of the disclosure, the execution order of steps (1-1) and (1-2) is not specifically limited.

[0145] Additionally, the server can first compare the syntax of the first component's properties with that of the component properties corresponding to the target rendering framework. If the syntax of the first component's properties is the same as that of the component properties corresponding to the target rendering framework, the server can skip step (1-1). Similarly, the server can also determine whether the first style text is the same as the style text corresponding to the target rendering framework. If the style unit in the first style text is the same as the unit corresponding to the target rendering framework, the server will not change the style unit of the first style text. If the style unit in the first style text is the same as the syntax of the style item corresponding to the target rendering framework, the server will not change the way the style item is written.

[0146] (2) The server generates the second basic component based on the second component attributes and the second style text.

[0147] In this step, the server combines the second component attributes and the second style text into a second basic component based on the second component attributes and the second style text.

[0148] In this implementation, the first component attribute and the first style text of the first basic component are transformed to obtain the second basic component, thereby enabling the target page to be rendered in the target rendering framework, so that the target rendering framework can render the page corresponding to the first page component.

[0149] Step 305: The server assembles the multiple second basic components into the second page component.

[0150] In this step, the server replaces the syntax for writing data in the syntax tree object of the first page component with the syntax for writing the second component's attributes and the second sample file, obtaining the syntax tree object corresponding to the second page component. The server then compiles the syntax tree object corresponding to the second page component to obtain the second page component.

[0151] Step 306: The server determines the interface protocol of the target rendering framework. This interface protocol is used to record the component interfaces of the basic components used by the target rendering framework.

[0152] The interface protocol includes component interfaces for the basic components corresponding to the target rendering framework, as well as the page display effects corresponding to each component interface. These component interfaces can be APIs (Application Programming Interfaces), allowing the server to call these interfaces to achieve the corresponding page display effects. This enables the server to display different pages based on received user input commands.

[0153] In this design, the basic components of different rendering frameworks display the same page effects, thus ensuring that the displayed page and page interactions are identical when the second terminal displays pages in different applications. See also Figure 6 and Figure 7 , Figure 6 and Figure 7 These are the display screens of the target page in Application 1 and Application 2, respectively. Application 1 and Application 2 use different rendering frameworks. For example, Application 1 uses a web framework, while Application 2 uses the React Native framework. The content displayed in Window 1 and Window 2 of the target page is the same for both Application 1 and Application 2.

[0154] Step 307: The server runs the second page component according to the interface protocol to obtain the target page.

[0155] The server, based on the interface protocol of the target rendering framework, runs the second page component to render the target page, thus obtaining the target page. See also... Figure 8 The server, based on rendering framework 1 and rendering framework 2, determines the syntax interpreter 801 corresponding to rendering framework 1 and the syntax interpreter 802 corresponding to rendering framework 2, respectively. After converting the first page component into a second page component that can be used by rendering framework 1 and rendering framework 2, it references the interface protocols of rendering framework 1 and rendering framework 2, and calls the gradual interface of the basic component corresponding to the second page component through the interface protocol to perform page rendering. This process can be implemented through the following steps (1)-(4), including:

[0156] (1) The server determines each of the second base components included in the second page component.

[0157] The second basic component may include the component tags of the basic components. Accordingly, the server determines the component attributes of the second page components, determines the component tags of each component based on the component attributes of the second page components, and determines the basic components of the second page components based on the component tags.

[0158] Prior to this step, the server retrieves a basic component library, which includes multiple third-party basic components. Based on the component attributes of the second-page component, the server determines the corresponding third-party basic component from the basic component library.

[0159] It should be noted that the syntax for writing the basic components corresponding to the first page component and the basic components in the basic component library corresponding to the target rendering framework is different, but the page display effect is the same.

[0160] (2) The server calls the component interface of each second basic component according to the interface protocol.

[0161] Based on the basic components of the second page, the server determines the component interface corresponding to each basic component from the interface protocol.

[0162] The server first obtains the interface protocol, determines the component adaptation layer corresponding to each specified rendering framework based on the interface protocol, and calls the component interface through the component adaptation layer. Accordingly, this step can be: the server determines the component interface of each second basic component from the component adaptation layer according to the interface protocol; and calls the component interface. The component adaptation layer includes the correspondence between the component interface of the third basic component and the component interface adapted to the target rendering framework. The third basic component is a basic component in a basic component library based on a specified development language.

[0163] Accordingly, prior to this step, the server generates a component adaptation layer for each specified rendering framework. This process can be achieved through the following steps (2-1)-(2-4), including:

[0164] (2-1) The server determines the basic component library.

[0165] The server determines the basic component library for the specified development language. It should be noted that the multiple third-party basic components included in this basic component library can be a set of basic components pre-written by page developers. These third-party basic components in the basic component library can be extended using the first-party basic components in the first page components. In this embodiment, no specific limitations are imposed.

[0166] (2-2) For each specified rendering framework, the server determines the component interface of each third basic component in the basic component library under the rendering framework, based on the development language of the rendering framework.

[0167] In this step, the server will define the component interfaces for each third-party basic component in the basic component library. The server will also write the component interfaces for each third-party basic component based on the development language of each rendering framework.

[0168] (2-3) The server determines the correspondence between the component interface of the third basic component and the component interface of the target rendering framework based on the component interface adapted to each rendering framework and the component interface of the third basic component in the component library.

[0169] The server records the correspondence between the component interfaces of the third basic component and the component interfaces corresponding to the development language of the rendering framework, and determines this correspondence as the correspondence between the component interfaces of the third basic component and the component interfaces adapted to the target rendering framework.

[0170] (2-4) The server generates the component adaptation layer of the rendering framework based on the correspondence between the component interface of the third basic component and the component interface adapted to the target rendering framework.

[0171] The server matches the component interface of the third-page component with the adaptation component interface of the target rendering framework, thus completing the introduction of the component adaptation layer.

[0172] With this implementation, after receiving the first page component, the server can directly reference the component interface of the basic component adapted by the target rendering framework based on the component adaptation layer, thus achieving cross-frame rendering.

[0173] For example, the first page component X is written in a specified development language and consists of first basic components a, b, and c. The interface protocols of the first basic components a, b, and c use the agreed-upon basic component protocol. After the syntax interpreter performs syntax translation, the syntax of the first page component X is converted into the development language of the rendering framework A, which can be recognized and executed by the rendering framework A. At this time, if a page in the rendering framework A needs to reference the first page component X, it only needs to first import the first basic components a, b, and c implemented using the syntax of the rendering framework A. Then, the necessary conditions for rendering the first page component X in the rendering framework A have been met. When the first page component X is imported at this time, the first page component X will be successfully rendered in the framework A.

[0174] (3) The server renders the page display effect corresponding to each second basic component according to the component interface of each second basic component.

[0175] The server renders the target page based on the second page component. In response to receiving the user's operation instruction, it determines the page display effect of the basic component corresponding to the operation instruction according to the component interface, and displays the content of the basic component based on the page display effect.

[0176] (4) Based on the page display effect corresponding to each second basic component, render each second basic component to obtain the target page.

[0177] In this embodiment of the disclosure, in response to rendering a target page under the target rendering framework, it is only necessary to obtain the first page component of the target page that has been written in advance, and to convert the first page component through the syntax interpreter to obtain the page component that can be rendered under the target rendering framework. Therefore, it is not necessary to rewrite the page component for the target rendering framework, which reduces the workload of page developers and improves development efficiency.

[0178] Figure 9 This is a block diagram of a page rendering apparatus according to an exemplary embodiment. See also Figure 9 The device includes:

[0179] The first determining module 901 is used to determine the target rendering framework corresponding to the target page to be rendered, and to determine the first page component of the target page to be rendered, wherein the first page component is a page component written in a specified development language.

[0180] The conversion module 902 is used to convert the first page component into a second page component through a syntax interpreter corresponding to the target rendering framework. The second page component is a page component that can be run by the target rendering framework.

[0181] The second determining module 903 is used to determine the interface protocol of the target rendering framework. The interface protocol is used to record the component interfaces of the basic components used by the target rendering framework.

[0182] The execution module 904 is used to run the second page component according to the interface protocol to obtain the target page.

[0183] In one possible implementation, see Figure 10 The conversion module 902 includes:

[0184] The conversion unit 9021 is used to convert the first page component into a syntax tree object through the syntax interpreter. The first page component includes multiple first basic components.

[0185] Modification unit 9022 is used to modify the component properties and style text of each first basic component in the syntax tree object through the syntax interpreter to obtain multiple second basic components;

[0186] Composition unit 9023 is used to assemble the plurality of second basic components into the second page component.

[0187] In another possible implementation, the modified unit 9022 includes:

[0188] The transformation subunit is used to transform the first component property of each first basic component in the syntax tree object into a second component property and the first style text of the first basic component into a second style text through the syntax interpreter. The second component property is a component property that can be read by the target rendering framework, and the second style text is style text that can be read by the target rendering framework.

[0189] Generate sub-units to generate the second basic component based on the second component attributes and the second style text.

[0190] In another possible implementation, the transformation subunit is used to invoke a first correspondence between a first component attribute and a second component attribute of a base component in the syntax interpreter; convert the first component attribute of the first base component into the second component attribute according to the first correspondence and the first component attribute of the first base component; invoke a second correspondence between a first style text and a second style text of a base component in the syntax interpreter; and convert the first style text of the first base component into the second style text according to the second correspondence and the first style text of the first base component.

[0191] In another possible implementation, see Figure 10 The runtime module 904 includes:

[0192] Determining unit 9041 is used to determine each second basic component included in the second page component;

[0193] Calling unit 9042 is used to call the component interface of each second basic component according to the interface protocol;

[0194] The rendering unit 9043 is used to render the page display effect corresponding to each second basic component according to the component interface of each second basic component; and to render each second basic component based on the page display effect corresponding to each second basic component to obtain the target page.

[0195] In another possible implementation, the calling unit 9042 is used to determine the component interface of each second basic component from the component adaptation layer according to the interface protocol; and call the component interface; wherein the component adaptation layer includes the correspondence between the component interface of the third basic component and the component interface adapted by the target rendering framework, and the third basic component is a basic component in the basic component library based on the specified development language.

[0196] In another possible implementation, see Figure 10 The device also includes:

[0197] The third determining module 905 is used to determine the basic component library;

[0198] The fourth determining module 906 is used to determine the component interface of each third basic component in the basic component library under the specified rendering framework, based on the development language of the rendering framework.

[0199] The fifth determining module 907 is used to determine the correspondence between the component interface of the third basic component and the component interface adapted by the target rendering framework, based on the component interface adapted by each rendering framework and the component interface of the third basic component in the component library.

[0200] The generation module 908 is used to generate the component adaptation layer of the rendering framework based on the correspondence between the component interface of the third basic component and the component interface adapted to the target rendering framework.

[0201] In this embodiment of the disclosure, in response to rendering a target page under a target rendering framework, it is only necessary to obtain the first page component of the target page that has been written in advance, and to convert the first page component through a syntax interpreter to obtain the page component that can be rendered under the target rendering framework. Therefore, it is not necessary to rewrite the page component for the target rendering framework, which reduces the workload of page developers and improves development efficiency.

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

[0203] Figure 11 This is a schematic diagram of a server structure provided in an embodiment of this disclosure. The server 103 can vary considerably due to different configurations or performance. It may include a Central Processing Unit (CPU) 1031 and a memory 1032. The memory 1032 stores at least one line of program code, which is loaded and executed by the processor 1031 to implement the page rendering methods provided in the various method embodiments described above. Of course, the server 103 may also have wired or wireless network interfaces, a keyboard, and input / output interfaces for input and output. The server may also include other components for implementing device functions, which will not be elaborated here.

[0204] In an exemplary embodiment, a computer-readable storage medium is also provided, storing at least one line of program code. This at least one line of program code is loaded and executed by a server to implement the page rendering method described in the above embodiments. The computer-readable storage medium can be a memory. For example, it can be a ROM (Read-Only Memory), RAM (Random Access Memory), CD-ROM (Compact Disc Read-Only Memory), magnetic tape, floppy disk, and optical data storage device, etc.

[0205] In an exemplary embodiment, a computer program product or computer program is also provided, which includes computer program code stored in a computer-readable storage medium. A processor of a computer device reads the computer program code from the computer-readable storage medium and executes the computer program code, causing the computer device to perform the operations performed in the page rendering method described above.

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

[0207] The above are merely optional embodiments of this disclosure and are not intended to limit this disclosure. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this disclosure should be included within the protection scope of this disclosure.

Claims

1. A page rendering method, characterized in that, The method includes: The target rendering framework corresponding to the target page to be rendered is determined, and the first page component of the target page to be rendered is determined, wherein the first page component is a page component written in a specified development language; the first page component includes multiple first basic components; The first page component is parsed by a syntax interpreter corresponding to the target rendering framework to generate a syntax tree object that includes the plurality of first basic components. The syntax tree object represents the code file of the first page component in a tree structure. The syntax interpreter stores the correspondence between the component attributes and style text of the first page component and the page component corresponding to the target rendering framework. The syntax interpreter modifies the component properties and style text of each first basic component in the syntax tree object to obtain multiple second basic components; the multiple second basic components are combined to form a second page component; the second page component is a page component that can be run by the target rendering framework; The interface protocol of the target rendering framework is determined. The interface protocol is used to record the component interfaces of the basic components used by the target rendering framework and the page display effect corresponding to each component interface. The page display effect of the basic components corresponding to different rendering frameworks is the same. The first basic component and the second basic component have different syntax but the same page display effect. According to the interface protocol, the second page component is run to obtain the target page.

2. The method according to claim 1, characterized in that, The process involves modifying the component properties and style text of each first basic component in the syntax tree object using the syntax interpreter to obtain multiple second basic components, including: For each first basic component in the syntax tree object, the syntax interpreter transforms the first component property of the first basic component into a second component property and the first style text of the first basic component into a second style text. The second component property is a component property that can be read by the target rendering framework, and the second style text is style text that can be read by the target rendering framework. The second basic component is generated based on the second component attributes and the second style text.

3. The method according to claim 2, characterized in that, The step of converting the first component property of the first basic component into a second component property and converting the first style text of the first basic component into second style text through the syntax interpreter includes: Invoke the first correspondence between the first component property and the second component property of the basic component in the syntax interpreter; convert the first component property of the first basic component into the second component property according to the first correspondence and the first component property of the first basic component; The second correspondence between the first style text and the second style text of the basic component in the syntax interpreter is invoked; based on the second correspondence and the first style text of the first basic component, the first style text of the first basic component is converted into the second style text.

4. The method according to claim 1, characterized in that, The step of running the second page component according to the interface protocol to obtain the target page includes: Determine each of the second basic components included in the second page component; The component interface of each second basic component is invoked according to the interface protocol; Render the page display effect corresponding to each second basic component according to the component interface of each second basic component; Based on the page display effect corresponding to each of the second basic components, each of the second basic components is rendered to obtain the target page.

5. The method according to claim 4, characterized in that, The step of calling the component interface of each second basic component according to the interface protocol includes: According to the interface protocol, the component interface of each second basic component is determined from the component adaptation layer; the component interface is called; wherein, the component adaptation layer includes the correspondence between the component interface of the third basic component and the component interface adapted by the target rendering framework, and the third basic component is a basic component in the basic component library based on the specified development language.

6. The method according to claim 5, characterized in that, Before determining the component interface of each second basic component from the component adaptation layer according to the interface protocol, the method further includes: Determine the basic component library; For each specified rendering framework, determine the component interface of each third basic component in the basic component library under the rendering framework, based on the development language of the rendering framework. Based on the component interfaces adapted to each rendering framework and the component interfaces of the third basic component in the basic component library, determine the correspondence between the component interfaces of the third basic component and the component interfaces adapted to the target rendering framework. Based on the correspondence between the component interface of the third basic component and the component interface adapted to the target rendering framework, the component adaptation layer of the rendering framework is generated.

7. A page rendering device, characterized in that, The device includes: The first determining module is used to determine the target rendering framework corresponding to the target page to be rendered, and to determine the first page component of the target page to be rendered, wherein the first page component is a page component written in a specified development language; the first page component includes multiple first basic components; The conversion module includes conversion units, modification units, and component units; The conversion unit is used to perform syntax parsing on the first page component through a syntax interpreter corresponding to the target rendering framework, and generate a syntax tree object including the plurality of first basic components. The syntax tree object represents the code file of the first page component in a tree structure. The syntax interpreter stores the correspondence between the component attributes and style text of the first page component and the page component corresponding to the target rendering framework. The modification unit is used to modify the component properties and style text of each first basic component in the syntax tree object through the syntax interpreter to obtain multiple second basic components; The constituent unit is used to assemble the plurality of second basic components into a second page component; the second page component is a page component that the target rendering framework can run. The second determining module is used to determine the interface protocol of the target rendering framework. The interface protocol is used to record the component interfaces of the basic components used by the target rendering framework and the page display effect corresponding to each component interface. The page display effect of the basic components corresponding to different rendering frameworks is the same. The first basic component and the second basic component have different writing syntax but the same page display effect. The running module is used to run the second page component according to the interface protocol to obtain the target page.

8. The apparatus according to claim 7, characterized in that, The modification unit includes: The transformation subunit is used to transform the first component property of each first basic component in the syntax tree object into a second component property and the first style text of the first basic component into a second style text through the syntax interpreter. The second component property is a component property that can be read by the target rendering framework, and the second style text is style text that can be read by the target rendering framework. Generate sub-units to generate the second basic component based on the second component attributes and the second style text.

9. The apparatus according to claim 8, characterized in that, The conversion subunit is used for: Invoke the first correspondence between the first component property and the second component property of the basic component in the syntax interpreter; convert the first component property of the first basic component into the second component property according to the first correspondence and the first component property of the first basic component; The second correspondence between the first style text and the second style text in the basic components of the syntax interpreter is invoked; Based on the second correspondence and the first style text of the first basic component, the first style text of the first basic component is converted into the second style text.

10. The apparatus according to claim 7, characterized in that, The operating module includes: A determining unit is configured to determine each of the second basic components included in the second page component; The calling unit is used to call the component interface of each of the second basic components according to the interface protocol; The rendering unit is used to render the page display effect corresponding to each second basic component according to the component interface of each second basic component; and to render each second basic component based on the page display effect corresponding to each second basic component to obtain the target page.

11. The apparatus according to claim 10, characterized in that, The calling unit is used for: According to the interface protocol, the component interface of each second basic component is determined from the component adaptation layer; the component interface is called; wherein, the component adaptation layer includes the correspondence between the component interface of the third basic component and the component interface adapted by the target rendering framework, and the third basic component is a basic component in the basic component library based on the specified development language.

12. The apparatus according to claim 11, characterized in that, The device further includes: The third determining module is used to determine the basic component library; The fourth determining module is used to determine, for each specified rendering framework, the component interface of each third basic component in the basic component library under the rendering framework, according to the development language of the rendering framework. The fifth determining module is used to determine the correspondence between the component interface of the third basic component and the component interface adapted by the target rendering framework, based on the component interface adapted by each rendering framework and the component interface of the third basic component in the basic component library. The generation module is used to generate the component adaptation layer of the rendering framework based on the correspondence between the component interface of the third basic component and the component interface adapted to the target rendering framework.

13. A server, characterized in that, The server includes a processor and a memory, the memory storing at least one line of program code, which is loaded and executed by the processor to implement the page rendering method as described in any one of claims 1-6.

14. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores at least one piece of program code, which is loaded and executed by a processor to implement the page rendering method as described in any one of claims 1-6.

15. A computer program product comprising computer program code stored in a computer-readable storage medium, wherein a processor of a computer device reads the computer program code from the computer-readable storage medium and executes the computer program code, causing the computer device to perform the page rendering method as described in any one of claims 1-6.

Images