CN112000331A

CN112000331A - Page rendering method and device, electronic equipment and storage medium

Info

Publication number: CN112000331A
Application number: CN202010790541.4A
Authority: CN
Inventors: 张锋; 刘冰; 邱琦
Original assignee: Beijing Sankuai Online Technology Co Ltd
Current assignee: Beijing Sankuai Online Technology Co Ltd
Priority date: 2020-08-07
Filing date: 2020-08-07
Publication date: 2020-11-27

Abstract

The disclosure provides a page rendering method, a page rendering device, electronic equipment and a storage medium, and belongs to the technical field of software development. The method comprises the following steps: when the page is rendered, a target page component corresponding to the target page is obtained, parameter configuration is carried out on a configuration node of the target page component to obtain a component example, and the target page is rendered according to the component example. The parameter configuration is carried out on the configuration node of the target page component when the page is rendered, and the acquired configuration node of the target page component does not contain parameter information, so that the decoupling of the configuration node and the target page can be realized, and the universality of the page component is improved.

Description

Page rendering method and device, electronic equipment and storage medium

Technical Field

The present disclosure relates to the field of software development technologies, and in particular, to a page rendering method and apparatus, an electronic device, and a storage medium.

Background

When the electronic equipment displays a certain target page, the target page which can be displayed can be obtained only by performing page rendering according to the page data of the target page.

In the related technology, in order to improve rendering efficiency, before rendering a target page, an electronic device configures at least one component instance corresponding to the target page, each component instance includes a configuration node of the target page and parameter information of each configuration node, and performs page rendering according to the at least one component instance to obtain the target page, so that code multiplexing is achieved to a certain extent, workload of page developers is reduced, and rendering efficiency is improved.

Disclosure of Invention

The embodiment of the disclosure provides a page rendering method, a page rendering device, electronic equipment and a storage medium, and improves the universality of a page component. The technical scheme is as follows:

in one aspect, a method for rendering a page is provided, and the method includes:

responding to a target page to be rendered, and determining at least one target page component corresponding to the target page;

acquiring a configuration file of the at least one target page component, wherein the configuration file of each target page component comprises a configuration node of the target page component;

performing parameter configuration on the configuration node of the at least one target page component to generate at least one component instance;

and performing page rendering according to the at least one component instance to obtain the target page.

In a possible implementation manner, the performing page rendering according to the at least one component instance to obtain the target page includes:

storing the at least one component instance to a component tree for describing page information of the target page;

acquiring an analytic code template;

analyzing the component tree according to the analysis code template to obtain a page rendering file;

and performing page rendering according to the page rendering file to obtain the target page.

In another possible implementation manner, the parsing the component tree according to the parsing code template to obtain a page rendering file includes:

determining a location of each component instance in the component tree;

determining the nesting relation of each component instance according to the position of each instance component in the component tree;

and inputting the nesting relation among the analysis code template, the at least one component instance and each component instance to an analyzer to obtain the page rendering file.

In another possible implementation manner, the performing parameter configuration on the configuration node of the at least one target page component to generate at least one component instance includes:

displaying a first component editing interface, wherein the first component editing interface comprises a configuration node of the at least one target page component and an information input frame corresponding to the configuration node of each target page component;

acquiring parameter information input in an information input box corresponding to the configuration node of each target page component;

and generating the at least one component instance according to the at least one target page component and the parameter information of the configuration node of each target page component.

In another possible implementation manner, the generating the at least one component instance according to the at least one target page component and the parameter information of the configuration node of each target page component includes:

for each target page component, expanding the configuration nodes of the target page component to obtain expanded nodes;

acquiring the expansion information of the expansion node;

and the expansion node, the expansion information, the configuration node and the parameter information form a component instance of the target page component.

In another possible implementation manner, the storing the at least one component instance to a component tree for describing page information of the target page includes:

determining the hierarchical relationship of the at least one target page component in the target page;

and storing at least one component instance corresponding to at least one target page component as the component tree in a tree structure according to the hierarchical relation of the at least one target page component in the target page.

In another possible implementation manner, the determining at least one target page component corresponding to the target page includes:

displaying a second component editing interface, wherein the second component editing interface comprises a component identifier of at least one page component;

determining at least one component identification that is triggered;

and determining the page component corresponding to the triggered at least one component identifier as the at least one target page component.

In another aspect, an apparatus for rendering a page is provided, the apparatus including:

the determining module is used for responding to the rendering of a target page to be rendered and determining at least one target page component corresponding to the target page;

the acquisition module is used for acquiring the configuration file of the at least one target page component, and the configuration file of each target page component comprises a configuration node of the target page component;

the parameter configuration module is used for carrying out parameter configuration on the configuration node of the at least one target page component to generate at least one component instance;

and the rendering module is used for rendering a page according to the at least one component instance to obtain the target page.

In one possible implementation, the rendering module includes:

a storage unit, configured to store the at least one component instance to a component tree for describing page information of the target page;

the first acquisition unit is used for acquiring an analysis code template;

the analysis unit is used for analyzing the component tree according to the analysis code template to obtain a page rendering file;

and the rendering unit is used for rendering the page according to the page rendering file to obtain the target page.

In another possible implementation manner, the parsing unit is configured to determine a position of each component instance in the component tree; determining the nesting relation of each component instance according to the position of each instance component in the component tree; and inputting the nesting relation among the analysis code template, the at least one component instance and each component instance to an analyzer to obtain the page rendering file.

In another possible implementation manner, the parameter configuration module includes:

the first display unit is used for displaying a first component editing interface, and the first component editing interface comprises the configuration node of the at least one target page component and an information input frame corresponding to the configuration node of each target page component;

the second acquisition unit is used for acquiring the parameter information input in the information input box corresponding to the configuration node of each target page component;

and the generating unit is used for generating the at least one component instance according to the at least one target page component and the parameter information of the configuration node of each target page component.

In another possible implementation manner, the generating unit is configured to, for each target page component, expand a configuration node of the target page component to obtain an expansion node; acquiring the expansion information of the expansion node; and the expansion node, the expansion information, the configuration node and the parameter information form a component instance of the target page component.

In another possible implementation manner, the storage unit is configured to determine a hierarchical relationship of the at least one target page component in the target page; and storing at least one component instance corresponding to at least one target page component as the component tree in a tree structure according to the hierarchical relation of the at least one target page component in the target page.

In another possible implementation manner, the determining module includes:

the second display unit is used for displaying a second component editing interface, and the second component editing interface comprises a component identifier of at least one page component;

a first determination unit for determining at least one triggered component identification;

and the second determining unit is used for determining the page component corresponding to the triggered at least one component identifier as the at least one target page component.

In another aspect, an electronic device is provided that includes one or more processors and one or more memories having stored therein at least one instruction that is loaded and executed by the one or more processors to implement the operations performed by the page rendering method as described in the method embodiments of the disclosure.

In another aspect, a non-transitory computer-readable storage medium is provided, having stored therein at least one instruction that is loaded and executed by a processor to implement operations performed by a page rendering method as described in method embodiments of the present disclosure.

In the embodiment of the disclosure, the page component not containing the parameter information is configured in advance, and the parameter information corresponding to the target page component is obtained only when the page is rendered, so as to generate the component tree corresponding to the component instance, so that the parameter information of the target page does not need to be configured in the page component, the coupling between the node and the target page is configured, a page developer can conveniently call the page component, the universality of the page component is improved, and the labor cost of page development is reduced.

It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and together with the description, serve to explain the principles of the disclosure.

FIG. 1 is a diagram illustrating a system architecture in accordance with one method of page rendering according to an exemplary embodiment;

FIG. 2 is a flowchart illustrating a method of page rendering according to an exemplary embodiment;

FIG. 3 is a flowchart illustrating a method of page rendering according to an exemplary embodiment;

FIG. 4 is a flowchart illustrating a method of page rendering according to an exemplary embodiment;

FIG. 5 is a diagram illustrating a component editing interface in accordance with an illustrative embodiment;

FIG. 6 is an example of an assembly example shown in accordance with an exemplary embodiment;

FIG. 7 is a general structure of a component tree shown in accordance with an exemplary embodiment;

FIG. 8 illustrates a general structure of a component tree, according to an exemplary embodiment;

FIG. 9 is a flowchart illustrating a method of page rendering in accordance with an exemplary embodiment;

FIG. 10 is a block diagram illustrating a page rendering apparatus in accordance with an exemplary embodiment;

FIG. 11 is a block diagram illustrating a page rendering apparatus in accordance with an exemplary embodiment;

fig. 12 is a block diagram illustrating a structure of an electronic device according to an example embodiment.

Detailed Description

To make the objects, technical solutions and advantages of the present disclosure more apparent, embodiments of the present disclosure will be described in detail with reference to the accompanying drawings.

Reference will now be made in detail to the exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, like numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the exemplary embodiments below are not intended to represent all implementations consistent with the present disclosure. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present disclosure, as detailed in the appended claims.

FIG. 1 is a diagram illustrating a system architecture in accordance with one method of page rendering, according to an example embodiment. The system architecture diagram includes a first electronic device 101, a second electronic device 102, and a server 103. Wherein, the first electronic device 101 and the second electronic device 102 can be connected with the server 103 through a wireless network.

The first electronic device 101 is an electronic device used by a page developer. The developer designs and develops a target page through the first electronic device 101, sends related data of the target page to the server 103, the server 103 renders the target page according to the related data of the target page, and sends the rendered page to the second electronic device 102. The second electronic device 102 receives the rendered target page and displays the target page on the display screen.

The first electronic device 101 and the second electronic device 102 may be the same electronic device or different electronic devices, and both the first electronic device 101 and the second electronic device 102 may be a mobile phone, a computer, a tablet computer, or a wearable device. The server 103 may be one server 103, a server 103 cluster composed of a plurality of servers 103, a cloud server 103, or the like. In the embodiments of the present disclosure, this is not particularly limited.

Fig. 2 is a flowchart illustrating a page rendering method according to an exemplary embodiment, where the page rendering method includes the following steps, as shown in fig. 2:

step 201: and responding to the target page to be rendered, and determining at least one target page component corresponding to the target page.

Step 202: and acquiring the configuration file of the at least one target page component, wherein the configuration file of each target page component comprises a configuration node of the target page component.

Step 203: and performing parameter configuration on the configuration node of the at least one target page component to generate at least one component instance.

Step 204: and performing page rendering according to the at least one component instance to obtain the target page.

acquiring an analytic code template;

determining the position of each component instance in the component tree;

and inputting the nesting relation among the analysis code template, the at least one component instance and each component instance into an analyzer to obtain the page rendering file.

displaying a first component editing interface, wherein the first component editing interface comprises a configuration node of the at least one target page component and an information input box corresponding to the configuration node of each target page component;

acquiring the expansion information of the expansion node;

and the extension node, the extension information, the configuration node and the parameter information form a component instance of the target page component.

determining at least one component identification that is triggered;

and determining the page component corresponding to the triggered at least one component identification as the at least one target page component.

FIG. 3 is a flowchart illustrating a method of page rendering according to an example embodiment. As shown in fig. 3, the page rendering method includes the steps of:

step 301: the first electronic device configures at least one page component to obtain a configuration file of the at least one page component, wherein the configuration file of each page component comprises a configuration node of the page component.

The at least one page component may be a component described by a front-end development framework Vue (a database used to build interactive pages). The at least one page component may be a page component corresponding to different regions of the page, for example, the at least one page component may be a page component corresponding to a page in different regions of the page, such as upper left, upper right, lower left, and lower right. The at least one page component may also be a page component corresponding to different functions of one page, for example, the at least one page component may be a page component corresponding to a picture in a page, a page component corresponding to a jump connection, or a page component corresponding to a page in an advertisement, and the like.

In this step, referring to fig. 4, the first electronic device configures at least one page component, thereby determining an open-to-outside configuration node of the at least one page component. The configuration node may include a configuration node where the page component may receive external data, a bubble-able event node, a slot on the page component, or information broadcast by the page component to the outside, and the like. These configuration nodes may be written in data form Vue, see table 1, and may be tips, events, slots, actions, or the like.

TABLE 1

Vue configuration node in data form	Description of configuration nodes
		props	The page component can receive external data configuration nodes
events	Bubbleable event node
		slots	Slot on page component
actions	Page component external broadcast

The first electronic device may compose a configuration file of the at least one page component in a data form of Vue. For each page component, the configuration file for that page component includes a component name and a configuration node. See, for example, example one.

Example one:

in this example, a component name indicating the page component is "card component", and a machine readable name is "card", and the externally open configuration nodes of the page component configuration may include tips, events, slots, and actions, and may further include other configuration nodes, which are not specifically limited in this disclosed embodiment. The following description will take examples in which the configuration nodes include tips, events, slots, and actions.

The configuration node tips is used for describing page components such as attribute names, attribute data types or description information of the page components and receiving external data configuration. Referring to table 2, table 2 is the field types supported by the prop.

TABLE 2

The point to be noted is that the types supported by the attribute data type include string, int, number, object, array, and the like.

The first electronic device may describe the configuration node tips in the form of data Vue. See, for example, example two.

Example two:

wherein, the second example describes a configuration node tips, which is a configuration node for popup of a ticket list. Vue description contents of the configuration node tips comprise attribute information such as height top of the ticket list popup, application environment channel and acquisition condition query.

The node events is configured to describe event information for page components that may bubble events. Referring to table 3, table 3 is for field types supported by the configuration node events.

TABLE 3

The first electronic device may describe the configuration node events in data form of Vue. See, for example, example three.

Example three:

wherein, the third example describes a bubbling process of configuring node events, and the configuring node events is a prompting information bubbling event of a ticket list popup. The occurrence time of the event is 'failure to acquire the coupon list and failure to receive the coupon'.

The configuration node slots are used for describing slot information of available slots reserved in the page component. Referring to Table 4, Table 4 is the field types supported by slots.

TABLE 4

It should be noted that the slot name, the slot description information, and the like may be described in use. The page developer first electronic device may describe the configuration node slots of the page component in data form Vue. See, for example, example four.

Example four:

wherein, the above example four describes an additional information slot of the configuration node slots, the additional information slot supports adding additional information display, supporting additional promotion information at the entrance, and the like.

The configuration node actions are used for describing information broadcasted by the page components. Referring to table 5, table 5 sets forth the field types supported by the configuration node actions.

TABLE 5

The first electronic device may describe the configuration node actions in data form Vue. See, for example, example five.

Example five:

wherein, the fifth example above describes information of outward presentation of a page component, the information comprising full-list popup open and close information.

The first electronic device configures each page component, and after the configuration file of the at least one page component is obtained, the configuration file of the page component can be stored in a local database. The first electronic device can also store the configuration file of each page component in the database in the server, so that when other electronic devices use the page components, the configuration files of the page components can be directly obtained from the database in the server, the page components do not need to be configured again, and sharing of the configuration files of the page components is achieved.

The server may be a page rendering server, or may be another server dedicated to data sharing, which is not specifically limited in this disclosure. Wherein the configuration file of the at least one page component may be stored in the database in a tree structure.

Step 302: in response to rendering a target page to be rendered, the first electronic device determines at least one target page component corresponding to the target page.

Referring to fig. 4, the first electronic device may determine at least one target page component corresponding to the target page component according to different manners. In a first implementation manner, a first electronic device determines at least one target page component according to page elements included in a target page. Correspondingly, the step of determining, by the first electronic device, at least one target page component corresponding to the target page may be:

the first electronic device determines at least one page element included in the target page, determines a page component corresponding to each page element according to each page element, and determines the page component corresponding to each page element as at least one target page component. And if at least one page element is a picture or a popup, and the like, the at least one target page component comprises a page component corresponding to the picture and a page component corresponding to the popup.

In the implementation manner, the first electronic device divides the target page according to the page elements in the target page, so that the division process can be determined through the purchased component elements, and the division precision of page division is improved.

In a second implementation manner, the first electronic device divides a target page to obtain at least one target page component of the target page. Correspondingly, the step of determining, by the first electronic device, at least one target page component corresponding to the target page may be:

the first electronic device divides the target page into at least one area, obtains a page component corresponding to each area, and determines the page component corresponding to each area as at least one target page component. In the implementation mode, the first electronic device divides the target page component according to the area, the division process is simple and convenient, and the division efficiency is improved.

In a third implementation manner, the first electronic device determines at least one target page component according to the function of the target page. Correspondingly, the step of determining, by the first electronic device, at least one target page component corresponding to the target page may be:

the first electronic device determines at least one function of a target page, obtains a page component corresponding to each function, and determines the page component corresponding to each function as at least one target page component.

In the implementation manner, the first electronic device divides the target page according to the function of the target page to obtain the target component of the target page, so that the target page is complete in function and is not divided.

In a fourth implementation manner, the first electronic device may determine at least one target page component according to the component identifier of the target page. Correspondingly, the step of determining, by the first electronic device, at least one target page component corresponding to the target page may be:

the first electronic device determines a storage directory of the target page, the storage directory displays a component identifier of at least one target page component corresponding to the target page, and at least one target page component is determined according to the component identifier of the at least one target page component. The component identifier may be an identifier such as a name of a page component.

In the implementation mode, the first electronic device determines the target page component through the component identifier of the target page, so that the accuracy of determining the target page component is improved.

In a fifth implementation manner, the first electronic device may display the second component editing interface, and the page developer may select a target page component of the target page through the second component editing interface of the first electronic device. Correspondingly, the step of determining, by the first electronic device, at least one target page component corresponding to the target page may be: can be realized by the following steps (1) to (3), including:

(1) the first electronic equipment displays a second component editing interface, wherein the second component editing interface at least comprises a component identification of at least one page component.

Referring to FIG. 5, the second component editing interface includes a component list window. Wherein the component list window comprises the component identification of at least one page component.

(2) The first electronic device determines the at least one component identification that is triggered.

The first electronic device may receive a triggering operation of at least one page component according to the component list window, and determine at least one triggered component identifier according to the triggering operation. The trigger operation may be a click operation, a long-time press operation, a drag operation, or the like, and in the embodiment of the present disclosure, the trigger operation is not specifically limited.

(3) And the first electronic equipment determines the page component corresponding to the triggered at least one component identification as the at least one target page component.

The second editing interface may further include a component tree presentation window for presenting the selected target page component. Correspondingly, the first electronic device presents the triggered at least one target page component in a component tree presentation window, see fig. 5, which presents the nesting relationship between the respective target page components, and the component identifier of each page component.

It should be noted that the nesting relationship of at least one target page component in the component tree may be a default nesting relationship, and accordingly, the page developer may select at least one target page component that meets the nesting relationship through the nesting relationship shown in the first electronic device. The component tree display window can also display a component tree of a blank nesting relation, and a page developer designs the nesting relation of the component tree through the component tree display window, wherein the page developer can drag a target page component to a target position of the component tree display window, and the first electronic device can generate the nesting relation of the component tree according to the target position of the target page component.

In the implementation mode, the first electronic device selects at least one target page component through the second component editing interface, and enables the process of selecting the target component to be more visual, so that page developers can edit the target page conveniently, and the page editing efficiency is improved.

It should be noted that the first electronic device may configure the configuration file of at least one page component first, and then render the target interface; or configuring a configuration file of at least one target page component of the target page when the target page is rendered; correspondingly, when the first electronic equipment renders the target page, at least one target page component of the target page is configured; then steps 301 and 302 may be: in response to rendering a target page to be rendered, the first electronic device configures at least one target page component.

Step 303: the first electronic equipment acquires the configuration file of the at least one target page component from the configuration file of the at least one page component.

Wherein the configuration file of each target page component comprises a configuration node of the target page component. The first electronic device may obtain the configuration file of the at least one target page component from a database storing the configuration file.

Step 304: and the first electronic equipment displays a first component editing interface, wherein the first component editing interface comprises the configuration node of the at least one target page component and an information input box corresponding to the configuration node of each target page component.

The information input box corresponding to the configuration node is used to input parameter information of the configuration node, where the parameter information may include attribute information of a target page component, for example, if the target page component is a page component corresponding to a picture in a page, the parameter information of the configuration node may include attribute of the picture, size of the picture, mode of occurrence of the picture, or parameter information of an event corresponding to the picture.

The first electronic device may directly display the configuration node of at least one target page component and the information input frame corresponding to the configuration node of each target page component in the first component editing interface, or display a node information filling window in the first component editing interface, and display the information input frame corresponding to the configuration node of each target page component in the node information filling window.

The first component editing interface and the second component editing interface may be the same component editing interface or different component editing interfaces, which is not specifically limited in this disclosure. For example, referring to fig. 5, the first component editing interface and the second component editing interface may be the same component editing interface, and the first component editing interface and the second component editing interface include a component list window, a component tree showing window, and a node information filling window.

Step 305: and the first electronic equipment acquires the parameter information input in the information input box corresponding to the configuration node of each target page component.

Referring to fig. 5, the page developer may input the parameter information of each page component into the first component editing interface as needed, and accordingly, the first electronic device obtains the parameter information input in the information input box corresponding to the configuration node of each page component.

In the implementation mode, the page component without parameter information is configured in advance, and the parameter information corresponding to the page component is acquired when the page is rendered, so that the coupling of the page component is reduced, the use freedom of the page component is improved, the page component can be reused for multiple times, and the reuse rate of the page component is improved.

Step 306: the first electronic equipment generates the at least one component instance according to the at least one target page component and the parameter information of the configuration node of each target page component.

The component instance is a data structure generated by a page developer according to parameter information of the target page component and the configurable information in the page component, and is an extension of a component description data structure. In one possible implementation manner, the first electronic device may generate the component instance directly according to the page component and the parameter information of the page component. Correspondingly, the steps can be as follows: for each target page component, the first electronic equipment forms a component instance by using the parameter information of the target page component and the configuration node of the target page component.

In another possible implementation manner, the first electronic device may further add other information to the page component, and generate the component instance according to the added other information. Accordingly, the process can be realized by the following steps (1) to (3), including:

(1) for each target page component, the first electronic device expands the configuration node of the target page component to obtain an expansion node.

The first electronic device may respectively expand an inner layer or an outer layer of the target page component, and may also expand the content of the configuration node in the target page component.

In one possible implementation, the first electronic device expands an outer layer of the target page component; the step of expanding the configuration node of the target page component by the first electronic device to obtain an expanded node may be: the first electronic device adds a first extension node, where the first extension node is configured to store an Identifier of the target page component, where the Identifier may be a UUID (universal Unique Identifier) of the target page component, and the like, for example, the UUID of the target page component may be "xJHkT 0op 3".

In another possible implementation manner, if the first electronic device expands the inner layer of the target page component, the first electronic device expands the configuration node of the target page component, and the step of obtaining the expansion node may be: the first electronic device adds a second expansion node for storing a package name of the target page component in an NPM (a tool pack management tool) repository for use in subsequent code generation.

In another possible implementation manner, when the first electronic device expands the content of the configuration node in the target page component, the first electronic device expands the configuration node of the target page component, and the step of obtaining the expansion node may be: and adding a third expansion node to the first electronic device, wherein the third expansion node is used for storing data increment actual values (sequences) of tips, events, slots and the like of the target page component for expansion.

For each item in the props, the actual value added by the configuration node is referred to in table 6, and table 6 is the actual value extended in the props.

TABLE 6

The actual value in the props is used to represent the actual value of the configuration node in the component instance. Because there are many cases in the development scenario, the above fields are used to completely describe the value of one configuration node, and different configuration nodes are represented by different values of the configuration node, so as to buy multiple cases in the actual development scenario.

The actual values added by the nodes are configured for each entry in events, see table 7, table 7 being the actual values expanded in events.

TABLE 7

The actual value in events, which is used to represent the actual response code for that event in the component instance, will be injected into the generated code.

For each entry in the slot, the actual value added by the node is configured, see table 8, where table 8 is the actual value expanded in the slot.

TABLE 8

(2) The first electronic device obtains the expansion information of each expansion node.

The augmentation information includes one or more of the identification of the target page component, the packet name of the target page component in the NPM repository, and data augmentation actual values of the tips, events, slots, and the like of the target page component.

In one possible implementation, a page developer may input the expansion information for each expansion node; correspondingly, the step of the first electronic device obtaining the expansion information of each expansion node may be: the first electronic equipment displays an extended information adding interface, the extended information adding interface comprises an extended information input frame corresponding to each extended node, and a page developer can input the extended information of each extended node in the extended information input frame corresponding to each extended node; the first electronic device receives the inputted extension information of each extension node.

In another possible implementation manner, the first electronic device may obtain the expansion information of each expansion node from the database according to the attribute information of each expansion node. For example, the database stores the corresponding relationship between the extended information of a plurality of extended nodes and the attribute information of the extended nodes, and the first electronic device determines the extended information corresponding to the attribute information of the extended nodes from the corresponding relationship between the extended information of the extended nodes and the attribute information of the extended nodes according to the attribute information of the extended nodes.

(3) The first electronic equipment forms the component instance of the target page component by the extension node, the extension information, the configuration node and the parameter information.

In this step, the first electronic device fills the expansion nodes and the expansion information corresponding to the expansion nodes and the parameter information corresponding to the configuration nodes into corresponding positions, and generates the component instance. Referring to fig. 6, fig. 6 is an example of an assembly example shown according to an exemplary embodiment. Referring to fig. 6, the component instance includes an identifier "xJHkT 0op 3" of the component instance, and configurable information props, events, slots, and actions, where the configurable information further includes an extended node and extended information.

Step 307: the first electronic device stores at least one component instance to a component tree for describing page information of the target page.

The component tree is a data structure composed of a plurality of component instances and can describe rendering information of a target page after configuration. The component tree formed by the component instances comprises information contained by the component instances, and also comprises information of hierarchical nested relation among the component instances, root component entries and the like.

Accordingly, this step can be realized by the following steps (1) to (2), including:

(1) the first electronic device determines the hierarchical relationship of the at least one target page component in the target page.

In this step, the first electronic device determines a hierarchical relationship between component instances of the at least one target page component according to the target page. The first electronic device can acquire the adjacent relation or the jump relation of the component instance of the at least one target page component in the target page to determine the nesting relation of the component instance of the at least one target page component. The first electronic device can also determine the hierarchical relationship of at least one component instance through the hierarchical relationship of each component in the component editing interface.

(2) And the first electronic equipment stores at least one component instance corresponding to at least one target page component as the component tree in a tree structure according to the hierarchical relation of the at least one target page component in the target page.

Referring to fig. 7, fig. 7 is a general structure of a component tree shown in accordance with an exemplary embodiment. Referring to fig. 7, the component tree includes a root component entry "root": "xJHkT 0op 3"; one component example is "xJHkT 0op 3", respectively; the files in the slots identify information such as "hiZson 9 mF" and "EqaCPWKot".

It should be noted that the component tree obtained when at least one component instance is spliced may be a flat structure as shown in fig. 7, and when the component tree is stored, the component tree of the flat structure may be stored in a flat list form, see fig. 8, where fig. 8 is a rough structure of a component tree shown according to an exemplary embodiment. Referring to fig. 8, when storing, file identifiers in slots in a component tree are stored in a list form, so that the first electronic device can conveniently acquire information of each component instance, and when editing, a tree structure is used, which is good in readability and easy to visualize.

Step 308: the first electronic device obtains an analytic code template.

Referring to fig. 9, the first electronic device parses the component tree, parses rendering data of a target page carried in the component tree, and generates a page rendering file by parsing the code template.

And resolving the code template into a code template available for rendering. The parsed code template may be a code template corresponding to the target code language. For example, the parse code template may be an Vue code template or the like. The parsing code template may be a parsing code template received by the first electronic device and input by a user, and may also be a parsing code template acquired by the first electronic device from other electronic devices, which is not specifically limited in this embodiment of the disclosure.

Step 309: and the first electronic equipment analyzes the component tree according to the analysis code template to obtain a page rendering file.

The first electronic equipment analyzes the rendering data carried in the component tree, and fills the analyzed rendering data in the corresponding position of the analysis code template in a template format according to the analysis code template to obtain a page rendering file. The resolution process can be realized by the following steps (1) to (3), including:

(1) the first electronic device determines a location of each component instance in the component tree.

And the first electronic equipment traverses the component tree, reads the identification of each component instance in the component tree and obtains the position of at least one component instance corresponding to the component tree in the component tree.

(2) And the first electronic equipment determines the nesting relation of each component instance according to the position of each instance component in the component tree.

The first electronic device determines an association relation between each component instance according to the position of each component instance in the component tree, and determines a management relation between each component instance as a nesting relation of each component instance.

(3) The first electronic equipment inputs the nesting relation among the analysis code template, the at least one component instance and each component instance to an analyzer to obtain the page rendering file.

The first electronic device may perform traversal parsing on the component tree to obtain a compliable code file, and compile the code file through the Vue framework to obtain the page rendering file.

It should be noted that, after the first electronic device parses the component tree to obtain a compliable code file, the first electronic device may directly compile the code file to obtain a page rendering file, and the first electronic device may further adjust the obtained code file, where the adjustment process may be: and receiving a development adjustment instruction input by a user, adjusting the code file according to the development adjustment instruction, and compiling the adjusted code file to obtain the page rendering file.

Another point to be described is that the component tree parsing process may also be executed by other electronic devices, and accordingly, the first electronic device sends the component tree to the other electronic devices, the other electronic devices parse the component tree, send the page rendering file obtained by parsing to the first electronic device, and the first electronic device receives the page rendering file sent by the other electronic devices. The process of analyzing the component tree by the other electronic device is similar to the process of analyzing the component tree by the first electronic device, and is not repeated herein.

Step 310: and the first electronic equipment carries out page rendering according to the page rendering file to obtain the target page.

The first electronic device may send the page rendering data to a server, and the server performs page rendering on the target page according to the page rendering data to obtain the target page. After the target page is rendered by the server, the target page can be sent to the first electronic equipment, and whether the target page meets the design concept of developers or not is determined by the first electronic equipment; the server can also send the target page to the second electronic device, and the second electronic device displays the target page.

Fig. 10 is a block diagram illustrating a page rendering apparatus according to an exemplary embodiment, and as shown in fig. 10, the page rendering apparatus includes:

a determining module 1001, configured to determine, in response to rendering a target page to be rendered, at least one target page component corresponding to the target page;

an obtaining module 1002, configured to obtain a configuration file of the at least one target page component, where the configuration file of each target page component includes a configuration node of the target page component;

a parameter configuration module 1003, configured to perform parameter configuration on a configuration node of the at least one target page component, and generate at least one component instance;

and a rendering module 1004, configured to perform page rendering according to the at least one component instance, so as to obtain the target page.

In one possible implementation, referring to fig. 11, the rendering module 1004 includes:

a storage unit 10041 configured to store the at least one component instance to a component tree for describing page information of the target page;

a first obtaining unit 10042, configured to obtain an analysis code template;

an analyzing unit 10043, configured to analyze the component tree according to the analysis code template to obtain a page rendering file;

the rendering unit 10044 is configured to perform page rendering according to the page rendering file, so as to obtain the target page.

In another possible implementation, the parsing unit 10043 is configured to determine a position of each component instance in the component tree; determining the nesting relation of each component instance according to the position of each instance component in the component tree; and inputting the nesting relation among the analysis code template, the at least one component instance and each component instance into an analyzer to obtain the page rendering file.

In another possible implementation manner, referring to fig. 11, the parameter configuration module 1003 includes:

a first display unit 10031, configured to display a first component editing interface, where the first component editing interface includes a configuration node of the at least one target page component and an information input box corresponding to the configuration node of each target page component;

a second obtaining unit 10032, configured to obtain parameter information input in the information input box corresponding to the configuration node of each target page component;

a generating unit 10033 is configured to generate the at least one component instance according to the at least one target page component and the parameter information of the configuration node of each target page component.

In another possible implementation manner, the generating unit 10033 is configured to, for each target page component, expand the configuration node of the target page component to obtain an expanded node; acquiring the expansion information of the expansion node; and the extension node, the extension information, the configuration node and the parameter information form a component instance of the target page component.

In another possible implementation manner, the storage unit 10041 is configured to determine a hierarchical relationship of the at least one target page component in the target page; and storing at least one component instance corresponding to at least one target page component as the component tree in a tree structure according to the hierarchical relation of the at least one target page component in the target page.

In another possible implementation, referring to fig. 11, the determining module 1001 includes:

a second display unit 10011, configured to display a second component editing interface, where the second component editing interface includes a component identifier of at least one page component;

a first determining unit 10012, configured to determine at least one triggered component identifier;

the second determining unit 10013 is configured to determine, as the at least one target page component, a page component corresponding to the triggered at least one component identifier.

It should be noted that: in the page rendering apparatus provided in the foregoing embodiment, only the division of the functional modules is exemplified when rendering a page, and in practical applications, the function distribution may be completed by different functional modules according to needs, that is, the internal structure of the terminal is 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 provided by the above embodiments belong to the same concept, and specific implementation processes thereof are detailed in the method embodiments and are not described herein again.

Fig. 12 shows a block diagram of an electronic device 1200 according to an exemplary embodiment of the present disclosure. The electronic device 1200 may be: a smart phone, a tablet computer, an MP3 player (Moving Picture Experts Group Audio Layer III, motion video Experts compression standard Audio Layer 3), an MP4 player (Moving Picture Experts Group Audio Layer IV, motion video Experts compression standard Audio Layer 4), a notebook computer, or a desktop computer. The electronic device 1200 may also be referred to by other names such as user equipment, portable terminals, laptop terminals, desktop terminals, and the like.

In general, the electronic device 1200 includes: a processor 1201 and a memory 1202.

The processor 1201 may include one or more processing cores, such as a 4-core processor, an 8-core processor, or the like. The processor 1201 may be implemented in at least one hardware form of a DSP (Digital Signal Processing), an FPGA (Field-Programmable Gate Array), and a PLA (Programmable Logic Array). The processor 1201 may also include a main processor and a coprocessor, where the main processor is a processor for Processing data in an awake state, and is also called a Central Processing Unit (CPU); a coprocessor is a low power processor for processing data in a standby state. In some embodiments, the processor 1201 may be integrated with a GPU (Graphics Processing Unit) that is responsible for rendering and drawing content that the display screen needs to display. In some embodiments, the processor 1201 may further include an AI (Artificial Intelligence) processor for processing a computing operation related to machine learning.

Memory 1202 may include one or more computer-readable storage media, which may be non-transitory. Memory 1202 may also include high-speed random access memory, as well as non-volatile memory, such as one or more magnetic disk storage devices, flash memory storage devices. In some embodiments, a non-transitory computer readable storage medium in memory 1202 is used to store at least one instruction for execution by processor 1201 to implement the page rendering method provided by method embodiments in the present disclosure.

In some embodiments, the electronic device 1200 may further optionally include: a peripheral interface 1203 and at least one peripheral. The processor 1201, memory 1202, and peripheral interface 1203 may be connected by a bus or signal line. Various peripheral devices may be connected to peripheral interface 1203 via a bus, signal line, or circuit board. Specifically, the peripheral device includes: at least one of radio frequency circuitry 1204, touch-sensitive display 1205, camera 1206, camera assembly 1206, audio circuitry 1207, positioning assembly 1208, and power supply 1209.

The peripheral interface 1203 may be used to connect at least one peripheral associated with I/O (Input/Output) to the processor 1201 and the memory 1202. In some embodiments, the processor 1201, memory 1202, and peripheral interface 1203 are integrated on the same chip or circuit board; in some other embodiments, any one or two of the processor 1201, the memory 1202 and the peripheral device interface 1203 may be implemented on a separate chip or circuit board, which is not limited in this embodiment.

The Radio Frequency circuit 1204 is used for receiving and transmitting RF (Radio Frequency) signals, also called electromagnetic signals. The radio frequency circuit 1204 communicates with a communication network and other communication devices by electromagnetic signals. The radio frequency circuit 1204 converts an electric signal into an electromagnetic signal to transmit, or converts a received electromagnetic signal into an electric signal. Optionally, the radio frequency circuit 1204 comprises: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a subscriber identity module card, and so forth. The radio frequency circuit 1204 may communicate with other terminals through at least one wireless communication protocol. The wireless communication protocols include, but are not limited to: the world wide web, metropolitan area networks, intranets, generations of mobile communication networks (2G, 3G, 4G, and 5G), Wireless local area networks, and/or WiFi (Wireless Fidelity) networks. In some embodiments, the radio frequency circuit 1204 may further include NFC (Near Field Communication) related circuits, which are not limited by this disclosure.

The display screen 1205 is used to display a UI (User Interface). The UI may include graphics, text, icons, video, and any combination thereof. When the display screen 1205 is a touch display screen, the display screen 1205 also has the ability to acquire touch signals on or over the surface of the display screen 1205. The touch signal may be input to the processor 1201 as a control signal for processing. At this point, the display 1205 may also be used to provide virtual buttons and/or a virtual keyboard, also referred to as soft buttons and/or a soft keyboard. In some embodiments, the display 1205 may be one, providing the front panel of the electronic device 1200; in other embodiments, the display panels 1205 can be at least two, respectively disposed on different surfaces of the electronic device 1200 or in a folded design; in still other embodiments, the display 1205 may be a flexible display disposed on a curved surface or on a folded surface of the electronic device 1200. Even further, the display screen 1205 may be arranged in a non-rectangular irregular figure, i.e., a shaped screen. The Display panel 1205 can be made of LCD (Liquid Crystal Display), OLED (Organic Light-Emitting Diode), or other materials.

Camera assembly 1206 is used to capture images or video. Optionally, camera assembly 1206 includes a front camera and a rear camera. Generally, a front camera is disposed at a front panel of the terminal, and a rear camera is disposed at a rear surface of the terminal. In some embodiments, the number of the rear cameras is at least two, and each rear camera is any one of a main camera, a depth-of-field camera, a wide-angle camera and a telephoto camera, so that the main camera and the depth-of-field camera are fused to realize a background blurring function, and the main camera and the wide-angle camera are fused to realize panoramic shooting and VR (Virtual Reality) shooting functions or other fusion shooting functions. In some embodiments, camera assembly 1206 may also include a flash. The flash lamp can be a monochrome temperature flash lamp or a bicolor temperature flash lamp. The double-color-temperature flash lamp is a combination of a warm-light flash lamp and a cold-light flash lamp, and can be used for light compensation at different color temperatures.

The audio circuitry 1207 may include a microphone and a speaker. The microphone is used for collecting sound waves of a user and the environment, converting the sound waves into electric signals, and inputting the electric signals into the processor 1201 for processing or inputting the electric signals into the radio frequency circuit 1204 to achieve voice communication. For stereo capture or noise reduction purposes, the microphones may be multiple and disposed at different locations of the electronic device 1200. The microphone may also be an array microphone or an omni-directional pick-up microphone. The speaker is used to convert electrical signals from the processor 1201 or the radio frequency circuit 1204 into sound waves. The loudspeaker can be a traditional film loudspeaker or a piezoelectric ceramic loudspeaker. When the speaker is a piezoelectric ceramic speaker, the speaker can be used for purposes such as converting an electric signal into a sound wave audible to a human being, or converting an electric signal into a sound wave inaudible to a human being to measure a distance. In some embodiments, the audio circuitry 1207 may also include a headphone jack.

The positioning component 1208 is used to locate a current geographic Location of the electronic device 1200 to implement navigation or LBS (Location Based Service). The Positioning component 1208 can be a Positioning component based on the united states GPS (Global Positioning System), the chinese beidou System, the russian graves System, or the russian eu galileo System.

The power supply 1209 is used to supply power to various components in the electronic device 1200. The power source 1209 may be alternating current, direct current, disposable or rechargeable. When the power source 1209 includes a rechargeable battery, the rechargeable battery may be a support wired or wireless rechargeable battery. The wired rechargeable battery is a battery charged through a wired line, and the wireless rechargeable battery is a battery charged through a wireless coil. The rechargeable battery may also be used to support fast charge technology.

In some embodiments, the electronic device 1200 also includes one or more sensors 1210. The one or more sensors 1210 include, but are not limited to: acceleration sensor 1211, gyro sensor 1212, pressure sensor 1213, fingerprint sensor 1214, optical sensor 1215, and proximity sensor 1216.

The acceleration sensor 1211 may detect magnitudes of accelerations on three coordinate axes of a coordinate system established with the electronic apparatus 1200. For example, the acceleration sensor 1211 may be used to detect components of the gravitational acceleration in three coordinate axes. The processor 1201 may control the touch display 1205 to display the user interface in a landscape view or a portrait view according to the gravitational acceleration signal collected by the acceleration sensor 1211. The acceleration sensor 1211 may also be used for acquisition of motion data of a game or a user.

The gyro sensor 1212 may detect a body direction and a rotation angle of the electronic device 1200, and the gyro sensor 1212 may collect a 3D motion of the user on the electronic device 1200 in cooperation with the acceleration sensor 1211. The processor 1201 can implement the following functions according to the data collected by the gyro sensor 1212: motion sensing (such as changing the UI according to a user's tilting operation), image stabilization at the time of photographing, game control, and inertial navigation.

The pressure sensors 1213 may be disposed on a side bezel of the electronic device 1200 and/or on an underlying layer of the touch display 1205. When the pressure sensor 1213 is disposed on a side frame of the electronic device 1200, a user's holding signal to the electronic device 1200 can be detected, and the processor 1201 performs left-right hand recognition or shortcut operation according to the holding signal acquired by the pressure sensor 1213. When the pressure sensor 1213 is disposed at a lower layer of the touch display screen 1205, the processor 1201 controls the operability control on the UI interface according to the pressure operation of the user on the touch display screen 1205. The operability control comprises at least one of a button control, a scroll bar control, an icon control and a menu control.

The fingerprint sensor 1214 is used for collecting a fingerprint of the user, and the processor 1201 identifies the user according to the fingerprint collected by the fingerprint sensor 1214, or the fingerprint sensor 1214 identifies the user according to the collected fingerprint. When the user identity is identified as a trusted identity, the processor 1201 authorizes the user to perform relevant sensitive operations, including unlocking a screen, viewing encrypted information, downloading software, paying, changing settings, and the like. The fingerprint sensor 1214 may be disposed on the front, back, or side of the electronic device 1200. When a physical button or vendor Logo is provided on the electronic device 1200, the fingerprint sensor 1214 may be integrated with the physical button or vendor Logo.

The optical sensor 1215 is used to collect the ambient light intensity. In one embodiment, the processor 1201 may control the display brightness of the touch display 1205 according to the ambient light intensity collected by the optical sensor 1215. Specifically, when the ambient light intensity is high, the display brightness of the touch display panel 1205 is increased; when the ambient light intensity is low, the display brightness of the touch display panel 1205 is turned down. In another embodiment, processor 1201 may also dynamically adjust the camera head 1206 shooting parameters based on the ambient light intensity collected by optical sensor 1215.

The proximity sensor 1216, also called a distance sensor, is typically disposed on the front panel of the electronic device 1200. The proximity sensor 1216 is used to collect the distance between the user and the front of the electronic device 1200. In one embodiment, when the proximity sensor 1216 detects that the distance between the user and the front of the electronic device 1200 gradually decreases, the processor 1201 controls the touch display 1205 to switch from the bright screen state to the dark screen state; when the proximity sensor 1216 detects that the distance between the user and the front surface of the electronic device 1200 gradually becomes larger, the processor 1201 controls the touch display 1205 to switch from the breath-screen state to the bright-screen state.

Those skilled in the art will appreciate that the configuration shown in fig. 12 is not limiting of electronic device 1200 and may include more or fewer components than shown, or combine certain components, or employ a different arrangement of components.

In an exemplary embodiment, a computer-readable storage medium is further provided, in which at least one instruction is stored, and the at least one instruction is loaded and executed by a server to implement the page rendering method in the foregoing embodiments. The computer readable storage medium may be a memory. For example, the computer-readable storage medium may be a ROM (Read-Only Memory), a RAM (Random Access Memory), a CD-ROM (Compact Disc Read-Only Memory), a magnetic tape, a floppy disk, an optical data storage device, and the like.

It will be understood by those skilled in the art that all or part of the steps for implementing the above embodiments may be implemented by hardware, or may be implemented by a program instructing relevant hardware, and the program may be stored in a computer-readable storage medium, and the above-mentioned storage medium may be a read-only memory, a magnetic disk or an optical disk, etc.

The above disclosure is intended to cover alternative embodiments of the disclosure, and not to limit the disclosure to the particular forms disclosed, but on the contrary, the intention is to cover all modifications, equivalents, and alternatives falling within the spirit and scope of the disclosure.

Claims

1. A method for rendering a page, the method comprising:

2. The method of claim 1, wherein the performing page rendering according to the at least one component instance to obtain the target page comprises:

acquiring an analytic code template;

3. The method of claim 2, wherein parsing the component tree according to the parsed code template to obtain a page rendering file comprises:

determining a location of each component instance in the component tree;

4. The method of claim 1, wherein the performing parameter configuration on the configuration node of the at least one target page component to generate at least one component instance comprises:

5. The method of claim 4, wherein the generating the at least one component instance according to the at least one target page component and the parameter information of the configuration node of each target page component comprises:

acquiring the expansion information of the expansion node;

6. The method of claim 2, wherein storing the at least one component instance to a component tree for describing page information of the target page comprises:

7. The method of claim 1, wherein the determining at least one target page component corresponding to the target page comprises:

determining at least one component identification that is triggered;

8. An apparatus for rendering a page, the apparatus comprising:

9. An electronic device, wherein the computer device comprises one or more processors and one or more memories having stored therein at least one instruction that is loaded and executed by the one or more processors to implement operations performed by the page rendering method of any of claims 1 to 7.

10. A non-transitory computer-readable storage medium having stored therein at least one instruction, which is loaded and executed by a processor to perform operations performed by the page rendering method of one of claims 1 to 7.