Method, apparatus, device, and storage medium for generating interface code

Abstract

An embodiment of the present application provides a method, apparatus, device, and storage medium for generating interface code. The method displays an editing interface, obtains a UI interface obtained by a user based on the editing interface, generates first-format data corresponding to a first programming language for the UI interface based on the positional relationship and nesting relationship among UI components in the UI interface, converts the first-format data into second-format data corresponding to a second programming language, and generates code corresponding to the second programming language for the UI interface based on the second-format data, thereby realizing the automatic generation of interface code and improving the generation efficiency of interface code.

Description

Technical Field

[0001] Embodiments of the present application relate to the field of computer technology, and in particular, to a method, apparatus, device, and storage medium for generating interface code. Background Art

[0002] In the process of interface development in related technologies, it is necessary to manually write interface code for implementing the target interface style. And before writing the interface code, it is necessary to select the corresponding scaffolding tool according to the version of the application where the interface is located and the provider of the development framework, and manually modify some files of the scaffolding tool, and then manually write the interface code according to the style of the target interface. In the whole development process, the parts of manually rewriting some files of the scaffolding and manually writing the interface code consume a lot of time and have low efficiency. Summary of the Invention

[0003] Embodiments of the present application provide a method, apparatus, device, and storage medium for generating interface code to improve the generation efficiency of interface code.

[0004] In a first aspect of the embodiments of the present application, a method for generating interface code is provided. The method includes:

[0005] Display an editing interface, where the editing interface includes UI components available for UI design, and the UI components are implemented based on a first programming language; obtain a UI interface edited by a user based on the UI components from the editing interface; generate first-format data corresponding to the first programming language for the UI interface based on the positional relationship and nesting relationship between the UI components in the UI interface; convert the first-format data corresponding to the first programming language for the UI interface into second-format data corresponding to a second programming language; and generate code corresponding to the second programming language for the UI interface based on the second-format data.

[0006] In an implementation manner, the first-format data includes:

[0007] The tag names, style names, style contents corresponding to the UI components in the UI interface in the first programming language, and the nesting relationship between the UI components in the UI interface.

[0008] In an implementation manner, the converting the first-format data corresponding to the first programming language for the UI interface into second-format data corresponding to a second programming language includes:

[0009] According to the mapping relationship between the first programming language and the second programming language, map the label names, style names, style contents corresponding to each UI component in the UI interface, and the nesting relationship between the UI components in the first programming language to the corresponding label names, style names, style contents, and nesting relationship in the second programming language.

[0010] In one implementation, the step of mapping the label names, style names, style contents corresponding to each UI component in the UI interface, and the nesting relationship between the UI components in the first programming language to the corresponding label names, style names, style contents, and nesting relationship in the second programming language according to the mapping relationship between the first programming language and the second programming language includes:

[0011] When it is detected that no other components are nested in the UI components of the UI interface, detect whether the label name of the UI component includes a derivative framework identifier; wherein, if it includes, based on the derivative framework identifier, map the label name, style name, and style content corresponding to the UI component in the first programming language to the label signature, style name, and style content of the derivative framework in the second programming language; if it does not include, map the label name, style name, and style content corresponding to the UI component in the first programming language to the native label signature, style name, and style content of the UI component in the second programming language.

[0012] In one implementation, before obtaining the UI interface edited by the user based on the UI component from the editing interface, the method further includes:

[0013] Receive the size parameters set by the user; based on the size parameters, adjust the size of the UI component selected by the user in the editing interface; add the size parameters to the style name or style content of the UI component in the first programming language.

[0014] The second aspect of the embodiments of the present application provides a device for generating interface code, including:

[0015] A display module, configured to display an editing interface, where the editing interface includes UI components available for UI design, and the UI components are implemented based on the first programming language.

[0016] An obtaining module, configured to obtain the UI interface edited by the user based on the UI component from the editing interface.

[0017] A first generating module, configured to generate first-format data corresponding to the first programming language of the UI interface based on the positional relationship and nesting relationship between the UI components in the UI interface.

[0018] A conversion module, configured to convert the first-format data of the UI interface corresponding to the first programming language into second-format data corresponding to a second programming language.

[0019] A second generation module, configured to generate code of the UI interface corresponding to the second programming language based on the second-format data.

[0020] In one embodiment, the first-format data includes:

[0021] The tag names, style names, style contents in the first programming language corresponding to each UI component in the UI interface, and the nesting relationships between the UI components in the UI interface.

[0022] In one embodiment, the conversion module includes:

[0023] A mapping sub-module, configured to map the tag names, style names, style contents in the first programming language corresponding to each UI component in the UI interface, and the nesting relationships between the UI components to the corresponding tag names, style names, style contents, and nesting relationships in the second programming language according to the mapping relationship between the first programming language and the second programming language.

[0024] In one embodiment, the mapping sub-module is configured to:

[0025] When it is detected that no other components are nested in the UI components of the UI interface, detect whether the tag name of the UI component includes a derived framework identifier; wherein, if it includes, based on the derived framework identifier, map the tag name and style content in the first programming language corresponding to the UI component to the tag signature and style content of the derived framework in the second programming language; if it does not include, map the tag name and style content in the first programming language corresponding to the UI component to the native tag signature and style content of the UI component in the second programming language.

[0026] In one embodiment, the device further includes:

[0027] A receiving module, configured to receive size parameters set by a user.

[0028] An adjustment module, configured to adjust the size of the UI component selected by the user in the editing interface based on the size parameters.

[0029] An adding module, configured to add the size parameters to the style name or style content of the UI component in the first programming language.

[0030] A third aspect of the embodiments of the present application provides a computer device, including: a processor; a display screen for displaying an editing interface, where a user edits to generate a UI interface on the editing interface; a storage device for storing one or more programs, and when the one or more programs are executed by the processor, the processor implements the method described in the first aspect above.

[0031] A fourth aspect of the embodiments of the present application provides a computer-readable storage medium, on which a computer program is stored, and when the program is executed by a processor, it implements the method described in the first aspect above.

[0032] Based on the above aspects, the embodiments of the present application display an editing interface, obtain a UI interface obtained by the user based on the editing interface, generate first-format data corresponding to the first programming language of the UI interface based on the positional relationship and nesting relationship between the UI components in the UI interface, convert the first-format data into second-format data corresponding to the second programming language, and generate code corresponding to the second programming language of the UI interface based on the second-format data. In the embodiments of the present application, as long as the user edits to obtain a UI interface on the editing interface, the code of the UI interface in the target programming language (i.e., the second programming language) can be automatically generated according to the UI interface obtained by the user's editing, without the user manually rewriting the files of the scaffolding tool, nor manually writing the code of the UI interface in the target programming language (i.e., the second programming language), which improves the generation efficiency of the interface code and can also avoid coding problems caused by inconsistent coding specifications of different developers.

[0033] It should be understood that the content described in the above invention content part is not intended to limit the key or important features of the embodiments of the present application, nor is it used to limit the scope of the present application. Other features of the present application will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] Figure 1 is a schematic diagram of a communication scenario provided by an embodiment of the present application;

[0035] Figure 2 is a flowchart of a method for generating an interface code provided by an embodiment of the present application;

[0036] Figure 3 is a schematic diagram of an editing interface provided by an embodiment of the present application;

[0037] Figure 4 is a flowchart of a format data conversion method provided by an embodiment of the present application;

[0038] Figure 5 is a schematic diagram of the structure of a device for generating an interface code provided by an embodiment of the present application;

[0039] Figure 6 It is a schematic structural diagram of a computer device provided by an embodiment of the present application. Detailed implementation manners

[0040] The embodiments of the present application will be described in more detail below with reference to the accompanying drawings. Although some embodiments of the present application are shown in the drawings, it should be understood that the present application can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. On the contrary, these embodiments are provided to more thoroughly and completely understand the present application. It should be understood that the drawings and embodiments of the present application are only for exemplary purposes and are not used to limit the protection scope of the present application.

[0041] The terms "first", "second", "third", "fourth", etc. (if any) in the specification, claims and above-mentioned drawings of the embodiments of the present application are used to distinguish similar objects and do not necessarily need to be used to describe a specific order or sequence. It should be understood that such data can be interchanged under appropriate circumstances so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "comprising" and "having" and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device comprising a series of steps or units does not necessarily have to be limited to those steps or units clearly listed, but may include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0042] Figure 1 It is a schematic diagram of a communication scenario provided by an embodiment of the present application, such as Figure 1As shown in the figure, in this communication scenario, technicians develop application programs through computer device 11. The development content includes the development of the UI interface of the application program and the development of the functions of the application program. After the development is completed, computer device 11 uploads the application program to server 12 on the network side so that electronic device 13 at the user end can download and use the application program from the server. Among them, when electronic device 13 performs a download operation, it first sends a download request to server 12. The download request includes the identification information and version information of the application program, as well as the information of the operating environment of electronic device 13 itself (for example, Android system or Apple system, etc.). After receiving the request from electronic device 13, server 12 verifies whether the version requested by electronic device 13 can run on electronic device 13. For example, if the version requested by electronic device 13 is a version written in Java language, while the operating environment of electronic device 13 can only run versions written in C language, then the version requested by electronic device 13 obviously cannot run on electronic device 13, and server 12 sends an error response to electronic device 13. If the version requested by electronic device 13 can run in the operating environment of electronic device 13, then the program package of the application program is sent to electronic device 13 so that electronic device 13 can install and run the application program.

[0043] Since there are many types of current electronic devices and the operating environments of various electronic devices are different, application program developers usually need to develop application program codes suitable for different operating environments in different programming languages when developing a certain application program. If the code of the application program is rewritten every time a different programming language is changed, the efficiency is obviously very low. And during the development process, sometimes due to development needs, developers have to manually modify some files of development tools, which further increases the complexity of development and reduces the development efficiency.

[0044] In view of the above problems existing in the prior art, the embodiments of the present application focus on how to improve the code generation efficiency of the UI interface of the application program and realize the automatic generation of UI interface codes.

[0045] Figure 2 It is a flowchart of a method for generating interface codes provided by an embodiment of the present application. As Figure 2 shown, the interface code generation method provided in this embodiment includes:

[0046] Step 201, display an editing interface, where the editing interface includes UI components available for UI design, and the UI components are implemented based on the first programming language.

[0047] Figure 3 It is a schematic diagram of an editing interface provided by an embodiment of the present application. In this interface, there are a component area, a parameter input area, a UI interface editing area, and a code display area.

[0048] Among them, the component area includes UI components 1 to UI components n, where n is an integer greater than 1. Each UI component in the component area is implemented in a preset native coding language (in order to distinguish it from other coding languages, in this embodiment, the native coding language is simply referred to as the first programming language), and is a component that can be used to design the UI interface. Each UI component includes information such as a tag name, a style name, and style content under the first thread language. The style content may include basic design information of the UI component (such as, but not limited to: size information and shape information) and special design information (such as, but not limited to: color type information and color change information, etc.). The user can select the corresponding UI component from the component area and drag it to the UI interface editing area to implement the design of the UI interface. Among them, the tag name, style name, and style content mentioned in this embodiment are all used to mark the UI component. The tag name, style name, and style content of each UI component are unique, and each UI component corresponds to a section of code written in the first programming language, and this section of code is used to implement this UI component.

[0049] In one implementation, multiple UI components dragged by the user to the UI interface editing area can be nested and superimposed on each other. For example, after the user drags a content presentation component to the UI interface editing area, the user can also drag another picture presentation component to the rectangular area of the content presentation component on the UI interface editing area to achieve the nesting between the content presentation component and the picture presentation component, so that both text content and picture content are displayed in the rectangular area of the content presentation component. Of course, here only one nesting method is used as an example for illustration, and it is not the only limitation on the nesting method.

[0050] The parameter input area can be used to set the parameters of the UI components selected by the user. In this embodiment, the parameters of the UI components dragged by the user from the component area are all preset default values. When the user designs the interface using the UI components in the component area, the user can set the size parameters of the selected UI components through the parameter input area. For example, after the user selects the content presentation component (the content presentation component can be exemplarily understood as a component for presenting text content) from the component area, assuming that the content presentation area of the content presentation component is a rectangle, then after the user drags the component to the UI interface editing area, the user can set the length and width of the rectangular area through the parameter input area so that the size of the rectangular area meets the requirements. After completing the size adjustment, in one example, the size parameters set by the user can be added to the style name or style content of the UI component in the first programming language, so that when implementing the UI interface including the UI component in other programming languages, the area of the UI component on the UI interface can maintain the size set by the user. Of course, this is only an example. In fact, in other ways, the size parameters adjusted by the user can be carried in any identification information of the UI component.

[0051] The code display area can be used to display the code of the UI components dragged by the user in the first programming language, or it can also be used to display the code of the UI interface currently designed by the user in the second programming language, where the second programming language refers to the programming language to be used.

[0052] Step 202: Obtain the UI interface edited by the user based on the UI components from the editing interface.

[0053] In a feasible implementation manner, a trigger button is set on the editing interface. When it is detected that the user triggers the button, it is determined that the user has completed the design. At this time, the UI interface designed by the user is obtained from the UI interface editing area. In another feasible implementation manner, it can be triggered to obtain the UI interface in the UI interface editing area when it is detected that the edited area of the UI interface editing area exceeds a preset threshold and there is no new editing operation in the UI interface editing area within a preset time length. Among them, the UI interface obtained in this embodiment carries the relevant information of each UI component constituting the interface, such as the label name, style name, and style content of the UI component. Of course, the above two methods are only examples and not the only limitation on the UI interface acquisition method.

[0054] Step 203: Generate first-format data corresponding to the first programming language for the UI interface based on the positional relationship and nesting relationship among the UI components in the UI interface.

[0055] In this embodiment, relevant information of UI components can be obtained from the UI interface in a preset order. For example, in an example, the UI interface can be traversed in the order from left to right and from top to bottom to obtain information such as the label signature, style name, and style content of each UI component in the UI interface. After traversing a UI component, it is detected whether there are other components nested within this component. If so, the label name, style name, and style content of the nested component are continuously obtained, and the nesting relationship between components is recorded based on the label signature, style name, style content, etc. corresponding to each component. For example, in a possible example, the nesting relationship can be represented in the form of "(label signature i, style name i, style content i)-(label signature j, style name j, style content j)", indicating that the UI component corresponding to label signature i nests the UI component corresponding to label signature j. Of course, this is only an example for illustration and not the only limitation.

[0056] Further, after traversing a UI component, if the UI component nests with other components, the complete nesting relationship between the UI component and other components is added to a preset string as a whole. If the UI component does not nest with other components, the information such as the label signature, style name, and style content of this component is directly added to the preset string. Then, after traversing the entire UI interface, the first-format data corresponding to the UI interface in the first programming language can be obtained. That is to say, the first-format data referred to in this embodiment includes the nesting relationship between components in the UI interface and the information such as the label signature, style name, and style content of each UI component.

[0057] Step 204: Convert the first-format data corresponding to the UI interface in the first programming language into second-format data corresponding to the second programming language.

[0058] Among them, the second programming language refers to the encoding language to be used, and this encoding language is different from the first programming language. In this embodiment, in addition to the first programming language, multiple programming languages can be preset in advance. For each UI component provided in the editing interface, there is a corresponding piece of code in each programming language to implement this UI component. However, for the same UI component, the label name, style name, and style content corresponding to it in different programming languages may be the same or different. Therefore, in this embodiment, the mapping relationship between the first programming language and various other programming languages is preset in advance. This mapping relationship includes the mapping relationship between the label names in the first programming language and various other programming languages, the mapping relationship between the style names, and the mapping relationship between the style contents, etc. According to these mapping relationships, the label names, style names, style contents, etc. in the first programming language can be mapped to other programming languages.

[0059] Since in this embodiment, the second programming language is the target programming language, after obtaining the first-format data corresponding to the first programming language, according to the mapping relationship between the first programming language and the second programming language, the label names, style names, style contents of each UI component in the UI interface, and the nesting relationship between each UI component can be mapped to the corresponding label names, style names, style contents, and nesting relationship in the second programming language.

[0060] Step 205: Generate the code of the UI interface corresponding to the second programming language based on the second-format data.

[0061] Since in this embodiment, corresponding code is pre-written for each programming language to implement the corresponding UI components, and the second-format data mapped from the first-format data represents the relationship between each UI component in the UI interface with information such as label names, style names, and style contents in the second programming language. Therefore, according to the second-format data, the code of each UI component of the UI interface pre-written in the second programming language can be found from the pre-set code, and then based on these codes and the nesting relationship between the UI components, the code of the UI interface based on the second programming language is generated.

[0062] In this embodiment, by displaying an editing interface, obtaining the UI interface obtained by the user based on this editing interface, generating the first-format data of the UI interface corresponding to the first programming language based on the positional relationship and nesting relationship between each UI component in the UI interface, converting the first-format data into the second-format data corresponding to the second programming language, and generating the code of the UI interface corresponding to the second programming language based on the second-format data. In this embodiment, as long as the user edits the UI interface on the editing interface, the code of the UI interface in the target programming language (i.e., the second programming language) can be automatically generated according to the UI interface edited by the user, without the user manually modifying the files of the scaffolding tool, nor manually writing the code of the UI interface in the target programming language (i.e., the second programming language), improving the generation efficiency of the interface code, and at the same time avoiding coding problems caused by inconsistent coding specifications of different developers.

[0063] Figure 4 is a flowchart of a format data conversion method provided by an embodiment of the present application. As Figure 4 shown, the format data conversion method in this embodiment is as follows:

[0064] Step 401: Parse the information of each UI component from the first-format data corresponding to the first programming language, and determine whether there is a nesting relationship between each UI component and other components according to the information recorded in the first-format data.

[0065] Step 402: For a UI component that has a nested relationship with other components, map the tag name, style name, and style content of the UI component and the other components in the first programming language to the tag name, style name, and style content in the second programming language, and use the tag name, style name, and style content of the UI component and the other components in the second programming language to represent the nested relationship between the UI component and the other components.

[0066] In practical applications, since the first format data records the nested relationships between components in the UI interface, when a certain UI component parsed from the first format data has a nested relationship with other components, obtain the complete nested relationship of the UI component and the other components, and represent the nested relationship using the tag name, style name, and style content in the second programming language. For example, when UI component 1 is nested in UI component 2 and UI component 2 is nested in UI component 3, when parsing UI component 3, it is necessary to obtain the complete nested relationship among UI component 1, UI component 2, and UI component 3. Further, according to the mapping relationship between the first programming language and the second programming language, map the tag name, style name, and style content of UI component 1, UI component 2, and UI component 3 in the first programming language to the tag name, style name, and style content in the second programming language, so as to represent the nested relationship among UI component 1, UI component 2, and UI component 3 through the tag name, style name, and style content of UI component 1, UI component 2, and UI component 3 in the second programming language.

[0067] Step 403: For a UI component that has no nested relationship with other components, detect whether the tag name of the UI component includes a derived framework identifier. If so, execute Step 404; otherwise, execute Step 405.

[0068] The derived framework corresponding to a UI component refers to a code segment that implements the UI component using a custom coding method based on a specified programming language. For example, for a certain UI component, a system-default code segment based on the second programming language is called the native framework of the UI component, and a code segment written by a developer in a custom manner based on the second programming language is called the derived framework of the UI component. For a UI component, there can be multiple corresponding derived frameworks.

[0069] Step 404: Based on the derived framework identifier, map the tag name and style content corresponding to the UI component in the first programming language to the tag signature and style content of the derived framework in the second programming language.

[0070] Step 405: Map the tag name, style name, and style content corresponding to the UI component in the first programming language to the native tag signature, style name, and style content of the UI component in the second programming language.

[0071] Exemplarily, in the implementation manner of this embodiment, when the tag name of the UI component does not include the derivative framework identifier, it is determined that the UI component is implemented using the native framework. When the tag name of the UI component includes the derivative framework identifier, it is determined that the UI component is implemented using the derivative framework corresponding to the derivative framework identifier. Therefore, when performing the operation of converting the first format data into the second format data, it is necessary to determine whether the UI component needs to be implemented through the derivative framework based on the tag name of the UI component. If so, then according to the mapping relationship between the first programming language and the second programming language, the tag name, style name, and style content of the derivative framework in the first programming language need to be mapped to the tag name, style name, and style content of the derivative framework in the second programming language. If not, then the tag name, style name, and style content corresponding to the native framework in the first programming language need to be mapped to the native tag name, style name, and style content of the native framework in the second programming language.

[0072] In this embodiment, the tag name of the UI component may include the identifier of the derivative framework. By judging the derivative framework identifier, it is allowed to use custom code segments in the code of the UI interface, thereby improving the flexibility of the code form and meeting different programming needs.

[0073] Figure 5 It is a schematic structural diagram of a device for generating interface code provided by an embodiment of the present application. As Figure 5 shown, the device 50 includes:

[0074] A display module 51 for displaying an editing interface, where the editing interface includes UI components available for UI design, and the UI components are implemented based on the first programming language;

[0075] An acquisition module 52 for acquiring, from the editing interface, a UI interface edited by the user based on the UI components;

[0076] A first generation module 53 for generating first format data corresponding to the first programming language of the UI interface based on the positional relationship and nesting relationship between the UI components in the UI interface;

[0077] A conversion module 54 for converting the first format data corresponding to the first programming language of the UI interface into second format data corresponding to the second programming language;

[0078] The second generation module 55 is configured to generate code of the UI interface corresponding to the second programming language based on the second format data.

[0079] In one embodiment, the first format data includes:

[0080] The label names, style names, style contents corresponding to each UI component in the UI interface in the first programming language, and the nesting relationship between each UI component in the UI interface.

[0081] In one embodiment, the conversion module includes:

[0082] A mapping sub-module, configured to map the label names, style names, style contents corresponding to each UI component in the UI interface in the first programming language, and the nesting relationship between each UI component to the corresponding label names, style names, style contents, and nesting relationship in the second programming language according to the mapping relationship between the first programming language and the second programming language.

[0083] In one embodiment, the mapping sub-module is configured to:

[0084] When it is detected that no other components are nested in the UI components of the UI interface, detect whether the label name of the UI component includes a derived framework identifier;

[0085] Wherein, if it includes, based on the derived framework identifier, map the label name, style name, and style content corresponding to the UI component in the first programming language to the label signature, style name, and style content of the derived framework in the second programming language;

[0086] If it does not include, map the label name, style name, and style content corresponding to the UI component in the first programming language to the native label signature, style name, and style content of the UI component in the second programming language.

[0087] In one embodiment, the device further includes:

[0088] A receiving module, configured to receive size parameters set by a user;

[0089] An adjustment module, configured to adjust the size of the UI component selected by the user in the editing interface based on the size parameters;

[0090] An adding module, configured to add the size parameters to the style name or style content of the UI component in the first programming language.

[0091] The device provided in this embodiment can execute the above Figure 2 orFigure 4 The methods of the embodiments are executed in a similar manner and have similar beneficial effects, which will not be elaborated here.

[0092] Figure 6 It is a schematic structural diagram of a computer device provided by an embodiment of the present application. As Figure 6 shown, the computer device 60 includes:

[0093] A processor 61;

[0094] A display screen 62 for displaying an editing interface, on which a user edits to generate a UI interface;

[0095] A storage device 63 for storing one or more programs, which when executed by the processor cause the processor to implement as described above Figure 2 or Figure 4 the methods of the embodiments.

[0096] An embodiment of the present application also provides a computer-readable storage medium, on which a computer program is stored, and when the program is executed by a processor, the methods described in any of the above method embodiments are implemented.

[0097] The functions described above herein can be performed at least in part by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that can be used include: Field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), Systems on Chip (SOCs), Complex Programmable Logic Devices (CPLDs), and so on.

[0098] The program code for implementing the methods of the present disclosure can be written in any combination of one or more programming languages. These program codes can be provided to the processor or controller of a general-purpose computer, a special-purpose computer, or other programmable data processing devices, such that when the program codes are executed by the processor or controller, the functions / operations specified in the flowcharts and / or block diagrams are implemented. The program codes can be executed entirely on the machine, partially on the machine, as an independent software package partially on the machine and partially on a remote machine, or entirely on a remote machine or server.

[0099] In the context of the present disclosure, a machine-readable medium can be a tangible medium that can contain or store a program for use by or in connection with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or Flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0100] Moreover, although the operations are depicted in a particular order, this should be understood as requiring that such operations be performed in the particular order shown or in sequential order, or that all illustrated operations be performed to achieve the desired result. In certain environments, multitasking and parallel processing may be advantageous. Likewise, although several specific implementation details are included in the foregoing discussion, these should not be construed as limitations on the scope of the present disclosure. Certain features that are described in the context of separate embodiments can also be implemented in combination in a single implementation. Conversely, the various features that are described in the context of a single implementation can also be implemented separately or in any suitable subcombination in multiple implementations.

[0101] Although the subject matter has been described in language specific to structural features and / or methodological acts, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are merely example forms of implementing the claims.

Claims

1. A method for generating interface code, characterized in that, it includes: displaying an editing interface, where the editing interface includes UI components available for UI design, and the UI components are implemented based on a first programming language; obtaining from the editing interface a UI interface edited by the user based on the UI components; generating first-format data corresponding to the first programming language for the UI interface based on the positional relationship and nesting relationship between the UI components in the UI interface; converting the first-format data corresponding to the first programming language for the UI interface into second-format data corresponding to a second programming language; the second programming language is the target programming language; generating code corresponding to the second programming language for the UI interface based on the second-format data; the converting the first-format data corresponding to the first programming language for the UI interface into second-format data corresponding to a second programming language includes: according to the mapping relationship between the first programming language and the second programming language, mapping the tag names, style names, style contents of each UI component in the UI interface in the first programming language, and the nesting relationship between the UI components to the corresponding tag names, style names, style contents and nesting relationship in the second programming language; the according to the mapping relationship between the first programming language and the second programming language, mapping the tag names, style names, style contents of each UI component in the UI interface in the first programming language, and the nesting relationship between the UI components to the corresponding tag names, style names, style contents and nesting relationship in the second programming language includes: when it is detected that no other components are nested in the UI components of the UI interface, detecting whether the tag name of the UI component includes a derivative framework identifier; wherein, if it includes, based on the derivative framework identifier, mapping the tag name, style name and style content corresponding to the UI component in the first programming language to the tag signature, style name and style content of the derivative framework in the second programming language; if it does not include, mapping the tag name, style name and style content corresponding to the UI component in the first programming language to the native tag signature, style name and style content of the UI component in the second programming language.

2. The method according to claim 1, characterized in that, the first-format data includes: the tag names, style names, style contents of each UI component in the UI interface in the first programming language, and the nesting relationship between the UI components in the UI interface.

3. The method according to claim 1 or 2, characterized in that, before obtaining from the editing interface a UI interface edited by the user based on the UI components, the method further includes: receiving size parameters set by the user; adjusting the size of the UI components selected by the user in the editing interface based on the size parameters; adding the size parameters to the style name or style content of the UI components in the first programming language.

4. An apparatus for generating interface code, characterized in that, it includes: a display module, configured to display an editing interface, where the editing interface includes UI components available for UI design, and the UI components are implemented based on a first programming language; an acquisition module, configured to acquire, from the editing interface, a UI interface edited by a user based on the UI components; a first generation module, configured to generate first-format data corresponding to the first programming language for the UI interface based on the positional relationship and nesting relationship among the UI components in the UI interface; a conversion module, configured to convert the first-format data corresponding to the first programming language for the UI interface into second-format data corresponding to a second programming language; a second generation module, configured to generate code corresponding to the second programming language for the UI interface based on the second-format data; the conversion module includes: a mapping sub-module, configured to map, according to the mapping relationship between the first programming language and the second programming language, the tag names, style names, style contents corresponding to the UI components in the UI interface in the first programming language, and the nesting relationship among the UI components to the tag names, style names, style contents, and nesting relationship corresponding to them in the second programming language; the mapping sub-module is further configured to: when it is detected that no other components are nested in the UI components of the UI interface, detect whether the tag name of the UI component includes a derivative framework identifier; wherein, if it includes, based on the derivative framework identifier, map the tag name, style name, and style content corresponding to the UI component in the first programming language to the tag signature, style name, and style content of the derivative framework in the second programming language; if it does not include, map the tag name, style name, and style content corresponding to the UI component in the first programming language to the native tag signature, style name, and style content of the UI component in the second programming language.

5. The apparatus according to claim 4, characterized in that, the first-format data includes: the tag names, style names, style contents corresponding to the UI components in the UI interface in the first programming language, and the nesting relationship among the UI components in the UI interface.

6. A computer device, characterized in that, it includes: a processor; a display screen, configured to display an editing interface, where a user edits and generates a UI interface on the editing interface; a storage device, configured to store one or more programs, and when the one or more programs are executed by the processor, enable the processor to implement the method according to any one of claims 1-3.

7. A computer-readable storage medium, on which a computer program is stored, characterized in that, when the program is executed by a processor, it implements the method according to any one of claims 1-3.

Images