CN115686529A

CN115686529A - Code generation method and device, electronic equipment and readable storage medium

Info

Publication number: CN115686529A
Application number: CN202211411143.2A
Authority: CN
Inventors: 兰敬民
Original assignee: Yonyou Network Technology Co Ltd
Current assignee: Yonyou Network Technology Co Ltd
Priority date: 2022-11-11
Filing date: 2022-11-11
Publication date: 2023-02-03

Abstract

The application discloses a code generation method and device, electronic equipment and a readable storage medium, and belongs to the technical field of computer software. The code generation method comprises the step of acquiring a first abstract syntax tree of a first code under the condition of having the first code. The first code is parsed into a first data model based on a hierarchical structure of the first code. And rendering the first component in the visual interface through a visual rendering layer based on the first data model. Based on the first operation on the first component at the visualization interface, the visualization rendering layer acquires first data according to the first operation. Based on the first data, the first data model is updated. And obtaining an updated first abstract syntax tree based on the updated first data model. And generating a second code based on the updated first abstract syntax tree.

Description

Code generation method and device, electronic equipment and readable storage medium

Technical Field

The application belongs to the technical field of computer software, and particularly relates to a code generation method and device, an electronic device and a readable storage medium.

Background

In the visualization development of the related technology, some service components are usually preset, and specific attributes of the service components can be modified, but related codes cannot be generated, which brings difficulty to debugging of developers.

Disclosure of Invention

The embodiment of the application aims to provide a code generation method and device, an electronic device and a readable storage medium, which can solve the problems that in visual development, the attribute of a business component can be modified, but a code related to the modified business component cannot be generated, so that debugging is difficult, and in addition, the visual development only aims at a specific scene, so that the application range is small.

In a first aspect, an embodiment of the present application provides a code generation method, including obtaining a first abstract syntax tree of a first code in a case where the first code exists. The first code is parsed into a first data model based on a hierarchical structure of the first code. And rendering the first component in the visual interface through a visual rendering layer based on the first data model. Based on the first operation on the first component at the visualization interface, the visualization rendering layer acquires first data according to the first operation. Based on the first data, the first data model is updated. And obtaining an updated first abstract syntax tree based on the updated first data model. And generating a second code based on the updated first abstract syntax tree.

In a second aspect, an embodiment of the present application provides a code generation apparatus, which includes a first module, a second module, a third module, a fourth module, a fifth module, a sixth module, and a seventh module. The first module is used for obtaining a first abstract syntax tree of a first code under the condition of having the first code. The second module is to parse the first code into a first data model based on a hierarchical structure of the first code. The third module is used for rendering the first component in the visual interface through the visual rendering layer based on the first data model. The fourth module is configured to perform a first operation on the first component based on the visualization interface, and the visualization rendering layer obtains the first data according to the first operation. The fifth module is configured to update the first data model based on the first data. The sixth module is configured to obtain an updated first abstract syntax tree based on the updated first data model. The seventh module is configured to generate a second code based on the updated first abstract syntax tree.

In a third aspect, embodiments of the present application provide an electronic device, which includes a processor and a memory, where the memory stores a program or instructions that can be executed on the processor, and the program or instructions, when executed by the processor, implement the steps of the code generation method according to the first aspect.

In a fourth aspect, embodiments of the present application provide a readable storage medium on which a program or instructions are stored, which when executed by a processor implement the steps of the code generation method according to the first aspect.

According to the method and the device, the corresponding second code after the first operation can be generated based on the first operation on the first assembly, and the problem that the code cannot be generated through the operation assembly in the related art can be solved. By associating the modification codes with the visualization, completing the page design through the first operation of the first assembly, and automatically generating the second codes, code writing can be avoided, so that a user can use the system quickly in application development, and further user experience is improved. The embodiment can perform real-time visual display according to the first code, also can update the code in real time after performing first operation on the component, and in such a way, the coding effect of a user can be displayed in real time, so that a large amount of debugging time is saved, and the development efficiency of mobile application is remarkably improved.

Drawings

FIG. 1 is a flow chart of a code generation method provided by an embodiment of the present application;

fig. 2 shows a second flowchart of a code generation method provided by the embodiment of the present application;

fig. 3 illustrates a third flowchart of a code generation method provided in an embodiment of the present application;

FIG. 4 is a fourth flowchart illustrating a code generation method according to an embodiment of the present application;

FIG. 5 is a fifth flowchart illustrating a code generation method according to an embodiment of the present application;

FIG. 6 shows a sixth flowchart of a code generation method provided by an embodiment of the present application;

FIG. 7 is a block diagram illustrating a code generation apparatus according to an embodiment of the present disclosure;

fig. 8 shows a block diagram of an electronic device provided in an embodiment of the present application;

fig. 9 is a schematic diagram illustrating a hardware structure of an electronic device according to an embodiment of the present application;

FIG. 10 shows a block diagram of a visualization builder of an embodiment of the application;

FIG. 11 illustrates a drag component interface diagram according to an embodiment of the present application;

FIG. 12 is a diagram illustrating an update component style interface according to an embodiment of the application;

FIG. 13 illustrates an edit property interface diagram according to an embodiment of the present application;

FIG. 14 illustrates a property binding variable interface diagram according to an embodiment of the present application;

FIG. 15 is a schematic diagram of an interface of the add function of an embodiment of the present application;

FIG. 16 is a diagram illustrating a component binding event interface according to an embodiment of the present application;

FIG. 17 illustrates a component outline interface diagram of an embodiment of the present application;

FIG. 18 shows a code diagram of an embodiment of the present application;

fig. 19 shows a preview interface diagram of an embodiment of the present application.

Wherein, the correspondence between the reference numbers and the part names in fig. 7 to 10 is:

100: code generation means; 110: a first module; 120: a second module; 130: a third module; 140: a fourth module; 150: a fifth module; 160: a sixth module; 170: a seventh module; 200: a visualization builder; 202: an abstract syntax tree; 204: a visual rendering layer; 206: a visual interface; 208: a template functional plate; 210: script function board blocks; 212: a pattern functional plate; 214: creating a node; 216: inserting a node; 218: deleting the node; 220: updating or removing attributes; 222: adjusting the component hierarchy; 224: acquiring a data variable; 226: adding or deleting data variables; 228: acquiring a function list; 230: adding a function; 232: updating the function body; 234: acquiring a component style; 236: updating or removing component styles; 238: a drag assembly; 240: deleting the component; 242: updating the component style; 244: editing the attribute; 246: an attribute binding variable; 248: adding a function; 250: a component binding event; 252: an assembly outline; 254: changing the component hierarchy structure; 256: deleting the component; 258: cloning the component; 260: a code; 300: a development tool; 1000: an electronic device; 1002: a processor; 1004: a memory; 1100: an electronic device; 1101: a radio frequency unit; 1102: a network module; 1103: an audio output unit; 1104: an input unit; 11041: a graphics processor; 11042: a microphone; 1105: a sensor; 1106: a display unit; 11061: a display panel; 1107: a user input unit; 11071: a touch panel; 11072: other input devices; 1108: an interface unit; 1109: a memory; 1110: a processor.

Detailed Description

The technical solutions in the embodiments of the present application will be described clearly below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are some, but not all, embodiments of the present application. All other embodiments that can be derived by one of ordinary skill in the art from the embodiments given herein are intended to be within the scope of the present disclosure.

The terms first, second and the like in the description and in the claims of the present application are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It will be appreciated that the data so used may be interchanged under appropriate circumstances such that embodiments of the application are capable of operation in sequences other than those illustrated or described herein, and that the terms "first," "second," etc. are generally used in a generic sense and do not limit the number of terms, e.g., a first term can be one or more than one. In addition, "and/or" in the specification and claims means at least one of connected objects, a character "/" generally means that a preceding and succeeding related objects are in an "or" relationship.

The following describes in detail a code generation method and apparatus, an electronic device, and a readable storage medium provided by the embodiments of the present application through specific embodiments and application scenarios thereof with reference to fig. 1 to 19.

An embodiment of the present application provides a code generation method, and fig. 1 shows one of the flow diagrams of the code generation method provided in the embodiment of the present application, and as shown in fig. 1, the code generation method includes:

step S102, under the condition of having the first code, acquiring a first abstract syntax tree of the first code.

Step S104, the first code is analyzed into a first data model based on the hierarchical structure of the first code.

And S106, rendering a first component in a visualization interface through a visualization rendering layer based on the first data model.

And S108, performing a first operation on the first component on the basis of the visual interface, and acquiring first data by the visual rendering layer according to the first operation.

Step S110, updating the first data model based on the first data.

Step S112, obtaining an updated first abstract syntax tree based on the updated first data model.

And step S114, generating a second code based on the updated first abstract syntax tree.

It is to be understood that the first code refers to the front-end code generated by the front-end developer building a static page. An Abstract Syntax Tree (Abstract Syntax Tree, AST, or Syntax Tree for short) is an Abstract representation of the Syntax structure of the source code. It represents the syntactic structure of the programming language in the form of a tree, each node on the tree representing a structure in the source code.

In the code generation method of the embodiment, the implemented subject may be a visualization constructor, a visualization parser, a visualization editor, or a code generation apparatus.

In this embodiment, the front-end code enters the visualization builder, then passes through a layer of abstract syntax tree, and then is encapsulated in the visualization rendering layer, and then is rendered on the visualization interface. The process can be a reverse process, the operation on the visual interface calls the interface of the visual rendering layer, the visual rendering layer is processed, and the abstract syntax tree is updated to generate corresponding codes.

Specifically, a first abstract syntax tree of a first code is obtained for the first code, a hierarchical structure of the first code is obtained through analysis of the first abstract syntax tree, and the first code is analyzed to obtain a first data model. The visualization rendering layer renders the first component on the visualization interface by traversing the first data model. The above process may enable visualization of the first code. Based on the visualization result, when a user performs a first operation on the first component, the first component changes, and then the visualization rendering layer can obtain first data according to the change of the first component, the first data is data corresponding to the first data model after the first operation is performed on the first component, the first model is updated by adopting the first data, the first abstract syntax tree is updated according to the first model, and finally, a second code is obtained. The above process can realize that after the first operation is performed on the first component, the first code is synchronously changed to obtain the second code corresponding to the component after the first operation, that is, all operations on the component in the visual interface can generate a code with a common front end.

In this embodiment, based on the first operation on the first component, the corresponding second code after the first operation may be generated, and the problem in the related art that the code cannot be generated by operating the component may be solved. By associating the modified code with the visualization, completing page design through the first operation of the first component, automatically generating the second code, and avoiding code writing, the user can use the modified code quickly in application development, and user experience is improved. The embodiment can perform real-time visual display according to the first code, also can update the code in real time after performing first operation on the component, and in the above way, the coding effect of the user can be displayed in real time, so that a large amount of debugging time is saved, and the development efficiency of mobile application is remarkably improved.

Further, the subject of the parsing process of the first code may be a code parser.

Further, the visual interface is provided with a plurality of components, wherein the components comprise a system component, a UI (interface) component and a high-level component, and the first component is one or a combination of more than one of the system component, the UI component and the high-level component. In the embodiment, the code generation method can be applied to the development of any application program by presetting the basic component, the UI component and the high-level component, so that the application range of the code generation method is enlarged.

Further, the present embodiment may be applied to multiple operating systems, that is, to support multiple systems, for example, windows, macOS, and Linux operating systems may be simultaneously supported.

In some embodiments of the present application, the first data model adopts a JSON (JSON Object Notation) data structure, including node ID (Identity document), node type, node attribute, node style, child node, and parent node.

Specifically, the first data model is a traversable data model, and the specific format is as follows:

further, the first data model may be constructed using a code parsing script. The code parsing script may parse the code into a traversable JSON data structure including node ID, i.e., component ID, node type, node attributes, node style, i.e., component style, child nodes, and parent nodes, according to a hierarchical structure of the code. The event type of the component is determined by the value of astType in attributes, and if the value of the astType is function, the event type of the component is the event type. And traversing the JSON data structure by the visualization rendering layer, rendering the corresponding components into a system component, a UI component or a high-level component which are arranged in the visualization rendering layer, and finally displaying the first component.

In this embodiment, the first data model is set as a JSON data structure, so that the visualization of the component can be better realized.

In some embodiments of the present application, fig. 2 shows a second flowchart of the code generation method provided in the embodiments of the present application, and as shown in fig. 2, rendering a first component in a visualization interface through a visualization rendering layer based on a first data model specifically includes:

step S202, rendering a first component corresponding to the node type in the visualization interface based on the node type of the first data model.

Step S204, determining the hierarchical relation of the first component based on the fields of the child node and the parent node.

And step S206, after the first component is selected in the visual interface layer, displaying the node attribute and the node style according to the node ID.

It can be understood that the visualization interface layer renders the built-in basic components, UI components or high-level components according to the node type in the first data model, and determines the hierarchical relationship of the components according to the child node child and parent field in the first data model. Clicking different components in the visualization interface layer, and displaying the attributes and style styles of the components according to the node IDs of the components.

The embodiment provides the corresponding relation between the data in the first model and the visual layers, and the first component is rendered according to the corresponding relation, so that the code is visualized.

In some embodiments of the present application, fig. 3 shows a third flowchart of a code generation method provided in the embodiments of the present application, and as shown in fig. 3, the code generation method further includes:

step S302, a template function plate is set, a first data interface of a first data model is opened through the template function plate, and the first data interface comprises a node creation function, a node insertion function, a node deletion function, a node attribute updating or removing function and a component hierarchical structure adjusting function.

Step S304, a script function plate is set, and a second data interface of the first data model is opened through the script function plate, wherein the second data interface comprises a newly added or deleted data variable, an acquired function list, a newly added function and an updated function body.

Step S306, setting a style function plate, and opening a third data interface of the first data model through the style function plate, where the third data interface includes acquiring a component style and updating or removing the component style.

Specifically, in this embodiment, the front-end code is parsed into an abstract syntax tree, and then is decomposed into three functional blocks according to the abstract syntax tree: template function boards, script function boards and style function boards.

Further, the template function plate is opened with data structure interfaces such as node creation, node insertion, node deletion, attribute updating or removal, component hierarchy adjustment and the like. And operating a dragging component, a deleting component, editing component attributes and the like on the visual interface by calling the data structure interface to update the first data model, and then rendering the first data model on the visual interface. For example, for the operation of a dragging component, the principle is to insert the data model of the child node in the child set of the parent component. The delete node operates to delete the data model of the node from the child set of the parent node and update the component attributes to the attribute nodes specified in attributes in the updated component data model.

Furthermore, the script function board encapsulates data interfaces with functions of adding or deleting data variables, acquiring function lists, adding functions, updating function bodies and the like.

Further, the style function board encapsulates data interfaces for functions such as obtaining component styles, updating or removing component styles, and the like.

In this embodiment, the operation on the visual interface is to update the first data model by calling an open interface of the visual parsing framework, that is, by calling a data interface provided by the template function board, the script function board, and the style function board, so as to update the data model and generate the second code.

In some embodiments of the present application, the first operation comprises one or a combination of:

dragging a component, deleting a component, updating a component style, editing a property, a property binding variable, adding a function, a component binding event, changing the hierarchical structure of a component in a component schema, deleting a component in the component schema, and cloning a component in the component schema.

Specifically, a first component is displayed on the visual interface, and a first operation can be performed on the first component.

Further, the dragging component calls a created node interface opened by the template function plate to generate a data model of a newly created node, then calls an insertion node interface to insert the data model of the newly created node into the child set of the parent node, and as shown in fig. 11, the button component is constructed by dragging the button in the system component into the canvas.

Further, the deletion component is a deletion node interface which is opened in the template function plate and is called to delete the deleted component from the child set of the parent component.

Furthermore, the components in the visual interface support rendering of the standard W3C style attributes, and after the updating of the component styles is carried out on the relevant attributes, the interfaces with the style function versions are called to update the data models of the components. Modification patterns as shown in fig. 12, a desired pattern can be selected by a predefined pattern among the patterns.

Furthermore, all the components in the visual interface have specific attributes, and after the editing attributes are the editing attributes of the components, the updating attribute interface of the template function plate is called, the attributes of the data model of the components are updated, and the data model is re-rendered on the visual interface. Modifying attributes as shown in fig. 13, the modification of the related attributes is performed by the generic attributes among the attributes.

Furthermore, the property of the component can directly edit the property value, and can also bind a variable to the property, wherein the property binding variable needs to call an interface for acquiring a data variable in the script function block to acquire a set of the data variable, and then call an interface for updating the property of the template function block to bind the variable to the component. Binding data variable as shown in fig. 14, through data binding, a variable can be searched, and then the variable can be bound, a JS expression can be added, and the binding can be released.

Furthermore, the function is added in the function set of the page by calling a new function interface opened in the script function plate. As shown in fig. 15, the name, the adding operation, the code, and the like of the function can be edited, and the addition and the change of the function can be performed by the editing function.

Furthermore, the component is provided with a specific event, the event is also one of the attributes, and after the component binding event selects a function for the event of the component, an interface for updating the attribute of the template function plate is called to bind the function to the component event. Binding events As shown in FIG. 16, the composed events can be added by generic ones of the events.

Furthermore, the visual interface can also display a component outline, the hierarchical structure of the component is displayed according to the data model of the whole page, and the functions which can be realized by the component outline are changing the hierarchical structure of the component, deleting the component or cloning the component. The outline tree can realize operations of copying, pasting, cutting, cloning, emptying sublevels, deleting, moving and the like on the component (button) as shown in FIG. 17.

All the modifications are corresponding to the data model of the corresponding plate, the data model generates a corresponding abstract syntax tree, and then generates a corresponding code according to the abstract syntax tree, and the code is as shown in fig. 18. The generated code can be previewed directly, as shown in fig. 19, the left window is a visualization interface, and the right window is a preview interface.

In this embodiment, a set of related component data structure interfaces is opened in the visual code parsing framework, so as to create a component, insert a component, delete a component, update or delete a component style, edit or delete a component attribute, bind or unbind a component event, and the like, and operations in a visual interface canvas, including drag generation of a code, editing of a component style, and editing of a component event, are also performed by calling the interfaces, and then corresponding codes are generated.

In some embodiments of the present application, fig. 4 shows a fourth flowchart of a code generation method provided in an embodiment of the present application, fig. 5 shows a fifth flowchart of the code generation method provided in the embodiment of the present application, and as shown in fig. 4 and fig. 5, the code generation method further includes:

step S402, previewing the second code in a preview tool of the development tools.

And S404, previewing the second code on the mobile equipment through WIFI debugging or USB debugging of a development tool.

It is understood that the subject of the code generation method implementation may be a visualization builder, a visualization parser, a visualization editor, or a code generation apparatus. The visualization constructor, the visualization resolver, the visualization editor or the code generation device for realizing the code generation method can be built in a development tool.

Specifically, the visualization is a front-end framework, a visualization interface is loaded through a Webview component (browser kernel view) of a development tool, bridging is performed through the front-end WebSocket framework (a data transmission protocol between a client and a server), and an event is sent to the Webview, wherein the format of the event is as follows:

{ cmd: "event ID", data {// data carried } }.

{ cmd:1, data { } } switches to the code interface.

Code generated by { cmd:2, data: { content: "code" } is written to the file. Namely, the code is communicated with WebView through a WebSocket communication mechanism, and then the code is written into a local file.

In this embodiment, the visualization framework is built in the development tool, and the existing code is rendered on the canvas of the visualization interface through the visualization parser. The generated code can be previewed through a real-time preview tool of the development tool, and can also be previewed on a real machine through WI-FI debugging and USB debugging of the development tool.

According to the embodiment, the corresponding codes are generated by all operations in the visual editor through being built in the development tool, the generated codes can be checked by switching to the code interface of the development tool, the generated codes can be directly previewed on the preview interface of the development tool or directly previewed on a mobile phone, visual development experience is improved to a great extent, and corresponding effects can be generated by modifying the codes from the code interface and then switching to the visual interface.

In some embodiments of the present application, fig. 6 shows a sixth schematic flowchart of a code generation method provided in an embodiment of the present application, and as shown in fig. 6, the code generation method further includes:

and step S502, under the condition that the first code is not available, displaying a second component on the visual interface based on a second operation on the visual interface.

Step S504, the visual rendering layer acquires second data according to the second operation.

Step S506 is generating a second data model based on the second data.

And step S508, obtaining a second abstract syntax tree based on the second data model.

Step S510, generating a third code based on the second abstract syntax tree.

Specifically, under the condition that the first code is not available, the second operation can be directly performed on the visual interface, the type of the second operation is the same as that of the first operation, the second component is displayed after the second operation is performed, and then the third code is generated according to the component.

By way of example, the second operation may be dragging a component, deleting a component, updating a component style, editing a property, a property binding variable, a newly added function, a component binding event, changing the hierarchy of a component in a component schema, deleting a component in a component schema, cloning a component in a component schema, and so forth. The second component is one or more of a combination of system components, UI components and high-level components.

In the code generation method provided by the embodiment of the present application, the execution subject may be a code generation apparatus. In the embodiment of the present application, a code generation apparatus executing a code generation method is taken as an example, and the code generation apparatus provided in the embodiment of the present application is described.

In some embodiments of the present application, a code generation apparatus is provided, and fig. 7 shows a block diagram of a structure of the code generation apparatus provided in the embodiments of the present application, and as shown in fig. 7, a code generation apparatus 100 includes a first module 110, a second module 120, a third module 130, a fourth module 140, a fifth module 150, a sixth module 160, and a seventh module 170. The first module 110 is configured to obtain a first abstract syntax tree of a first code when the first code is available. The second module 120 is for parsing the first code into a first data model based on a hierarchy of the first code. The third module 130 is configured to render the first component in the visualization interface through a visualization rendering layer based on the first data model. The fourth module 140 is configured to perform a first operation on the first component based on the visualization interface, and the visualization rendering layer obtains the first data according to the first operation. The fifth module 150 is configured to update the first data model based on the first data. The sixth module 160 is configured to obtain an updated first abstract syntax tree based on the updated first data model. The seventh module 170 is configured to generate a second code based on the updated first abstract syntax tree.

In this embodiment, based on the first operation on the first component, the corresponding second code after the first operation may be generated, and the problem in the related art that the code cannot be generated by operating the component may be solved. By associating the modification codes with the visualization, completing the page design through the first operation of the first assembly, and automatically generating the second codes, code writing can be avoided, so that a user can use the system quickly in application development, and further user experience is improved. The embodiment can perform real-time visual display according to the first code, also can update the code in real time after performing first operation on the component, and in the above way, the coding effect of the user can be displayed in real time, so that a large amount of debugging time is saved, and the development efficiency of mobile application is remarkably improved.

The code generation apparatus 100 provided in this embodiment of the present application can implement each process of the code generation method embodiment, and can achieve the same technical effect, and for avoiding repetition, details are not described here again.

The code generation apparatus in the embodiment of the present application may be an electronic device, or may be a component in an electronic device, such as an integrated circuit or a chip. The electronic device may be a terminal, or may be a device other than a terminal. The electronic Device may be, for example, a Mobile phone, a tablet computer, a notebook computer, a palm top computer, a vehicle-mounted electronic Device, a Mobile Internet Device (MID), an Augmented Reality (AR)/Virtual Reality (VR) Device, a robot, a wearable Device, an ultra-Mobile personal computer (UMPC), a netbook or a Personal Digital Assistant (PDA), and the like, and may also be a server, a Network Attached Storage (Network Attached Storage, NAS), a personal computer (NAS), a Television (TV), a teller machine, a self-service machine, and the like, and the embodiments of the present application are not limited in particular.

The code generation apparatus in the embodiment of the present application may be an apparatus having an operating system. The operating system may be an Android operating system (Android), an iOS operating system, or other possible operating systems, which is not specifically limited in the embodiments of the present application.

The code generation apparatus provided in the embodiment of the present application can implement each process implemented by the foregoing method embodiment, and is not described here again to avoid repetition.

Optionally, as shown in fig. 8, an electronic device 1000 is further provided in the embodiment of the present application, where the electronic device 1000 includes a processor 1002 and a memory 1004, and the memory 1004 stores a program or an instruction that can be executed on the processor 1002, and when the program or the instruction is executed by the processor 1002, the steps of the foregoing method embodiment are implemented, and the same technical effect can be achieved, and details are not repeated here to avoid repetition.

It should be noted that the electronic devices in the embodiments of the present application include the mobile electronic device and the non-mobile electronic device described above.

Fig. 9 is a schematic diagram of a hardware structure of an electronic device implementing an embodiment of the present application.

The electronic device 1100 includes, but is not limited to: radio frequency unit 1101, network module 1102, audio output unit 1103, input unit 1104, sensor 1105, display unit 1106, user input unit 1107, interface unit 1108, memory 1109, processor 1110, and the like.

Those skilled in the art will appreciate that the electronic device 1100 may further include a power source (e.g., a battery) for supplying power to various components, and the power source may be logically connected to the processor 1110 via a power management system, so as to implement functions of managing charging, discharging power consumption, and the like via the power management system. The electronic device structure shown in fig. 9 does not constitute a limitation of the electronic device, and the electronic device may include more or less components than those shown, or combine some components, or arrange different components, and thus, the description is not repeated here.

The processor 1110 is configured to obtain a first abstract syntax tree of a first code when the first code is available.

A processor 1110 for parsing the first code into a first data model based on a hierarchical structure of the first code.

A processor 1110 for rendering a first component in a visualization interface via a visualization rendering layer based on a first data model.

A processor 1110 configured to perform a first operation on the first component based on the visualization interface, wherein the visualization rendering layer obtains the first data according to the first operation.

A processor 1110 for updating the first data model based on the first data.

A processor 1110, configured to obtain an updated first abstract syntax tree based on the updated first data model.

A processor 1110 configured to generate a second code based on the updated first abstract syntax tree.

The processor 1110 provided in this embodiment of the present application may implement each process of the code generation method embodiment, and may achieve the same technical effect, and for avoiding repetition, details are not described here again.

It should be understood that in the embodiment of the present application, the input Unit 1104 may include a Graphics Processing Unit (GPU) 11041 and a microphone 11042, and the Graphics processor 11041 processes image data of still pictures or video obtained by an image capturing device (such as a camera) in a video capturing mode or an image capturing mode. The display unit 1106 may include a display panel 11061, and the display panel 11061 may be configured in the form of a liquid crystal display, an organic light emitting diode, or the like. The user input unit 1107 includes at least one of a touch panel 11071 and other input devices 11072. A touch panel 11071, also called a touch screen. The touch panel 11071 may include two portions of a touch detection device and a touch controller. Other input devices 11072 may include, but are not limited to, a physical keyboard, function keys (e.g., volume control keys, switch keys, etc.), a trackball, a mouse, and a joystick, which are not described in detail herein.

The memory 1109 may be used to store software programs as well as various data. The memory 1109 may mainly include a first storage area storing programs or instructions and a second storage area storing data, wherein the first storage area may store an operating system, an application program or instruction (such as a sound playing function, an image playing function, etc.) required for at least one function, and the like. Further, memory 1109 may include volatile memory or nonvolatile memory, or memory 1109 may include both volatile and nonvolatile memory. The non-volatile Memory may be a Read-Only Memory (ROM), a Programmable ROM (PROM), an Erasable PROM (EPROM), an Electrically Erasable PROM (EEPROM), or a flash Memory. The volatile Memory may be a Random Access Memory (RAM), a Static Random Access Memory (Static RAM, SRAM), a Dynamic Random Access Memory (Dynamic RAM, DRAM), a Synchronous Dynamic Random Access Memory (Synchronous DRAM, SDRAM), a Double Data Rate Synchronous Dynamic Random Access Memory (Double Data Rate SDRAM, ddr SDRAM), an Enhanced Synchronous SDRAM (ESDRAM), a Synchronous Link DRAM (SLDRAM), and a Direct Memory bus RAM (DRRAM). The memory 1109 in the embodiments of the subject application includes, but is not limited to, these and any other suitable types of memory.

Processor 1110 may include one or more processing units; optionally, the processor 1110 integrates an application processor, which primarily handles operations related to the operating system, user interface, applications, etc., and a modem processor, which primarily handles wireless communication signals, such as a baseband processor. It will be appreciated that the modem processor described above may not be integrated into processor 1110.

The embodiments of the present application further provide a readable storage medium, where a program or an instruction is stored on the readable storage medium, and when the program or the instruction is executed by a processor, the program or the instruction implements each process of the code generation method embodiment, and can achieve the same technical effect, and in order to avoid repetition, details are not repeated here.

The processor is the processor in the electronic device in the above embodiment. Readable storage media include computer readable storage media such as computer read only memory ROM, random access memory RAM, magnetic or optical disks, and the like.

The embodiment of the present application further provides a chip, where the chip includes a processor and a communication interface, the communication interface is coupled to the processor, and the processor is configured to execute a program or an instruction to implement each process of the code generation method embodiment, and the same technical effect can be achieved.

It should be understood that the chips mentioned in the embodiments of the present application may also be referred to as system-on-chip, system-on-chip or system-on-chip, etc.

Embodiments of the present application provide a computer program product, where the program product is stored in a storage medium, and the program product is executed by at least one processor to implement the processes of the foregoing code generation method embodiments, and can achieve the same technical effects, and in order to avoid repetition, details are not described here again.

The specific embodiment is as follows:

the present embodiment provides a code generation apparatus, namely, a visualization builder 200, as shown in fig. 10, including an abstract syntax tree 202, a visualization rendering layer 204, and a visualization interface 206.

The front-end code 260, i.e. the first code, is packaged in the visualization builder 200, and is first processed into three function boards through the layer of abstract syntax tree 202, including the template function board 208, the script function board 210, and the style function board 212, to obtain a data model, and then the data model is packaged in the visualization rendering layer 204 and is rendered on the visualization interface 206, which may also be a reverse process, where the operation on the visualization interface 206 calls an interface of the visualization rendering layer 204, and after the processing of the visualization rendering layer 204, the abstract syntax tree 202 is updated, and then corresponding codes are generated.

The data structure interfaces opened by the template function plate 208 include data structure interfaces such as a creation node 214, an insertion node 216, a deletion node 218, an update or removal attribute 220, an adjustment component hierarchy 222, and the like, and all operations on the visualization interface call the data structure interfaces to update the data model and render the data model on the visualization interface 206.

The data interfaces opened by the script function board 210 include functions of acquiring a data variable 224, adding or deleting a data variable 226, acquiring a function list 228, adding a function 230 (adding a function interface), updating a function body 232, and the like.

The open data interface of the style functionality board 212 includes functionality to fetch component styles 234, update or remove component styles 236, and the like.

Operations on the visualization interface 206 are to update the data model by invoking an open interface of the visualization parsing framework, including dragging component 238, deleting component 240, updating component style 242, editing property 244, property binding variable 246, adding function 248 (add function operation), component binding event 250, changing component hierarchy 254 in component schema 252, deleting component 256 in component schema 252, cloning component 258 in component schema. All the modifications are corresponding to the data model of the corresponding plate, the data model generates the corresponding abstract syntax tree 202, and the generated code can be directly previewed after the corresponding code is generated according to the abstract syntax tree 202.

The visualization builder 200 of the embodiment supports multiple systems, and simultaneously supports Windows, macOS, and Linux operating systems. All operations on the visualization interface 206 generate code that is common to the front end. In addition, the embodiment can display the coding effect of the user in real time, save a large amount of debugging time and obviously improve the development efficiency of mobile application.

The visualization builder 200 of this embodiment is already built in the development tool 300, all operations in the visualization interface 206 generate corresponding codes 260, the generated codes can be viewed by switching to the code interface of the development tool 300, and the generated codes can be previewed directly on the preview interface of the development tool 300 or on a mobile phone, so that the experience of visualization development is improved to a great extent, and corresponding effects can also be produced by modifying the codes from the code interface and switching to the visualization interface.

It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrases "comprising a component of' 8230; \8230;" does not exclude the presence of another like element in a process, method, article, or apparatus that comprises the element. Further, it should be noted that the scope of the methods and apparatuses in the embodiments of the present application is not limited to performing the functions in the order illustrated or discussed, but may include performing the functions in a substantially simultaneous manner or in a reverse order based on the functions recited, e.g., the described methods may be performed in an order different from that described, and various steps may be added, omitted, or combined. Additionally, features described with reference to certain examples may be combined in other examples.

Through the above description of the embodiments, those skilled in the art will clearly understand that the method of the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but in many cases, the former is a better implementation manner. Based on such understanding, the technical solutions of the present application or portions thereof that contribute to the prior art may be embodied in the form of a computer software product, which is stored in a storage medium (such as ROM/RAM, magnetic disk, optical disk) and includes several instructions for enabling a terminal (which may be a mobile phone, a computer, a server, or a network device, etc.) to execute the method of the embodiments of the present application.

While the present embodiments have been described with reference to the accompanying drawings, it is to be understood that the present embodiments are not limited to those precise embodiments, which are intended to be illustrative rather than restrictive, and that various changes and modifications may be effected therein by one skilled in the art without departing from the scope of the appended claims.

Claims

1. A code generation method, comprising:

under the condition of a first code, acquiring a first abstract syntax tree of the first code;

parsing the first code into a first data model based on a hierarchy of the first code;

rendering a first component in a visualization interface through a visualization rendering layer based on the first data model;

based on a first operation on the first component at the visualization interface, the visualization rendering layer acquires first data according to the first operation;

updating the first data model based on the first data;

obtaining an updated first abstract syntax tree based on the updated first data model;

and generating a second code based on the updated first abstract syntax tree.

2. The code generation method of claim 1, wherein the first data model employs a JSON data structure including node ID, node type, node attribute, node style, child node, and parent node.

3. The code generation method according to claim 2, wherein rendering the first component in the visualization interface through a visualization rendering layer based on the first data model specifically includes:

rendering a first component corresponding to the node type in the visual interface based on the node type of the first data model;

determining a hierarchical relationship of the first component based on fields of the child node and the parent node;

and after the first component is selected in the visual interface layer, displaying the node attribute and the node style according to the node ID.

4. The code generation method according to claim 1, further comprising:

setting a template function plate, and opening a first data interface of the first data model through the template function plate, wherein the first data interface comprises a creation node, an insertion node, a deletion node, an update or removal node attribute and an adjustment component hierarchical structure;

setting a script function plate, and opening a second data interface of the first data model through the script function plate, wherein the second data interface comprises a newly added or deleted data variable, an acquired function list, a newly added function and an updated function body;

and setting a style function plate, and opening a third data interface of the first data model through the style function plate, wherein the third data interface comprises acquiring a component style and updating or removing the component style.

5. The code generation method of claim 1, wherein the first operation comprises one or a combination of:

6. The code generation method according to claim 1, further comprising:

previewing the second code in a preview tool in a development tool; and/or

And previewing the second code on the mobile equipment through the WIFI debugging or the USB debugging of the development tool.

7. The code generation method according to any one of claims 1 to 6, characterized by further comprising:

displaying a second component on the visual interface based on a second operation on the visual interface without the first code;

the visualization rendering layer acquires second data according to the second operation;

generating a second data model based on the second data;

obtaining a second abstract syntax tree based on the second data model;

generating a third code based on the second abstract syntax tree.

8. A code generation apparatus, comprising:

the device comprises a first module, a second module and a third module, wherein the first module is used for acquiring a first abstract syntax tree of a first code under the condition of the first code;

a second module to parse the first code into a first data model based on a hierarchical structure of the first code;

a third module, configured to render a first component in a visualization interface through a visualization rendering layer based on the first data model;

a fourth module, configured to perform a first operation on the first component based on the visual interface, where the visual rendering layer obtains first data according to the first operation;

a fifth module for updating the first data model based on the first data;

a sixth module, configured to obtain an updated first abstract syntax tree based on the updated first data model;

a seventh module for generating a second code based on the updated first abstract syntax tree.

9. An electronic device, comprising:

a memory having a program or instructions stored thereon;

a processor for implementing the steps of the code generation method of any one of claims 1 to 7 when executing the program or instructions.

10. A readable storage medium on which a program or instructions are stored, characterized in that the program or instructions, when executed by a processor, implement the steps of the code generation method according to any one of claims 1 to 7.