CN114237583A - Cross-platform visual code generation device and method - Google Patents
Cross-platform visual code generation device and method Download PDFInfo
- Publication number
- CN114237583A CN114237583A CN202111558547.XA CN202111558547A CN114237583A CN 114237583 A CN114237583 A CN 114237583A CN 202111558547 A CN202111558547 A CN 202111558547A CN 114237583 A CN114237583 A CN 114237583A
- Authority
- CN
- China
- Prior art keywords
- controller
- action
- calling
- actions
- platform
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 230000000007 visual effect Effects 0.000 title claims abstract description 50
- 238000000034 method Methods 0.000 title claims abstract description 26
- 230000006870 function Effects 0.000 claims abstract description 154
- 230000009471 action Effects 0.000 claims abstract description 147
- 230000003993 interaction Effects 0.000 claims description 10
- 238000012800 visualization Methods 0.000 claims description 9
- 230000000051 modifying effect Effects 0.000 claims description 4
- 238000004883 computer application Methods 0.000 abstract description 2
- 238000011161 development Methods 0.000 description 8
- 230000036961 partial effect Effects 0.000 description 6
- 238000012545 processing Methods 0.000 description 5
- 238000009877 rendering Methods 0.000 description 4
- 230000006978 adaptation Effects 0.000 description 3
- 230000003111 delayed effect Effects 0.000 description 3
- 238000013461 design Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 244000035744 Hura crepitans Species 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 238000012217 deletion Methods 0.000 description 2
- 230000037430 deletion Effects 0.000 description 2
- 239000012634 fragment Substances 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 238000007726 management method Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 238000007792 addition Methods 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000010367 cloning Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 210000001503 joint Anatomy 0.000 description 1
- 230000035772 mutation Effects 0.000 description 1
- 231100000957 no side effect Toxicity 0.000 description 1
- 238000007639 printing Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/76—Adapting program code to run in a different environment; Porting
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
The invention discloses a cross-platform visual code generation device and method, and belongs to the technical field of computer application. The method has the advantages that visual editing logic is realized through a visual controller editing tool, cross-platform consistent logic editing is realized through functional controller actions, differentiated interface calling of each platform is realized through system calling actions, code generation is realized through sub-platform compiling, and finally, the functions of logic visual editing, sub-platform code generation and sub-platform code operation of three platforms which are cross a rear end, a webpage and a small program are realized. The invention can effectively reduce the software development cost and improve the software development quality.
Description
Technical Field
The invention relates to a cross-platform visual code generation device and method, and belongs to the technical field of computer application.
Background
The generation and the operation of the visual codes are one of core technologies of a low-code software development platform, so that the software development threshold can be effectively reduced, a primary developer and even an ordinary user can visually develop software, the software development efficiency is further improved, and the software development cost is reduced.
In the prior art, code fragments are generated through a visualization tool and integrated into a system, code is generated through a multiplexing front-end component, and code is generated through configuration options and interfaces, but most of the functional surfaces cannot uniformly support the generation and use of the visualization code across platforms and multiple scenes.
One type of existing code generation technology is that server codes such as Java codes and XML files are directly generated in a visual manner, and only run on a server, and are limited by a specific program language and a platform, and developers need to master related backend knowledge to develop system components or debug problems. The fact that only server-side codes can be generated also means that other front ends need to be matched to achieve complete development of software products. This is a very traditional and one-sided way of generation.
The other type is that the code is generated through front-end code fragments and components, and the defect is that the customization of the back-end logic is difficult to support, and the back-end function can be realized only through a fixed interface. Moreover, cross-platform support is difficult to realize by the front-end component, and huge code libraries and component libraries need to be maintained to customize complex functions. The multiplexing of code blocks is very difficult because the codes are directly combined together and it is difficult to ensure that they do not conflict with each other and can operate with each other unless sufficient specifications and restrictions are defined, which belongs to a relatively original generation manner.
Still another category is code generation based on configuration and interface, i.e. by defining components and interfaces, exposing configuration options, and allowing the user to combine desired code and functionality through the options. The main drawback is the need to maintain very complex configurations which reduce flexibility, and the user can only combine functions with limited configurations which in turn reduce development efficiency. Maintaining a large number of configurations for a platform may create a large number of branch situations that may have a significant negative impact on maintenance and testing.
The other method is to realize function customization through a form and a trigger or a workflow, the method is severely limited by the limits of the form and the trigger, only simple operation on a data table can be realized, and cross-platform function customization cannot be realized.
In addition, the existing visual code generation function can only be adapted to one or a few platforms such as PC web pages, mobile phone web pages, back ends and the like, and the support for special environments such as popular applets and the like is lacked. Moreover, the platform is not developed in a unified manner, different tools and components are required to be used, even different personnel are required to develop the platform, the communication cost and the development cost cannot be effectively reduced, and the functional consistency of the software on each platform cannot be ensured.
The existing partial visual code generation function only exists as an auxiliary tool, generated codes need to be copied and pasted into a code base of an existing system to run, or need to be imported into the existing system as components, online real-time compiling and running cannot be achieved, and the online real-time compiling and running are very important basic functions for a large-scale SaaS system and a low-code development platform.
Disclosure of Invention
The technical problem to be solved by the invention is as follows: the cross-platform visual code generation device and method solve the problem that most of functional surfaces in the prior art cannot uniformly support cross-platform and multi-scene visual code generation and use.
The technical problem to be solved by the invention is realized by adopting the following technical scheme:
the application provides a cross-platform visual code generation device in a first aspect, the cross-platform visual code generation device comprises a visual controller editing tool, action options and compiling buttons are arranged in a front-end user interface of the visual controller editing tool, each action option in the front-end user interface corresponds to each action, the action options comprise functional actions and system calling actions, a controller is formed by different functional actions and system calling actions, and compiling functions are executed through the compiling buttons to generate codes which can be executed by the controller on different platforms respectively.
A second aspect of the present application provides a cross-platform visualized code generation method, including:
the method comprises the steps that a back-end controller, a webpage controller and a small program controller are respectively combined by adding, deleting and modifying action options and changing the positions of the action options through mouse dragging on a middle front-end user interface of a visual controller editing tool;
and compiling and generating a rear-end controller code executed at a server side, a webpage controller code executed at a webpage side and a small program controller code executed at a small program side by clicking a compiling button respectively.
Preferably, the backend controller, the web page controller and the applet controller each comprise a functional action and a system call action.
More preferably, the functional actions of the backend controller comprise cloud function actions.
More preferably, the functional actions of the web controller and the small program controller each include a function action for processing an initialization state, a page life cycle, a user interaction event.
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 digital operation interface, calling an array operation interface, calling a time-date operation interface, calling an applet interface, and calling a web page interface.
The invention has the beneficial effects that:
according to the cross-platform visual code generation device and method provided by the invention, the controller is used for realizing the visual editing of logic and solving the problem of front-end and back-end cooperation, the problem of inconsistent code formats and styles of teams is eliminated through the action of the controller and the system call, the team management difficulty is effectively reduced, the platform adaptation problem of a code generation tool is solved through the system call, the problems of the functions and the expansibility of the visual code generation tool are solved through the design of the action of the controller and the system call, and the problem of the uniformity of different platforms is realized through the action of the controller.
Drawings
FIG. 1 is a flow diagram of cross-platform visualization code development steps.
FIG. 2 illustrates the application of the visual controller editing tool to a web platform.
FIG. 3 shows a system call classification of a visual controller and the application of the system call to a web page platform.
Fig. 4 is an example of backend controller editing.
FIG. 5 is an example of web page controller editing.
FIG. 6 is an example of a small program controller code folder structure and partial code generated in a visual controller editing tool.
Detailed Description
In order to make the technical means, the original characteristics, the achieved purpose and the efficacy of the invention easy to understand, the invention is further described with reference to the specific drawings.
Referring to fig. 1 to 6, the cross-platform visualized code generation apparatus provided by the present application includes a visualized controller editing tool, an action option and a compiling button are arranged in a front-end user interface of the visualized controller editing tool, each action option in the front-end user interface corresponds to each action, the action option includes a functional action and a system calling action, a controller is formed by different functional actions and system calling actions, and codes executable by the controller on different platforms are generated by executing a compiling function through the compiling button.
The method for generating the cross-platform visual code comprises the following steps:
the method comprises the following steps: and respectively combining a rear-end controller, a webpage controller and a small program controller by adding, deleting and modifying action options and changing the positions of the action options through mouse dragging on a middle front-end user interface of the visual controller editing tool.
Step two: and compiling and generating a rear-end controller code executed at a server side, a webpage controller code executed at a webpage side and a small program controller code executed at a small program side by clicking a compiling button respectively.
The back end controller, the web page controller and the small program controller all comprise functional actions and system calling actions.
The functional actions of the backend controller include cloud function actions.
The functional actions of the web controller and the small program controller comprise function actions for processing an initialization state, a page life cycle and a user interaction event.
The system calling action comprises calling a system interface, calling a database interface, calling a key value pair database, calling a character string operation interface, calling a digital operation interface, calling an array operation interface, calling a time and date operation interface, calling an applet interface and calling a webpage interface.
The visual controller editing tool realizes an editing function through a front end component, a user interface refers to fig. 2, and a user can edit complex logic through visual operation modes such as mouse dragging, clicking operation and the like in the interface without manually writing codes. The controller is composed of a plurality of actions, partial actions can be nested with sub-actions, the visual controller editing tool can enable a user to add, delete and modify the actions in an interface, the position of the action is moved by dragging a mouse, one controller is realized by combining a plurality of actions, and codes of different platforms are generated by clicking and compiling. Each action has attributes such as type, name, unique KEY, parameters of the corresponding type action, remarks and the like. After adding an action, the developer can modify the parameters and notes of the action, as well as adjust the position of the action.
The specific designed actions are listed in table 1, a compiling function is written for each action, and the mutation function is used for generating codes of the corresponding platform. The action type includes functions of defining a function (func), defining a variable (let), judging a condition (if), loop processing (map), and the like, and advanced functions of concurrent execution (current), decorator (decorator), and the like.
TABLE 1 controller action types
The basic user interface of the controller and the drop down menu function of the add action are shown in FIG. 2. The type of the added action is selected through a pull-down option during editing, and the positions of the action option, the action deletion, the action remark addition and the action drag movement can be set after the addition. And for interfaces of other specific platforms, the system calls are used for realizing the interfaces.
The system call action is a special action, and the system call mainly has the following classifications: the system interface (such as printing logs and performing delayed execution), the database interface (performing adding, deleting, modifying and checking operations on the database), the key value-pair database (operating key value-pair database), the character string operating interface, the digital operating interface, the array operating interface, the time and date operating interface, the small program interface and the webpage interface, wherein the number of the interfaces is hundreds to hundreds under each classification, different system calling interfaces can be selected after a user adds a system calling action, different system calling interfaces are selected, the system can automatically display a document of required parameters, the user fills corresponding parameters according to the document, the parameters are filled in a visual form mode, and various input modes such as text, numbers, selection and the like are supported, and variables of statements in the context can also be selected. After adding the system calling action, a user can screen out different system calling types for selection according to the system calling classification and the affiliated platform, after selecting different system calling types, the system can automatically display parameters and documents required by the user, the user fills corresponding options according to the documents, the options are filled in a visual form mode, and declared variables in the context can also be selected. Each system call needs to realize a corresponding compiling function, the compiling function receives platform types and options filled by users, and corresponding codes are compiled during compiling. A large number of system calls need to be designed for different platforms such as backend, web pages, applets to implement the detailed functions of the corresponding platform, and some system calls can also be adapted to multiple platforms.
FIG. 3 embodies part of the system call classification and part of the system call name of the web platform. The system call action in the web platform will only show the system calls that have been adapted to the web platform.
The core of the back-end controller is also composed of function actions, in order to distinguish the functions of the front-end controller, the front-end controller comprises a web controller and a small program controller, and the specific actions are called cloud function (ccode _ func) actions, but share the same visual controller editing tool with the front-end controller. The service end of modern application mainly provides an API (application programming interface) interface (returning JSON/XML/TXT and other format data), and simultaneously supports view functions (returning HTML/picture/video and other contents), events (triggering execution functions through specific scenes) and planning tasks (timing execution functions) so as to meet the requirements of different scenes. The above-mentioned common requirements can be supported by the backend controller. A backend cloud function can be declared through a declaration cloud function (ccode _ func) action, parameters of the action support selection of a function type, the action can be a common cloud function, and can also be set as a view function, an event or a planning task, and different types and options are provided.
In this embodiment, all types of cloud functions are implemented, a common type of cloud function may serve as an API interface to return data in JSON/XML/TXT/CSV format and the like to provide a data interface for a front end or a third party, and a function parameter is a parameter transferred by the front end or the third party; event type cloud functions support triggering execution in specific scenarios. For example, a typical third-party payment needs to be triggered by a notification of a third-party payment platform, after the triggering, the system finds a corresponding event function according to a route and executes the event function, and the parameter of the event function is a parameter of a corresponding event, such as payment data package, and generally no value is returned but a log can be printed through system call. The event type cloud function is also an important tool for system decoupling, and the event type cloud function can be triggered in the common cloud function to realize asynchronous execution. The common cloud function can also set delayed time execution (timeout) through an option, and is used for realizing service logic of delayed time execution, such as logic for automatically canceling an order without payment after a specified time; the scheduled tasks may support scheduled execution at certain times of day, with the scheduled task option being time arrays (times), with no parameters or return values for the scheduled tasks, but may be printed to the journal system via internal system calls.
The cloud functions, events and planning tasks in the embodiment are determined to be unique through unique names of the cloud functions, the events and the planning tasks, and the cloud functions with the corresponding names are called by the platform in a URL routing mode in the system; directly selecting a cloud function with a corresponding name from a front-end controller to call; triggering a cloud function with a specific name through an event in a specific scene; and the system scheduler (beat) automatically executes the scheduled tasks according to the time.
In order to effectively and visually manage the cloud functions, the cloud functions can be managed in a grouping mode through a cloud function grouping action (ccode _ func _ group), and cloud function child nodes can be added below the cloud function grouping action and can only be added below the cloud function grouping action.
In the cloud function, common back-end logic can be realized by acquiring function parameters (part of types are empty if no parameters exist), then performing system calls such as variable declaration, condition judgment, circulation and the like, database addition, deletion, modification and check and the like, and finally directly returning to JSON data structures or formats such as HTML/XML/TXT and the like (part of types do not need to be returned). The back-end controller developed in the third step can be directly called by the webpage controller and the small program controller after being generated and operated in the sixth step.
One controller can comprise a plurality of cloud functions and cloud function groups of different types, and one large application can establish a plurality of controllers to realize different parts of service requirements as long as the names of the cloud functions do not conflict. A large application may consist of a dozen controllers, hundreds of groupings of cloud functions, thousands of cloud functions, and tens of thousands of actions.
Fig. 4 shows an editing interface of the cloud function controller according to this embodiment, an outermost action is a cloud function group, a plurality of cloud functions are nested inside, and the cloud functions can set information such as names, parameters, remarks, and the like; business logic is realized in each cloud function, and part of the functions have return values.
The webpage controller is used for controlling data displayed by a webpage interface and processing user interaction events, the webpage controller is composed of functions, a plurality of functions can be added into one webpage controller, and different functions can process initialization states, the life cycle of a page and the user interaction events, so that all functions of a front-end webpage are realized.
The present embodiment defines the page state by an initialization state function action (func) of a special name (onCreateState), and the initialization state of the component can be declared by a declaration state action (set) in the initialization state function, the initialized state is used for the initial rendering of the page, and the return value of the initialization state function is used as the initial state of the page. In addition, the component display time operation is controlled through the function action (func) with the name of onShow, the component unloading time operation is controlled through the function action (func) with the name of onHide, and other types of page life cycle events are controlled through other names. For a user interaction event, such as a user clicking a certain button in a page, a self-defined event function (func) can be added, and then the user can click the button to execute the self-defined event in the corresponding function of the corresponding component binding controller. The state of the front-end interface can be modified in all functions (except onCreateState) through a modify state (commit) action, so that the dynamic update of the web interface is realized.
The method comprises the steps of obtaining parameters of functions and adding a plurality of actions in each function, realizing logic control by defining functions such as variables, assigning values, judging conditions and circulating, and realizing service logic by calling a webpage interface, a database interface and a back-end cloud function interface.
Fig. 5 shows an example of an editing interface of the web page controller in this embodiment, in the example, the state value state is initialized by the onCreateState function action, the function 1 is called in the onShow lifecycle function, the function 1 bit state value state is added with 1, and the UI interface display count in the initialization rendering is 2; when the user clicks the button to execute the function 1 in association, the status value state is added with 1, and the UI interface displays that the count is 3.
The small program controller is used for controlling the logic of small program components and pages in the small program, the flow of the small program controller is developed through the visual controller to be similar to that of a webpage controller, the small program controller is composed of functions, a plurality of functions can be added into one small program controller, and different functions can process the initialization state, the life cycle of the pages and user interaction events, so that all functions of the small program controller are realized. The embodiment solves the problem of editing consistency of the two platforms through the controller, and finally generates different codes according to different platforms.
In the embodiment, firstly, the applet page state is defined through the initialized state function action (func) of a special name (onCreateState), the page life cycle is controlled through the life cycle function names of onShow/onHide and the like, and the logic control of the user interaction event is realized through the self-defined event bound to the component in the page. Parameters of the applet events are not consistent with the web page controller, and parameters of the functions can be acquired through event variables in corresponding events.
The state updating action of the small program is consistent with the webpage, a modified state (commit) interface is used, but the finally compiled generated code calls a setData interface of the small program platform to modify the interface.
And generating and operating a rear-end controller, wherein a controller developed by using a visual controller editing tool needs to be finally executed by generating a server-side code. In this embodiment, the compiler for implementing the back-end controller supports compiling the controller into a code string of a JavaScript (node.js) on the server, and the code generation and compiling steps are as follows: setting a global variable actions before compiling, circulating all actions, and generating different codes according to different action types; if the nested action is met, such as a function statement, the sub-action is embedded into the sub-action after the sub-action is compiled in a repeated loop; if different types of system calling actions are met, generating corresponding codes according to the system calling actions; actions. ccode _ func1 is set to function body if function declaration is encountered, copy function declaration to attributes of actions, such as function name ccode _ func 1; finally adding an export default actions to the generated code to derive global variable actions. And finally, obtaining a node.js code character string of the ESM specification, and storing the node.js code character string into a field of a database TEXT type.
When a web controller, a small program controller or a third party directly requests a cloud function, the system finds a function corresponding to the name of the corresponding controller according to the route, takes out a corresponding controller code from the database, obtains a controller return value (actions) through a vm2 module of node.js in a safe execution code in a sandbox, obtains a function object actions.ccode _ func1 according to a function name such as ccode _ func1, and returns the result obtained by executing the function to a function caller. The hot spot cache technology (lru cache) ensures that the operation of fetching the code is not required to be repeatedly executed when the same function is repeatedly called so as to optimize the performance of the system, and all cloud functions of the same controller share the same controller without repeatedly fetching the code. The function execution has no side effect, and the same function call can not conflict with each other for a plurality of times. Js servers can be deployed in clusters to support large-scale concurrent access.
The embodiment realizes that the visual controller action is generated by compiling to a node. js (ESM) code, and dynamic execution is realized at a server side.
The compiling and generating steps of the webpage controller are as follows: after clicking a compiling button of the controller, a user executes a compiling function, the compiling function circulates all actions (the first-level action is a function func), different codes are generated according to different action types, and if nested actions such as function statement are met, the sub-actions are repeatedly compiled and then embedded into the sub-actions; if different types of system calling actions are met, generating corresponding codes according to the system calling actions; for a modify state action (set), it would map to a state modify operation of the front end framework, such as the $ set method of Vue or the setState method of React. The target finally generated is a JavaScript (ES2015) code file. The partial actions may generate different codes according to different compiled targets. Part of the system call will also generate different code for different platforms.
When a user accesses a webpage, all controller codes are extracted according to all components in the webpage, the controller codes are combined into a JavaScript file, the JavaScript file is automatically uploaded to the CDN and cached, it is guaranteed that only the first access needs to be carried out to optimize performance, and the webpage loads the JavaScript codes through script tags.
When the webpage is loaded, all the components execute JavaScript codes, all the controllers are circulated, for each controller, an initialization state (onCreateState) function is executed firstly, a rendering state is initialized according to a return value of the onShow function, then the onShow function is executed to execute actions during loading, a back-end cloud function can be called in the onShow function to acquire data, or the page state is directly modified, and after the state is modified, the system automatically updates the interface according to state change. After the pages can be interacted, a user operating a corresponding component in the web page can trigger a corresponding event action, for example, the user clicks a certain button, finds a corresponding function name according to an event name bound by the button component, calls the found function by using a corresponding event parameter, and pops up a prompt or continues to modify the state of the action in the function. The visualization controller completely realizes the operation and the control of the page rendering and interaction on the webpage.
In this embodiment, the MVVM-type front-end framework Vue is used to implement dynamic binding of page states and interfaces, and similar frameworks, such as fact, can also be used to achieve the same effect. Because the visualization controller is framework independent, the visualization controller implements an update interface using a modify status action (commit), which may be compiled as either the $ set method of Vue or the setState method of fact.
The compiling generation step of the small program controller comprises the following steps: clicking a compiling button on a controller editing interface, executing a compiling function, firstly declaring action empty objects by the compiling function, compiling all actions (the first-level action is a function func) of a function loop, generating different codes according to different action types, and if a nested action such as a function declaration is met, repeatedly circularly compiling the sub-actions and then embedding the sub-actions; if a function declaration is encountered, copying the function as an attribute to an actions object; if different types of system calling actions are met, generating corresponding codes according to the system calling actions; the compiled function within the partial action generates applet-specific code from the applet platform. The difference between the two other platforms is that the generation target has two formats, one is in JavaScript (ES5) format, and the other is in the WXS format of the applet. And after compiling, obtaining an applet code character string of the controller, and storing the applet code character string in a TEXT type field of a database.
When an applet is generated, firstly all applet pages are traversed, then all controller codes of each page are traversed, all controllers in one page are combined into an index. Fig. 6 illustrates an example of the file structure and partial controller code of the finally generated applet, which clearly shows that the controller compiled code is in an index.js file under each page folder, with multiple controller codes in each file; each controller takes actions { } as an initial variable, and then assigns functions, such as onCreateState and onShow, step by step to form the running object of the applet. Js also has a portion of the common framework code at each index for the proxy applet function and scheduling the execution of the controller code.
After the small program is started, the onShow function is executed firstly, the parameter is the query parameter of the current page, the internal actions are sequentially operated, and if some actions modify the interface state (commit), the setData mapped to the small program calls to realize the updating of the interface. And the user clicks a corresponding component in the applet to trigger execution of a corresponding event function, the parameters are click event objects, actions in the function are executed in sequence, and if the actions modify the interface state (commit), the UI interface is updated. Thus, the running and interaction of the small program are realized through the code generated by the visual controller.
The invention realizes the logic visual editing through the visual dragging editing controller. Compared with manual code compiling, the advantages of visual dragging are obvious, and the positions of functions and actions can be adjusted visually through the visual dragging; a large number of actions can be quickly copied by clicking addition, copy and paste, cloning and the like without worrying about format problems or logic confusion.
The invention eliminates the problem of inconsistent code formats and styles of the team through standard actions and system calls, and effectively reduces the difficulty of team management. Meanwhile, the quality of the system can be effectively improved only by a core team maintaining the editing tools, actions and system calls of the controller, and other developers can develop high-quality software only by using standard actions and system calls.
The invention solves the platform adaptation problem of the code generation tool through the system calling function, a plurality of visual code generation tools are only suitable for specific scenes, and the invention compiles the action compiling function and the system calling compiling function under different platforms into codes of different platforms through the action of the unified controller, thereby skillfully solving the adaptation problem of a plurality of platforms.
The invention solves the problems of the function and the expansibility of the visual code generating tool through the action design and the system calling design, the function of the visual code generating tool can be expanded through newly added action or newly added system calling, and the cross-platform capability of the visual code generating tool can be expanded through newly added system calling or newly added platforms.
The invention realizes the uniformity problem of different platforms through the action of the controller, developers can use consistent visual action to develop the function of cross-platform by extracting common logic actions such as functions, statements and assignments, condition judgment and circulation statements and system calls (such as a back-end interface, a small program interface and a webpage interface) specific to each platform, and special functions of each platform can be realized through the system calls, thereby greatly reducing the labor cost of software development.
According to the invention, through the unified controller editing tool, the traditional software development needs the front-end personnel and the rear-end personnel to fully communicate the requirements and the butt joint interface, and through the unified rear-end controller, the webpage controller and the small program controller, the same person can automatically realize that the development of the rear-end controller is directly called by the webpage controller or the small program controller, so that the communication cost is greatly reduced, and the software production efficiency is improved.
The invention solves the problem of logic compiling of the applet end through cross-platform compiling, the applets have difference relative to the web page, the invention realizes that the same action is seamlessly adapted to two platforms through the mode that the same action or system call is compiled into different codes on the web page and the applets, and the development cost and the maintenance cost are greatly reduced. For example, in the system call pop-up prompt, the webpage platform can be compiled into an alert () function call of a browser, and in the applet, the webpage platform can be compiled into a showModal () function call of a corresponding platform; the modified status (commit) in the web page would map to the setData interface of the applet.
The invention effectively solves the problem of real-time compiling and real-time integrating operation of the codes by generating the codes in the sandbox in real time through the back end, and has obvious advantages compared with the condition that the codes generated by some visual code generation tools still need to be manually integrated into the system. For the SaaS platform and the low-code development platform, the real-time code editing and running improves the demand response capability and accelerates the problem processing speed.
The foregoing illustrates and describes the principles, general features, and advantages of the present invention. It will be understood by those skilled in the art that the present invention is not limited to the embodiments described above, and that various changes and modifications may be made without departing from the spirit and scope of the invention as defined in the appended claims. The scope of the invention is defined by the appended claims and equivalents thereof.
Claims (6)
1. A cross-platform visual code generation device is characterized by comprising a visual controller editing tool, wherein action options and compiling buttons are arranged in a front-end user interface of the visual controller editing tool, each action option in the front-end user interface corresponds to each action, the action options comprise functional actions and system calling actions, a controller is formed by different functional actions and system calling actions, and compiling functions are executed through the compiling buttons to generate codes which can be executed by the controller on different platforms respectively.
2. A cross-platform visualization code generation method, comprising:
the method comprises the steps that a back-end controller, a webpage controller and a small program controller are respectively combined by adding, deleting and modifying action options and changing the positions of the action options through mouse dragging on a middle front-end user interface of a visual controller editing tool;
and compiling and generating a rear-end controller code executed at a server side, a webpage controller code executed at a webpage side and a small program controller code executed at a small program side by clicking a compiling button respectively.
3. The cross-platform visualization code generation method of claim 2, wherein the backend controller, the web controller, and the applet controller each comprise a functional action and a system call action.
4. The cross-platform visualization code generation method of claim 3, wherein the functional actions of the backend controller comprise cloud function actions.
5. The cross-platform visualized code generation method according to claim 3, characterized in that said functional actions of said web controller and said applet controller each comprise a function action for handling initialization state, page life cycle, user interaction events.
6. The method of claim 3, wherein the system call action comprises calling a system interface, calling a database interface, calling a key-value pair database, calling a string operation interface, calling a numeric operation interface, calling an array operation interface, calling a time-date operation interface, calling an applet interface, and calling a web page interface.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111558547.XA CN114237583A (en) | 2021-12-20 | 2021-12-20 | Cross-platform visual code generation device and method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111558547.XA CN114237583A (en) | 2021-12-20 | 2021-12-20 | Cross-platform visual code generation device and method |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114237583A true CN114237583A (en) | 2022-03-25 |
Family
ID=80758791
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111558547.XA Pending CN114237583A (en) | 2021-12-20 | 2021-12-20 | Cross-platform visual code generation device and method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114237583A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114860257A (en) * | 2022-05-24 | 2022-08-05 | 李佳璘 | Development method for embedding front-end language and back-end language into each other |
| CN117215585A (en) * | 2023-11-09 | 2023-12-12 | 浪潮通用软件有限公司 | Visual description and dynamic control method and device for interface component attribute |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110258595A1 (en) * | 2010-04-15 | 2011-10-20 | Clevenger Nathan J | Cross-Platform Application Framework |
| CN106293664A (en) * | 2015-05-27 | 2017-01-04 | 交通银行股份有限公司 | Code generating method and device |
| CN106557314A (en) * | 2016-10-19 | 2017-04-05 | 深圳智慧林网络科技有限公司 | Applied software development method and device |
| CN109976732A (en) * | 2017-12-28 | 2019-07-05 | 重庆南华中天信息技术有限公司 | Identical programming model can be mapped to the method and system of different language program in machine code |
-
2021
- 2021-12-20 CN CN202111558547.XA patent/CN114237583A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110258595A1 (en) * | 2010-04-15 | 2011-10-20 | Clevenger Nathan J | Cross-Platform Application Framework |
| CN106293664A (en) * | 2015-05-27 | 2017-01-04 | 交通银行股份有限公司 | Code generating method and device |
| CN106557314A (en) * | 2016-10-19 | 2017-04-05 | 深圳智慧林网络科技有限公司 | Applied software development method and device |
| CN109976732A (en) * | 2017-12-28 | 2019-07-05 | 重庆南华中天信息技术有限公司 | Identical programming model can be mapped to the method and system of different language program in machine code |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114860257A (en) * | 2022-05-24 | 2022-08-05 | 李佳璘 | Development method for embedding front-end language and back-end language into each other |
| CN117215585A (en) * | 2023-11-09 | 2023-12-12 | 浪潮通用软件有限公司 | Visual description and dynamic control method and device for interface component attribute |
| CN117215585B (en) * | 2023-11-09 | 2024-03-08 | 浪潮通用软件有限公司 | Visual description and dynamic control method and device for interface component attribute |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| TWI808393B (en) | Page processing method, device, apparatus and storage medium | |
| US8561048B2 (en) | Late and dynamic binding of pattern components | |
| Rädle et al. | Codestrates: Literate computing with webstrates | |
| CN109597814B (en) | Online rapid delivery system of background management information system | |
| US20210034336A1 (en) | Executing a process-based software application in a first computing environment and a second computing environment | |
| CN104484189B (en) | The structure and design method of a kind of application interface | |
| WO2015078343A1 (en) | Development method for web development system, and web development system | |
| US11093242B2 (en) | Automatically mapping data while designing process flows | |
| US8296721B2 (en) | Template-based software development | |
| AU2018201198A1 (en) | Collaborative design systems, apparatuses, and methods | |
| US8156469B2 (en) | Single composition of pattern modules | |
| US7734560B2 (en) | Loose coupling of pattern components with interface regeneration and propagation | |
| US20030093420A1 (en) | Method and system for retrieving sharable information using a hierarchically dependent directory structure | |
| JP2006107478A (en) | Extensible flamework for designing work flow | |
| CN114064024B (en) | Method, apparatus, device, storage medium and program product for developing micro-application | |
| CN114237583A (en) | Cross-platform visual code generation device and method | |
| US11733973B2 (en) | Interactive graphic design system to enable creation and use of variant component sets for interactive objects | |
| US12106077B2 (en) | Process flow builder for extensible web component sequences | |
| KR102397494B1 (en) | Low code web development and operating system, and service method using of it | |
| US11797638B2 (en) | Aggregate component for parallel browser-initiated actions | |
| WO2022146714A9 (en) | System and method for real-time, dynamic creation, delivery, and use of customizable web applications | |
| CN115826963A (en) | Process event development multiplexing method and system based on low-code development platform | |
| US20140095982A1 (en) | Systems, Servers, and Methods for Managing Websites | |
| US12008353B2 (en) | Parsing tool for optimizing code for deployment on a serverless platform | |
| CN111949267B (en) | UI front end generation method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |