A method, apparatus, device, and medium for adding low-code scripts

Abstract

This invention discloses a method, apparatus, device, and medium for adding scripts in low-code, relating to the field of computer technology. The method includes the following steps: Based on a low-code platform, dragging and dropping components from a component library onto a canvas, and arranging the added components on the canvas; adding one or more scripts to components requiring customization, and writing the scripts within the components in a script editor to obtain components containing script content; arranging the components and saving them to form an interface; when accessing the interface in a browser, determining whether the current component has a script; if the component has a script, parsing the script and loading the component after parsing; if the component does not have a script, loading the component directly; and rendering and displaying the interface after the component is loaded. This invention achieves different functionalities by dragging and dropping components from a component library onto a canvas, arranging components, adding one or more scripts to components requiring customization, writing the scripts, determining whether the current component has a script when accessing the interface in a browser, parsing the script and loading the component after parsing; and rendering and displaying the interface after the component is loaded.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a method, apparatus, device, and medium for adding scripts in low code. Background Technology

[0002] With the rapid development of computer front-end technology, low-code technology has been widely used in various industries. Low-code platforms enable users to easily create the desired interface effects by dragging and dropping components and configuring style attributes through a visual interface. After configuration, the system generates the corresponding schemajson file, and the low-code rendering engine is responsible for rendering the interface.

[0003] Low-code offers many advantages; firstly, it lowers the development threshold, requiring no in-depth R&D knowledge, and the required interface can be obtained through visual orchestration, allowing more people to participate in interface design; secondly, it improves efficiency, accelerating project delivery cycles, reducing the time and resource costs of traditional coding, and making the development process faster and more efficient.

[0004] However, low-code technology also has its limitations, especially when dealing with projects with unique features. For example, for projects that require personalized design, such as bank marketing systems, each marketing campaign requires unique interface interactions and UI styles. These features are difficult to achieve through general drag-and-drop components and interface replacements. Therefore, the underlying logic of low-code limits its flexibility in specific, personalized projects.

[0005] Therefore, existing technologies often require complex processes to implement unique interfaces, resulting in low efficiency and impacting actual activities. Summary of the Invention

[0006] This invention provides a method, apparatus, device, and medium for adding scripts in low code, which can solve the problem of low efficiency during execution in the prior art.

[0007] This invention provides a low-code method for adding scripts, comprising the following steps:

[0008] Drag and drop components from the low-code platform's material library onto the low-code platform's canvas, and then arrange the added components on the canvas.

[0009] Add one or more scripts to components that need to be personalized after being arranged in the canvas, and write the scripts added to the components in the script editor to get components containing script content. Arrange the components and save them to form the interface.

[0010] The browser accesses the interface and checks if the current component has a script. If the component has a script, it parses the script and loads the component after parsing. If the component does not have a script, it loads the component directly. After the component is loaded, the interface is rendered and displayed to achieve low-code script addition.

[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 a core function of the low-code platform, including material input, arrangement, component configuration, and canvas rendering;

[0013] The canvas is the area in the editor used to hold the current component;

[0014] The material library consists of components that need to be dragged and dropped in the editor, and these components are the parts displayed on the final interface.

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

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

[0017] Preferably, dragging and dropping components from the material library onto 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 and drop components from the library onto the canvas of the low-code platform, and they will be displayed on the canvas of the low-code platform.

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

[0021] Add one or more scripts to components that require personalization. The scripts are executable files written in a programming language based on code.

[0022] In the script editor of a low-code platform, you can define variables and elements for the scripts added to the component to obtain a component containing the script content.

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

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

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

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

[0027] The concatenated function is attached to an object in the browser, and the script string is converted into an executable function.

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

[0029] This invention also provides a low-code scripting apparatus, comprising:

[0030] The component orchestration module is used to drag and drop components from the low-code platform's material library onto the low-code platform's canvas and orchestrate the added components on the canvas.

[0031] The script addition module is used to add one or more scripts to components that have been arranged in the canvas and require personalization. The scripts added to the components can be written in the script editor to obtain components containing script content. After arranging the components, they can be saved to form the interface.

[0032] The script processing module accesses the browser interface, determines whether the current component has a script, parses the script if the component has a script, loads the component after parsing, and loads the component directly if the component does not have a script. After the component is loaded, the interface is rendered and displayed to achieve low-code script addition.

[0033] This invention also provides an electronic device, including a memory and a processor;

[0034] The memory is used to store computer programs;

[0035] When the processor executes a computer program stored in the memory, it implements the steps of a low-code scripting method as described above.

[0036] This invention also provides a computer-readable storage medium for storing a computer program, which, when executed by a processor, implements the steps of a low-code scripting method as described above.

[0037] This invention provides a method, apparatus, device, and medium for adding scripts using low-code methods. Compared with the prior art, its advantages are as follows:

[0038] This invention involves dragging and dropping components from a component library onto a low-code platform canvas and arranging them. For components requiring customization, one or more scripts are added. These scripts are then written to create components containing script content. After arranging the components, the interface is saved. When a browser accesses the interface, it checks if the current component has a script. If so, the script is parsed and the component is loaded after completion. If the component does not have a script, it is loaded directly. After loading, the interface is rendered and displayed, thus enabling the addition of scripts in low-code to achieve different functionalities.

[0039] Moreover, this invention enables the expansion of the application of components and the improvement of their flexibility without modification, allowing them to be flexibly applied to different types of personalized designs in the short term. Attached Figure Description

[0040] Figure 1 A schematic diagram of the overall process of a low-code scripting method, apparatus, device, and medium provided in an embodiment of the present invention;

[0041] Figure 2 This is a schematic diagram illustrating the structure of a low-code scripting method, apparatus, device, and medium for configuring and executing scripts, as provided in an embodiment of the present invention.

[0042] Figure 3 This is a schematic diagram of the algorithm flow for parsing scripts in a low-code scripting method, apparatus, device, and medium provided in an embodiment of the present invention. Detailed Implementation

[0043] To make the above-mentioned objects, features, and advantages of the present invention more apparent and understandable, specific embodiments of the present invention will be described in detail below with reference to the accompanying drawings. Many specific details are set forth in the following description to provide a thorough understanding of the present invention. However, the present invention can be practiced in many other ways different from those described herein, and those skilled in the art can make similar modifications without departing from the spirit of the present invention. Therefore, the present invention is not limited to the specific embodiments disclosed below.

[0044] See Figures 1 to 3 This invention provides a low-code method for adding scripts, specifically a loosely coupled, pluggable component that dynamically configures and parses and executes scripts to extend the component's capabilities and thus meet the component's personalized requirements.

[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, canvas, material library, rendering engine, and schema file. The need to extend any component can be realized through dynamic configuration scripts. The script content can be a method call, an event, or a rewrite of the functional methods of the original component.

[0046] Its editor is a core function of the low-code platform, including component input, arrangement, component configuration, canvas rendering, etc.

[0047] Its canvas is the area in the editor used to hold the current component.

[0048] Its rendering engine uses a schema file edited in the editor to render to the interface by dynamically loading components.

[0049] Its material library consists of components that need to be dragged and dropped into the editor, and the components are the final products displayed on the interface.

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

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

[0052] Step 1: Drag and drop components from the component library in the editor to arrange the interface.

[0053] Step 2: Define the script writing rules as the front-end language of the current technology stack, such as defining it as the script syntax in Vue.

[0054] Step 3: Select the component and click Add Script. Multiple scripts can be added to a component.

[0055] Step 4: Write the script.

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

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

[0058] Step 7: Before loading a component, the rendering engine checks if the current component has a script. If it does, the script is injected; otherwise, the component is loaded normally.

[0059] Step 8: Interface rendering and display.

[0060] The specific steps for adding the script in step seven 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 from the component it belongs to.

[0065] ⑤ Register the components and scripts globally in a synchronized manner.

[0066] like Figure 2 The diagram shown illustrates the structure of a low-code scripting method, apparatus, device, and medium for configuring and executing scripts, as provided in 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. In detail:

[0067] ① Drag and drop any component from the Material Library module onto the canvas.

[0068] ② Configure component-related properties (such as width, height, color, font, etc.) through the property editor.

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

[0070] ④ After the layout is completed, a schema file is generated. After saving the file, the current page can be previewed in the browser using the rendering engine.

[0071] ⑤ In step ②, when setting the property editor, open the Add Script Property Editor, add the script, save the current script, and then save the overall layout content.

[0072] like Figure 3 The diagram shown is a schematic flowchart of the algorithm for parsing scripts in a low-code scripting method, apparatus, device, and medium provided by an embodiment of the present invention. The image comparison algorithm specifically includes:

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

[0074] Second: Encapsulate each script element in the array into a function format, as shown below:

[0075] function(vm){

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

[0077] return options

[0078] }

[0079] 3. Concatenate the script into a string with 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] varoptions = function(vm){

[0088] Script content

[0089] }(vm)

[0090] return options

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

[0092] return fn(vm)

[0093] })

[0094] }

[0095] 4. Mount it to window.scriptObj['current component ID'].

[0096] 5. 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] 6. The current script inherits from the component it is in, for example: A.extend(B).

[0101] 7. Register components and scripts synchronously with Vue.

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

[0103] Scripting languages ​​(such as JavaScript and VBScript) fall between HTML and programming languages ​​like C, C++, Java, and C#; HTML is typically used for formatting and linking text, while programming languages ​​are typically used to issue a series of complex instructions to a machine.

[0104] Scripting languages ​​are interpreted languages, such as Python, JavaScript, and Script. Unlike C and C++, which can be compiled into binary code, scripting languages ​​exist as executable files. They do not need to be compiled and can be used directly, with the interpreter handling the interpretation.

[0105] Program code is the script program, which is also the final executable file. Scripting languages ​​can be divided into standalone and embedded types. Standalone scripting languages ​​rely entirely on the interpreter when they are executed, while embedded scripting languages ​​are usually embedded in programming languages ​​(such as C, C++, VB, Java, etc.).

[0106] This invention also provides a low-code scripting apparatus, comprising:

[0107] The component orchestration module is used to drag and drop components from the low-code platform's material library onto the low-code platform's canvas and orchestrate the added components on the canvas.

[0108] The script addition module is used to add one or more scripts to components that have been arranged in the canvas and require personalization. The scripts added to the components can be written in the script editor to obtain components containing script content. After arranging the components, they can be saved to form the interface.

[0109] The script processing module accesses the browser interface, determines whether the current component has a script, parses the script if the component has a script, loads the component after parsing, and loads the component directly if the component does not have a script. After the component is loaded, the interface is rendered and displayed to achieve low-code script addition.

[0110] This invention also provides an electronic device, including a memory and a processor.

[0111] Memory is used to store computer programs.

[0112] When a processor executes a computer program stored in memory, it implements the steps described above for a low-code scripting method.

[0113] This invention also provides a computer-readable storage medium for storing a computer program, which, when executed by a processor, implements the steps of the low-code scripting method described above.

[0114] The embodiments described above are merely illustrative of several implementations of the present invention, and while the descriptions are relatively specific and detailed, they should not be construed as limiting the scope of the invention patent. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of the present invention, and these all fall within the protection scope of the present invention. Therefore, the protection scope of this invention patent should be determined by the appended claims.

Claims

1. A low-code method for adding scripts, characterized in that, Includes the following steps: Drag and drop components from the low-code platform's material library onto the low-code platform's canvas, and then arrange the added components on the canvas. Add one or more scripts to components that need to be personalized after being arranged in the canvas, and write the scripts added to the components in the script editor to get components containing script content. Arrange the components and save them to form the interface. The browser accesses the interface and determines whether the current component has a script. If the component has a script, it parses the script and loads the component after parsing. If the component does not have a script, it loads the component directly and renders the interface after the component is loaded, thus achieving low-code script addition. The parsing script includes the following steps: Retrieve the component configuration script and store it in an array; Encapsulate each script in the current component into a function whose data type is string; Concatenate all scripts in the current component into a single function whose data type is string; The concatenated function is attached to an object in the browser, and the script string is converted into an executable function. The current script function inherits from its corresponding component and registers the component globally.

2. The method for adding scripts in low code according to claim 1, characterized in that, The low-code platform includes: an editor, a canvas, a material library, a rendering engine, and a schema file; The editor is a core function of the low-code platform, including material input, arrangement, component configuration, and canvas rendering; The canvas is the area in the editor used to hold the current component; The material library consists of components that need to be dragged and dropped in the editor, and these components are the parts displayed on the final interface. The rendering engine is a schema file edited in the editor, which is rendered to the interface by loading components; The schema file is a JSON file saved after being edited by an editor.

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

4. The method for adding scripts in low code according to claim 1, characterized in that, Obtaining the component containing script content includes the following steps: Add one or more scripts to components that require personalization. The scripts are executable files written in a programming language based on code. In the script editor of a low-code platform, you can define variables and elements for the scripts added to the component to obtain a component containing the script content.

5. A low-code scripting device, characterized in that, include: The component orchestration module is used to drag and drop components from the low-code platform's material library onto the low-code platform's canvas and orchestrate the added components on the canvas. The script addition module is used to add one or more scripts to components that have been arranged in the canvas and require personalization. The scripts added to the components can be written in the script editor to obtain components containing script content. After arranging the components, they can be saved to form the interface. The script processing module accesses the browser interface, determines whether the current component has a script, parses the script if the component has a script, loads the component after parsing the script, and loads the component directly if the component does not have a script. After the component is loaded, the interface is rendered and displayed to achieve low-code script addition. The parsing script includes the following steps: Retrieve the component configuration script and store it in an array; Encapsulate each script in the current component into a function whose data type is string; Concatenate all scripts in the current component into a single function whose data type is string; The concatenated function is attached to an object in the browser, and the script string is converted into an executable function. The current script function inherits from its corresponding component and registers the component globally.

6. An electronic device, characterized in that, include: Memory and processor; The memory is used to store computer programs; When the processor executes a computer program stored in the memory, it implements the steps of a low-code scripting method as described in any one of claims 1 to 4.

7. A computer-readable storage medium for storing a computer program, which, when executed by a processor, implements the steps of a low-code scripting method as described in any one of claims 1 to 4.

Images