A cross-platform visual code generation device and method

Abstract

The present invention discloses a cross-platform visual code generation device and method, belonging to the field of computer application technology. Visual editing logic is realized through a visual controller editing tool, cross-platform consistent logic editing is realized through functional controller actions, differentiated interface calls of various platforms are realized through system call actions, code generation is realized through sub-platform compilation, and finally the logic visual editing, sub-platform code generation and sub-platform code running functions across three platforms of backend, web page and applet are realized. The present invention can effectively reduce software development costs and improve software development quality.

Description

Technical Field

[0001] The invention relates to a cross-platform visual code generation device and method, belonging to the technical field of computer application. Background Art

[0002] Visual code generation and execution is one of the core technologies of the low-code software development platform. It can effectively lower the threshold for software development, allowing junior developers and even ordinary users to develop software visually, thereby improving software development efficiency and reducing software development costs.

[0003] Existing technologies mainly generate code snippets through visual tools and integrate them into the system, generate code by reusing front-end components, and generate code through configuration options and interfaces. However, most of the functions are one-sided and cannot uniformly support cross-platform and multi-scenario visual code generation and use.

[0004] One type of existing code generation technology is to directly generate server-side code such as Java code and XML files in a visual way. It can only run on the server and is limited to specific programming languages ​​and platforms. Developers need to master relevant back-end knowledge to develop system components or debug problems. Only being able to generate server-side code also means that other front-ends need to be coordinated to achieve complete development of software products. This is a very traditional and one-sided generation method.

[0005] The other is to generate code through front-end code snippets and components. The disadvantage is that it is difficult to support back-end logic customization, and generally only fixed interfaces can be used to implement back-end functions. In addition, it is difficult for front-end components to achieve cross-platform support. To customize complex functions, it is necessary to maintain a huge code base and component library. It is very difficult to reuse code blocks, because it is difficult to ensure that the codes are not conflicting and can operate with each other when they are directly combined, unless enough specifications and restrictions are defined. This is a relatively primitive generation method.

[0006] Another type is to generate code based on configuration and interface, that is, by defining some components and interfaces, exposing some configuration options, and allowing users to combine the desired code and functions through options. The main drawback is that it is necessary to maintain very complex configurations, and it reduces flexibility. Users can only combine functions through limited configurations, and complex configurations reduce development efficiency. For the platform, maintaining a large number of configurations will generate a large number of branches, which will have a great negative impact on maintenance and testing.

[0007] Another type is to achieve function customization through forms, triggers or workflows. This type of method is severely limited by the limitations of forms and triggers. It can only achieve simple operations on data tables and cannot achieve cross-platform function customization. In order to make up for the shortcomings of this method, some platforms support custom functions by inserting code, but this is far from the visual code generation method.

[0008] In addition, the existing visual code generation function can only adapt to one or a few platforms such as PC web pages, mobile web pages, and backends, and lacks support for special environments such as popular mini-programs. Moreover, there is no unified development for the above platforms, and different tools and components need to be used, and even different people are required to develop. It is impossible to effectively reduce communication costs and development costs, and it is impossible to ensure the functional consistency of the software on various platforms.

[0009] Some of the existing visual code generation functions only exist as an auxiliary tool. The generated code needs to be copied and pasted into the existing system code base to run, or needs to be imported into the existing system as a component. It is impossible to achieve online real-time compilation and running. Online real-time compilation and running are very important basic functions for large-scale SaaS systems and low-code development platforms. Summary of the invention

[0010] The technical problem to be solved by the present invention is to provide a cross-platform visual code generation device and method, which solves the problem that most of the functions in the prior art are one-sided and cannot uniformly support the generation and use of cross-platform and multi-scenario visual codes.

[0011] The technical problem to be solved by the present invention is achieved by adopting the following technical solutions:

[0012] The first aspect of the present application provides a cross-platform visual code generation device, including a visual controller editing tool. The front-end user interface of the visual controller editing tool is provided with action options and a compile button. Each action option in the front-end user interface corresponds to each action. The action options include functional actions and system call actions. A controller is composed of different functional actions and system call actions. The compile function is executed by the compile button to generate executable codes for the controller on different platforms.

[0013] The second aspect of the present application provides a cross-platform visual code generation method, comprising:

[0014] In the front-end user interface of the visual controller editing tool, by adding, deleting, and modifying action options, and changing the position of action options by dragging the mouse, the back-end controller, web page controller, and applet controller are combined respectively;

[0015] By clicking the compile button, the backend controller code executed on the server side, the webpage controller code executed on the webpage side, and the mini-program controller code executed on the mini-program side are compiled and generated respectively.

[0016] Preferably, the backend controller, webpage controller and applet controller all include functional actions and system call actions.

[0017] More preferably, the functional actions of the backend controller include cloud function actions.

[0018] More preferably, the functional actions of the web page controller and the applet controller both include function actions for processing initialization status, page life cycle, and user interaction events.

[0019] More preferably, the system call action includes calling a system interface, calling a database interface, calling a key-value pair database, calling a string operation interface, calling a number operation interface, calling an array operation interface, calling a time and date operation interface, calling a mini-program interface, and calling a web page interface.

[0020] The beneficial effects of the present invention are:

[0021] The present invention provides a cross-platform visual code generation device and method, which realizes visual editing of logic through a controller and solves the front-end and back-end collaboration problem, eliminates the problem of inconsistent team code format and style through controller actions and system calls, effectively reduces the difficulty of team management, uses system calls to solve the platform adaptation problem of the code generation tool, solves the function and extensibility problem of the visual code generation tool by designing controller actions and system calls, and realizes the uniformity problem of different platforms through controller actions. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] Figure 1 Develop step-by-step flowcharts for cross-platform visualization of code.

[0023] Figure 2 A visual controller editing tool for the web platform.

[0024] Figure 3 Classification of system calls for visualization controllers and system calls applied to web platforms.

[0025] Figure 4 Edit the example for your backend controller.

[0026] Figure 5 Edit the example for the web controller.

[0027] Figure 6 Folder structure and some code examples for applet controller code generated by the visual controller editing tool. DETAILED DESCRIPTION

[0028] In order to make the technical means, creative features, objectives and effects of the present invention easier to understand, the present invention is further described below with reference to specific illustrations.

[0029] See also Figure 1-6The present application provides a cross-platform visual code generation device, including a visual controller editing tool. The front-end user interface of the visual controller editing tool is provided with action options and a compile button. Each action option in the front-end user interface corresponds to each action. The action options include functional actions and system call actions. The controller is composed of different functional actions and system call actions. The compile function is executed by the compile button to generate executable codes for the controller on different platforms.

[0030] The steps of a cross-platform visual code generation method provided by this application are as follows:

[0031] Step 1: In the front-end user interface of the visual controller editing tool, add, delete, modify action options, and change the position of action options by dragging the mouse to combine them into back-end controller, web page controller, and applet controller.

[0032] Step 2: Click the Compile button to compile and generate the backend controller code executed on the server, the webpage controller code executed on the webpage, and the mini-program controller code executed on the mini-program.

[0033] The backend controller, web page controller and applet controller all include functional actions and system call actions.

[0034] The functional actions of the backend controller include cloud function actions.

[0035] The functional actions of the web page controller and the applet controller include function actions for handling the initialization state, page life cycle, and user interaction events.

[0036] System call actions include calling system interface, calling database interface, calling key-value database, calling string operation interface, calling number operation interface, calling array operation interface, calling time and date operation interface, calling mini program interface, and calling web page interface.

[0037] The visual controller editing tool implements editing functions through the front-end component. The user interface is shown in Figure 2 In the interface, users can edit complex logic through visual operations such as mouse dragging and clicking without manually writing code. The controller consists of multiple actions, some of which can have nested sub-actions. The visual controller editing tool allows users to add, delete, and modify actions in the interface, as well as move the position of actions by dragging the mouse. A controller is implemented by combining multiple actions, and code for different platforms is generated by clicking compile. Each action has attributes such as type, name, unique KEY, parameters of the corresponding type of action, and remarks. After adding an action, the developer can modify the parameters and remarks of the action, as well as adjust the position of the action.

[0038] The specific action list of the design is shown in Table 1. A compilation function is written for each action, and the mutation function is used to generate the code for the corresponding platform. Action types include functions such as defining functions (func), defining variables (let), judging conditions (if), loop processing (map), and other advanced functions, as well as concurrent execution (concurrent) and decorators (decorators).

[0039] Table 1 Controller action types

[0040]

[0041]

[0042] Figure 2 The basic user interface of the controller and the drop-down menu function for adding actions are shown in Figure 1. When editing, select the type of action to be added through the drop-down options. After adding, you can set the options of the action, delete the action, add notes, and drag and move the position of the action. For some other platform-specific interfaces, they are implemented through system calls.

[0043] System call action is a special action. System calls are mainly classified into the following categories: system interface (such as printing logs, delayed execution), database interface (adding, deleting, modifying and checking databases), key-value database (operating key-value databases), string operation interface, digital operation interface, array operation interface, time and date operation interface, applet interface, web page interface. There are several to hundreds of different interfaces under each category. After adding a system call action, users can select different system call interfaces. Selecting different system call interfaces will automatically display the documentation of the required parameters. Users fill in the corresponding parameters according to the documentation. The parameters are filled in through a visual form, supporting multiple input methods such as text, numbers, and selections. You can also select the declared variables in the context. After adding a system call action, users can select different system call types according to the system call classification and the platform to which they belong. After selecting different system call types, the system will automatically display the required parameters and documents. Users fill in the corresponding options according to the documentation. The options are filled in through a visual form, or you can select the declared variables in the context. Each system call needs to implement a corresponding compilation function. The compilation function receives the platform type and the options filled in by the user, and compiles the corresponding code during compilation. A large number of system calls need to be designed for different platforms such as backend, web pages, and applets to implement the detailed functions of the corresponding platforms. Some system calls can also be adapted to multiple platforms.

[0044] Figure 3It reflects some system call categories and some system call names of the web platform. The system call actions in the web platform will only display the system calls that have been adapted to the web platform.

[0045] The core of the backend controller is also composed of function actions. In order to distinguish it from the functions of the frontend controller, the frontend controller includes a webpage controller and a mini-program controller. It uses a specific action called a cloud function (ccode_func) action, but shares the same visual controller editing tool as the frontend controller. The server side of modern applications mainly provides API interfaces (returning data in formats such as JSON / XML / TXT), and also supports view functions (returning HTML / images / videos, etc.), events (triggering execution functions through specific scenarios), and scheduled tasks (scheduled execution of functions) to meet the needs of different scenarios. The above common needs can be supported by the backend controller. A backend cloud function can be declared by declaring a cloud function (ccode_func) action. The parameters of this action support the selection of function types. It can be a normal cloud function or a view function, event, or scheduled task. Different types have different options.

[0046] This embodiment implements all the above-mentioned types of cloud functions. Ordinary cloud functions can be used as API interfaces to return data in formats such as JSON / XML / TXT / CSV to provide data interfaces for the front end or third parties. Function parameters are parameters passed by the front end or third parties; event-type cloud functions support triggering execution in specific scenarios. For example, a typical third-party payment needs to be notified and triggered by a third-party payment platform. After the trigger, the system finds the corresponding event function to execute according to the route. The parameters of the event function are the parameters of the corresponding event, such as payment data packaging. Generally, there is no return value, but the log can be printed through system calls. Event-type cloud functions are also an important tool for system decoupling. Event-type cloud functions can be triggered in ordinary cloud functions to achieve asynchronous execution. Ordinary cloud functions can also set the delay time (timeout) through options to implement delayed execution business logic such as the logic of automatically canceling an order if payment is not made after a specified time; scheduled tasks can support setting scheduled execution at certain time points of the day. The scheduled task option is a time array (times). The scheduled task has no parameters and no return value, but can be printed to the log system through internal system calls.

[0047] The cloud functions, events, and scheduled tasks in this embodiment are uniquely identified by their unique names. In the system, the cloud functions with corresponding names are called by the platform through URL routing. The cloud functions with corresponding names can be called by directly selecting them in the front-end controller. In specific scenarios, cloud functions with specific names are triggered by events. Scheduled tasks are automatically executed according to the time by the system scheduler (beat).

[0048] In order to effectively manage cloud functions visually, you can group cloud functions through the cloud function grouping action (ccode_func_group). Cloud function subnodes can and only can be added under the cloud function grouping action.

[0049] In the cloud function, you can get function parameters (empty if some types have no parameters), and then implement common backend logic through variable declaration, conditional judgment, looping and other actions, as well as database addition, deletion, modification and query system calls, and finally directly return JSON data structure or HTML / XML / TXT format (some types do not need to be returned). The backend controller developed in step 3 can be directly called by the web page controller and mini program controller after it is generated and run in step 6.

[0050] A controller can contain multiple cloud functions of different types and cloud function groups. A large application can create multiple controllers to implement different parts of the business needs, as long as the cloud function names do not conflict. A large application may consist of more than a dozen controllers, hundreds of cloud function groups, thousands of cloud functions, and tens of thousands of actions.

[0051] Figure 4 The cloud function controller editing interface of this embodiment is shown. The outermost action is cloud function grouping, and multiple cloud functions are nested inside. The cloud function can set information such as name, parameters, and remarks; business logic is implemented in each cloud function, and some functions have return values.

[0052] The web controller is used to control the data displayed on the web page interface and handle user interaction events. The web controller is composed of functions. A web controller can add multiple functions. Different functions can handle the initialization state, page life cycle, user interaction events, and thus realize all the functions of the front-end web page.

[0053] This embodiment defines the page state through an initialization state function action (func) with a special name (onCreateState). The initialization state of the component can be declared in the initialization state function through the declaration state action (set). The initialized state is used for the initial rendering of the page, and the return value of the initialization state function will be used as the initial state of the page. In addition, the operation when the component is displayed is controlled by a function action (func) named onShow, the operation when the component is uninstalled is controlled by a function action (func) named onHide, and other types of page life cycle events are controlled by other names. For user interaction events such as a user clicking a button in the page, a custom event function (func) can be added, and then the corresponding function of the controller can be bound to the corresponding component to realize the user clicking the button to execute the custom event. In all functions (except onCreateState), the front-end interface state can be modified by modifying the state (commit) action, thus realizing the dynamic update of the web page interface.

[0054] Within each function, you can obtain function parameters and add multiple actions. You can implement logical control by defining variables, assigning values, conditional judgments, loops, and other functions. You can also implement business logic by calling web interfaces, database interfaces, and back-end cloud function interfaces.

[0055] Figure 5 An example of the editing interface of the web page controller in this embodiment is shown. In the example, the state value state.count is initialized through the onCreateState function action, and function 1 is called in the onShow lifecycle function. Function 1 adds 1 to the state value state.count, and the UI interface displays count as 2 in the initialization rendering; when the user clicks the button to associate and execute function 1, the state value state.count is added by 1, and the UI interface displays count as 3.

[0056] The applet controller is used to control the logic of applet components and pages in the applet. The applet controller process developed through the visual controller is similar to the web page controller. The applet controller is composed of functions. A applet controller can add multiple functions. Different functions can handle the initialization state, page life cycle, and user interaction events, thereby realizing all the functions of the applet controller. This embodiment solves the editing consistency problem of the two platforms through the controller, and finally generates different codes according to different platforms.

[0057] This embodiment first defines the state of the applet page through an initialization state function action (func) with a special name (onCreateState), controls the page life cycle through life cycle function names such as onShow / onHide, and implements logical control of user interaction events by binding custom events to components in the page. The parameters of the applet event are inconsistent with the web page controller, and the function parameters can be obtained through the event variable in the corresponding event.

[0058] The status update actions of the mini program are the same as those of the web page, both of which use the modify status (commit) interface, but the code generated in the final compilation will call the setData interface of the mini program platform to modify the interface.

[0059] Generate and run the backend controller. The controller developed using the visual controller editing tool must eventually generate server-side code before it can be executed. This embodiment implements the compiler of the backend controller, which supports compiling the controller into a server-side JavaScript (Node.js) code string. The code generation and compilation steps are as follows: set a global variable actions before compiling, loop all actions, and generate different codes according to different action types; if you encounter nested actions such as function declarations, compile the sub-actions repeatedly and embed them into the sub-actions; if you encounter different types of system call actions, generate corresponding code according to the system call actions; if you encounter a function declaration, copy the function declaration as an attribute of actions, for example, if the function name is ccode_func1, set actions.ccode_func1 as the function body; add a sentence export default actions to the generated code to export the global variable actions. Finally, you get an ESM-compliant Node.js code string, which is saved in a TEXT-type field in the database.

[0060] When a web controller, applet controller or a third party directly requests a cloud function, the system finds the function with the corresponding name of the corresponding controller according to the route, retrieves the corresponding controller code from the database, and executes the code safely in the sandbox through the vm2 module of Node.js to obtain the controller return value (actions). According to the function name such as ccode_func1, the function object actions.ccode_func1 is obtained, and the result is returned to the function caller after the function is executed. The hotspot cache technology (lru cache) ensures that when the same function is called repeatedly, there is no need to repeatedly execute the code retrieval operation to optimize the performance of the system, and all cloud functions of the same controller share the same controller, so there is no need to repeatedly retrieve the code. Function execution has no side effects, and multiple calls to the same function will not conflict with each other. Node.js servers can be deployed in clusters to support large-scale concurrent access.

[0061] This embodiment implements the compilation and generation of visual controller actions into Node.js (ESM) code, and realizes dynamic execution on the server side. However, due to the abstract nature of the visual controller and actions, compilation into other languages ​​can be achieved by only implementing compilation functions in different languages ​​for different actions.

[0062] The compilation and generation steps of the web page controller are as follows: after the user clicks the compile button of the controller, the compilation function is executed. The compilation function loops all actions (the first-level action is the function func), and different codes are generated according to different action types. If nested actions such as function declarations are encountered, the sub-actions are repeatedly compiled and embedded in the sub-actions; if different types of system call actions are encountered, the corresponding code is generated according to the system call action; for the state modification action (set), it will be mapped to the state modification operation of the front-end framework, such as Vue's $set method or React's setState method. The final generated target is a JavaScript (ES2015) code file. Some actions will generate different codes depending on the compilation target. Some system calls will also generate different codes due to different platforms.

[0063] When a user visits a web page, all controller codes are extracted based on all components in the page, merged into a JavaScript file, automatically uploaded to the CDN and cached, ensuring that the merge operation is only required during the first visit to optimize performance. The web page loads JavaScript code through the script tag.

[0064] When the webpage is loaded, all components will execute JavaScript code and loop all controllers. For each controller, the initialization state (onCreateState) function is first executed to initialize the rendering state according to its return value, and then the onShow function is executed to perform the loading action. In the onShow function, you can call the backend cloud function to obtain data, or directly modify the page state. After the state is modified, the system automatically updates the interface according to the state change. After the page is interactive, the user operates the corresponding component in the webpage to trigger the corresponding event action. For example, when the user clicks a button, the corresponding function name is found according to the event name bound to the button component, and the found function is called using the corresponding event parameters. The action in the function may pop up a prompt or continue to modify the state. At this point, the visual controller has fully realized the operation and control of page rendering and interaction on the webpage.

[0065] In this embodiment, the MVVM-type front-end framework Vue is used to realize the dynamic binding of page status and interface. In fact, the same effect can be achieved by using similar frameworks such as React. Because the visual controller is independent of the framework, the visual controller uses the modify state action (commit) to implement the update interface. This action can be compiled into the $set method of Vue or the setState method of React.

[0066] The steps for compiling and generating the mini-program controller are as follows: click the compile button in the controller editing interface to execute the compile function. The compile function first declares an empty action object, and then loops through all actions (the first-level action is the function func). Different codes are generated according to different action types. If a nested action such as a function declaration is encountered, the sub-action is repeatedly compiled and embedded in the sub-action; if a function declaration is encountered, the function is copied as an attribute to the actions object; if different types of system call actions are encountered, the corresponding code is generated according to the system call action; the compile function in some actions generates mini-program-specific code according to the mini-program platform. The difference from the other two platforms is that there are two generation targets, one is the JavaScript (ES5) format, and the other is the mini-program's WXS format. After compilation, the mini-program code string of the controller is obtained and saved in the database TEXT type field.

[0067] When generating a mini program, it will first traverse all mini program pages, then traverse all controller codes of each page, merge all controllers in a page into an index.js file and output it to the page corresponding to the mini program (WXS format needs to be output to a WXML file). Figure 6The file structure of the final generated mini program and some controller code examples are shown. The figure clearly shows that the controller compiled code is in the index.js file under each page folder. There are multiple controller codes in each file. Each controller uses actions = {} as the initial variable, and then gradually assigns functions, such as onCreateStete and onShow, to form the running object of the mini program. In each index.js, there is also some public framework code for proxy mini program functions and scheduling the execution of controller code.

[0068] After the mini program is started, the onShow function will be executed first. The parameters are the query parameters of the current page. The internal actions will be executed in sequence. If some actions modify the interface status (commit), they will be mapped to the setData call of the mini program to update the interface. When the user clicks the corresponding component in the mini program, the corresponding event function will be triggered. The parameters are the click event object. The actions in the function will be executed in sequence. If the action modifies the interface status (commit), the UI interface will be updated. So far, the code generated by the visual controller has realized the operation and interaction in the mini program.

[0069] The present invention realizes visual editing of logic through visual drag and drop editing controller. Visual drag and drop has obvious advantages over manual coding. Through visual drag and drop, the position of functions and actions can be adjusted intuitively; by clicking to add, copy and paste, clone and other operations, a large number of actions can be quickly copied without worrying about format problems or logical confusion.

[0070] The present invention eliminates the problem of inconsistent team code formats and styles through standard actions and system calls, effectively reducing the difficulty of team management. At the same time, only the core team needs to maintain the controller editing tools, actions, and system calls to effectively improve the system quality, and other developers can develop high-quality software by using standard actions and system calls.

[0071] The present invention solves the platform adaptation problem of code generation tools through the system call function. Currently, many visual code generation tools are only suitable for specific scenarios. The present invention compiles the codes of different platforms into codes of different platforms through unified controller actions in conjunction with action compilation functions and system call compilation functions under different platforms, thus cleverly solving the adaptation problem of multiple platforms.

[0072] The present invention solves the functional and extensibility problems of the visual code generation tool through action design and system call design. The function of the visual code generation tool can be expanded by adding new actions or adding new system calls, and the cross-platform capability of the visual code generation tool can be expanded by adding new system calls or adding new platforms.

[0073] The present invention achieves the unification problem of different platforms through controller actions. By extracting common logical actions such as functions, declarations and assignments, conditional judgments, loop statements, and system calls unique to each platform (such as back-end interfaces, mini-program interfaces, and web page interfaces), developers can use consistent visual actions to develop cross-platform functions, and can implement special functions of each platform through system calls, thereby greatly reducing the manpower cost of software development.

[0074] The present invention uses a unified controller editing tool. Traditional software development requires front-end personnel and back-end personnel to fully communicate requirements and docking interfaces. The present invention uses a unified back-end controller, web page controller, and small program controller. The same person can develop the back-end controller by himself and directly call it on the web page controller or the small program controller, which greatly reduces the cost of communication and improves software production efficiency.

[0075] The present invention solves the logic writing problem of the mini program side through cross-platform compilation. Mini programs are different from web pages. The present invention achieves seamless adaptation of the same action to the two platforms by compiling the same action or system call into different codes on the web page and the mini program, which greatly reduces the development cost and maintenance cost. For example, in the system call pop-up prompt, it will be compiled into the alert() function call of the browser on the web page platform, and will be compiled into the showModal() function call of the corresponding platform in the mini program; the modification status (commit) in the web page will be mapped to the setData interface of the mini program.

[0076] The present invention generates code in the backend and runs it in real time in the sandbox, effectively solving the problem of real-time compilation and real-time integration of code. Compared with some visual code generation tools, which still need to be manually integrated into the system, the code generated by the present invention has obvious advantages. For SaaS platforms and low-code development platforms, real-time editing and running of code improves the ability to respond to needs and speeds up problem handling.

[0077] The above shows and describes the basic principles, main features and advantages of the present invention. It should be understood by those skilled in the art that the present invention is not limited to the above embodiments. Without departing from the spirit and scope of the present invention, the present invention may have various changes and improvements, which fall within the scope of the present invention. The scope of the present invention is defined by the attached claims and their equivalents.

Claims

1. A cross-platform visual code generation method, characterized in that: include: In the front-end user interface of the visual controller editing tool, by adding, deleting, and modifying action options, and changing the position of action options by dragging the mouse, the back-end controller, web page controller, and applet controller are combined respectively; Click the Compile button to compile and generate the backend controller code executed on the server, the webpage controller code executed on the webpage, and the mini-program controller code executed on the mini-program. The steps of code generation and compilation are as follows: before compilation, a global variable actions is set, all actions are looped, and different codes are generated according to different action types; if nested actions are encountered, the sub-actions are repeatedly looped and compiled and then embedded into the sub-actions; if different types of system call actions are encountered, the corresponding codes are generated according to the system call actions; if a function declaration is encountered, the function declaration is copied as an attribute of actions, including: if the function name is ccode_func1, actions.ccode_func1 is set as the function body; at the end of the generated code, a sentence of export default actions is added to export the global variable actions; Finally, we get a Node.js code string in ESM specification and save it into a TEXT type field in the database. When a user visits a web page, all controller codes are extracted from all components in the page, merged into a JavaScript file, automatically uploaded to the CDN and cached. The merge operation is performed on the first visit, and the web page loads the JavaScript code through the script tag. When the web page is loaded, all components execute the JavaScript code, and all controllers are executed in a loop. When generating a mini program, all mini program pages are traversed first, and then all controller codes of each page are traversed. All controllers in a page are merged into an index.js file and output to the page corresponding to the mini program. The WXS format needs to be output to a WXML file.

2. According to the cross-platform visual code generation method in claim 1, it is characterized in that: The backend controller, web page controller and applet controller all include functional actions and system call actions.

3. According to the cross-platform visual code generation method in claim 2, it is characterized in that: The functional actions of the backend controller include cloud function actions.

4. According to the cross-platform visual code generation method in claim 2, it is characterized in that: The functional actions of the web page controller and the applet controller both include function actions for processing initialization status, page life cycle, and user interaction events.

5. According to the cross-platform visual code generation method in claim 2, it is characterized in that: The system call actions include calling a system interface, calling a database interface, calling a key-value pair database, calling a string operation interface, calling a number operation interface, calling an array operation interface, calling a time and date operation interface, calling a mini-program interface, and calling a web page interface.

Images