A code generation method, device, computer equipment and storage medium

Abstract

The present disclosure provides a code generation method, apparatus, computer equipment and storage medium, wherein the method comprises: obtaining a page design draft to be converted, wherein the design draft tree corresponding to the page design draft includes at least one node corresponding to each page component with different functions; from each node in the design draft tree, determining a target node with corresponding original attribute information marked, and for each target node, determining a target subtree with the target node as the root node; other nodes in the target subtree except the target node are not marked with corresponding original attribute information; for each target subtree, determining attribute difference information corresponding to the target subtree based on the original attribute information corresponding to the root node of the target subtree and the current attribute information corresponding to the root node identified from the page design draft; and updating the page code of the page component corresponding to the target subtree based on the attribute difference information.

Description

Technical Field

[0001] The present disclosure relates to the technical field of design draft conversion to code, and in particular to a code generation method, apparatus, computer equipment and storage medium. Background Art

[0002] Design 2 code (D2C) is an inevitable product and trend of software development technology, which can convert the page design draft designed by the designer into page code. However, the existing D2C method can only restore the visual effect of the page design draft during code conversion, but cannot accurately restore some page components in the page design draft, resulting in poor accuracy of the converted page code. Summary of the invention

[0003] The embodiments of the present disclosure at least provide a code generation method, apparatus, computer device and storage medium.

[0004] In a first aspect, an embodiment of the present disclosure provides a code generation method, comprising:

[0005] Obtaining a page design draft to be converted, wherein a design draft tree corresponding to the page design draft includes at least one node corresponding to each page component with different functions;

[0006] From each node in the design draft tree, determine a target node with corresponding original attribute information marked, and for each target node, determine a target subtree with the target node as the root node; other nodes in the target subtree except the target node are not marked with corresponding original attribute information;

[0007] For each of the target subtrees, based on the original attribute information corresponding to the root node of the target subtree and the current attribute information corresponding to the root node identified from the page design draft, determine the attribute difference information corresponding to the target subtree;

[0008] Based on the attribute difference information, the page code of the page component corresponding to the target subtree is updated.

[0009] In a possible implementation, determining a target node with corresponding original attribute information marked from each node in the design draft tree, and determining a target subtree with the target node as a root node for each target node, including:

[0010] Traversing each node in the design draft tree to determine whether the current traversed node has marked original attribute information;

[0011] If it is determined that the current node traversed is the target node marked with the corresponding original attribute information, traverse each child node with the target node as the parent node to determine whether the current child node traversed has the marked original attribute information;

[0012] If the traversed current child node does not have the marked original attribute information, the current child node is used as the new parent node, and the step of traversing each child node of the parent node is returned to until it is determined that the traversed current child node has the marked original attribute information;

[0013] Based on the target node and the dependency relationship between the traversed child nodes that do not have marked original attribute information, a target subtree with the target node as the root node is constructed.

[0014] In a possible implementation, for each of the target subtrees, determining the attribute difference information corresponding to the target subtree based on the original attribute information corresponding to the root node of the target subtree and the current attribute information corresponding to the root node identified from the page design draft includes:

[0015] Determine first difference information corresponding to the target subtree based on the current attribute information and the original attribute information;

[0016] When it is determined according to the first difference information that the root node has a node type change, determining second difference information corresponding to the target subtree based on default attribute information corresponding to current type information in the current attribute information and the current attribute information;

[0017] The first difference information and the second difference information are used as the attribute difference information corresponding to the target subtree.

[0018] In a possible implementation manner, before updating the page code of the page component corresponding to the target subtree based on the attribute difference information, the method further includes:

[0019] When it is determined that the node type of the root node is a text type based on the current attribute information of the root node, obtaining current text information corresponding to the root node;

[0020] Determine text difference information corresponding to the root node based on the current text information and the marked original text information corresponding to the root node;

[0021] The updating of the page code of the page component corresponding to the target subtree based on the attribute difference information includes:

[0022] Based on the attribute difference information and the text difference information, the page code of the page component corresponding to the target subtree is updated.

[0023] In a possible implementation, the marked original attribute information includes at least one of the following: the name of the page component corresponding to the node, the name of the component library where the page component is located, version information of the component library, type information of the page component, and input parameters of the page component;

[0024] The input parameter includes at least one of the following: size information of the page component, padding information of the page component, border information of the page component, and shadow information of the page component.

[0025] In a possible implementation, determining, from each node in the design draft tree, a target node marked with corresponding original attribute information includes:

[0026] From the node information of each node in the design draft tree, searching for the node information segment marked with a preset identifier respectively;

[0027] If the node information segment is found, the node is used as the target node, and the information found in the node information segment is used as the original attribute information of the target node.

[0028] In a possible implementation, updating the page code of the page component corresponding to the target subtree based on the attribute difference information includes:

[0029] Generate the initial page code of each page component based on the page design draft to be converted;

[0030] Selecting, from the initial page codes of the various page components, the initial page code of the target page component that matches the attribute difference information;

[0031] Based on the attribute difference information matching the target page component, the initial page code of the target page component is updated.

[0032] In a second aspect, the present disclosure also provides a code generation device, including:

[0033] An acquisition module, used to acquire a page design draft to be converted, wherein the design draft tree corresponding to the page design draft includes at least one node corresponding to each page component with different functions;

[0034] A first determination module is used to determine, from each node in the design draft tree, a target node with corresponding original attribute information marked, and for each target node, determine a target subtree with the target node as a root node; other nodes in the target subtree except the target node are not marked with corresponding original attribute information;

[0035] A second determination module is used to determine, for each of the target subtrees, attribute difference information corresponding to the target subtree based on original attribute information corresponding to the root node of the target subtree and current attribute information corresponding to the root node identified from the page design draft;

[0036] An updating module is used to update the page code of the page component corresponding to the target subtree based on the attribute difference information.

[0037] In a possible implementation manner, the first determination module is used to traverse each node in the design draft tree to determine whether the current traversed node has marked original attribute information;

[0038] If it is determined that the current node traversed is the target node marked with the corresponding original attribute information, traverse each child node with the target node as the parent node to determine whether the current child node traversed has the marked original attribute information;

[0039] If the traversed current child node does not have the marked original attribute information, the current child node is used as the new parent node, and the step of traversing each child node of the parent node is returned to until it is determined that the traversed current child node has the marked original attribute information;

[0040] Based on the target node and the dependency relationship between the traversed child nodes that do not have marked original attribute information, a target subtree with the target node as the root node is constructed.

[0041] In a possible implementation manner, the second determining module is configured to determine first difference information corresponding to the target subtree based on the current attribute information and the original attribute information;

[0042] When it is determined according to the first difference information that the root node has a node type change, determining second difference information corresponding to the target subtree based on default attribute information corresponding to current type information in the current attribute information and the current attribute information;

[0043] The first difference information and the second difference information are used as the attribute difference information corresponding to the target subtree.

[0044] In a possible implementation manner, the second determination module is further configured to, before updating the page code of the page component corresponding to the target subtree based on the attribute difference information, obtain current text information corresponding to the root node when it is determined that the node type of the root node is a text type based on the current attribute information of the root node;

[0045] Determine text difference information corresponding to the root node based on the current text information and the marked original text information corresponding to the root node;

[0046] The updating module is used to update the page code of the page component corresponding to the target subtree based on the attribute difference information and the text difference information.

[0047] In a possible implementation, the marked original attribute information includes at least one of the following: the name of the page component corresponding to the node, the name of the component library where the page component is located, version information of the component library, type information of the page component, and input parameters of the page component;

[0048] The input parameter includes at least one of the following: size information of the page component, padding information of the page component, border information of the page component, and shadow information of the page component.

[0049] In a possible implementation, the first determination module is used to search for node information segments marked with a preset identifier from the node information of each node in the design draft tree;

[0050] If the node information segment is found, the node is used as the target node, and the information found in the node information segment is used as the original attribute information of the target node.

[0051] In a possible implementation, the update module is used to generate initial page codes of various page components based on the page design draft to be converted;

[0052] Selecting, from the initial page codes of the various page components, the initial page code of the target page component that matches the attribute difference information;

[0053] Based on the attribute difference information matching the target page component, the initial page code of the target page component is updated.

[0054] In a third aspect, an optional implementation of the present disclosure further provides a computer device, a processor, and a memory, wherein the memory stores machine-readable instructions executable by the processor, and the processor is used to execute the machine-readable instructions stored in the memory, and when the machine-readable instructions are executed by the processor, the machine-readable instructions perform the steps of the above-mentioned first aspect, or any possible implementation of the first aspect.

[0055] In a fourth aspect, an optional implementation of the present disclosure further provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed, the steps of the above-mentioned first aspect, or any possible implementation of the first aspect are executed.

[0056] For a description of the effects of the above-mentioned code generation apparatus, computer device, and computer-readable storage medium, please refer to the description of the above-mentioned code generation method, which will not be repeated here.

[0057] The code generation method, device, computer equipment and storage medium provided by the embodiments of the present disclosure, the original attribute information is used to record various component attributes corresponding to the page component, and by pre-marking the original attribute information corresponding to the target node, it can be ensured that the original attribute information corresponding to each target node can be accurately obtained based on the mark. By determining the target subtree with the target node with the corresponding original attribute information marked as the root node, it is possible to achieve a reasonable logical division of the various nodes included in the design draft, and the processing of the nodes based on the target subtree can effectively avoid the problem of repeated processing of a node. By comparing the original attribute information corresponding to the target node with the current attribute information, it is possible to determine the part of the attribute information missing in the identified current attribute information, and the part of the attribute information that is incorrectly identified, and obtain the attribute difference information, and then use the attribute difference information to update the page code of the page component corresponding to the target subtree, which can improve the accuracy of the page code obtained after the update.

[0058] In order to make the above-mentioned objectives, features and advantages of the present disclosure more obvious and easy to understand, preferred embodiments are specifically cited below and described in detail with reference to the attached drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0059] In order to more clearly illustrate the technical solutions of the embodiments of the present disclosure, the following is a brief introduction to the drawings required for use in the embodiments. The drawings herein are incorporated into the specification and constitute a part of the specification. These drawings illustrate embodiments consistent with the present disclosure and are used together with the specification to illustrate the technical solutions of the present disclosure. It should be understood that the following drawings only illustrate certain embodiments of the present disclosure and should not be regarded as limiting the scope. For ordinary technicians in this field, other relevant drawings can also be obtained based on these drawings without creative work.

[0060] Figure 1 A flow chart of a code generation method provided by an embodiment of the present disclosure is shown;

[0061] Figure 2 A schematic diagram of a page design provided by an embodiment of the present disclosure is shown;

[0062] Figure 3 A schematic diagram of conversion between D2C and C2D provided by an embodiment of the present disclosure is shown;

[0063] Figure 4 A schematic diagram of a design draft tree provided by an embodiment of the present disclosure is shown;

[0064] Figure 5 A schematic diagram of a code generating device provided by an embodiment of the present disclosure is shown;

[0065] Figure 6 A schematic diagram of the structure of a computer device provided by an embodiment of the present disclosure is shown. DETAILED DESCRIPTION

[0066] In order to make the purpose, technical scheme and advantages of the embodiments of the present disclosure clearer, the technical scheme in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the drawings in the embodiments of the present disclosure. Obviously, the described embodiments are only part of the embodiments of the present disclosure, rather than all of the embodiments. The components of the embodiments of the present disclosure generally described and shown here can be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present disclosure is not intended to limit the scope of the present disclosure claimed for protection, but merely represents the selected embodiments of the present disclosure. Based on the embodiments of the present disclosure, all other embodiments obtained by those skilled in the art without making creative work belong to the scope of protection of the present disclosure.

[0067] In addition, the terms "first", "second", etc. in the description and claims of the embodiments of the present disclosure and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the terms used in this way can be interchangeable where appropriate, so that the embodiments described herein can be implemented in an order other than that illustrated or described herein.

[0068] The "multiple or several" mentioned in this article refers to two or more. "And / or" describes the association relationship of the associated objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the associated objects are in an "or" relationship.

[0069] Research has found that when using the existing D2C method to generate page codes corresponding to design drafts, most of the time, div+span tags without semantics are used to restore the visual draft. This can only restore the visual effects of the design draft, but it is impossible to accurately identify the component properties of some page components in the design draft, such as the function, type, internal logic, etc. of the component, and thus it is impossible to generate accurate page codes.

[0070] Based on the above research, the present disclosure provides a code generation method, device, computer equipment and storage medium, the original attribute information is used to record various component attributes corresponding to the page component, and by pre-marking the original attribute information corresponding to the target node, it can be ensured that the original attribute information corresponding to each target node can be accurately obtained based on the mark. By determining the target subtree with the target node with the corresponding original attribute information marked as the root node, it is possible to achieve a reasonable logical division of the various nodes included in the design draft, and the processing of the nodes based on the target subtree can effectively avoid the problem of repeated processing of a node. By comparing the original attribute information corresponding to the target node with the current attribute information, it is possible to determine the part of the attribute information missing in the identified current attribute information, and the part of the attribute information that is incorrectly identified, and obtain the attribute difference information, and then use the attribute difference information to update the page code of the page component corresponding to the target subtree, which can improve the accuracy of the page code obtained after the update.

[0071] The defects existing in the above solutions are the results obtained by the inventor after practice and careful research. Therefore, the discovery process of the above problems and the solutions proposed by the present disclosure for the above problems below should be the contributions made by the inventor to the present disclosure during the disclosure process.

[0072] It should be noted that similar reference numerals and letters denote similar items in the following drawings, and therefore, once an item is defined in one drawing, further definition and explanation thereof is not required in subsequent drawings.

[0073] It should be noted that the specific terms mentioned in the embodiments of the present disclosure include:

[0074] Div: It is a positioning technique in cascading style sheets. Its full name is division, which means division. Sometimes it can be called a layer. The div element is used to provide structure and background for large blocks of content in HTML documents;

[0075] Span: It is an inline tag of the Hypertext Markup Language HTML, which is used to combine inline elements in a document;

[0076] ArcoDesign: An enterprise-level design system jointly launched by the ByteDance team and the architecture front-end team. It has systematic design specifications and resources, and provides atomic components covering React, Vue, and Mobile based on these specifications.

[0077] Props information: refers to the relevant information that needs to be specified when using page components, such as type information. The type and specific value of props information need to be specified in advance by component developers.

[0078] To facilitate understanding of the present embodiment, a code generation method disclosed in the embodiment of the present disclosure is first introduced in detail. The executor of the code generation method provided in the embodiment of the present disclosure is generally a computer device with certain computing capabilities. In some possible implementation methods, the code generation method can be implemented by a processor calling computer-readable instructions stored in a memory.

[0079] The code generation method provided by the embodiment of the present disclosure is described below by taking a computer device as an example of an execution subject.

[0080] like Figure 1 As shown, a flowchart of a code generation method provided by an embodiment of the present disclosure may include the following steps:

[0081] S101: Obtain a page design draft to be converted, wherein a design draft tree corresponding to the page design draft includes at least one node corresponding to each page component with different functions.

[0082] Here, the page design draft to be converted can be a design draft drawn by a user interface (UI) designer and corresponding to the UI page. The page design draft may include at least one page component, which is a component in the page with different component logic functions and used to represent different information. The page component may be, for example, a button component, a text box component, etc., and the component logic function may be, for example, a drop-down selection box function, a double-click hide component function, etc. Each page component may also include a sub-page component related to the page component. Different page components may come from different page component libraries, for example, the arcoDesign component library.

[0083] like Figure 2 FIG. 1 is a schematic diagram of a page design provided by an embodiment of the present disclosure. Figure 2 The left side includes multiple page components, for example, a name box component, an information box component, etc., and the middle of the page also includes a search box component. Component A and component B in the search box component are two sub-page components corresponding to the search box component.

[0084] The page design draft may correspond to a design draft tree including nodes corresponding to various page components with different functions. The design draft tree is generated based on the association relationship between various page components in the page design draft. A page component may correspond to at least one node. For example, Figure 2 The name box component shown may correspond to one node, and the search box component may correspond to three nodes.

[0085] Some page components in the page design draft to be converted can be generated and put online using the Code to Design (C2D) algorithm, and the UI designer can use the online page components to design the page design draft. In addition, the UI designer can also adjust the online page components and use the adjusted page components to design the page design draft, wherein the operation of adjusting the online page components can be, for example, changing the component size, changing the component filling information, etc. In this way, in the specific implementation, the page design draft may include some page components generated using the C2D algorithm and not modified by the UI designer, and / or some page components generated using the C2D algorithm and modified by the UI designer.

[0086] Alternatively, the page design draft to be converted may also be directly converted using the C2D algorithm.

[0087] Exemplarily, the page design draft to be converted can be directly obtained in a preset page design tool.

[0088] S102: From each node in the design draft tree, determine the target node with the corresponding original attribute information marked, and for each target node, determine the target subtree with the target node as the root node; other nodes in the target subtree except the target node are not marked with the corresponding original attribute information.

[0089] Here, the original attribute information is used to represent the various component attributes of the page component corresponding to the node when it is generated, such as the component type, component style, and information about the component library where the component is located. Specifically, the original attribute information can be the Props information of the page component corresponding to the node.

[0090] The target node is a node in the design draft tree that is marked with the corresponding original attribute information. The original attribute information corresponding to the target node can be marked by using C2D method, manual marking method, etc. The original attribute information is marked in advance using any of the above methods. Different target nodes correspond to different target subtrees.

[0091] like Figure 3 As shown, a conversion diagram between D2C and C2D provided by an embodiment of the present disclosure, specifically, the page components in the page design draft to be converted can be generated by using the C2D method, and the page codes of the page components can be marked, and the original attribute information corresponding to the page code can be marked, and then the page design draft to be converted can be generated by using the generated page components. Then, when the page design draft to be converted is converted by using the D2C method, the marked original attribute information can be used to generate the accurate page code corresponding to each page component in the page design draft.

[0092] The target subtree is a node tree composed of nodes intercepted from the design draft tree. It can include at least one target node. A target subtree usually corresponds to a page component, and the nodes corresponding to each target subtree are not repeated. The root node corresponding to a target subtree is a target node that is determined to mark the corresponding original attribute information. Among the nodes included in the target subtree, all nodes except the target node are nodes that are not marked with the corresponding original attribute information.

[0093] When this step is implemented, for each node in the design draft tree, determine whether the node has corresponding marked original attribute information. If so, the child node can be used as the target node. If not, determine whether the next node of the node has corresponding marked original attribute information, until each target node with marked original attribute information is determined from each node in the design draft tree.

[0094] Then, for each target node, the nodes that are after the target node and before the next target node corresponding to the root node and that do not have marked original attribute information can be determined according to the structure of the design draft tree. Then, the target node can be used as the root node of the corresponding target subtree. On the basis of retaining the node position relationship of each node in the design draft tree, the determined nodes can be used as other nodes of the target subtree, thereby obtaining a complete target subtree corresponding to the target node.

[0095] For example, Figure 4 As shown, it is a schematic diagram of a design draft tree provided by an embodiment of the present disclosure, which includes 13 nodes - node 1 to node 13, wherein node 2, node 3, node 8 and node 13 are target nodes to be determined, then the target subtree with node 2 as the root node includes nodes in region A, the target subtree with node 3 as the root node includes nodes in region B, the target subtree with node 8 as the root node includes nodes in region C, the target subtree with node 13 as the root node includes node 13, if node 13 also includes other Figure 3 For nodes not shown, the target subtree with node 13 as the root node may also include some nodes not shown.

[0096] S103: For each target subtree, based on the original attribute information corresponding to the root node of the target subtree and the current attribute information corresponding to the root node identified from the page design draft, determine the attribute difference information corresponding to the target subtree.

[0097] Here, the attribute difference information is used to characterize the difference between the original attribute information of the page component indicated by the target subtree corresponding to the root node and the current attribute information identified from the page design draft. Specifically, the current attribute information can be the current visual attribute, and the attribute difference information can include partial attribute information that is currently recognized incorrectly and partial attribute information that is not recognized. The partial attribute information that is not recognized can include, for example, unrecognized component logic, component type, version of the component library where the component is located, component name, and other information.

[0098] In specific implementation, for each target subtree, the difference information between the original attribute information corresponding to the root node of the target subtree and the current attribute information corresponding to the identified root node can be determined, and the determined difference information can be used as the attribute difference information corresponding to the target subtree.

[0099] Furthermore, after determining the attribute difference information corresponding to the target subtree, the attribute difference information can be stored at a position corresponding to the root node of the target subtree, so as to facilitate subsequent accurate update of the page code corresponding to the root node based on the attribute difference information stored at the position.

[0100] Here, in a possible implementation manner, the attribute difference information corresponding to a certain target subtree may be empty, that is, there is no difference between the current attribute information corresponding to the root node of the target subtree and the marked original attribute information.

[0101] In addition, the step of determining the attribute difference information corresponding to each target subtree may be performed after obtaining each target subtree, or may be performed after determining each target subtree corresponding to the page design draft, which is not specifically limited here.

[0102] S104: Based on the attribute difference information, update the page code of the page component corresponding to the target subtree.

[0103] Here, different page components correspond to different page codes, and the page codes corresponding to the various page components included in the page design draft to be converted can constitute the overall page code corresponding to the page design draft.

[0104] In specific implementation, for the attribute difference information corresponding to the target subtree and the page component corresponding to the target subtree, the attribute difference information can be used to update the page code corresponding to the page component before the update. Specifically, based on the attribute difference information, part of the code related to the attribute corresponding to the attribute difference information in the page code before the update can be modified; when there is no code related to the attribute corresponding to the attribute difference information in the page code before the update, new code can be generated based on the attribute difference information. Then, the updated page code corresponding to the page component can be obtained. Among them, the page code before the update can be generated using the existing D2C technology.

[0105] Furthermore, based on the attribute difference information corresponding to each target subtree, the page code of the page component corresponding to each target subtree can be updated according to the above steps, and finally the updated page codes can be obtained. Based on the updated page codes, the updated overall page code corresponding to the page design draft can be obtained.

[0106] The step of updating the page code of the page component corresponding to each target subtree can be performed after the attribute difference information corresponding to all the target subtrees is determined; or, after the attribute difference information corresponding to a target subtree is determined, the page code of the page component corresponding to the target subtree is updated.

[0107] The component codes of the page components corresponding to each node in the design draft tree except the nodes in each target subtree can be directly generated using the existing D2C technology with high accuracy. Therefore, there is no need to update using attribute difference information.

[0108] In this way, the original attribute information is used to record various component attributes corresponding to the page component. By pre-marking the original attribute information corresponding to the target node, it can be ensured that the original attribute information corresponding to each target node can be accurately obtained based on the mark. By determining the target subtree with the target node with the corresponding original attribute information marked as the root node, it is possible to achieve a reasonable logical division of the various nodes included in the design draft. Processing the nodes based on the target subtree can effectively avoid the problem of repeated processing of a node. By comparing the original attribute information corresponding to the target node with the current attribute information, it is possible to determine the part of the attribute information that is missing in the identified current attribute information, as well as the part of the attribute information that is incorrectly identified, and obtain the attribute difference information. Then, using the attribute difference information, the page code of the page component corresponding to the target subtree is updated, which can improve the accuracy of the page code obtained after the update.

[0109] In one embodiment, S102 may be implemented according to the following steps:

[0110] S102-1: traverse each node in the design draft tree to determine whether the current traversed node has marked original attribute information.

[0111] In specific implementation, each node in the design draft tree can be directly traversed, and for the current node traversed, it is determined whether the current node has marked original attribute information.

[0112] S102-2: If it is determined that the current traversed node is the target node marked with the corresponding original attribute information, traverse each child node with the target node as the parent node to determine whether the current traversed child node has the marked original attribute information.

[0113] In this step, when it is determined that the traversed current node has marked corresponding original attribute information, the current node is taken as a target node, and the target node is taken as the parent node. The child nodes corresponding to the parent node are traversed in sequence, and for the traversed current child node, it is determined whether the current child node has marked original attribute information.

[0114] In addition, when it is determined that the traversed current node does not have corresponding marked original attribute information, the node in the design draft tree whose traversal order is after the current node can be traversed and used as the new current node, and the step of determining whether the traversed current node has marked original attribute information is returned until it is determined that the traversed current node is the target node marked with the corresponding original attribute information, and S102-2 is executed.

[0115] S102-3: If the traversed current child node does not have the marked original attribute information, take the current child node as the new parent node and return to the step of traversing each child node of the parent node until it is determined that the traversed current child node has the marked original attribute information.

[0116] In specific implementation, if it is determined that the current child node traversed in S102-2 does not have marked original attribute information, the current child node can be used as the new parent node, and the step of traversing each child node of the parent node in S102-2 is returned until it is determined that the current child node traversed has marked original attribute information, or until the current child node traversed does not have a new child node.

[0117] S102-4: Based on the dependency relationship between the target node and the traversed child nodes that do not have the marked original attribute information, a target subtree is constructed with the target node as the root node.

[0118] Here, the dependency relationship is the parent-child relationship and sibling relationship between the child nodes that are traversed above and do not have the marked original attribute information.

[0119] In the case where it is determined based on the above S102-3 that the traversed current child node has the marked original attribute information, the target node and the traversed child nodes that do not have the marked original attribute information can be intercepted from the above design draft tree. Then, based on the intercepted target node and the parent-child relationship and sibling relationship between the intercepted traversed child nodes that do not have the marked original attribute information, a target subtree with the target node as the root node can be constructed.

[0120] Furthermore, the current child node with marked original attribute information traversed can be used as a new target node, and the step of traversing each child node with the target node as the parent node in S102-2 is returned until each node in the above-mentioned design draft tree is traversed once, and each target node and each target subtree corresponding to the above-mentioned design draft tree are obtained.

[0121] In this way, by determining the target subtree with the target node marked with the corresponding original attribute information as the root node, a reasonable logical division of the nodes included in the design draft can be achieved, and node traversal based on the target subtree can effectively avoid the problem of a node being traversed repeatedly.

[0122] In one embodiment, the marked original attribute information may include at least one of the following: the name of the page component corresponding to the node, the name of the component library where the page component is located, version information of the component library, such as version 1.0, version 2.0, etc., type information of the page component, such as button type, text box type, search box type, etc., and input parameters of the page component.

[0123] The input parameters of the page component may include at least one of the following: size information xywh of the page component, fill information fills of the page component, border information strokes of the page component, shadow information effects of the page component, and the like.

[0124] In one embodiment, S103 may be implemented according to the following steps:

[0125] S103-1: Determine first difference information corresponding to the target subtree based on the current attribute information and the original attribute information.

[0126] In specific implementation, for each target subtree, the current attribute information of the root node of the target subtree can be directly compared with the corresponding original attribute information to determine the partial attribute information omitted by the current attribute information compared with the original attribute information, as well as the partial attribute information that is incorrectly identified in the current attribute information compared with the original attribute information, and generate relevant information for characterizing the partial attribute information that is incorrectly identified.

[0127] For example, when the current attribute information includes information 1 corresponding to the name of the page component, information 2 corresponding to the name of the component library where the page component is located, and information 3 corresponding to the type information of the page component, and the original attribute information includes information 1 corresponding to the name of the page component, information 2 corresponding to the name of the component library where the page component is located, information 4 corresponding to the type information of the page component, information 5 corresponding to the size information of the page component, and information 6 corresponding to the filling information of the page component, it can be determined that part of the attribute information omitted in the current attribute information compared with the original attribute information is: information 5 and information 6, and part of the attribute information incorrectly identified in the current attribute information compared with the original attribute information is that information 4 corresponding to the type information of the page component is identified as information 3, and relevant information can be generated: the type information of the page component should be changed from information 3 to information 4.

[0128] Then, the missing partial attribute information and the related information of the partial attribute information used to characterize the recognition error can be directly used as the first difference information corresponding to the target subtree.

[0129] S103-2: When it is determined according to the first difference information that the node type of the root node has changed, second difference information corresponding to the target subtree is determined based on the default attribute information corresponding to the current type information in the current attribute information and the current attribute information.

[0130] Here, the default attribute information is the original attribute information corresponding to various types of page components.

[0131] In specific implementation, based on the first difference information, it can be determined whether there is information about a change in the node type corresponding to the root node in the first difference information, wherein the change in node type can be, for example, a change from a text type to a tag type.

[0132] In the case where it is determined that the first difference information indicates that the root node corresponding to the first difference information has a node type change, it is also necessary to obtain the pre-stored default attribute information corresponding to the current type information according to the current type information of the root node included in the current attribute information corresponding to the root node. Then, the default attribute information is compared with the current attribute information corresponding to the root node to determine the difference information about the type information, and the difference information is used as the second difference information corresponding to the target subtree.

[0133] S103-3: Use the first difference information and the second difference information as attribute difference information corresponding to the target subtree.

[0134] In this way, based on the above S103 - 1 to S103 - 3 , the attribute difference information corresponding to the target subtree can be accurately determined.

[0135] In one embodiment, before executing the above S104, text difference information can also be obtained. Specifically, when the node type of the identified root node is determined to be a text type based on the type information of the page component included in the current attribute information of the root node, the current text information corresponding to the root node needs to be obtained. In addition, the marked original text information corresponding to the root node can also be obtained. Here, the original text information may not be included in the original attribute information, but may be separately marked information.

[0136] In one embodiment, the original text information may also be an attribute information in the marked original attribute information. Thus, when it is determined that the node type of the root node included in the identified current attribute information is a text type, if the current attribute information does not include the current text information corresponding to the root node, the root node may be further identified to determine whether the root node has the current text information. If so, the identified current text information is added to the current attribute information; if not, it is determined that the current text information does not exist in the current attribute information. Furthermore, when determining the attribute difference information of the target subtree corresponding to the root node based on the current attribute information and the original attribute information, if there is text difference information, it may be directly included in the determined attribute difference information.

[0137] Furthermore, the text difference information corresponding to the root node may be determined based on the current text information corresponding to the root node and the original text information corresponding to the root node.

[0138] Afterwards, for S104 , the page code of the page component corresponding to the target subtree may be updated directly based on the attribute difference information and the text difference information.

[0139] Here, regarding the step of updating the code of the page component corresponding to the target subtree based on the attribute difference information, the step in S103 above can be referred to and will not be repeated here. Regarding the step of updating the code of the page component corresponding to the target subtree based on the text difference information, specifically, the part of the code related to the text information in the page code before the update can be modified to obtain the updated page code corresponding to the page component; or, in the case that the code related to the text information does not exist in the page code before the update, the page code related to the text difference information can be directly generated and added to the page code corresponding to the page component to obtain the updated page code corresponding to the page component.

[0140] In one embodiment, the step of determining the target node in S102 may be implemented according to the following steps:

[0141] Step 1: From the node information of each node in the design draft tree, search for the node information segment marked with a preset identifier.

[0142] Here, the preset identifier is an identifier that can identify the information segment corresponding to the original attribute information. The node information includes all node-related information corresponding to a node, such as node attribute information, node generation time, node creator, etc.

[0143] In specific implementation, for the process of determining whether each node in the design draft tree is a target node, the node information corresponding to the node can be obtained first, and then it is determined whether there is a node information segment marked with a preset identifier in the node information.

[0144] Step 2: If a node information segment is found, the node is used as the target node, and the information in the found node information segment is used as the original attribute information of the target node.

[0145] In specific implementation, if a node information segment marked with a preset identifier is found in the node information, the node can be used as the target node, and the information in the found node information segment can be used as the original attribute information marked corresponding to the target node.

[0146] Furthermore, by searching whether there is a pattern of a preset identifier in the node information corresponding to each node, each target node can be accurately determined from the nodes included in the design draft tree, as well as the original attribute information of the mark corresponding to each target node.

[0147] In one embodiment, S104 may be implemented according to the following steps:

[0148] S104-1: Generate initial page codes for each page component based on the page design draft to be converted.

[0149] The above initial page code can be a page code in div or span format.

[0150] In specific implementation, the D2C method can be used to identify the page design draft to be converted, determine the various page components included in the page design draft to be converted, and the current attribute information corresponding to each page component, and then generate the initial page code of each page component based on the current attribute information corresponding to each page component.

[0151] S104 - 2 : Selecting the initial page code of the target page component that matches the attribute difference information from the initial page codes of the various page components.

[0152] In this step, after determining the attribute difference information corresponding to each target subtree, the target page component corresponding to each attribute difference information can be determined. Then, for each target page component, the initial page code corresponding to the target page component can be filtered out from the initial page codes of each page component.

[0153] S104-3: Based on the attribute difference information matching the target page component, the initial page code of the target page component is updated.

[0154] Here, for each target page component, after determining the initial page code corresponding to the target page component using the above S104-2, the initial page code corresponding to the target page component can be updated using the attribute difference information corresponding to the target page component, thereby obtaining an updated page code corresponding to the target page component.

[0155] In this way, based on the attribute difference information corresponding to each target page component, the initial page code corresponding to each target page component can be accurately updated to obtain the accurate page code corresponding to each target page component.

[0156] In another embodiment, after determining the current attribute information corresponding to the page components included in the page design draft to be converted, the attribute difference information of each target node corresponding to the page design draft can be determined directly based on the current attribute information, that is, the attribute difference information corresponding to the target page component can be determined; then, the D2C method can be used to directly generate the page code corresponding to each page component in the page design draft based on the current attribute information corresponding to each page component and the attribute difference information corresponding to the determined target page component. Here, for some page components that do not have attribute difference information, the D2C method can be used to directly generate the page code corresponding to the page component based on the current attribute information corresponding to the page component; for target page components that have attribute difference information, the D2C method can be used to directly generate the page code corresponding to the target page component based on the current attribute information and attribute difference information corresponding to the target page component.

[0157] Those skilled in the art will appreciate that, in the above method of specific implementation, the order in which the steps are written does not imply a strict execution order and does not constitute any limitation on the implementation process. The specific execution order of the steps should be determined by their functions and possible internal logic.

[0158] Based on the same inventive concept, a code generation device corresponding to the code generation method is also provided in the embodiment of the present disclosure. Since the principle of solving the problem by the device in the embodiment of the present disclosure is similar to the above-mentioned code generation method in the embodiment of the present disclosure, the implementation of the device can refer to the implementation of the method, and the repeated parts will not be repeated.

[0159] like Figure 5 FIG. 1 is a schematic diagram of a code generation device provided by an embodiment of the present disclosure, comprising:

[0160] An acquisition module 501 is used to acquire a page design draft to be converted, wherein the design draft tree corresponding to the page design draft includes at least one node corresponding to each page component with different functions;

[0161] The first determination module 502 is used to determine the target node marked with the corresponding original attribute information from each node in the design draft tree, and for each target node, determine a target subtree with the target node as the root node; other nodes in the target subtree except the target node are not marked with the corresponding original attribute information;

[0162] The second determination module 503 is used to determine, for each of the target subtrees, the attribute difference information corresponding to the target subtree based on the original attribute information corresponding to the root node of the target subtree and the current attribute information corresponding to the root node identified from the page design draft;

[0163] The updating module 504 is used to update the page code of the page component corresponding to the target subtree based on the attribute difference information.

[0164] In a possible implementation, the first determination module 502 is used to traverse each node in the design draft tree to determine whether the current traversed node has marked original attribute information;

[0165] If it is determined that the current node traversed is the target node marked with the corresponding original attribute information, traverse each child node with the target node as the parent node to determine whether the current child node traversed has the marked original attribute information;

[0166] If the traversed current child node does not have the marked original attribute information, the current child node is used as the new parent node, and the step of traversing each child node of the parent node is returned to until it is determined that the traversed current child node has the marked original attribute information;

[0167] Based on the target node and the dependency relationship between the traversed child nodes that do not have marked original attribute information, a target subtree with the target node as the root node is constructed.

[0168] In a possible implementation manner, the second determining module 503 is configured to determine first difference information corresponding to the target subtree based on the current attribute information and the original attribute information;

[0169] When it is determined according to the first difference information that the root node has a node type change, determining second difference information corresponding to the target subtree based on default attribute information corresponding to current type information in the current attribute information and the current attribute information;

[0170] The first difference information and the second difference information are used as the attribute difference information corresponding to the target subtree.

[0171] In a possible implementation manner, the second determining module 503 is further configured to obtain current text information corresponding to the root node when it is determined that the node type of the root node is a text type based on the current attribute information of the root node before updating the page code of the page component corresponding to the target subtree based on the attribute difference information;

[0172] Determine text difference information corresponding to the root node based on the current text information and the marked original text information corresponding to the root node;

[0173] The updating module 504 is used to update the page code of the page component corresponding to the target subtree based on the attribute difference information and the text difference information.

[0174] In a possible implementation, the marked original attribute information includes at least one of the following: the name of the page component corresponding to the node, the name of the component library where the page component is located, version information of the component library, type information of the page component, and input parameters of the page component;

[0175] The input parameter includes at least one of the following: size information of the page component, padding information of the page component, border information of the page component, and shadow information of the page component.

[0176] In a possible implementation, the first determination module 502 is configured to search for node information segments marked with a preset identifier from node information of each node in the design draft tree;

[0177] If the node information segment is found, the node is used as the target node, and the information found in the node information segment is used as the original attribute information of the target node.

[0178] In a possible implementation, the updating module 504 is used to generate initial page codes of various page components based on the page design draft to be converted;

[0179] Selecting, from the initial page codes of the various page components, the initial page code of the target page component that matches the attribute difference information;

[0180] Based on the attribute difference information matching the target page component, the initial page code of the target page component is updated.

[0181] For descriptions of the processing flow of each module in the device and the interaction flow between each module, reference may be made to the relevant descriptions in the above method embodiment, which will not be described in detail here.

[0182] The present disclosure also provides a computer device, such as Figure 6FIG. 1 is a schematic diagram of a computer device structure provided by an embodiment of the present disclosure, including:

[0183] Processor 61 and memory 62; the memory 62 stores machine-readable instructions executable by the processor 61, and the processor 61 is used to execute the machine-readable instructions stored in the memory 62. When the machine-readable instructions are executed by the processor 61, the processor 61 performs the following steps: S101: Obtain the page design draft to be converted, and the design draft tree corresponding to the page design draft includes at least one node corresponding to each page component with different functions; S102: From each node in the design draft tree, determine the target node marked with the corresponding original attribute information, and for each target node, determine the target subtree with the target node as the root node; the other nodes in the target subtree except the target node are not marked with the corresponding original attribute information; S103: For each target subtree, based on the original attribute information corresponding to the root node of the target subtree and the current attribute information corresponding to the root node identified from the page design draft, determine the attribute difference information corresponding to the target subtree; S104: Based on the attribute difference information, update the page code of the page component corresponding to the target subtree.

[0184] The above-mentioned memory 62 includes internal memory 621 and external memory 622; the memory 621 here is also called internal memory, which is used to temporarily store the calculation data in the processor 61, as well as the data exchanged with the external memory 622 such as the hard disk. The processor 61 exchanges data with the external memory 622 through the internal memory 621.

[0185] The specific execution process of the above instructions can refer to the steps of the code generation method described in the embodiment of the present disclosure, which will not be repeated here.

[0186] The present disclosure also provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the steps of the code generation method described in the above method embodiment are executed. The storage medium can be a volatile or non-volatile computer-readable storage medium.

[0187] The computer program product of the code generation method provided in the embodiments of the present disclosure includes a computer-readable storage medium storing program code, and the instructions included in the program code can be used to execute the steps of the code generation method described in the above method embodiments. For details, please refer to the above method embodiments, which will not be repeated here.

[0188] The computer program product may be implemented in hardware, software or a combination thereof. In one optional embodiment, the computer program product is embodied as a computer storage medium, and in another optional embodiment, the computer program product is embodied as a software product, such as a software development kit (SDK) and the like.

[0189] Those skilled in the art can clearly understand that, for the convenience and simplicity of description, the specific working process of the system and device described above can refer to the corresponding process in the aforementioned method embodiment, and will not be repeated here. In the several embodiments provided in the present disclosure, it should be understood that the disclosed system, device and method can be implemented in other ways. The device embodiments described above are merely schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some communication interfaces, and the indirect coupling or communication connection of the device or unit can be electrical, mechanical or other forms.

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

[0191] In addition, each functional unit in each embodiment of the present disclosure may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0192] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a non-volatile computer-readable storage medium that is executable by a processor. Based on this understanding, the technical solution of the present disclosure, or the part that contributes to the prior art or the part of the technical solution, can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present disclosure. The aforementioned storage medium includes: various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0193] Finally, it should be noted that the above-described embodiments are only specific implementation methods of the present disclosure, which are used to illustrate the technical solutions of the present disclosure, rather than to limit them. The protection scope of the present disclosure is not limited thereto. Although the present disclosure is described in detail with reference to the above-described embodiments, ordinary technicians in the field should understand that any technician familiar with the technical field can still modify the technical solutions recorded in the above-described embodiments within the technical scope disclosed in the present disclosure, or can easily think of changes, or make equivalent replacements for some of the technical features therein; and these modifications, changes or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present disclosure, and should be included in the protection scope of the present disclosure. Therefore, the protection scope of the present disclosure should be based on the protection scope of the claims.

Claims

1. A code generation method, characterized in that: include: Obtaining a page design draft to be converted, wherein a design draft tree corresponding to the page design draft includes at least one node corresponding to each page component with different functions; Determine, from each node in the design draft tree, a target node with corresponding original attribute information marked, and for each target node, determine a target subtree with the target node as a root node; Other nodes in the target subtree except the target node are not marked with corresponding original attribute information; For each of the target subtrees, based on the original attribute information corresponding to the root node of the target subtree and the current attribute information corresponding to the root node identified from the page design draft, determine the attribute difference information corresponding to the target subtree; Based on the attribute difference information, updating the page code of the page component corresponding to the target subtree; Among them, from each node in the design draft tree, determining a target node with corresponding original attribute information marked, and for each target node, determining a target subtree with the target node as the root node, including: Traversing each node in the design draft tree to determine whether the current traversed node has marked original attribute information; If it is determined that the current traversed node is the target node marked with the corresponding original attribute information, traverse each child node with the target node as the parent node to determine whether the current traversed child node has the marked original attribute information; If the traversed current child node does not have the marked original attribute information, the current child node is used as the new parent node, and the step of traversing each child node of the parent node is returned to until it is determined that the traversed current child node has the marked original attribute information; Based on the target node and the dependency relationship between the traversed child nodes that do not have marked original attribute information, a target subtree with the target node as the root node is constructed.

2. The method according to claim 1, characterized in that The determining, for each of the target subtrees, attribute difference information corresponding to the target subtree based on original attribute information corresponding to the root node of the target subtree and current attribute information corresponding to the root node identified from the page design draft, includes: Determine first difference information corresponding to the target subtree based on the current attribute information and the original attribute information; When it is determined according to the first difference information that the root node has a node type change, determining second difference information corresponding to the target subtree based on default attribute information corresponding to current type information in the current attribute information and the current attribute information; The first difference information and the second difference information are used as the attribute difference information corresponding to the target subtree.

3. The method according to claim 1, characterized in that Before updating the page code of the page component corresponding to the target subtree based on the attribute difference information, the method further includes: When it is determined that the node type of the root node is a text type based on the current attribute information of the root node, obtaining current text information corresponding to the root node; Determine text difference information corresponding to the root node based on the current text information and the marked original text information corresponding to the root node; The updating of the page code of the page component corresponding to the target subtree based on the attribute difference information includes: Based on the attribute difference information and the text difference information, the page code of the page component corresponding to the target subtree is updated.

4. The method according to claim 1, characterized in that The marked original attribute information includes at least one of the following: the name of the page component corresponding to the node, the name of the component library where the page component is located, the version information of the component library, the type information of the page component, and the input parameters of the page component; The input parameter includes at least one of the following: size information of the page component, padding information of the page component, border information of the page component, and shadow information of the page component.

5. The method according to claim 1, characterized in that The step of determining, from each node in the design draft tree, a target node with corresponding original attribute information marked therein comprises: From the node information of each node in the design draft tree, searching for the node information segment marked with a preset identifier respectively; If the node information segment is found, the node is used as the target node, and the information found in the node information segment is used as the original attribute information of the target node.

6. The method according to claim 1, characterized in that The updating of the page code of the page component corresponding to the target subtree based on the attribute difference information includes: Generate the initial page code of each page component based on the page design draft to be converted; Selecting, from the initial page codes of the various page components, the initial page code of the target page component that matches the attribute difference information; Based on the attribute difference information matching the target page component, the initial page code of the target page component is updated.

7. A code generating device, characterized in that: include: An acquisition module, used to acquire a page design draft to be converted, wherein the design draft tree corresponding to the page design draft includes at least one node corresponding to each page component with different functions; A first determination module is used to determine, from each node in the design draft tree, a target node with corresponding original attribute information marked thereon, and for each target node, determine a target subtree with the target node as a root node; Other nodes in the target subtree except the target node are not marked with corresponding original attribute information; A second determination module is used to determine, for each of the target subtrees, attribute difference information corresponding to the target subtree based on original attribute information corresponding to the root node of the target subtree and current attribute information corresponding to the root node identified from the page design draft; as well as An updating module, used for updating the page code of the page component corresponding to the target subtree based on the attribute difference information; The first determination module is further configured to traverse each node in the design draft tree to determine whether the current traversed node has marked original attribute information; If it is determined that the current traversed node is the target node marked with the corresponding original attribute information, traverse each child node with the target node as the parent node to determine whether the current traversed child node has the marked original attribute information; If the traversed current child node does not have the marked original attribute information, take the current child node as the new parent node, and return to the step of traversing each child node of the parent node until it is determined that the traversed current child node has the marked original attribute information; and Based on the target node and the dependency relationship between the traversed child nodes that do not have marked original attribute information, a target subtree with the target node as the root node is constructed.

8. A computer device, characterized in that: include: A processor and a memory, wherein the memory stores machine-readable instructions executable by the processor, and the processor is used to execute the machine-readable instructions stored in the memory. When the machine-readable instructions are executed by the processor, the processor executes the steps of the code generation method according to any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program. When the computer program is executed by a computer device, the computer device executes the steps of the code generation method according to any one of claims 1 to 6.

Images