CN113721910A - Interface code generation method and device, electronic equipment and computer readable medium - Google Patents
Interface code generation method and device, electronic equipment and computer readable medium Download PDFInfo
- Publication number
- CN113721910A CN113721910A CN202011560323.8A CN202011560323A CN113721910A CN 113721910 A CN113721910 A CN 113721910A CN 202011560323 A CN202011560323 A CN 202011560323A CN 113721910 A CN113721910 A CN 113721910A
- Authority
- CN
- China
- Prior art keywords
- component
- code
- interface
- template
- information
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/186—Templates
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Stored Programmes (AREA)
Abstract
The embodiment of the disclosure discloses an interface code generation method, an interface code generation device, electronic equipment and a computer readable medium. One embodiment of the method comprises: generating a template code based on project configuration information of the target project; converting a target graphical interface into a component tree, wherein the target graphical interface is generated by target operations acting on interface components in an online editing interface; analyzing the component information included by each node in the component tree to generate a component analysis information set; based on the component parsing information set, the template code is adjusted to generate interface code. The implementation method shortens the development period of the interface code, and can intuitively see the interface effect corresponding to the interface code in the development process.
Description
Technical Field
The embodiment of the disclosure relates to the technical field of computers, in particular to an interface code generation method, an interface code generation device, electronic equipment and a computer readable medium.
Background
The interface code generation is a method for writing the interface code according to the interface effect graph. At present, the interface code generation usually adopts the following modes: and writing interface codes by a front-end developer according to the interface effect diagram.
However, when the interface code is generated in the above manner, there are often technical problems as follows:
for a more complex interface, the development period is longer, and the interface effect corresponding to the interface code cannot be intuitively observed.
Disclosure of Invention
This summary is provided to introduce a selection of concepts in a simplified form that are further described below in the detailed description. This summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended to be used to limit the scope of the claimed subject matter.
Some embodiments of the present disclosure propose an interface code generation method, apparatus, electronic device and computer readable medium to solve one or more of the technical problems mentioned in the background section above.
In a first aspect, some embodiments of the present disclosure provide an interface code generation method, including: generating a template code based on project configuration information of the target project; converting a target graphical interface into a component tree, wherein the target graphical interface is generated through target operations acting on interface components in an online editing interface; analyzing the component information included by each node in the component tree to generate a component analysis information set; and adjusting the template codes to generate interface codes based on the component analysis information set.
Optionally, the method further comprises: converting the component information included by each node in the component tree into component information in a preset file format to generate component tree sub-file information to obtain a component tree sub-file information set; combining each component tree sub-file information in the component tree sub-file information set to obtain component tree file information; and uploading the component tree file information to a target server.
Optionally, the method further includes starting the target item; and verifying the correctness of the interface code in response to the fact that the target item is successfully started.
Optionally, the method further comprises: and updating the interface code into a target code library in response to determining that the interface code passes verification.
Optionally, converting the target graphical interface into a component tree, including: and analyzing the relation among the interface components in the target graphical interface to generate the component tree.
Optionally, adjusting the template code to generate an interface code based on the component parsing information set includes: analyzing a sub-template code corresponding to each component analysis information in the component analysis information set from the template codes to obtain a sub-template code set; adjusting each sub-template code in the sub-template code set according to the component analysis information set to generate a sub-template adjustment code, so as to obtain a sub-template adjustment code set; and combining all the sub-template adjusting codes in the sub-template adjusting code set according to the component tree to generate the interface code.
Optionally, parsing a sub-template code corresponding to each component parsing information in the component parsing information set from the template code to obtain a sub-template code set, including: and analyzing a sub-template code corresponding to each component analysis information in the component analysis information set from the template codes according to the client type to obtain a sub-template code set.
In a second aspect, some embodiments of the present disclosure provide an interface code generation apparatus, the apparatus including: a generating unit configured to generate a template code based on the item configuration information of the target item; a conversion unit configured to convert a target graphical interface into a component tree, wherein the target graphical interface is generated by a target operation acting on an interface component in an online editing interface; the analysis unit is configured to analyze the component information included by each node in the component tree to generate a component analysis information set; and the adjusting unit is configured to adjust the template code based on the component analysis information set so as to generate an interface code.
Optionally, the apparatus further comprises: converting the component information included by each node in the component tree into component information in a preset file format to generate component tree sub-file information to obtain a component tree sub-file information set; combining each component tree sub-file information in the component tree sub-file information set to obtain component tree file information; and uploading the component tree file information to a target server.
Optionally, the apparatus further comprises a starting module for starting the target item; and verifying the correctness of the interface code in response to the fact that the target item is successfully started.
Optionally, the apparatus further comprises: and updating the interface code into a target code library in response to determining that the interface code passes verification.
Optionally, the conversion unit is further configured to: and analyzing the relation among the interface components in the target graphical interface to generate the component tree.
Optionally, the adjusting unit is further configured to: analyzing a sub-template code corresponding to each component analysis information in the component analysis information set from the template codes to obtain a sub-template code set; adjusting each sub-template code in the sub-template code set according to the component analysis information set to generate a sub-template adjustment code, so as to obtain a sub-template adjustment code set; and combining all the sub-template adjusting codes in the sub-template adjusting code set according to the component tree to generate the interface code.
Optionally, the parsing unit is further configured to: and analyzing a sub-template code corresponding to each component analysis information in the component analysis information set from the template codes according to the client type to obtain a sub-template code set.
In a third aspect, some embodiments of the present disclosure provide an electronic device, comprising: one or more processors; a storage device having one or more programs stored thereon, which when executed by one or more processors, cause the one or more processors to implement the method described in any of the implementations of the first aspect.
In a fourth aspect, some embodiments of the present disclosure provide a computer readable medium on which a computer program is stored, wherein the program, when executed by a processor, implements the method described in any of the implementations of the first aspect.
The above embodiments of the present disclosure have the following advantages: the interface code obtained by the interface code generation method of some embodiments of the disclosure shortens the development period of the interface code, and simultaneously, the interface effect corresponding to the interface code can be visually observed. Specifically, the inventor finds that the interface code development period is long, and the interface effect corresponding to the interface code cannot be intuitively observed because: in the prior art, interface codes are often written first, and then the interface effect corresponding to the interface codes can be seen. Based on this, the interface code generation method of some embodiments of the present disclosure converts a target graphical interface generated by a user dragging or clicking an interface component in an online editing interface into a component number tree. Then, information of each component in the component tree is parsed. And finally, adjusting the template code according to the analyzed component information, thereby obtaining the interface code. The method shortens the development period of the interface code, and simultaneously, the interface effect corresponding to the interface code can be visually seen in the development process.
Drawings
The above and other features, advantages and aspects of various embodiments of the present disclosure will become more apparent by referring to the following detailed description when taken in conjunction with the accompanying drawings. Throughout the drawings, the same or similar reference numbers refer to the same or similar elements. It should be understood that the drawings are schematic and that elements and elements are not necessarily drawn to scale.
FIG. 1 is a schematic illustration of one application scenario of an interface code generation method according to some embodiments of the present disclosure;
FIG. 2 is a flow diagram of some embodiments of an interface code generation method according to the present disclosure;
FIG. 3 is a schematic illustration of an online editing interface in some embodiments of an interface code generation method according to the present disclosure;
FIG. 4 is a schematic diagram of a component tree in some embodiments of an interface code generation method according to the present disclosure;
FIG. 5 is a flow diagram of further embodiments of interface code generation methods according to the present disclosure;
FIG. 6 is a schematic structural diagram of some embodiments of an interface code generation apparatus according to the present disclosure;
FIG. 7 is a schematic structural diagram of an electronic device suitable for use in implementing some embodiments of the present disclosure.
Detailed Description
Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While certain embodiments of the present disclosure are shown in the drawings, it is to be understood that the disclosure may be embodied in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided for a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the disclosure are for illustration purposes only and are not intended to limit the scope of the disclosure.
It should be noted that, for convenience of description, only the portions related to the related invention are shown in the drawings. The embodiments and features of the embodiments in the present disclosure may be combined with each other without conflict.
It should be noted that the terms "first", "second", and the like in the present disclosure are only used for distinguishing different devices, modules or units, and are not used for limiting the order or interdependence relationship of the functions performed by the devices, modules or units.
It is noted that references to "a", "an", and "the" modifications in this disclosure are intended to be illustrative rather than limiting, and that those skilled in the art will recognize that "one or more" may be used unless the context clearly dictates otherwise.
The names of messages or information exchanged between devices in the embodiments of the present disclosure are for illustrative purposes only, and are not intended to limit the scope of the messages or information.
The present disclosure will be described in detail below with reference to the accompanying drawings in conjunction with embodiments.
Fig. 1 is a schematic diagram of one application scenario of the interface code generation method of some embodiments of the present disclosure.
In the application scenario of fig. 1, first, the computing device 101 may generate template code 103 based on the project configuration information 102 of the target project. Second, the computing device 101 can transform the target graphical interface 104 into a component tree 105, where the target graphical interface 104 is generated by target operations that act on interface components in the online editing interface. Then, the computing device 101 may parse the component information included in each node in the above-described component tree 105 to generate a component parse information set 106. Finally, the computing device 101 may adjust the template code 103 to generate the interface code 107 based on the set of component parsing information 106.
The computing device 101 may be hardware or software. When the computing device is hardware, it may be implemented as a distributed cluster composed of multiple servers or terminal devices, or may be implemented as a single server or a single terminal device. When the computing device is embodied as software, it may be installed in the hardware devices enumerated above. It may be implemented, for example, as multiple software or software modules to provide distributed services, or as a single software or software module. And is not particularly limited herein.
It should be understood that the number of computing devices in FIG. 1 is merely illustrative. There may be any number of computing devices, as implementation needs dictate.
With continued reference to fig. 2, a flow 200 of some embodiments of an interface code generation method according to the present disclosure is shown. The interface code generation method comprises the following steps:
In some embodiments, an executing agent of the interface code generation method (e.g., computing device 101 shown in FIG. 1) may generate the template code based on the project configuration information of the target project. The target item may be a Web application item of a B/S (Browser/Server) structure. The target item may be a Web application item of a C/S (Client/Server) structure. The target items may include: project configuration information. Optionally, the target item may further include: graphical interface, graphical interface configuration information, audio files, picture files. The project configuration information includes configuration information for ensuring normal operation of the target project and configuration information for generating the template code. The execution agent, first, may create an initial template code using an item command that matches the target item. Then, the initial template code is adjusted according to the project configuration information to generate the template code. The template codes comprise sub-template codes which correspond to all the components and can adapt to different client types.
As an example, the above-described image interface may be an interface written using HTML (Hyper Text Markup Language). The above-mentioned graphic interface configuration information may be CSS (Cascading Style Sheets) files.
In some embodiments, the executing agent converting the target graphical interface into the component tree may include the following steps:
firstly, converting the target graphical interface into a document object model. The target graphical interface is generated through target operation of the interface components in the online editing interface. The interface element may be a radio box, a check box, a button, an input box or a text box, etc. The above-described target operation may be a single-click operation, a double-click operation, a drag operation, or the like. The editing interface may be an interface for generating a graphical interface. Referring to fig. 3, the editing interface may include an interface component module 301, a style presentation module 302, and a component property modification module 303. The interface component module 301 contains interface components that can be used by a user. The style presentation module 302 is configured to display a page effect of a graphical interface generated after a user performs a target operation on an interface component. The component property modification module 303 is used for modifying the property of the interface component.
And secondly, associating the element configuration information corresponding to each page element in the document object model with the corresponding page element to generate the component tree. The above-mentioned component tree is shown in fig. 4 as an example, wherein the component tree shown in fig. 4 corresponds to the graphics page in fig. 3. Where "< html >" is the root element of the component tree described above. "< head >" is used to define the document header, which is a container for all header elements. "< body >" is used to define the body of the document and includes all the contents of the document. "< title >" is used to define the document title. "< div >" is used to segment the document into separate, distinct portions. "< h2 >" indicates a secondary title tag. "< label >" is used to define tags for "< input >" page elements. The "< input >" tag is used to gather user information. The element configuration information "text-align center" indicates that the text alignment manner is center alignment. The element configuration information "margin-top: 100 px" indicates that the upper outer margin of a page element is 100 pixels. The element configuration information "padding-right: 10 px" indicates that the right inner margin of the page element is 10 pixels. "padding-left: 20 px" indicates that the inner left margin of a page element is 20 pixels. "width: 90 px" indicates that the paragraph height is 90 pixels. "height: 45 px" indicates that the paragraph height is 45 pixels. "Border: 1px solid" indicates that the width of the frame is 1 pixel and the frame is bold. The element configuration information "margin-top: 30 px" indicates that the upper margin of a page element is 30 pixels. The execution body may associate the element configuration information corresponding to each page element with the corresponding page element in a pointer construction manner.
In some embodiments, the execution subject may parse the component information included in each node in the component tree to generate a set of component parsing information. Wherein, the component parsing information may include, but is not limited to, at least one of the following: component name, component color.
As an example, the execution subject may parse the component information included in each node in the component tree by a recursive algorithm to generate a set of component parsing information.
As yet another example, the execution subject may parse the component information included in each node in the component tree through a breadth-first traversal algorithm to generate a set of component parsing information.
And step 204, adjusting the template code to generate an interface code based on the component analysis information set.
In some embodiments, the executing entity adjusts the template code to generate the interface code based on the component parsing information set, and may include the following steps:
in the first step, the execution subject may create a code of a component corresponding to the component analysis information in the template code in response to determining that the code of the component corresponding to the component analysis information is not included in the template code.
In the second step, in response to determining that the template code includes a code of a component corresponding to the component resolution information, the execution subject may replace the attribute and the attribute value in the code of the component corresponding to the component resolution information with the attribute and the attribute value in the element configuration information corresponding to the component resolution information.
The above embodiments of the present disclosure have the following advantages: the interface code obtained by the interface code generation method of some embodiments of the disclosure shortens the development period of the interface code, and simultaneously, the interface effect corresponding to the interface code can be visually observed. Specifically, the inventor finds that the interface code development period is long, and the interface effect corresponding to the interface code cannot be intuitively observed because: in the prior art, interface codes are often written first, and then the interface effect corresponding to the interface codes can be seen. Based on this, the interface code generation method of some embodiments of the present disclosure converts a target graphical interface generated by a user dragging or clicking an interface component in an online editing interface into a component number tree. Then, information of each component in the component tree is parsed. And finally, adjusting the template code according to the analyzed component information, thereby obtaining the interface code. The method shortens the development period of the interface code, and simultaneously, the interface effect corresponding to the interface code can be visually seen in the development process.
With further reference to FIG. 5, a flow 500 of further embodiments of an interface code generation method is illustrated. The interface code generation method flow 500 includes the following steps:
In some embodiments, the execution subject of the interface code generation method (e.g., computing device 101 shown in FIG. 1) may generate the template code based on the project configuration information of the target project. The target item may be a Web application item of a B/S (Browser/Server) structure. The target item may be a Web application item of a C/S (Client/Server) structure. The target item may include item configuration information. The project configuration information may include, but is not limited to, at least one of: template code base address, template category. The execution body may download a code identical to the template type as a template code from a template code library corresponding to a template code library address included in the item configuration information. The template code comprises component initial codes which correspond to all the components and can adapt to different client types.
In some embodiments, the execution agent may parse the relationship between the interface components in the target graphical interface to generate a component tree. Wherein, the above-mentioned component tree can include: component information, component tag name. The component information may include: component name, component location information, component display style parameter information. The above-mentioned component display style parameter information is used for characterizing various style parameter information of the component display style. The component display style information includes, but is not limited to, at least one of: component font size, component font. The component tag name is used for representing the name of the page element tag corresponding to the component. The component position information is used for representing the position of the component in the target graphic page.
As an example, the execution subject may traverse the document object model corresponding to the target graphical interface through a depth-first traversal algorithm, and analyze a relationship between each interface component, thereby constructing the component tree.
As another example, when the document object model corresponding to the target graphical interface is a binary tree, the document object model corresponding to the target graphical interface may be traversed through any one of a pre-sequence traversal, a middle-sequence traversal, and a subsequent traversal algorithm to analyze the relationship between the interface components to construct the component tree.
In some embodiments, the execution subject may parse the component information included in each node in the component tree through the traversal method mentioned in step 203 and step 502 to generate a component parsing information set. And will not be described in detail herein.
In some embodiments, the execution subject may determine, from the template codes, a sub-template code corresponding to each component analysis information in the component analysis information set in a keyword query manner, to obtain a sub-template code set. The template code may include sub-template codes corresponding to different components.
In some optional implementation manners of some embodiments, the execution subject may determine, in a keyword query manner, a sub-template code, which is matched with the client type and corresponds to the component resolution information, of each component resolution information in the component resolution information set from the template code according to the client type, to obtain a sub-template code set. The client type may be a type of a system in which the client is located. The client type may be an IOS (Input Output System) type, an Android operating System type, or the like.
And 505, adjusting each sub-template code in the sub-template code set according to the component analysis information set to generate a sub-template adjustment code, so as to obtain a sub-template adjustment code set.
In some embodiments, the execution subject may sequentially adjust a sub-template code corresponding to the component analysis information in the component analysis information set to generate a sub-template adjustment code, so as to obtain a sub-template adjustment code. The attribute contained in the sub-template code can be inquired in a keyword matching mode, and then the attribute value corresponding to the attribute is updated according to the component analysis information to generate the sub-template adjusting code.
In some embodiments, the execution subject may combine each sub-template adjustment code in the sub-template adjustment code set according to a relationship between each component in the component tree to generate the interface code.
In some embodiments, the execution subject may convert component information included in each node in the component tree into component information in a preset file format to generate component tree sub-file information, so as to obtain a component tree sub-file information set. The preset file format may be a JSON (JavaScript Object Notation) format. The preset file format may be an XML (Extensible Markup Language) format.
And step 508, combining the information of each component tree sub-file in the information set of the component tree sub-files to obtain the information of the component tree sub-files.
In some embodiments, the execution subject may read all the component tree sub-file information from the component tree sub-file information set, and concatenate all the component tree sub-file information to generate the component tree file information.
In some embodiments, the execution subject may upload the component tree file information to the target server by means of a wired connection or a wireless connection. The target server is used for storing the component tree file information. The target server may be a distributed server or a NAS (Network Attached Storage).
At step 510, the target item is launched.
In some embodiments, the execution agent may start the target item by a start command.
As an example, when the target item is a Django item, the Django item may be launched by a command "python manage.
In step 511, in response to determining that the target project was successfully started, the correctness of the interface code is verified.
In some embodiments, the execution subject may determine whether the target item is successfully started according to the returned status code. And then, verifying the correctness of the interface code through a code detection tool.
As an example, the status code may be 200 or 404. When the status code is 200, it can characterize that the target item is successfully started. When the status code is 404, the failure of starting the target item can be characterized. The code detection tool may be Estrint, HTMLHint, or StyleLint. Escript is used for verifying JavaScript codes. HTMLHint is used to validate HTML code. StyleLint is used to check the CSS code.
In response to determining that the interface code is verified, the interface code is updated to the target code library, step 512.
In some embodiments, the execution subject may update the interface code into the target code library through a wired connection or a wireless connection in response to determining that the interface code is verified. The target code library is used for storing interface codes.
As can be seen from fig. 5, compared with the description of some embodiments corresponding to fig. 2, the flow 500 of the interface code generation method in some embodiments corresponding to fig. 5 is obtained by sequentially parsing the sub-template code corresponding to each component parsing information from the template code. And adjusting the sub-template codes corresponding to the component analysis information according to the component analysis information in the component analysis information set. The problem of too high memory occupancy rate caused by the fact that the template codes and the analysis information sets are read into the memory at one time to adjust the template codes is solved. And uploading the generated component tree file information to a target server for storage. Enabling the user to obtain component tree file information from different locations. In addition, verification of the correctness of the interface code is added. The robustness and the stable system of the generated interface code are ensured. And finally, adding the verified interface code into the target code library. So that the user can directly use the interface code whose verification is completed. By means of sharing, repeated execution of the step of generating the interface code is reduced, and development efficiency is improved.
With further reference to fig. 6, as an implementation of the methods shown in the above figures, the present disclosure provides some embodiments of an interface code generation apparatus, which correspond to those shown in fig. 2, and which may be applied in various electronic devices.
As shown in fig. 6, the interface code generation apparatus 600 of some embodiments includes: a generating unit 601, a converting unit 602, an analyzing unit 603, and an adjusting unit 604, wherein the generating unit 601 is configured to generate a template code based on item configuration information of a target item. A conversion unit 602 configured to convert a target graphical interface into a component tree, wherein the target graphical interface is generated by a target operation acting on an interface component in an online editing interface. A parsing unit 603 configured to parse the component information included in each node in the component tree to generate a component parsing information set. An adjusting unit 604 configured to adjust the template code based on the component analysis information set to generate an interface code.
In an optional implementation of some embodiments, the apparatus 600 further includes: the device comprises a file format conversion unit, a combination unit and an uploading unit, wherein the file format conversion unit is configured to convert component information included by each node in the component tree into component information in a preset file format to generate component tree sub-file information, and a component tree sub-file information set is obtained; the combination unit is configured to combine each piece of component tree sub-file information in the piece of component tree sub-file information set to obtain piece of component tree file information; the uploading unit is configured to upload the component tree file information to a target server.
In an optional implementation of some embodiments, the apparatus 600 further includes: the system comprises a starting unit and a verification unit, wherein the starting unit is configured to start the target item; the verification unit is configured to verify the correctness of the interface code in response to determining that the target item is successfully started.
In an optional implementation of some embodiments, the apparatus 600 further includes: an updating unit, wherein the updating unit is configured to update the interface code into the target code library in response to determining that the interface code is verified.
In an optional implementation of some embodiments, the conversion unit 602 is further configured to: and analyzing the relation among the interface components in the target graphical interface to generate the component tree.
In an optional implementation of some embodiments, the adjusting unit 604 is further configured to: analyzing a sub-template code corresponding to each component analysis information in the component analysis information set from the template codes to obtain a sub-template code set; adjusting each sub-template code in the sub-template code set according to the component analysis information set to generate a sub-template adjustment code, so as to obtain a sub-template adjustment code set; and combining all the sub-template adjusting codes in the sub-template adjusting code set according to the component tree to generate the interface code.
In an optional implementation of some embodiments, the parsing unit 603 is further configured to: and analyzing a sub-template code corresponding to each component analysis information in the component analysis information set from the template codes according to the client type to obtain a sub-template code set.
Referring now to FIG. 7, a block diagram of an electronic device (such as computing device 101 shown in FIG. 1)700 suitable for use in implementing some embodiments of the present disclosure is shown. The electronic device shown in fig. 7 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present disclosure.
As shown in fig. 7, electronic device 700 may include a processing means (e.g., central processing unit, graphics processor, etc.) 701 that may perform various appropriate actions and processes in accordance with a program stored in a Read Only Memory (ROM)702 or a program loaded from storage 708 into a Random Access Memory (RAM) 703. In the RAM 703, various programs and data necessary for the operation of the electronic apparatus 700 are also stored. The processing device 701, the ROM 702, and the RAM 703 are connected to each other by a bus 704. An input/output (I/O) interface 705 is also connected to bus 704.
Generally, the following devices may be connected to the I/O interface 705: input devices 706 including, for example, a touch screen, touch pad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; an output device 707 including, for example, a Liquid Crystal Display (LCD), a speaker, a vibrator, and the like; storage 708 including, for example, magnetic tape, hard disk, etc.; and a communication device 709. The communication means 709 may allow the electronic device 700 to communicate wirelessly or by wire with other devices to exchange data. While fig. 7 illustrates an electronic device 700 having various means, it is to be understood that not all illustrated means are required to be implemented or provided. More or fewer devices may alternatively be implemented or provided. Each block shown in fig. 7 may represent one device or may represent multiple devices as desired.
In particular, according to some embodiments of the present disclosure, the processes described above with reference to the flow diagrams may be implemented as computer software programs. For example, some embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In some such embodiments, the computer program may be downloaded and installed from a network via communications means 709, or may be installed from storage 708, or may be installed from ROM 702. The computer program, when executed by the processing device 701, performs the above-described functions defined in the methods of some embodiments of the present disclosure.
It should be noted that the computer readable medium described in some embodiments of the present disclosure may be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having 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. In some embodiments of the disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In some embodiments of the present disclosure, however, a computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: electrical wires, optical cables, RF (radio frequency), etc., or any suitable combination of the foregoing.
In some embodiments, the clients, servers may communicate using any currently known or future developed network Protocol, such as HTTP (HyperText Transfer Protocol), and may interconnect with any form or medium of digital data communication (e.g., a communications network). Examples of communication networks include a local area network ("LAN"), a wide area network ("WAN"), the Internet (e.g., the Internet), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future developed network.
The computer readable medium may be embodied in the electronic device; or may exist separately without being assembled into the electronic device. The computer readable medium carries one or more programs which, when executed by the electronic device, cause the electronic device to: a template code is generated based on project configuration information of the target project. And converting the target graphical interface into the component tree, wherein the target graphical interface is generated by target operation acting on the interface component in the online editing interface. And analyzing the component information included by each node in the component tree to generate a component analysis information set. And adjusting the template codes to generate interface codes based on the component analysis information set.
Computer program code for carrying out operations for embodiments of the present disclosure may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C + +, and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The units described in some embodiments of the present disclosure may be implemented by software, and may also be implemented by hardware. The described units may also be provided in a processor, and may be described as: a processor includes a generation unit, a conversion unit, an analysis unit, and an adjustment unit. The names of these units do not in some cases constitute a limitation to the unit itself, and for example, the generation unit may also be described as "a unit that generates a template code based on the item configuration information of the target item".
The functions described herein above may be performed, at least in part, by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that may be used include: field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), systems on a chip (SOCs), Complex Programmable Logic Devices (CPLDs), and the like.
The foregoing description is only exemplary of the preferred embodiments of the disclosure and is illustrative of the principles of the technology employed. It will be appreciated by those skilled in the art that the scope of the invention in the embodiments of the present disclosure is not limited to the specific combination of the above-mentioned features, but also encompasses other embodiments in which any combination of the above-mentioned features or their equivalents is made without departing from the inventive concept as defined above. For example, the above features and (but not limited to) technical features with similar functions disclosed in the embodiments of the present disclosure are mutually replaced to form the technical solution.
Claims (10)
1. An interface code generation method, comprising:
generating a template code based on project configuration information of the target project;
converting a target graphical interface into a component tree, wherein the target graphical interface is generated through target operations acting on interface components in an editing interface;
analyzing the component information included by each node in the component tree to generate a component analysis information set;
based on the component parsing information set, adjusting the template code to generate an interface code.
2. The method of claim 1, the converting the target graphical interface into a component tree, comprising:
analyzing the relation among all interface components in the target graphical interface to generate the component tree, wherein nodes in the component tree comprise: component information, component tag name, the component information includes: component name, component location information, component display style parameter information.
3. The method of claim 1, wherein the method further comprises:
converting the component information included by each node in the component tree into component information in a preset file format to generate component tree sub-file information to obtain a component tree sub-file information set;
combining each component tree sub-file information in the component tree sub-file information set to obtain component tree file information;
and uploading the component tree file information to a target server.
4. The method of claim 1, wherein the adjusting the template code to generate interface code based on the set of component parsing information comprises:
analyzing a sub-template code corresponding to each component analysis information in the component analysis information set from the template codes to obtain a sub-template code set;
adjusting each sub-template code in the sub-template code set according to the component analysis information set to generate a sub-template adjustment code, so as to obtain a sub-template adjustment code set;
and combining all the sub-template adjusting codes in the sub-template adjusting code set according to the component tree to generate the interface code.
5. The method of claim 1, wherein the method further comprises:
starting the target item;
verifying the correctness of the interface code in response to determining that the target project is successfully launched.
6. The method of claim 5, wherein the method further comprises:
in response to determining that the interface code is validated, updating the interface code into a target code library.
7. The method of claim 4, wherein the parsing out, from the template codes, a sub-template code corresponding to each component parsing information in the component parsing information set to obtain a sub-template code set comprises:
and analyzing a sub-template code corresponding to each component analysis information in the component analysis information set from the template codes according to the client type to obtain a sub-template code set.
8. An interface code generation apparatus comprising:
a generating unit configured to generate a template code based on the item configuration information of the target item;
a conversion unit configured to convert a target graphical interface into a component tree, wherein the target graphical interface is generated by a target operation acting on an interface component in an online editing interface;
the analysis unit is configured to analyze the component information included by each node in the component tree to generate a component analysis information set;
an adjustment unit configured to adjust the template code to generate an interface code based on the set of component parsing information.
9. An electronic device, comprising:
one or more processors;
a storage device having one or more programs stored thereon;
when executed by the one or more processors, cause the one or more processors to implement the method of any one of claims 1-7.
10. A computer-readable medium, on which a computer program is stored, wherein the program, when executed by a processor, implements the method of any one of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011560323.8A CN113721910A (en) | 2020-12-25 | 2020-12-25 | Interface code generation method and device, electronic equipment and computer readable medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011560323.8A CN113721910A (en) | 2020-12-25 | 2020-12-25 | Interface code generation method and device, electronic equipment and computer readable medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113721910A true CN113721910A (en) | 2021-11-30 |
Family
ID=78672435
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011560323.8A Pending CN113721910A (en) | 2020-12-25 | 2020-12-25 | Interface code generation method and device, electronic equipment and computer readable medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113721910A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114185531A (en) * | 2021-12-17 | 2022-03-15 | 北京字节跳动网络技术有限公司 | Interface code generation method and device, computer equipment and storage medium |
| CN116541009A (en) * | 2023-07-07 | 2023-08-04 | 成都中科合迅科技有限公司 | User interface creation and updating method and system based on component tree |
-
2020
- 2020-12-25 CN CN202011560323.8A patent/CN113721910A/en active Pending
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114185531A (en) * | 2021-12-17 | 2022-03-15 | 北京字节跳动网络技术有限公司 | Interface code generation method and device, computer equipment and storage medium |
| CN114185531B (en) * | 2021-12-17 | 2024-03-29 | 抖音视界有限公司 | Interface code generation method, device, computer equipment and storage medium |
| CN116541009A (en) * | 2023-07-07 | 2023-08-04 | 成都中科合迅科技有限公司 | User interface creation and updating method and system based on component tree |
| CN116541009B (en) * | 2023-07-07 | 2023-09-08 | 成都中科合迅科技有限公司 | User interface creation and updating method and system based on component tree |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11146286B2 (en) | Compression of JavaScript object notation data using structure information | |
| US7870482B2 (en) | Web browser extension for simplified utilization of web services | |
| US9594802B2 (en) | Graphical modeling of database query statements | |
| CN109814866B (en) | Processing method and device for converting page application into native application | |
| CN112100550A (en) | Page construction method and device | |
| CN110780874B (en) | Method and device for generating information | |
| CN112684968A (en) | Page display method and device, electronic equipment and computer readable medium | |
| CN112269576A (en) | Component display method and device, server and storage medium | |
| CN112631590B (en) | Component library generation method, device, electronic equipment and computer readable medium | |
| CN113721910A (en) | Interface code generation method and device, electronic equipment and computer readable medium | |
| CN112631588A (en) | File generation method and device, electronic equipment and computer readable medium | |
| CN110908967A (en) | Method, device, equipment and computer readable medium for storing log | |
| CN113268955A (en) | Message conversion method and device | |
| CN113495730A (en) | Resource package generation and analysis method and device | |
| CN112486482A (en) | Page display method and device | |
| CN112632425B (en) | Method, device, equipment and storage medium for generating offline resource file | |
| CN116860286A (en) | Page dynamic update method, device, electronic equipment and computer readable medium | |
| CN111787041B (en) | Method and device for processing data | |
| US20170371852A1 (en) | System and method for in-browser editing | |
| CN114968235A (en) | Page form generation method and device, computer equipment and storage medium | |
| CN114090103A (en) | Form generation method and device, electronic equipment and computer readable medium | |
| CN113190771A (en) | Resource processing method and device, electronic equipment and computer readable medium | |
| CN113468342A (en) | Data model construction method, device, equipment and medium based on knowledge graph | |
| CN113779952B (en) | Text processing method and device and electronic equipment | |
| CN116880901B (en) | Application page analysis method, device, electronic equipment and computer readable medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |