Low-code script adding method and device, equipment and medium

Abstract

The invention discloses a low-code script adding method, device, equipment and medium, and relates to the technical field of computers.The method comprises the following steps that based on a low-code platform, components in a component library are dragged into canvas, and the added components are arranged in the canvas; adding one or more scripts to the component needing to be personalized, compiling the scripts added in the component in the script editor to obtain the component containing script content, and storing the component after arranging the component to form an interface; when a browser accesses an interface, whether a script exists in a current component or not is judged, when the component has the script, the script is analyzed, the component is loaded after the script is analyzed, when the component does not have the script, the component is directly loaded, and rendering display of the interface is carried out after the component is loaded. The method comprises the following steps of: dragging a component from a component library into a canvas, arranging the component, adding one or more scripts for the component needing to be personalized, compiling the scripts, judging whether the current component has the script or not when a browser accesses an interface, analyzing the script when the component has the script, and loading the component after the script is analyzed. And when the component does not have the script, the component is directly loaded, and interface rendering display is performed after the component is loaded, so that the script is added at a low code to achieve different functions.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and particularly to a method, device, equipment and medium for adding scripts with low code. Background Art

[0002] With the rapid development of computer front-end technology, low-code technology has been widely used in all walks of life; the low-code platform realizes the way of dragging components and configuring style attributes through a visual interface, enabling users to easily create the required interface effects; after the configuration is completed, the system generates a corresponding schemajson file, and the low-code rendering engine is responsible for rendering the interface.

[0003] Low code brings many advantages; one is that it reduces the development threshold, which does not require in-depth R & D knowledge, and the required interface can be obtained through visual orchestration, enabling more people to participate in interface design; the other is that it improves efficiency, which accelerates the project delivery cycle, reduces the time and resource costs of traditional coding, and makes the development process more rapid and efficient.

[0004] However, low-code technology also has its limitations, especially when dealing with projects with unique features; for example, for projects such as bank marketing systems that require personalized design, each marketing activity requires unique interface interactions and UI styles, and these features are difficult to achieve through general component dragging and interface replacement; therefore, the underlying logic of low code limits its flexibility in specific and personalized projects.

[0005] Therefore, when the existing technology realizes a unique interface, it often also requires a complex process to implement its functions, and the efficiency during the execution process is relatively low, affecting actual activities. Summary of the Invention

[0006] The embodiments of the present invention provide a method, device, equipment and medium for adding scripts with low code, which can solve the problem of relatively low efficiency during the execution process in the existing technology.

[0007] The embodiments of the present invention provide a method for adding scripts with low code, including the following steps:

[0008] Drag the components in the low-code platform material library to the canvas of the low-code platform, and orchestrate the added components on the canvas;

[0009] Add one or more scripts to the components that need to be personalized after being orchestrated on the canvas, and write the scripts added to the components in the script editor to obtain components containing script content, and save the interface after orchestrating the components.

[0010] Browser access interface, determine whether the current component has a script. When the component has a script, parse the script. After the script parsing is completed, load the component. When the component has no script, directly load the component. After the component is loaded, perform the rendering and display of the interface to achieve low-code addition of scripts.

[0011] Preferably, the low-code platform includes: an editor, a canvas, a material library, a rendering engine, and a schema file;

[0012] The editor is the core function of the low-code platform, which includes feeding, orchestration, component configuration, and canvas rendering;

[0013] The canvas is the area in the editor for hosting the current component;

[0014] The material library is the component that needs to be dragged over on the editor, and the component is the part that is displayed on the final interface;

[0015] The rendering engine is the schema file edited in the editor, which is rendered to the interface by loading the component;

[0016] The schema file is the JSON file saved after being edited by the editor.

[0017] Preferably, dragging the component in the material library to the canvas of the low-code platform includes the following steps:

[0018] Set up a material library, which includes multiple components of different types required;

[0019] Drag the component in the material library to the canvas of the low-code platform and be able to display it on the canvas in the low-code platform.

[0020] Preferably, obtaining the component containing script content includes the following steps:

[0021] Add one or more scripts to the component that needs to be personalized. The script is an executable file written according to the code using a programming language;

[0022] Define variables and elements for the scripts added to the component in the script editor of the low-code platform to obtain the component containing script content.

[0023] Preferably, parsing the script includes the following steps:

[0024] Obtain the component configuration script and store the script in an array;

[0025] Encapsulate each script in the current component into a function, and its data type is a string;

[0026] Concatenate all the scripts of the current component into a function, whose data type is string;

[0027] Mount the concatenated function to the object of the browser, and convert the script string into an executable function;

[0028] The current script function inherits the corresponding component and registers the component globally.

[0029] An embodiment of the present invention also provides a low-code script addition device, including:

[0030] A component arrangement module, configured to drag the components in the low-code platform material library to the canvas of the low-code platform, and arrange the added components in the canvas;

[0031] A script addition module, configured to add one or more scripts to the components that need to be personalized after being arranged in the canvas, and write the scripts added to the components in a script editor to obtain components containing script content, and save the arranged components to form an interface;

[0032] A script processing module, when the browser accesses the interface, determines whether the current component has a script. When the component has a script, it parses the script, loads the component after the script parsing is completed, and when the component has no script, it directly loads the component. After the component is loaded, the interface is rendered and displayed to implement low-code script addition.

[0033] An embodiment of the present invention also provides an electronic device, including a memory and a processor;

[0034] The memory is used to store a computer program;

[0035] The processor, when executing the computer program stored in the memory, implements the steps of the method for adding a script with low code as described above.

[0036] An embodiment of the present invention also provides a computer-readable storage medium, configured to store a computer program, and when the computer program is executed by a processor, it implements the steps of the method for adding a script with low code as described above.

[0037] An embodiment of the present invention provides a method, device, equipment and medium for adding a script with low code. Compared with the prior art, its beneficial effects are as follows:

[0038] The present invention adds one or more scripts to a component that needs to be personalized by dragging the component from the component library to the canvas of the low-code platform and arranging the components, and writes the added scripts to obtain a component containing the script content. After arranging the components and saving them to form an interface, when the browser accesses the formed interface, it is judged whether the current component has a script. When the component has a script, the script is parsed and the component is loaded after completion. When the component has no script, the component is directly loaded. After the component is loaded, the interface is rendered and displayed, realizing the addition of scripts in low code to achieve different functions.

[0039] Moreover, the present invention realizes the extension of the use of components without modifying the components, improves the flexibility of the components, and enables them to be flexibly applied to short-term personalized designs of different types. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] Figure 1 It is a schematic overall flow chart of a method, device, equipment and medium for adding scripts with low code provided by an embodiment of the present invention;

[0041] Figure 2 It is a schematic structural diagram of configuring a script to execution for a method, device, equipment and medium for adding scripts with low code provided by an embodiment of the present invention;

[0042] Figure 3 It is a schematic algorithm flow chart of parsing a script for a method, device, equipment and medium for adding scripts with low code provided by an embodiment of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0043] In order to make the above objects, features and advantages of the present invention more obvious and understandable, the following detailed description of the specific embodiments of the present invention will be given with reference to the accompanying drawings. Many specific details are set forth in the following description in order to fully understand the present invention. However, the present invention can be implemented in many other ways different from those described herein, and those skilled in the art can make similar improvements without departing from the connotation of the present invention. Therefore, the present invention is not limited by the specific embodiments disclosed below.

[0044] See Figures 1 to 3 , an embodiment of the present invention provides a method for adding scripts with low code, specifically providing a low-coupling and pluggable component for dynamically configuring scripts and dynamically parsing and executing scripts, so as to expand the capabilities of the component and thus realize the personalized requirements of the component.

[0045] The specific steps to implement the technical solution of the present invention are as follows: In the low-code platform, the low-code platform includes an editor, a canvas, a material library, a rendering engine, and a schema file. The requirements of any component can be extended through dynamic script configuration. The script content can be a call method, an event, or a function method that rewrites the original component.

[0046] Its editor is the core function of the low-code platform, including feeding (components), orchestration, component configuration, canvas rendering, etc.

[0047] Its canvas is the area in the editor used to carry the current components.

[0048] Its rendering engine is the schema file edited in the editor, which is rendered to the interface by dynamically loading components.

[0049] Its material library is the components that need to be dragged over on the editor, and the components are the products shown on the final interface.

[0050] Its schema file is the JSON file saved after being edited by the editor.

[0051] Implementing the above solution includes the following steps:

[0052] Step 1: Drag the components in the component library in the editor to orchestrate the interface.

[0053] Step 2: Define the scripting rules as the front-end language of the current technology stack, for example, define it as the script writing method in Vue.

[0054] Step 3: Select the component and click to add a script. Multiple scripts can be added to one component.

[0055] Step 4: Write the script.

[0056] Step 5: Save the content of the editor after writing the script.

[0057] Step 6: Access the configured interface in the browser.

[0058] Step 7: Before loading the component, the rendering engine determines whether the current component has a script. If so, script injection is performed; otherwise, the component is loaded normally.

[0059] Step 8: The interface is rendered and displayed.

[0060] The specific steps for the add script step in Step 7 are as follows:

[0061] ① Standardize the script data.

[0062] ② Mount it to the browser object.

[0063] ③ Convert the script string into an executable function.

[0064] ④ The current script inherits the component it is in.

[0065] ⑤ Synchronously register the component and the script globally.

[0066] Such asFigure 2 As shown in the figure, it is a schematic structural diagram of the configuration script to execution of a method, device, equipment and medium for adding scripts with low code provided by an embodiment of the present invention. Specifically, it includes: a visual low-code editor, a material library, a rendering engine, a schema file, an attribute editor, and a canvas. Specifically:

[0067] ① Drag any component in the material library to the canvas through the material library module.

[0068] ② Configure the relevant attributes of the component (such as length, width, color, font, etc.) through the attribute editor.

[0069] ③ Render the components in the canvas through the rendering engine.

[0070] ④ After the arrangement is completed, a schema file is formed. After saving the file, use the rendering engine to preview the current page function in the browser.

[0071] ⑤ In step ②, when setting the attribute editor, open the add script attribute editor, save the current script after adding the script, and then save the content of the overall arrangement.

[0072] As Figure 3 shown in the figure, it is a schematic algorithm flow diagram of parsing scripts of a method, device, equipment and medium for adding scripts with low code provided by an embodiment of the present invention. Its image comparison algorithm is specifically as follows:

[0073] One: Standardize the script data and store it in an array, with the structure: [{name: "script name", id: "unique script code", scriptContent: "script content"}].

[0074] Two: Package the content of each script in the array into a function format as follows:

[0075] function(vm){

[0076] var options=function(vm){script content}(vm)

[0077] return options

[0078] }

[0079] Three: Concatenate the scripts into a string in the following format:

[0080] function(vm){

[0081] return[function(vm){

[0082] var options=function(vm){

[0083] Script content

[0084] }](vm)

[0085] return options

[0086] },function(vm){

[0087] var options=function(vm){

[0088] Script content

[0089] }](vm)

[0090] return options

[0091] }].map(function(fn){

[0092] return fn(vm)

[0093] })

[0094] }

[0095] IV: Mount it to window.scriptObj['Current Component ID'].

[0096] V: Convert the script string into an executable function.

[0097] Method 1: const myFunction = new Function(window.scriptObj['Current Component ID']).

[0098] myFunction().

[0099] Method 2: window.eval(window.scriptObj['Current Component ID']).

[0100] VI: The current script inherits the component it is in, e.g., A.extend(B).

[0101] VII: Synchronously register the component and the script to Vue.

[0102] For a script, it is an executable file written in a specific descriptive language according to a certain format; it is also called an extended language or a dynamic language. It is a programming language used to control software applications, usually saved as text and only interpreted or compiled when called. When a script is executed, the computer performs a series of operations, which may only involve Illustrator or may also involve other applications such as word processing, spreadsheet, and data management programs. Illustrator supports multiple script environments (such as Microsoft Visual Basic, AppleScript, and JavaScript, etc.) and includes standard script combinations.

[0103] Scripting languages (such as JavaScript, VBscript, etc.) are between HTML and programming languages such as C, C++, Java, and C#. HTML is usually used to format and link text, while programming languages are usually used to issue a series of complex instructions to the machine.

[0104] A scripting language is an interpreted language, such as Python, JavaScript, Script, etc. It cannot be compiled into binary code like C / C++. It exists in the form of an executable file. A scripting language does not require compilation and can be used directly. The interpreter is responsible for interpretation.

[0105] The program code is both a script program and the final executable file. Scripting languages can be divided into independent types and embedded types. Independent scripting languages are completely dependent on the interpreter when they are executed, while embedded scripting languages are usually embedded and used in programming languages (such as C, C++, VB, Java, etc.).

[0106] The embodiment of the present invention also provides a device for adding a low-code script, including:

[0107] A component orchestration module for dragging components in the low-code platform material library to the canvas of the low-code platform and orchestrating the added components on the canvas.

[0108] A script addition module for adding one or more scripts to the components that need to be personalized after being orchestrated on the canvas and writing the added scripts in the components in a script editor to obtain components containing script content. After orchestrating the components, save them to form an interface.

[0109] A script processing module. When the browser accesses the interface, it determines whether the current component has a script. When the component has a script, it parses the script and loads the component after the script parsing is completed. When the component has no script, it directly loads the component. After the component is loaded, the interface is rendered and displayed to achieve low-code script addition.

[0110] An embodiment of the present invention further provides an electronic device, including a memory and a processor.

[0111] The memory is used to store a computer program.

[0112] When the processor is used to execute the computer program stored in the memory, the steps of a method for adding a script with low code as described above are implemented.

[0113] An embodiment of the present invention further provides a computer-readable storage medium for storing a computer program, and when the computer program is executed by a processor, the steps of a method for adding a script with low code as described above are implemented.

[0114] The above-described embodiments merely represent several implementation manners of the present invention. The description is relatively specific and detailed, but it should not be construed as a limitation on the scope of the invention patent. It should be noted that for those of ordinary skill in the art, without departing from the concept of the present invention, several modifications and improvements can still be made, and these all belong to the protection scope of the present invention. Therefore, the protection scope of the present invention patent shall be subject to the appended claims.

Claims

1. A method for adding scripts with low code, characterized in that, It includes the following steps: Drag the components in the low-code platform material library to the canvas of the low-code platform, and arrange the added components on the canvas; Add one or more scripts to the components that need to be personalized after being arranged on the canvas, and write the scripts added to the components in the script editor to obtain components containing script content. After arranging the components, save them to form an interface; Access the interface through a browser, determine whether the current component has a script. When the component has a script, parse the script, and load the component after the script parsing is completed. When the component has no script, directly load the component. After the component is loaded, render and display the interface to implement adding scripts in low-code.

2. The method for adding a script with low code according to claim 1, wherein The low-code platform includes: an editor, a canvas, a material library, a rendering engine, and a schema file; The editor is the core function of the low-code platform, which includes feeding, arranging, component configuration, and canvas rendering; The canvas is the area in the editor for hosting the current components; The material library is the components that need to be dragged over on the editor, and the components are the parts displayed on the final interface; The rendering engine is the schema file edited in the editor, which is rendered to the interface by loading components; The schema file is the JSON file saved after being edited by the editor.

3. A method for adding a script with low code according to claim 1, characterized in that The step of dragging the components in the material library to the canvas of the low-code platform includes the following steps: Set up a material library, which includes multiple components of different types required; Drag the components in the material library to the canvas of the low-code platform and can be displayed on the canvas in the low-code platform.

4. A method for adding a script with low code according to claim 1, characterized in that, The step of obtaining components containing script content includes the following steps: Add one or more scripts to the components that need to be personalized. The scripts are executable files written in a programming language according to the code; Define variables and elements for the scripts added to the components in the script editor of the low-code platform to obtain components containing script content.

5. A method for adding a script with low code according to claim 1, characterized in that The step of parsing the script includes the following steps: Obtain the component configuration script and store the script in an array; Encapsulate each script in the current component into a function, and its data type is a string; Concatenate all the scripts of the current component into a function, and its data type is a string; Mount the concatenated function to the object of the browser and convert the script string into an executable function; The current script function inherits its corresponding component and registers the component globally.

6. A device for adding scripts with low code, characterized in that, It includes: A component arrangement module, which is used to drag the components in the low-code platform material library to the canvas of the low-code platform and arrange the added components on the canvas; A script addition module, which is used to add one or more scripts to the components that need to be personalized after being arranged on the canvas, and write the scripts added to the components in the script editor to obtain components containing script content. After arranging the components, save them to form an interface; A script processing module, a browser access interface, determines whether there is a script in the current component. When there is a script in the component, the script is parsed, and after the script parsing is completed, the component is loaded. When there is no script in the component, the component is directly loaded. After the component is loaded, the interface is rendered and displayed to implement low-code script addition.

7. An electronic device, characterized in that, It includes: A memory and a processor; The memory is used to store computer programs; When the processor executes the computer programs stored in the memory, it implements the steps of a method for adding a script with low code as described in any one of claims 1 to 5.

8. A computer-readable storage medium is used to store computer programs, and when the computer programs are executed by a processor, it implements the steps of a method for adding a script with low code as described in any one of claims 1 to 5.

Images