WO2020140940A1

WO2020140940A1 - Code generation method and apparatus, and device and storage medium

Info

Publication number: WO2020140940A1
Application number: PCT/CN2020/070096
Authority: WO
Inventors: 郭启织; 周婷婷
Original assignee: 阿里巴巴集团控股有限公司
Priority date: 2019-01-06
Filing date: 2020-01-02
Publication date: 2020-07-09
Also published as: CN111414166A; CN111414166B

Abstract

A code generation method and apparatus, and a device and a storage medium. The method comprises: selecting an editable target node in an editable image and configuring bound data of attributes of the target node; and generating, according to the editable image, the bound data, and a bound data parsing mode, a code corresponding to a target programming language. Thus, the development scenarios of many view pages can be flexibly covered, and a code for the view pages having a data binding function can be generated without manual encoding, thereby reducing the development labor costs and time, and achieving the unity of view page development.

Description

Code generation method, device, equipment and storage medium

This application requires the priority of the Chinese patent application with the application number 201910014443.9 and the invention titled "Code generation method, device, equipment and storage medium" submitted on January 06, 2019, the entire content of which is incorporated by reference in this application .

Technical field

This application relates to the field of computer technology, and in particular, to a code generation method, device, device, and storage medium.

Background technique

With the development of computers, the rapid evolution of programming languages, and the diversification of network platforms, view image design software has gradually evolved from traditional Photoshop to sketch. However, the unification of design software does not bring about the unification of static page code. Repeated development of similar modules is a constant pain point for UI developers.

Summary of the invention

Various aspects of the present application provide a code generation method, device, device, and storage medium to flexibly, quickly, and conveniently generate codes corresponding to view images, and reduce development labor costs.

An embodiment of the present application provides a code generation method, which includes: in response to a selection operation, selecting an editable target node displayed in an editable image; and in response to a configuration operation, configuring binding data of attributes of the target node; According to the editable image, the binding data, and the analysis method of the binding data, a code corresponding to the target programming language is generated.

An embodiment of the present application also provides a code generation device, including: a selection module for selecting an editable target node displayed in an editable image in response to a selection operation; a configuration module for configuring in response to the configuration operation Binding data of the attributes of the target node; a generating module, configured to generate a code corresponding to the target programming language according to the editable image, the binding data, and the analysis method of the binding data.

An embodiment of the present application further provides a device, including a memory and a processor; the memory is used to store a computer program; the processor is used to execute the computer program to: in response to a selection operation, select The editable target node displayed in the editable image; in response to the configuration operation, configure the binding data of the attribute of the target node; according to the editable image, the binding data, and the method of parsing the binding data To generate the code corresponding to the target programming language.

Embodiments of the present application also provide a computer-readable storage medium that stores a computer program. When the computer program is executed by one or more processors, the one or more processors cause the one or more processors to implement the steps in the above code generation method.

An embodiment of the present application also provides a code generation method, including: acquiring and displaying an editable image in response to an acquisition operation; selecting an editable target node displayed in the editable image in response to a selection operation; and responding to a selection operation , Select the attribute of the target node; in response to the configuration operation, configure the binding data of the attribute of the target node; in response to the generating operation, according to the editable image, the binding data, and the binding data Analysis method to generate the code corresponding to the target programming language.

An embodiment of the present application also provides a code generation device, including: a display module for acquiring and displaying an editable image in response to an acquisition operation; a selection module for selecting an image displayed in an editable image in response to the selection operation Editable target node; selection module for selecting the attribute of the target node in response to the selection operation; configuration module for configuring binding data of the attribute of the target node in response to the configuration operation; generation module for In response to the generating operation, the code corresponding to the target programming language is generated according to the editable image, the binding data, and the analysis method of the binding data.

An embodiment of the present application further provides an apparatus, including a memory and a processor; the memory is used to store a computer program; the processor is used to execute the computer program to: in response to an acquisition operation, acquire and Display an editable image; select an editable target node displayed in an editable image in response to a selection operation; select an attribute of the target node in response to a selection operation; configure an attribute of the target node in response to a configuration operation Binding data; in response to the generating operation, according to the editable image, the binding data, and the binding data parsing method, generate a code corresponding to the target programming language.

An embodiment of the present application also provides a code generation method, including: determining an editable image to be processed; determining a target node of the editable image to be edited; determining binding data of attributes of the target node; according to The editable image, the binding data, and the analysis method of the binding data generate a code corresponding to the target programming language.

An embodiment of the present application also provides a code generation device, including: a first determination module for determining an editable image to be processed; a second determination module for determining a target node of the editable image to be edited; The third determining module is used to determine the binding data of the attribute of the target node; the generating module is used to generate the target programming language according to the editable image, the binding data and the analysis method of the binding data The corresponding code.

An embodiment of the present application further provides a device, including a memory and a processor; the memory is used to store a computer program; the processor is used to execute the computer program to: determine an editable to be processed Image; determine the target node of the editable image to be edited; determine the binding data of the attribute of the target node; generate the target according to the editable image, the binding data, and the analysis method of the binding data The code corresponding to the programming language.

Embodiments of the present application further provide a computer-readable storage medium storing a computer program, which when executed by one or more processors causes the one or more processors to implement the steps in the code generation method.

In the embodiment of the present application, select the editable target node in the editable image and configure the binding data of the attribute of the target node; according to the editable image, the binding data and the analysis method of the binding data, the target programming language correspondence is generated The code can flexibly cover the development scenarios of many view pages, and can generate the code of the view page with data binding function without manual coding, reducing the development labor cost and time, and achieving the unity of view page development.

BRIEF DESCRIPTION

The drawings described herein are used to provide a further understanding of the present application and form a part of the present application. The schematic embodiments and descriptions of the present application are used to explain the present application and do not constitute an undue limitation on the present application. In the drawings:

FIG. 1A is a schematic flowchart of a code generation method according to an exemplary embodiment of the present application;

FIG. 1B is a schematic flowchart of a code generation method according to another exemplary embodiment of the present application;

1C is a schematic flowchart of a code generation method according to still another exemplary embodiment of the present application;

2 is a schematic diagram of an editable image provided by an exemplary embodiment of the present application;

3 is a schematic diagram of an interface for selecting attributes provided by an exemplary embodiment of the present application;

4 is a schematic diagram of an interface for binding dynamic data provided by an exemplary embodiment of the present application;

5 is a schematic diagram of an interface for generating code provided by an exemplary embodiment of the present application;

6 is a schematic diagram of an editable image and view page after data binding is provided by an exemplary embodiment of the present application;

7 is a schematic diagram of a code generation apparatus provided by another exemplary embodiment of the present application;

FIG. 8 is a schematic structural diagram of a terminal device according to another exemplary embodiment of the present application.

detailed description

In order to make the purpose, technical solutions and advantages of the present application more clear, the technical solutions of the present application will be described clearly and completely in conjunction with specific embodiments of the present application and corresponding drawings. Obviously, the described embodiments are only a part of the embodiments of the present application, but not all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative work fall within the protection scope of the present application.

For front-end applications, having a good page layout allows users to have good visual effects when using the application, and can help users quickly and easily find the desired information or desired application functions, but the page The layout needs to be realized through the development of the view page code. As the style of the view page becomes more and more, the developer needs to develop the code of the view page of different styles, thereby creating more repetitive work for the developer.

Because developers need to frequently develop the code for the same or similar view pages, resulting in poor development costs and page reuse costs, based on this application, it can help developers quickly reuse the code of the generated view pages to carry out The code development of different styles of view pages reduces the duplication of work for developers.

In some embodiments of the present application, select the editable target node in the editable image, configure the binding data of the attribute of the target node; generate the target programming language according to the editable image, the binding data, and the analysis method of the binding data The corresponding code can flexibly cover the development scenarios of many view pages, and can generate the code of the view page with data binding function without manual coding, reducing the development labor cost and time, and achieving the unity of view page development.

The technical solutions provided by the embodiments of the present application will be described in detail below in conjunction with the drawings.

FIG. 1A is a schematic flowchart of a code generation method according to an exemplary embodiment of the present application. The method 100A provided by the embodiment of the present application is executed by the terminal device in response to user operations (for example, selection operation and configuration operation, etc.), and the method 100A includes the following steps:

101: In response to the selection operation, select the editable target node displayed in the editable image.

102: In response to the configuration operation, configure the binding data of the attribute of the target node.

103: Generate the code corresponding to the target programming language according to the editable image, the binding data, and the analysis method of the binding data.

It should be noted that the terminal device may be any device with a certain computing capability, for example, it may be a smart phone, a notebook, a PC (personal computer), or the like. The basic structure of the terminal device includes: at least one processor. The number of processors depends on the configuration and type of terminal equipment. The terminal device may also include a memory, which may be volatile, such as RAM, or non-volatile, such as read-only memory (Read-Only Memory, ROM), flash memory, etc., or may include both Kinds of types. An operating system (Operating System, OS), one or more application programs, and program data may also be stored in the memory. In addition to the processing unit and memory, the terminal device also includes some basic configurations, such as a network card chip, IO bus, camera, and audio and video components. Optionally, the terminal device may also include some peripheral devices, such as a keyboard, a mouse, a stylus, a printer, and so on. Other peripheral devices are well known in the art, and will not be repeated here.

The following describes the above steps in detail:

It should be noted that step 101 is that the terminal device selects the editable target node displayed in the editable image in response to the user's selection operation.

The editable image (also referred to as a static UI) refers to an image that is visible to the user without data bound to the nodes displayed in the programming language.

A node refers to an element in an editable image, for example, a title element, a picture element, and a price element in an editable image. Among them, the target node is a node selected from at least one node.

In some examples, before responding to the selection operation, the method 100A further includes: identifying a static structure of the acquired editable image, converting the static structure into a tree structure of a specified programming language, and displaying the editable image according to the tree structure ; Among them, the

method

100B, 1001 as shown in FIG. 1B: by identifying at least one basic node and at least one advanced node from the tree structure, displayed in an editable image as an editable node, and the selected Any basic node or any advanced node is used as the target node; among them, the advanced node is obtained by transforming the basic node.

Among them, the static structure refers to the code structure of the designated programming language that contains the elements or nodes of the editable image obtained from the design application, for example, the code of the JSON programming language that contains multiple nodes.

The tree structure refers to a level of nested structure. The outer and inner layers of a tree structure have similar structures, so this structure can be expressed recursively. The various tree diagrams in the classic data structure are a typical tree structure: a tree can be simply represented as root, left subtree, and right subtree. The left and right subtrees have their own subtrees. For example, the tree structure of the JSON programming language contains the elements or nodes of the editable image, but the tree structure is more complicated than the static structure, and the static structure contains the elements of the editable image The code structure of the node JSON programming language is not a tree structure. The static structure can be converted into a JSON tree structure according to the algorithm of the tree structure of the JSON programming language.

The basic node refers to a node that can be directly identified, and may include a picture node, a text node (also called a text node), and a container node. The container node refers to a node that wraps other nodes, for example, it may include a text node and/or a picture node.

Advanced nodes refer to nodes that can be converted from basic nodes.

It should be noted that the performance of the advanced node on the editable image is similar to the basic node, but contains other unique attributes. The view module will become powerful due to these unique attributes. For example, the video node, the video node appears as a picture node on the editable image, but the node can be determined as the video node according to its node name, because the attributes of the video node can include video stream and playback information, etc., different from the picture node Attributes, such as picture links, etc. Therefore, the video node belongs to the advanced node, and the picture node embodied on the editable image should be converted into a video node.

Among them, the attribute refers to the characteristics of the node, and the parameters can be configured. For example, text content, picture style, etc.

For example, the user exports the data of the shopping editable image of the node unbound data from the image design application XX installed locally on the terminal device, for example, the programming language of the XX application that contains the node of the shopping editable image, the node may include Commodity picture node, commodity title node, commodity price node, shopping cart node, purchase node, etc. The image design application XX automatically converts the programming language of the shopping editable image data of the XX application into a JSON programming language that contains the node of the shopping editable image, and stores it in the local storage space of the terminal device, the terminal device will The JSON programming language is imported into the code generation application YY that is installed locally on the terminal device. After receiving the JSON programming language, the application YY recognizes the data in the JSON programming language, according to the algorithm of the tree structure of the JSON programming language, The JSON programming language is converted into a JSON tree structure, and the JSON tree structure includes nodes arranged in the form of a tree. After the JSON tree structure is generated, the JSON tree structure can be converted into the XML programming language or other interface layout programming languages according to the conversion algorithm of the XML programming language, so as to display the shopping editable image and identify each of the JSON tree structures Node, according to the conversion algorithm of the XML programming language, an editable node is generated in the editable image. FIG. 2 shows the interface 200 of the application YY, in which the shopping for unbound data of the node is displayed. Edit images, and the application YY binding data bar and layer bar. The editable shopping images in the interface 200 include editable commodity picture nodes and commodity title nodes. The commodity picture node may be a picture node or a video node, and the commodity title node may be a commodity title node. It should be understood that the shopping editable image may include many nodes, only for illustration, only two nodes are illustrated here. After seeing the shopping editable image on the terminal device, the user selects the commodity title node in the shopping editable image. In response to the selection operation, the terminal device determines the commodity title node according to the mouse event and selects it. And take the commodity title node as the target node.

In some examples, identifying at least one basic node and at least one high-level node from the tree structure includes: identifying at least one node from the tree structure as the basic node; according to the node name, obtaining from at least one basic node The node to be converted is converted, and the node to be converted is converted into an advanced node.

For example, according to the foregoing, when the JSON tree structure is obtained, the application program YY of the terminal device can identify each basic node, picture node, and/or text node in the JSON tree structure according to the node identifier, according to the node name "Video" identifies the node to be converted corresponding to the name of the node from the basic node, and converts the node into an advanced node: a video node.

It should be noted that the advanced node is more complicated than the basic node in the actual application scenario, but in order to reflect the node in the editable image, it can be displayed through the display of the basic node, and the basic node needs to be Further inspection or verification determines whether the basic node is an advanced node.

In some examples, after selecting a target node, the method 100B further includes: 1002: Acquiring at least one attribute corresponding to the target node according to the selected target node; in response to the attribute viewing operation, displaying the acquired at least one attribute ; In response to the attribute selection operation, select the attribute of the target node.

For example, according to the foregoing, when the user selects the target node, the terminal device also shows that the product title node is selected on the shopping editable image: after the product title node, the user performs attribute review on the product title node, the terminal device’s In response to the viewing operation, the application YY may search or obtain corresponding attributes, such as text content attributes, display attributes, and hidden attributes, for the product title node or the text node to which the product title node belongs. And these attributes can be displayed to the user in the form of a list. The user selects one of the attributes according to the attributes displayed in the list, such as the text content attribute. In response to the selection operation, the application YY of the terminal device selects the text content attribute as The attribute of the item title node. Among them, FIG. 3 shows an interface 300 for attribute selection. In this interface 300, the user selects the commodity title node as the target node. After clicking the attribute selection box corresponding to the commodity title node, the interface 300 displays the attribute list for The user selects the attribute. When the user selects the text attribute from the attribute list, the text attribute is displayed in the attribute selection box.

In some examples, the method 100A further includes: acquiring and displaying at least one attribute corresponding to the target node according to the selected target node, wherein at least one attribute is sorted according to the selection frequency from large to small; in response to the attribute selection operation , Select the attribute of the target node.

It should be noted that the attribute of the node has priority due to different use frequency or selection frequency, such as the text content attribute of the text node, and the image address attribute of the picture node, which account for more than 80% of the data binding scenarios. When the node is selected, the higher frequency attribute of the most commonly used node is placed in the recommended position and the operation is prioritized. This is purposely made for the user's ease of use and maximizes ease of use.

In addition, you can directly put the highest frequency attribute directly in the attribute selection box, or directly use the highest frequency attribute as the default attribute of the node, and display it in the attribute selection box, without user selection, directly set for the user The attributes of this node provide users with a better experience and achieve the effect of intelligent matching attributes. If the user does not want to configure this attribute for the node, he can choose the attribute again in the above manner.

For example, according to the foregoing, in this interface 300, the user selects the product title node as the target node, and the YY application of the terminal device directly displays the frequency of use or selects the frequency from high to low according to the text node to which the target node belongs (That is, from large to small) the attribute list for the user to choose. After the user selects the attribute he wants from the list, it is displayed in the attribute selection box of the node. or

The YY application of the terminal device obtains the corresponding attribute with the highest frequency of use or selection according to the text node to which the target node belongs, and directly displays the corresponding attribute with the highest frequency of use or selection frequency in the attribute selection box of the node.

It should be noted that step 102 is that the terminal device configures the binding data of the attribute of the target node in response to the user's configuration operation.

At the same time, step 102 may also be that the terminal directly performs an automatic configuration operation to realize the binding data of configuring the attributes of the target node.

In some instances, in response to the configuration operation, configuring the binding data of the attribute of the target node includes: 1003: in response to the selection operation of the static binding data, determining that the binding data is a static value; in response to the input of the binding data Operation to determine the binding data of the target node's attributes.

Among them, the binding data refers to the associated data that associates the program variables or static data with text, pictures, etc. in the editable image, and is used as the attribute value of the target node attribute; then data binding is the process of this association. The binding data may include static data and dynamic data.

Static values (also called static data) refer to: immutable constants in the programming language, that is, static attribute values that do not change with other data sources, such as text, image links, and so on.

For example, according to the foregoing, after the attribute selection of the product title node in the interface 300 is completed, the user configures binding data for the text content attribute of the product title node: the product title node, and when the user wants to configure the node When it is static value or static data, select the static binding data in the shopping editable image. The YY application of the terminal device responds to the selection operation and determines that the binding data is a static value. The user is in the shopping editable image Choose the type of data, for example, select the "text" type, and manually enter the static data "new sweater 20XX new style" in the binding data box, as the binding data, the YY application of the terminal device responds to the input operation To obtain the input binding data and display it in the binding data box. Thus forming the binding of the node and static data.

It should be noted that the data type can be used to perform data calibration on the binding data input by the user to determine whether the binding data is the data type.

In some instances, in response to the configuration operation, configuring the binding data of the target node's attributes includes: 1004: In response to the dynamic binding data selection operation, determining that the binding data is a dynamic value; acquiring and displaying the target The data source selection list corresponding to the attribute of the node; in response to the selection operation on the data source, an acquisition path of the bound data of the attribute of the target node is generated.

Among them, dynamic values (also called dynamic data) refer to variables in the programming language. It is just a placeholder when there is no actual data.

The data source selection list (also called dynamic data list) refers to a list composed of dynamic data from different data platforms.

It should be noted that when there is a reference data source basis as dynamic data, a value path (also referred to as an acquisition path or index) of dynamic data can be generated in a selected manner.

For example, according to the foregoing, after the attribute selection of the product title node in the interface 300 is completed, the user configures binding data for the text content attribute of the product title node: the product title node, and when the user wants to configure the node In dynamic value or dynamic data, select dynamic binding data in the shopping editable image. The YY application of the terminal device responds to the selection operation and determines that the binding data is a dynamic value. The user is in the shopping editable image Choose the data type of the data type, for example, select the "text" type, and the YY application of the terminal device obtains a data source selection list corresponding to the attribute according to the attribute. The selection list may include characters indicating the title of the commodity, indicating the commodity Characters such as numeric IDs, characters representing cities, characters representing popularity, etc. And the obtained data source selection list is displayed. When the user views the displayed data source selection list, the character representing the title of the product in the data source selection list is selected as the dynamic binding data of the attribute. In response to the selection operation, the YY application determines that the binding data is a character representing the title of the product, and displays it in the binding data frame, and at the same time can determine the acquisition path or indexing method corresponding to the dynamic binding data to obtain the binding Data, which forms the binding of the node to dynamic data. Among them, FIG. 4 shows an interface 400 for binding dynamic data. In this interface 400, the dynamic content is bound to the text content attribute “Inner” of the product title node, and the dynamic data is determined, that is, the binding data is text, and When the data is selected as dynamic data, the YY application of the terminal device responds to the selection operation and displays the corresponding data source selection list. After the user selects the dynamic binding data, the binding will be displayed in the binding data box. data. As shown in FIG. 5, the interface 500 shows the dynamic binding data of the attribute after binding.

In some instances, the attribute of the high-frequency operation can also be directly placed in the attribute selection box as the default attribute of the node, which is convenient for the user to directly manipulate this attribute. In the vertical domain, nodes have certain characteristics, and the data they can bind is rule-based. The terminal device can guess the data that the node is most likely to bind and automatically execute the data binding process to achieve the effect of intelligent matching attributes. If the user does not want to configure this attribute for the node, he can select the attribute and bind data again according to his own choice.

For example, according to the foregoing, after the terminal device determines that the target node is a product title node, the terminal device directly determines the high-frequency operation attribute as the text content attribute, and directly determines the binding data of the text content attribute as the high frequency according to the text content attribute Operation binding data, such as "aa", and use the high-frequency operation binding data as the binding data of the text content attribute. or,

The binding data list of the text content attribute is directly determined according to the text content attribute. The binding data in the binding data list is sorted according to the appearance frequency or the selection frequency from large to small. The user selects from the binding data list Select the binding data that you want, and the terminal device determines the binding data of the attribute in response to the selection operation.

In some examples, the method 100B further includes: 1005: After responding to the dynamic binding data selection operation, but not displaying the data source selection list corresponding to the attribute of the target node, responding to the input operation of obtaining the path To determine the acquisition path of the binding data of the attribute of the target node.

It should be noted that when there is no reference data source as dynamic data, the acquisition path (or index) of the bound data can be directly handwritten.

For example, according to the foregoing, when dynamic binding data is selected in a shopping editable image, the YY application of the terminal device determines that the binding data is a dynamic value in response to the selection operation, and the user is in the shopping editable image. Select the data type, for example, select the "text" type. At this time, when the YY application of the terminal device does not obtain a reliable data source corresponding to the attribute according to the attribute, the data source selection list will not be generated. The user When the current interface does not display the data source selection list, the user manually enters the acquisition path or index “ZZ” of dynamic data in the bound data frame as the bound data, and displays it in the bound data frame.

It should be noted that after configuring the current target node, the user can continue to select the desired target node and configure the binding data of the attributes of the subsequent target node until the user completes the data binding of all the desired target node attributes.

In addition, after the binding data of an attribute after the target node is configured, data binding can be continued for other attributes of the same target node until the user completes all desired data binding of the attribute of the target node .

In some examples, the method 100A further includes generating a description file representing the set of binding data for the binding data of the attribute of at least one target node.

For different purposes, the view module can be given different functions or processing methods, so that the view module generated in this way can be adapted to multiple platforms and multiple scenarios. By combining the binding data of multiple attributes of multiple nodes, a description file of the collection of binding data is generated, thereby completing a complete data structure. The description file can increase the simulation function of the value path, and has a reference meaning to the value path, thereby simulating other value paths. A series of functions, such as centralized detection of the data legitimacy of the bound data, can be determined to determine whether the bound data is legal and whether there are problems.

You can also supplement or limit the binding data, such as the text showing the binding data is within 12 words, and the image size is m*n, etc.

It should be noted that step 103 may be that the terminal device generates a code corresponding to the target programming language according to the editable image, the binding data, and the binding data analysis method in response to the user's generating operation.

At the same time, step 103 may also be that the terminal directly performs an automatic generation operation, and generates a code corresponding to the target programming language according to the editable image, the binding data, and the binding data analysis method.

The parsing method refers to the method of acquiring bound data, for example, the method of data connection with the platform where the data source is located.

In some examples, in response to the generating operation, the code corresponding to the target programming language is generated according to the editable image, the binding data, and the binding data parsing method.

In some examples, the code corresponding to the target programming language is generated according to the editable image, the binding data, and the binding data parsing method, including: converting the editable image with the binding data and the binding data parsing method to the target The code corresponding to the programming language.

In some examples, the editable image with the binding data and the analysis method of the binding data are converted into codes corresponding to the target programming language, including: 1006: in response to the selection operation of the programming language, determining the target programming language and programming with the target Parsing algorithm corresponding to the language; in response to the code generation operation, according to the parsing algorithm, the editable image configured with the binding data is encoded in the target programming language to generate the editable image code; 1007: according to the parsing algorithm, the binding data The parsing method encodes the target programming language and generates the binding data parsing code.

In some examples, the method 100A further includes: publishing the editable image code and the binding data parsing code to generate the corresponding view module.

Among them, the programming language refers to the formal language used to define the computer program, which may include multiple different development programming languages, which is no longer limited here.

The parsing algorithm refers to an algorithm used to convert the editable image with bound data and the parsing method of the bound data into the corresponding code of the target programming language.

For example, according to the foregoing, after the terminal device configures binding data for at least one node on the shopping editable image and at least one attribute of the node, the user selects the target programming language on the interface of the YY application, and can also The corresponding application scenario is set on this interface. The user clicks the code control on the interface of the YY application program to perform the generation operation. The YY application program of the terminal device responds to the code generation operation to determine the analysis algorithm corresponding to the target programming language. The method for generating the static view page code corresponding to the target programming language, the parsing algorithm encodes the shopping editable image with the binding data set, and generates the shopping static page code. Then according to the generation method of the analysis method corresponding to the target programming language, the analysis algorithm encodes the binding data analysis method to the target programming language to generate the binding data analysis code. The editable image code and the binding data parsing code are combined, and the combined code is displayed. FIG. 5 shows an interface 500 for generating the code. The user can view the combined code. The user clicks the release control in the interface 500 Publish the combined code, the YY application program of the terminal device responds to the publish operation, publishes the combined code, and generates a view module. FIG. 6 shows a comparison diagram 600 of a front-end shopping view page 600B and an editable image 600A in an online shopping scenario generated by the view module. Among them, after data binding and code generation and release in the editable image 600A, a view module is generated, and the developer forms a visual view page 600B by using the view module, and the binding data has been displayed in the View page 600B.

FIG. 1C is a schematic flowchart of a code generation method according to an exemplary embodiment of the present application. The method 100C provided by the embodiment of the present application is executed by the terminal device in response to user operations (for example, acquisition operation, selection operation, selection operation, configuration operation, and generation operation, etc.). The method 100C includes the following steps:

11: In response to the acquisition operation, acquire and display editable images;

12: In response to the selection operation, select the editable target node displayed in the editable image;

13: In response to the selection operation, select the attributes of the target node;

14: In response to the configuration operation, configure the binding data of the attributes of the target node;

15: In response to the generation operation, the code corresponding to the target programming language is generated according to the editable image, the binding data, and the analysis method of the binding data.

Since the code generation process has been explained in detail above, the above steps are briefly explained here:

11: In response to the acquisition operation, acquire and display the editable image.

For example, a user performs an acquisition operation on the interface of a code-generating application installed locally on the computer. The application acquires a JSON programming language containing nodes for shopping editable images locally from the computer and converts it into a JSON tree structure. Then convert the JSON tree structure into an XML programming language, and run the XML language to display the shopping editable image and various nodes on the shopping editable image.

12: In response to the selection operation, select the editable target node displayed in the editable image.

For example, according to the foregoing, the user performs a selection operation on the interface of the application program of the computer, selects any node on the shopping editable image as the target node, and the computer selects the target node in response to the selection operation.

13: In response to the selection operation, select the attribute of the target node.

For example, according to the foregoing, the user performs a selection operation on the interface of the application program of the computer to select an attribute of the target node, and the computer selects the attribute of the target node in response to the selection operation.

14: In response to the configuration operation, configure the binding data of the attributes of the target node.

For example, according to the foregoing, the user performs a configuration operation on the interface of the application program of the computer to configure the binding data of the attribute, and the computer configures the binding data of the attribute in response to the configuration operation.

For example, according to the foregoing, the user performs the generation operation on the interface of the application program of the computer, and generates the code corresponding to the target programming language for the shopping editable image with the binding data and the analysis method of the binding data. In response to the generating operation, the computer generates the code corresponding to the target programming language by combining the shopping editable image with the binding data and the analysis method of the binding data.

The technical solution of the present application will be described in detail below in conjunction with an exemplary application scenario:

Scenario 1: Export the data of an editable image in the design tool s on the PC (Personal Computer), and import it into the PC-generated code application to obtain a static UI of the editable image. Select the title node and text content attributes in the static UI, and choose to bind the dynamic data source. Since the title node is the title of the product, the attribute and the product data source-title data are bound together. After determining the binding relationship, you can do additional operations on the binding, such as making the number of text not more than 12, such as the generation of simulated data, and view the code. You can see through the code that the title is already the bound data Finally, the code is released.

The operation of the static UI embodied by the idea of data binding can basically replace the developer code, which can help solve the current pain points in the industry and liberate this part of productivity.

FIG. 7 is a schematic structural diagram of a code generation apparatus according to another exemplary embodiment of the present application. The apparatus 700 can be applied to a terminal device. The apparatus 700 includes a selection module 701, a configuration module 702, and a generation module 703. The functions of each module are described in detail below:

The selection module 701 is configured to select the editable target node displayed in the editable image in response to the selection operation.

The configuration module 702 is configured to configure the binding data of the attribute of the target node in response to the configuration operation.

The generating module 703 is configured to generate the code corresponding to the target programming language according to the editable image, the binding data, and the analysis method of the binding data.

In some examples, the device 700 further includes: a first recognition module for recognizing the static structure of the obtained editable image, converting the static structure into a tree structure of a specified programming language, and displaying the editable according to the tree structure Image; wherein, the second recognition module is used to identify at least one basic node and at least one high-level node from the tree structure, display it in the editable image as an editable node, and select any base The node or any high-level node is regarded as the target node; among them, the high-level node is obtained by transforming the basic node.

In some examples, the second identification module is used to identify at least one node from the tree structure as a basic node; according to the node name, obtain the node to be converted from the at least one basic node, and the node to be converted Convert to advanced node.

In some examples, after selecting the target node, the device 700 further includes: a first acquisition module for acquiring at least one attribute corresponding to the target node according to the selected target node; a display module for responding to the attribute The viewing operation displays at least one acquired attribute; the first selection module is used to select the attribute of the target node in response to the attribute selection operation.

In some examples, the apparatus 700 further includes: a second acquisition module for acquiring and displaying at least one attribute corresponding to the target node according to the selected target node, wherein at least one attribute is sorted according to the selection frequency; the second selection module , Used to select the attribute of the target node in response to the attribute selection operation.

In some examples, the configuration module 702 is configured to determine the binding data as a static value in response to the selection operation of the static binding data; and determine the binding data of the attribute of the target node in response to the input operation of the binding data.

In some examples, the configuration module 702 includes: a first determining unit for determining that the binding data is a dynamic value in response to a dynamic binding data selection operation; and an acquiring unit for acquiring and displaying the target node The data source selection list corresponding to the attribute of the; the first generating unit is configured to generate an acquisition path of the binding data of the attribute of the target node in response to the selection operation of the data source.

In some examples, the apparatus 700 further includes: a determination module for responding to the acquisition path after not responding to the dynamic binding data selection operation and not displaying the data source selection list corresponding to the attribute of the target node The input operation determines the acquisition path of the binding data of the attribute of the target node.

In some instances, the binding data is used as the attribute value of the attribute of the target node.

In some examples, the generating module 703 is configured to generate a description file representing the set of binding data for the binding data of the attribute of at least one target node.

In some examples, the generation module 703 is used to convert the editable image with the binding data and the parsing method of the binding data into the code corresponding to the target programming language.

In some examples, the generation module 703 includes: a second determination unit for determining a target programming language and a parsing algorithm corresponding to the target programming language in response to a selection operation of the programming language; a second generation unit for responding to code The generating operation is based on the parsing algorithm, and the editable image with the binding data is encoded in the target programming language to generate the editable image code; the third generating unit is used to target the binding data parsing method according to the parsing algorithm The coding of the programming language to generate the binding data analysis code.

In some examples, the device 700 further includes: a publishing module, configured to publish the editable image code and the binding data parsing code to generate a corresponding view module.

The internal functions and structure of the generating device 700 shown in FIG. 7 are described above. In a possible design, the structure of the generating device 700 shown in FIG. 7 may be implemented as a terminal device, as shown in FIG. 8, the terminal device 800 It may include: a memory 801 and a processor 802;

The memory 801 is used to store computer programs;

The processor 802 is used to execute a computer program for:

In response to the selection operation, select the editable target node displayed in the editable image;

In response to the configuration operation, configure the binding data of the attributes of the target node;

The code corresponding to the target programming language is generated according to the editable image, the binding data, and the analysis method of the binding data.

In some examples, the processor 802 is also used to: identify the static structure of the obtained editable image, convert the static structure into a tree structure of a specified programming language, and display the editable image according to the tree structure; Identify at least one basic node and at least one advanced node in the tree structure, display it in an editable image as an editable node, and use any selected basic node or any advanced node as the target node; Nodes are obtained through the conversion of basic nodes.

In some examples, the processor 802 is specifically configured to: identify at least one node from the tree structure as a basic node; obtain the node to be converted from the at least one basic node according to the node name, and convert the node to be converted The node is converted to an advanced node.

In some examples, after selecting the target node, the processor 802 is further configured to: according to the selected target node, obtain at least one attribute corresponding to the target node; in response to the attribute viewing operation, display the obtained at least one attribute; In response to the attribute selection operation, the attribute of the target node is selected.

In some examples, the processor 802 is further configured to: acquire and display at least one attribute corresponding to the target node according to the selected target node, where at least one attribute is sorted according to the selection frequency; the second selection module is used to respond to the attribute Select operation, select the attribute of the target node.

In some examples, the processor 802 is specifically configured to: in response to the selection operation of the static binding data, determine the binding data as a static value; in response to the input operation of the binding data, determine the binding data of the attribute of the target node .

In some examples, the processor 802 is specifically configured to: in response to the selection operation of the dynamic binding data, determine that the binding data is a dynamic value; obtain and display a data source selection list corresponding to the attribute of the target node; respond For the selection operation of the data source, an acquisition path of the binding data of the attribute of the target node is generated.

In some examples, the processor 802 is further configured to: in response to the selection operation of the dynamic binding data, without displaying the data source selection list corresponding to the attribute of the target node, in response to the input operation of obtaining the path, Determine the acquisition path of the binding data of the attribute of the target node.

Among them, the binding data is used as the attribute value of the attribute of the target node.

In some examples, the processor 802 is specifically configured to: for the binding data of the attribute of at least one target node, generate a description file representing the set of binding data.

In some examples, the processor 802 is specifically configured to: convert the editable image with the binding data and the analysis method of the binding data into the code corresponding to the target programming language.

In some examples, the processor 802 is specifically configured to: in response to the selection operation of the programming language, determine the target programming language and the parsing algorithm corresponding to the target programming language; in response to the code generation operation, bind the configuration according to the parsing algorithm The editable image of the fixed data is encoded in the target programming language to generate the editable image code; according to the analysis algorithm, the target programming language is encoded in the binding data analysis method to generate the binding data analysis code.

In some examples, the processor 802 is also used to publish the editable image code and the binding data analysis code to generate the corresponding view module.

In addition, an embodiment of the present invention provides a computer storage medium. When a computer program is executed by one or more processors, the one or more processors are caused to implement the steps of the code generation method in the method embodiment of FIG. 1A.

Yet another exemplary embodiment of the present application provides a code generation device. The device 900 can be applied to a terminal device. The device 900 includes a display module 901, a selection module 902, a selection module 903, a configuration module 904, and a generation module 905. The functions of each module are described in detail below:

The display module 901 is configured to obtain and display an editable image in response to the obtaining operation.

The selection module 902 is configured to select the editable target node displayed in the editable image in response to the selection operation.

The selection module 903 is configured to select attributes of the target node in response to the selection operation.

The configuration module 904 is configured to configure the binding data of the attribute of the target node in response to the configuration operation.

The generating module 905 is configured to generate a code corresponding to the target programming language according to the editable image, the binding data, and the binding data analysis method in response to the generating operation.

The internal function and structure of the above generating device, in a possible design, the structure of the generating device may be implemented as a terminal device, and the terminal device may include: a memory 1001 and a processor 1002;

The memory 1001 is used to store a computer program;

The processor 1002 is configured to execute a computer program for: acquiring and displaying an editable image in response to the acquiring operation; selecting an editable target node displayed in the editable image in response to the selecting operation; and responding to the selecting operation, Select the attributes of the target node; in response to the configuration operation, configure the binding data of the target node's attributes; in response to the generation operation, generate the code corresponding to the target programming language according to the editable image, the binding data, and the binding data parsing method.

In addition, an embodiment of the present invention provides a computer storage medium. When a computer program is executed by one or more processors, the one or more processors cause the steps of the code generation method in the method embodiment of FIG. 1C to be implemented.

An exemplary embodiment of the present application also provides a code generation method. The method provided by the embodiment of the present application is executed by the terminal device in response to the user's operation and the terminal's automatic operation. The method includes the following steps:

111: Determine the editable image to be processed;

112: Determine the target node of the editable image to be edited;

113: Determine the binding data of the attributes of the target node;

114: Generate the code corresponding to the target programming language according to the editable image, the binding data, and the analysis method of the binding data.

Since the specific implementation manners of the above steps 111, 112, and 114 have been described in detail in the foregoing, they will not be repeated here.

In some examples, determining the target node of the editable image to be edited includes: providing an interface for the user to select the target node to be edited; based on the user selection, determining the target node to be edited.

Since the specific implementation of this step has been elaborated in the foregoing, it will not be repeated here.

In some examples, determining the binding data of the attribute of the target node includes: obtaining the corresponding attribute and the binding data of the attribute according to the target node.

In some examples, determining the binding data of the attribute of the target node includes: obtaining the corresponding attribute and the binding data list corresponding to the attribute according to the target node, wherein the binding data in the binding data list is based on the selection frequency Sorted from large to small; in response to the selection operation of the binding data, the binding data of the attribute of the target node is selected.

Yet another exemplary embodiment of the present application provides a code generation device. The device can be applied to terminal equipment. The device includes a first determination module, a second determination module, a third determination module, and a generation module. The functions of each module are described in detail below:

The first determining module is used to determine the editable image to be processed;

The second determination module is used to determine the target node of the editable image to be edited;

The third determining module is used to determine the binding data of the attribute of the target node;

The generating module is used to generate the code corresponding to the target programming language according to the editable image, the binding data, and the analysis method of the binding data.

The internal function and structure of the above generating device, in a possible design, the structure of the generating device may be implemented as a terminal device, and the terminal device may include: a memory and a processor;

Memory, used to store computer programs;

A processor for executing the computer program for:

Determine the editable image to be processed;

Determine the target node of the editable image to be edited;

Determine the binding data of the attributes of the target node;

In addition, the embodiments of the present invention provide a computer storage medium. When the computer program is executed by one or more processors, the one or more processors are caused to implement steps 111-114 of the code generation method in the foregoing method embodiment.

In addition, some processes described in the above embodiments and the drawings include multiple operations that appear in a specific order, but it should be clearly understood that these operations may not be performed in the order in which they appear in this document or in parallel The sequence numbers of operations such as 101, 102, 103, etc. are only used to distinguish different operations, and the sequence number itself does not represent any execution order. In addition, these processes may include more or fewer operations, and these operations may be performed sequentially or in parallel. It should be noted that the descriptions of "first" and "second" in this article are used to distinguish different messages, devices, modules, etc., and do not represent the order, nor limit "first" and "second". Are different types.

The device embodiments described above are only schematic, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, may be located One place, or can be distributed to multiple network elements. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art can understand and implement without paying creative labor.

Through the description of the above embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by adding a necessary universal hardware platform, and of course, can also be implemented by a combination of hardware and software. Based on this understanding, the above technical solution can be embodied in the form of a computer product in essence or part of the contribution to the existing technology, and the present invention can adopt one or more computer-usable storages containing computer-usable program code The form of the computer program product implemented on media (including but not limited to disk storage, CD-ROM, optical storage, etc.).

The present invention is described with reference to flowcharts and/or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each flow and/or block in the flowchart and/or block diagram and a combination of the flow and/or block in the flowchart and/or block diagram may be implemented by computer program instructions. These computer program instructions can be provided to the processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable multimedia data processing device to produce a machine that causes instructions to be executed by the processor of the computer or other programmable multimedia data processing device Means for generating the functions specified in a block or blocks of a flowchart or a flow and/or a block diagram.

These computer program instructions may also be stored in a computer readable memory that can guide a computer or other programmable multimedia data processing device to work in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture including instruction means, which The instruction device implements the functions specified in one block or multiple blocks in the flowchart one flow or multiple flows and/or block diagrams.

These computer program instructions can also be loaded onto a computer or other programmable multimedia data processing device so that a series of operating steps are performed on the computer or other programmable device to produce computer-implemented processing to be executed on the computer or other programmable device The instructions provided provide steps for implementing the functions specified in one block or multiple blocks of the flowchart one flow or multiple flows and/or block diagrams.

In a typical configuration, the computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.

The memory may include non-permanent memory, random access memory (RAM) and/or non-volatile memory in a computer-readable medium, such as read only memory (ROM) or flash memory (flash RAM). Memory is an example of computer-readable media.

Computer-readable media, including permanent and non-permanent, removable and non-removable media, can store information by any method or technology. The information may be computer readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, read-only compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, Magnetic tape cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media can be used to store information that can be accessed by computing devices. As defined in this article, computer-readable media does not include temporary computer-readable media (transitory media), such as modulated data signals and carrier waves.

Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still The technical solutions described in the foregoing embodiments are modified, or some of the technical features are equivalently replaced; and these modifications or replacements do not deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

A code generation method, which is characterized by including:

In response to the selection operation, select the editable target node displayed in the editable image;

In response to the configuration operation, configure the binding data of the attributes of the target node;

According to the editable image, the binding data, and the analysis method of the binding data, a code corresponding to the target programming language is generated.
The method according to claim 1, wherein before responding to the selection operation, the method further comprises:

Identify the static structure of the obtained editable image, convert the static structure into a tree structure of a specified programming language, and display the editable image according to the tree structure;

Wherein, at least one basic node and at least one advanced node are identified from the tree structure, displayed in the editable image as an editable node, and any selected basic node or any advanced node is selected Node as the target node;

Wherein, the high-level node is obtained through conversion of the basic node.
The method according to claim 2, wherein the identifying the at least one basic node and at least one high-level node from the tree structure includes:

Identifying the at least one node from the tree structure as a basic node;

According to the node name, the node to be converted is obtained from the at least one basic node, and the node to be converted is converted into an advanced node.
The method according to claim 1, wherein after selecting the target node, the method further comprises:

Acquire at least one attribute corresponding to the target node according to the selected target node;

Responsive to the attribute viewing operation, displaying the at least one acquired attribute;

In response to the attribute selection operation, the attribute of the target node is selected.
The method according to claim 1 or 4, further comprising:

Acquiring and displaying at least one attribute corresponding to the target node according to the selected target node, wherein the at least one attribute is sorted according to the selection frequency from large to small;

In response to the attribute selection operation, the attribute of the target node is selected.
The method according to claim 1, wherein the configuration of the binding data of the attribute of the target node in response to the configuration operation includes:

In response to the selection operation of the static binding data, determining that the binding data is a static value;

In response to the input operation of the binding data, the binding data of the attribute of the target node is determined.
The method according to claim 1, wherein the configuration of the binding data of the attribute of the target node in response to the configuration operation includes:

In response to the selection operation of the dynamic binding data, determining that the binding data is a dynamic value;

Obtain and display a data source selection list corresponding to the attributes of the target node;

In response to the selection operation on the data source, an acquisition path of the binding data of the attribute of the target node is generated.
The method according to claim 7, wherein the method further comprises:

After responding to the dynamic binding data selection operation and not displaying the data source selection list corresponding to the attribute of the target node, in response to the input operation of the obtaining path, determining the binding of the attribute of the target node Specify the data acquisition path.
The method according to claim 1, wherein the binding data is used as the attribute value of the attribute of the target node.
The method according to claim 1, wherein the method further comprises:

For the binding data of the attribute of at least one target node, a description file representing the set of binding data is generated.
The method according to claim 1, wherein the generating the code corresponding to the target programming language according to the editable image, the binding data, and the analysis method of the binding data includes:

The editable image with binding data and the parsing method of the binding data are converted into codes corresponding to the target programming language.
The method according to claim 11, wherein the method of converting the editable image with the binding data and the binding data into the code corresponding to the target programming language includes:

In response to the selection operation of the programming language, determine the target programming language and the parsing algorithm corresponding to the target programming language;

In response to the code generation operation, according to the parsing algorithm, the editable image configured with the binding data is encoded in the target programming language to generate the editable image code;

According to the parsing algorithm, the binding data parsing method is encoded in the target programming language to generate the binding data parsing code.
The method according to claim 12, wherein the method further comprises:

Publish the editable image code and the binding data analysis code to generate a corresponding view module.
A code generation device, characterized in that it includes:

The selection module is used to select the editable target node displayed in the editable image in response to the selection operation;

A configuration module, configured to configure the binding data of the attribute of the target node in response to the configuration operation;

The generating module is configured to generate a code corresponding to the target programming language according to the editable image, the binding data, and the analysis method of the binding data.
A device characterized by including a memory and a processor;

The memory is used to store computer programs;

The processor is used to execute the computer program for:

In response to the selection operation, select the editable target node displayed in the editable image;

In response to the configuration operation, configure the binding data of the attributes of the target node;

According to the editable image, the binding data, and the analysis method of the binding data, a code corresponding to the target programming language is generated.
A computer-readable storage medium storing a computer program, wherein when the computer program is executed by one or more processors, the one or more processors are caused to implement the method according to any one of claims 1-13 Steps.
A code generation method, which is characterized by including:

In response to the acquisition operation, acquire and display editable images;

In response to the selection operation, select the editable target node displayed in the editable image;

In response to the selection operation, select the attribute of the target node;

In response to the configuration operation, configure the binding data of the attributes of the target node;

In response to the generating operation, the code corresponding to the target programming language is generated according to the editable image, the binding data, and the analysis method of the binding data.
A code generation device, characterized in that it includes:

The display module is used to obtain and display the editable image in response to the obtaining operation;

The selection module is used to select the editable target node displayed in the editable image in response to the selection operation;

A selection module for selecting attributes of the target node in response to the selection operation;

A configuration module, configured to configure the binding data of the attribute of the target node in response to the configuration operation;

The generating module is configured to generate the code corresponding to the target programming language according to the editable image, the binding data, and the binding data parsing method in response to the generating operation.
A device characterized by including a memory and a processor;

The memory is used to store computer programs;

The processor is used to execute the computer program for:

In response to the acquisition operation, acquire and display editable images;

In response to the selection operation, select the editable target node displayed in the editable image;

In response to the selection operation, select the attribute of the target node;

In response to the configuration operation, configure the binding data of the attributes of the target node;

In response to the generating operation, the code corresponding to the target programming language is generated according to the editable image, the binding data, and the analysis method of the binding data.
A computer-readable storage medium storing a computer program, characterized in that, when the computer program is executed by one or more processors, the one or more processors are caused to implement the steps in the method of claim 17.
A code generation method, which is characterized by including:

Determine the editable image to be processed;

Determine the target node of the editable image to be edited;

Determine the binding data of the attributes of the target node;

According to the editable image, the binding data, and the analysis method of the binding data, a code corresponding to the target programming language is generated.
The method according to claim 21, wherein the determining the target node of the editable image to be edited comprises:

Provide users with an optional interface for editing target nodes;

Based on the user selection, the target node to be edited is determined.
The method according to claim 21 or 22, wherein the binding data that determines the attribute of the target node includes:

Acquire the corresponding attribute and the binding data of the attribute according to the target node.
The method according to claim 21 or 22, wherein the binding data that determines the attribute of the target node includes:

Acquiring the corresponding attribute and the binding data list corresponding to the attribute according to the target node, wherein the binding data in the binding data list is sorted according to the selection frequency from large to small;

In response to the selection operation of the binding data, the binding data of the attribute of the target node is selected.
A code generation device, characterized in that it includes:

The first determining module is used to determine the editable image to be processed;

A second determination module, used to determine the target node of the editable image to be edited;

A third determining module, configured to determine the binding data of the attribute of the target node;

The generating module is configured to generate a code corresponding to the target programming language according to the editable image, the binding data, and the analysis method of the binding data.
A device characterized by including a memory and a processor;

The memory is used to store computer programs;

The processor is used to execute the computer program for:

Determine the editable image to be processed;

Determine the target node of the editable image to be edited;

Determine the binding data of the attributes of the target node;

According to the editable image, the binding data, and the analysis method of the binding data, a code corresponding to the target programming language is generated.
A computer-readable storage medium storing a computer program, wherein when the computer program is executed by one or more processors, the one or more processors are caused to implement the method according to any one of claims 21-24 Steps.