Search

CN-121979523-A - Interface code generation method and device, electronic equipment and storage medium

CN121979523ACN 121979523 ACN121979523 ACN 121979523ACN-121979523-A

Abstract

The application discloses an interface code generation method, device, electronic equipment and storage medium, which are used for analyzing a node description file of a design draft to obtain a target structure tree, determining a layout type corresponding to a target child node based on position information corresponding to the target child node of the target node in the target structure tree, determining layout parameters required by the layout type, setting the layout type as an attribute value of a layout type attribute of the target node in the node description file and setting the layout parameters as an attribute value of a layout type parameter attribute of the target node in the node description file, and setting a designated layout attribute of the target node in the node description file based on a setting mode corresponding to the target response type layout strategy under the condition that the target attribute value of the target node and/or the target attribute value of the target child node meets the applicable condition of a target response type layout strategy, and generating an interface code corresponding to the designated interface based on the node description file to improve the response and accuracy of the interface code.

Inventors

  • LIU YIQI

Assignees

  • 杭州网易智企科技有限公司

Dates

Publication Date
20260505
Application Date
20251223

Claims (10)

  1. 1. An interface code generation method, comprising: Acquiring a design draft describing a designated interface; converting the design manuscript into a node description file, and analyzing the node description file to obtain a target structure tree in the node description file; Determining a layout type corresponding to a target child node based on position information corresponding to the target child node of the target node in the target structure tree, and determining layout parameters required by the layout type; setting the layout type as an attribute value of a layout type attribute of the target node in the node description file and setting the layout parameter as an attribute value of a layout type parameter attribute of the target node in the node description file; Setting a designated layout attribute of the target node in the node description file based on a setting mode corresponding to a target responsive layout policy when the target attribute value of the target node and/or the target attribute value of the target child node meets an application condition of the target responsive layout policy, wherein the target responsive layout policy is one of a plurality of responsive layout policies corresponding to the layout type of the target node; and generating an interface code corresponding to the designated interface based on the node description file.
  2. 2. The method according to claim 1, wherein the determining the layout type corresponding to the target child node based on the location information corresponding to the target child node of the target node in the target structure tree includes: Sequencing the horizontal coordinates of the target sub-nodes of the target node, detecting whether the adjacent horizontal coordinates of the target sub-nodes after sequencing overlap, sequencing the vertical coordinates of the target sub-nodes of the target node, and detecting whether the adjacent vertical coordinates of the target sub-nodes after sequencing overlap; determining a layout type corresponding to the target child node to be overlapped under the condition that the overlapped horizontal coordinates and the overlapped vertical coordinates exist; determining the layout type corresponding to the target child node as row layout under the condition that the ordered horizontal coordinates are not overlapped and the ordered vertical coordinates are overlapped; And determining the layout type corresponding to the target child node as a column layout under the condition that the ordered vertical coordinates are not overlapped and the ordered horizontal coordinates are overlapped.
  3. 3. The method of claim 1, wherein, in the case where the layout type is a row layout, the plurality of responsive layout policies for the row layout includes at least two of a first width full policy, a first percent width policy, a first horizontal centering policy, a first water in normal times right policy, and a horizontal distributed policy; In the case that the layout type is a column layout, the plurality of responsive layout strategies corresponding to the column layout include at least two of a second width-full strategy, a second level-centered strategy, and a second water in normal times right strategy; In the case where the layout type is an overlapping layout, the plurality of responsive layout strategies corresponding to the overlapping layout includes at least two of a second percentage width strategy, a third level centering strategy, and a third water in normal times right strategy.
  4. 4. The method of claim 1, wherein prior to the determining the layout type corresponding to the target child node based on the location information corresponding to the target child node of the target node in the target structure tree, the method further comprises: And carrying out layout grouping on the first node based on the position information corresponding to the first node in the target structure tree so as to add an intermediate node between the first node belonging to the same layout grouping in the target structure tree and a parent node thereof.
  5. 5. The method of claim 1, wherein prior to the determining the layout type corresponding to the target child node based on the location information corresponding to the target child node of the target node in the target structure tree, the method further comprises: determining a second node in the target structure tree that has no background color, no frame and includes a child node; Deleting the second node and lifting a child node of the second node below a parent node of the second node, and/or, Determining a third node in the target structure tree which has no background color, no frame and no peer node; deleting the third node and lifting the child node of the third node to the position below the parent node of the third node.
  6. 6. The method of any one of claims 1-5, further comprising, prior to obtaining the design script describing the specified interface: Acquiring test data, wherein the test data comprises sample interface codes generated based on sample design manuscripts through the interface code generation method; Rendering processing is carried out based on the sample interface code, and a rendering result is obtained; And performing at least one test process on the interface code generation method based on the rendering result and/or the sample interface code to obtain a test result.
  7. 7. The method of claim 6, wherein the test process comprises at least one of a boundary test process, a layout structure test process, a redundant node test process, a responsive layout test process, and a visual test process; In the case that the test processing includes boundary test processing, the rendering result includes actual rendering boundary information, and the performing at least one test processing on the interface code generating method based on the rendering result and the sample interface code to obtain a test result includes: comparing the actual rendering boundary information with the position information in the sample interface code to obtain a boundary test result; In the case that the test processing includes a layout structure test processing, the rendering result includes an object structure tree and/or actual rendering boundary information, and the performing at least one test processing on the interface code generating method based on the rendering result to obtain a test result includes at least one of the following: Verifying the correctness of node movement and the correctness of parent-child relationship based on the object structure tree; Determining correctness of a layout packet based on the object structure tree or the actual rendering boundary information; Determining the correctness of the layout type based on the actual rendering boundary information; In the case that the test processing includes redundant node test processing, the rendering result includes an object structure tree and actual rendering boundary information, and the performing at least one test processing on the interface code generating method based on the rendering result to obtain a test result includes: Determining whether a designated node is deleted by mistake or not based on the object structure tree and determining whether the deleted node is a redundant node or not based on the actual rendering boundary information, so as to obtain a redundant node test result; in the case that the test processing includes a responsive layout test processing, the rendering result includes a sample specification interface described by the sample design draft, and the performing at least one test processing on the interface code generating method based on the rendering result and/or the sample interface code to obtain a test result includes: Carrying out layout comparison on the sample designated interface and an expected interface and/or verifying a setting mode in a responsive layout strategy based on the sample interface code to obtain a responsive layout test result; In the case that the test processing includes visual test processing, the rendering result includes the sample designating interface, and the performing at least one test processing on the interface code generating method based on the rendering result, to obtain a test result includes: And comparing the sample designated interface with the expected interface at the pixel level to obtain a visual test result.
  8. 8. An interface code generating apparatus, comprising: The information acquisition module is used for acquiring a design draft describing the designated interface; The information conversion module is used for converting the design manuscript into a node description file, and analyzing the node description file to obtain a target structure tree in the node description file; The information determining module is used for determining a layout type corresponding to a target child node of the target node in the target structure tree based on the position information corresponding to the target child node, and determining layout parameters required by the layout type; A first setting module, configured to set the layout type as an attribute value of a layout type attribute of the target node in the node description file and set the layout parameter as an attribute value of a layout type parameter attribute of the target node in the node description file; The second setting module is configured to set, when the target attribute value of the target node and/or the target attribute value of the target child node meets an applicable condition of a target responsive layout policy, a specified layout attribute of the target node in the node description file based on a setting manner corresponding to the target responsive layout policy, where the target responsive layout policy is one of multiple responsive layout policies corresponding to the layout type of the target node; And the code generation module is used for generating an interface code corresponding to the designated interface based on the node description file.
  9. 9. An electronic device comprising a processor and a memory, the memory storing a plurality of instructions, the processor loading instructions from the memory to perform the steps of the interface code generation method of any one of claims 1 to 7.
  10. 10. A computer-readable storage medium, characterized in that a computer program is stored thereon, which computer program is loaded by a processor to perform the steps of the interface code generation method of any of claims 1 to 7.

Description

Interface code generation method and device, electronic equipment and storage medium Technical Field The present application relates to the field of computer technologies, and in particular, to an interface code generating method, an apparatus, an electronic device, and a storage medium. Background Currently, the generation of interface codes generally follows a procedure in which a design script is first created by an interface design tool (e.g., figma, sktch, etc.), and then converted into an interface code. The design draft refers to a structured file for describing visual manifestations and interaction details of a user interface. However, in the current process of converting the design draft into the interface code, the recognition result of the layout information of the interface cannot be adapted to different screen sizes, and the accuracy of the recognition of the layout information needs to be improved, so that the responsiveness and accuracy of the generated interface code need to be improved. Disclosure of Invention The application provides an interface code generation method, an interface code generation device, electronic equipment and a storage medium, which can improve the accuracy and the responsiveness of an interface code. In a first aspect, this embodiment provides an interface code generating method, including: Acquiring a design draft describing a designated interface; converting the design manuscript into a node description file, and analyzing the node description file to obtain a target structure tree in the node description file; Determining a layout type corresponding to the target child node based on the position information corresponding to the target child node of the target node in the target structure tree, and determining layout parameters required by the layout type; Setting the layout type as an attribute value of a layout type attribute of the target node in the node description file, and setting the layout parameter as an attribute value of a layout type parameter attribute of the target node in the node description file; Setting an attribute value of a specified layout attribute of the target node in the node description file based on a setting mode corresponding to the target responsive layout policy when the target attribute value of the target node and/or the target attribute value of the target child node meets an application condition of the target responsive layout policy, wherein the target responsive layout policy is one of a plurality of responsive layout policies corresponding to the layout type of the target node; and generating an interface code corresponding to the designated interface based on the node description file. In a second aspect, the present embodiment provides an interface code generating apparatus, including: The information acquisition module is used for acquiring a design draft describing the designated interface; the information conversion module is used for converting the design manuscript into a node description file, and analyzing the node description file to obtain a target structure tree in the node description file; The information determining module is used for determining the layout type corresponding to the target child node based on the position information corresponding to the target child node of the target node in the target structure tree, and determining the layout parameters required by the layout type; A first setting module, configured to set the layout type as an attribute value of a layout type attribute of the target node in the node description file and set the layout parameter as an attribute value of a layout type parameter attribute of the target node in the node description file; A second setting module, configured to set, when a target attribute value of the target node and/or a target attribute value of the target child node meets an application condition of a target responsive layout policy, an attribute value of a specified layout attribute of the target node in the node description file based on a setting manner corresponding to the target responsive layout policy, where the target responsive layout policy is one of multiple responsive layout policies corresponding to the layout type of the target node; And the code generation module is used for generating interface codes corresponding to the designated interfaces based on the node description file. In a third aspect, an embodiment of the present application further provides an electronic device, including a memory storing a plurality of instructions, where the processor loads the instructions from the memory to execute any one of the interface code generating methods provided in the embodiments of the present application. In a fourth aspect, an embodiment of the present application further provides a computer readable storage medium, where the computer readable storage medium stores a plurality of instructions, where the instructions are adapted to be loaded by