CN-122018903-A - User interface code generation method, device, equipment, medium and product

CN122018903ACN 122018903 ACN122018903 ACN 122018903ACN-122018903-A

Abstract

The invention discloses a user interface code generation method, a device, equipment, a medium and a product, and relates to the technical field of front-end application development. The method comprises the steps of obtaining a user interface design file, identifying a user interface element set in the user interface design file, analyzing all user interface elements in the user interface element set to obtain element analysis results, componentizing the user interface elements in the user interface element set to obtain a plurality of target components based on the element analysis results, and generating user interface codes based on the element analysis results and the target components through a code generator. By identifying, analyzing, componentizing and generating the elements of the user interface design file, the user interface code can be automatically generated, the efficiency of generating the user interface code is improved, the capability of a front-end developer is not required to be excessively relied on, the productivity of the front-end developer is released, and the generation quality and maintainability of the front-end code are improved.

Inventors

Deng Lichun
HUANG YAN
CHEN CHUNSONG
LIU JIAN
FANG YOUXUAN
WANG JUE
YANG ZHIHUA

Assignees

中移信息技术有限公司
中国移动通信集团有限公司

Dates

Publication Date: 20260512
Application Date: 20260121

Claims (10)

1. A method for generating a user interface code, comprising: Acquiring a user interface design file, and identifying a user interface element set in the user interface design file; analyzing each user interface element in the user interface element set to obtain an element analysis result; based on the element analysis result, user interface elements in the user interface element set are componentized to obtain at least one target component; and generating, by a code generator, user interface code based on the element parsing result and the target component.
2. The method of claim 1, wherein parsing each user interface element in the set of user interface elements to obtain an element parsing result comprises: Carrying out layout analysis on each user interface element in the user interface element set to obtain an abstract layout tree; carrying out style analysis on each user interface element in the user interface element set to obtain style attribute information; Semantic understanding is carried out on texts corresponding to all user interface elements in the user interface element set, and interaction intention of the user interface elements is obtained; And constructing an element analysis result according to the abstract layout tree, the style attribute information and the interaction intention.
3. The method of claim 1, wherein the componentizing the user interface elements in the set of user interface elements based on the element parsing result to obtain at least one target component comprises: And clustering each user interface element in the user interface element set according to the element analysis result to obtain at least one target component, wherein the target component comprises a logic component and/or a text component.
4. The method of claim 1, wherein the generating, by a code generator, user interface code based on the element parsing result and the target component comprises: Determining a predefined component from a library of predefined components that matches the target component; Generating an event handling function based on the element parsing result and the predefined component; user interface code is generated from the event processing function and the predefined component by a code generator.
5. The method of claim 4, wherein generating, by a code generator, user interface code from the event handling function and the predefined component comprises: Analyzing event processing logic in the event processing function and an association relation between the event processing logic and a predefined component through a code generator; mapping attribute information of the event processing logic and associated predefined components to standardized configuration data; Calling a code template according to the standardized configuration data to generate codes of interface layout and interaction logic; integrating the interface layout and the code of the interaction logic, and outputting the user interface code conforming to the target frame specification.
6. The method of claim 1, wherein the identifying the set of user interface elements in the user interface design file comprises: identifying bounding boxes and category labels of user interface elements in the user interface design file based on a target detection model; and forming a user interface element set according to the bounding boxes and the category labels of the user interface elements.
7. A user interface code generating apparatus, comprising: The system comprises a set determining module, a user interface design module and a user interface element setting module, wherein the set determining module is used for acquiring a user interface design file and identifying a user interface element set in the user interface design file; The element analysis module is used for analyzing each user interface element in the user interface element set to obtain an element analysis result; the element componentization module is used for componentizing the user interface elements in the user interface element set based on the element analysis result to obtain a plurality of target components; and the interface code generation module is used for generating a user interface code based on the element analysis result and the target component through a code generator.
8. An electronic device, the electronic device comprising: At least one processor; and a memory communicatively coupled to the at least one processor; Wherein the memory stores a computer program executable by the at least one processor to enable the at least one processor to perform the user interface code generation method of any one of claims 1-6.
9. A computer readable storage medium storing computer instructions for causing a processor to implement the user interface code generation method of any one of claims 1-6 when executed.
10. A computer program product, characterized in that the computer program product comprises a computer program which, when executed by a processor, implements the user interface code generation method of any of claims 1-6.

Description

User interface code generation method, device, equipment, medium and product Technical Field The present invention relates to the field of front-end application development technologies, and in particular, to a method, an apparatus, a device, a medium, and a product for generating a user interface code. Background In the field of front-end application development, how to efficiently and high-quality convert visual design manuscripts into practically usable code interfaces is a long-standing core challenge. Currently, solutions within the industry mainly include both fully manual coding by a developer and generating code using automated tools, but both paths have significant limitations. The manual coding method requires developers to write all codes from scratch, and is slow in process and high in labor cost, and is especially unfavorable for the early rapid promotion of projects. Meanwhile, the output quality of the system is highly dependent on the personal ability of a developer, so that the problem that visual reduction deviation is inconsistent with a code style is easily generated, and additional management cost is required to be input in team cooperation to maintain uniformity. The method for automatically generating the tool can rapidly output the interface structure, but the generated codes are often redundant, disordered and poor in maintainability, and high technical liabilities are formed by long-term accumulation. In addition, the tool capacity is limited, only static appearance can be processed, dynamic interaction and complex layout cannot be realized, and a large amount of manual intervention and rewriting work still cannot be carried out basically. Therefore, the prior art is low in development efficiency and high in requirements on personnel skills, or the generated codes are poor in quality and cannot process complex logic, so that quick and efficient interface development is difficult to realize while high-quality codes and good maintainability are ensured. Disclosure of Invention The invention provides a user interface code generation method, a device, equipment, a medium and a product, which are used for solving the problem that the existing user interface code generation method is difficult to realize rapid and efficient interface development while ensuring high-quality codes and good maintainability. In a first aspect, an embodiment of the present invention provides a method for generating a user interface code, including: Acquiring a user interface design file, and identifying a user interface element set in the user interface design file; analyzing each user interface element in the user interface element set to obtain an element analysis result; based on the element analysis result, user interface elements in the user interface element set are componentized to obtain at least one target component; and generating, by a code generator, user interface code based on the element parsing result and the target component. In a second aspect, an embodiment of the present invention provides a user interface code generating apparatus, including: The system comprises a set determining module, a user interface design module and a user interface element setting module, wherein the set determining module is used for acquiring a user interface design file and identifying a user interface element set in the user interface design file; The element analysis module is used for analyzing each user interface element in the user interface element set to obtain an element analysis result; the element componentization module is used for componentizing the user interface elements in the user interface element set based on the element analysis result to obtain a plurality of target components; and the interface code generation module is used for generating a user interface code based on the element analysis result and the target component through a code generator. In a third aspect, an embodiment of the present invention provides an electronic device, including: At least one processor; and a memory communicatively coupled to the at least one processor; Wherein the memory stores a computer program executable by the at least one processor to enable the at least one processor to perform the user interface code generation method according to any one of the embodiments of the present invention. In a fourth aspect, an embodiment of the present invention provides a computer readable storage medium, where computer instructions are stored, where the computer instructions are configured to cause a processor to implement a user interface code generating method according to any embodiment of the present invention. In a fifth aspect, embodiments of the present invention provide a computer program product comprising a computer program which, when executed by a processor, implements the user interface code generation method according to any of the embodiments of the present invention. According to the technical scheme, th