Two-way Interaction Method and System Based on Low-code Front-end Rendering Engine

Abstract

This application is applicable to the field of software development technology, and provides a two-way interaction method and system based on a low-code front-end rendering engine, including: on the product side, a dynamic component is newly added to the component library, and the dynamic component and multiple low-code components are used to encapsulate the rendering engine and publish it through the intranet repository. On the business side, based on business requirements, a low-code system is used to select a low-code integration solution to complete the development of a low-code page. The page code pageId or DSL of the low-code page and all customized business components are used as input parameters and injected into the rendering engine. The customized business components control the low-code content by obtaining the runtime context of the rendering engine; the rendering engine binds its runtime context through the JS code injected by parsing the configuration items of the low-code components to control the customized business components. Thus, two-way communication and mutual control between the low-code rendering engine and the customized development content are realized, significantly improving the flexibility and practicality of the low-code platform.

Description

Technical Field

[0001] This application belongs to the technical field of software development, and particularly relates to a two-way interaction method and system based on a low-code front-end rendering engine. Background Art

[0002] In recent years, the wave of digital transformation has swept across all industries, and more and more enterprises have begun to attach importance to software development efficiency. Against this background, the low-code development platform (LCDP) has emerged and quickly led a wave of new technology booms. The low-code development platform uses low-code technology to abstract the underlying architecture and infrastructure into a graphical interface, mainly relying on visual design and configuration, supplemented by a small amount of code, so as to provide the ability to quickly build pages and create business logic, and achieve the rapid construction of applications.

[0003] With the gradual maturity of front-end componentization framework technologies such as Vue and React, the front-end componentization development technology has also developed rapidly. Front-end componentization is the process of splitting a complex user interface into multiple independent and reusable components. Each component encapsulates its own logic, style, and template, and the entire application is built by combining these components. Componentization improves the maintainability, reusability, and development efficiency of code, and has become an important trend in modern front-end development.

[0004] The combination of componentization development technology and low-code technology further reduces the threshold of software development, enabling non-professional personnel to easily get started. However, low-code technology also has limitations. Its design concept is to pre-develop all components, and users build them on the visual interface. In the actual business use process, it is inevitable to encounter some unmet requirements and need to perform customized development. How to make full use of the rapid construction advantage of the low-code platform, build most of the supported content, only customize the parts that need to be customized, and then embed them into the low-code page to achieve two-way interaction with the low-code content to meet complex business logic is a common challenge in the implementation process of the low-code platform. Summary of the Invention

[0005] The embodiments of this application provide a two-way interaction method and system based on a low-code front-end rendering engine, which can solve the problem of poor flexibility and practicability of the low-code platform caused by the imperfect two-way communication and mutual control between the current low-code rendering engine and the customized development content.

[0006] First aspect, an embodiment of the present application provides a two-way interaction method based on a low-code front-end rendering engine, which is applied to a two-way interaction system of a low-code front-end rendering engine. The above method includes the following steps: S1. The product side adds a dynamic component in the component library, and the dynamic component is used to dynamically load business components developed through external customization of the low-code system; S2. The product side uses the dynamic component in S1 and multiple low-code components to encapsulate the DSL rendering engine SDK and publishes it through the NPM intranet repository; S3. Based on business requirements, the business side uses the low-code system to select a low-code integration solution to complete the development of the low-code page. The low-code integration solution includes building the entire low-code page using low-code and embedding the business components developed through external customization in some areas of the low-code page; S4. The business side uses the page code pageId or DSL of the low-code page in S3 and all the business components developed through external customization as input parameters, and injects the input parameters into the rendering engine SDK in S2; S5. The business components developed through external customization that inject the rendering engine SDK in S4 control the low-code content by obtaining the runtime context of the rendering engine SDK; the rendering engine SDK controls the business components developed through external customization by parsing the JS code injected by the low-code component configuration item in S2 and binding the runtime context of the rendering engine SDK.

[0007] In a possible implementation manner of the first aspect, different types of typical tasks in the above step S1 include tasks involving lower limb manipulation such as braking, turning, and adjusting the aircraft heading.

[0008] Optionally, in another possible implementation manner of the first aspect, the visual configuration items supported by the dynamic component in step S1 include component code componentCode, input parameters requestParams, output parameters exposes, and preview image previewImg;

[0009] The component code is the unique identifier for the rendering engine to load the business components developed through external customization. The rendering engine obtains the business components developed through external customization through the component code for rendering; the preview image is the file path of the overall effect diagram of the component, which is used to quickly preview the component effect when building the low-code system; the input parameter is the parameter received by the dynamic component during the rendering on the business side, and the dynamic component processes the input parameter according to its own business logic; the output parameter is the attributes and methods exposed by the dynamic component during the rendering on the business side, so that the rendering engine can control it.

[0010] Optionally, in another possible implementation manner of the first aspect, step S1 includes:

[0011] Step S11. Define the input parameters and attributes of the dynamic component:

[0012] The input parameter componentsMap is a collection of all dynamic components. The input parameter variables is a reference to all page variables of the rendering engine. The input parameter schema is the overall DSL of the currently rendered page by the rendering engine. The input parameter config is the DSL of the current dynamic component. The input parameter componentsInstanceMap is a collection of references to all component instances in the rendering engine. The dynamicComponentRef attribute is a reference to the dynamic component instance of the rendering engine. The dynamicComponent attribute is the currently rendered dynamic component. The componentProp attribute is a collection of input parameters for the dynamic component;

[0013] Step S12: Parse the currently rendered dynamic component:

[0014] Find the corresponding dynamic component in componentsMap according to the component code componentCode of the current dynamic component. As an input parameter, call the defineAsyncComponent method of the vue framework to generate the actually rendered component;

[0015] Step S13: Parse the input parameters of the current dynamic component:

[0016] Traverse the requestParams array of the input parameter configuration of the current dynamic component. If the current traversed item is a static parameter, directly obtain the static value of the input parameter configuration. If the current traversed item is the value of a bound page variable, call the getVariableValue method to obtain the dynamic value of the bound page variable from the rendering engine.

[0017] Optionally, in another possible implementation of the first aspect, step S2 includes:

[0018] Step S21: Develop the rendering engine component:

[0019] Create a new LowCodeRender.vue component. The input parameters are the unique identifier pageId of the low-code page, the DSL, and the collection of customized business components dynamicComponentsMap. The rendering engine automatically pulls the DSL according to pageId or directly renders the page according to the passed-in DSL;

[0020] Step S22: Package the build entry lowCodeBuild.js of the rendering engine SDK:

[0021] Introduce the LowCodeRender component in S21. Follow the component registration rules defined by the vue framework. Create an install method and call the component method of the vue framework to register the rendering engine component;

[0022] Step S23: Configure the Lib mode of the vite tool to build the rendering engine SDK in the es format. The key configurations for the build are as follows:

[0023] The entry of the package is configured as lowCodeBuild.js, the name is configured as LowCodeRender, the formats are configured as es, and the file name of the build product is configured as LowCodeRender.es.js;

[0024] Step S24: Publish the rendering engine SDK to the NPM internal network repository:

[0025] Use the npm publish --registry=xxx command to publish the rendering engine SDK to the NPM internal network repository.

[0026] Optionally, in another possible implementation manner of the first aspect, step S21 includes:

[0027] Step S211: Analyze the DSL:

[0028] Analyze the DSL, and deconstruct the configured page variables and the configuration information of the page structure according to the DSL;

[0029] Step S212: Initialize the low-code system variables:

[0030] According to the page variables deconstructed in S211, perform an initialization assignment operation on all page variables, and save all page variables in the variables variable of the rendering engine runtime context;

[0031] Step S213: Initialize the rendering of low-code components:

[0032] Traverse the page structure deconstructed in S211, determine the target low-code component according to the component code in the DSL of the current traversed item. The input parameters of the low-code component can be configured with static values and bound variables, and each low-code component exposes its supported properties and methods;

[0033] After the target low-code component is loaded, save the reference of its instance with the unique id in the DSL as the key value in the componentInstanceMap variable of the rendering engine runtime context.

[0034] Optionally, in another possible implementation manner of the first aspect, step S4 includes:

[0035] Step S41: Install the rendering engine SDK:

[0036] Use the command "npm i LowCodeRender --registry=xxx" to specify installing the rendering engine SDK from the internal network repository;

[0037] Step S42: Obtain all customized business components:

[0038] On the business side, it is set that all customized business components are placed in the / src / dynamicComponents directory. The program uses the glob matching pattern to traverse all vue files in this directory, uses regular expressions to obtain the file names of the traversed items as component codes, and uses the component codes as keys and the file contents of the traversed items as values, which are saved in the componentsMap variable;

[0039] Step S43: Call the rendering page of the rendering engine SDK. The calling method is defined as follows:

[0040] <LowCodeRender :componentsMap="componentsMap"

[0041] :pageId="xxx" :DSL="xxx" / >

[0042] componentsMap is all the customized business components on the business side, pageId is the unique identifier of the low-code page, which is used to automatically pull the DSL by initiating an http request through fetch. The DSL input parameter is the metadata for direct rendering. When pageId is empty and DSL is not empty, the DSL is directly rendered.

[0043] Optionally, in another possible implementation manner of the first aspect, step S5 includes:

[0044] Step S51: The customized business components injected with the rendering engine SDK in S4 control the low-code content by obtaining the runtime context of the rendering engine SDK:

[0045] The customized business components trigger the update of the associated component view by operating on the target variable values of the rendering engine through variables, obtain the reference of the target component instance to be interacted with through componentInstanceMap, and directly interact with it by calling the exposed methods;

[0046] Step S52: The rendering engine SDK controls the customized business components by parsing the JS code injected by the low-code component configuration items in S2 and binding the runtime context of the rendering engine SDK:

[0047] The low-code component configuration items can inject JS code to operate on the target variable value, trigger the update of the dynamic component view associated with the variable, or directly interact with the dynamic component by obtaining a reference to the target component instance and calling the exposed methods of the target component instance. The rendering engine dynamically parses the injected JS code into a function through new Function, and binds variables and componentInstanceMap to the function runtime context through the call method of the js function prototype chain, and executes the injected JS code.

[0048] In a second aspect, an embodiment of the present application provides a two-way interaction system based on a low-code front-end rendering engine, including:

[0049] A component library for managing low-code components in the low-code system. All low-code components are designed based on page variables, and two-way binding is performed between data and views.

[0050] An attribute configuration module for visual configuration of different low-code components. The configuration items of all low-code components can be bound to page variables. Modifying the value of the page variable will automatically trigger the update of the component view, and the change of the internal state of the component will automatically update the value of the page variable bound by the configuration item. The component configuration items support injecting JS code, and all page variables and references to all component instances in the rendering engine can be accessed in the running context of the injected JS code.

[0051] A rendering engine module for parsing, rendering, and encapsulating the metadata DSL into a rendering engine SDK for the business side to call. The construction data of each low-code page is saved in the metadata DSL.

[0052] Beneficial effects: In the technical solution of the present application, the product side adds dynamic components to the component library, encapsulates the DSL rendering engine with the dynamic components and multiple low-code components and publishes it through the internal network repository. The business side uses the low-code system to select a low-code integration solution based on business requirements to complete the development of the low-code page, and injects the page code pageId or DSL of the low-code page and all customized business components as input parameters into the rendering engine. The customized business components injected into the rendering engine control the low-code content by obtaining the runtime context of the rendering engine. The rendering engine controls the customized business components by parsing the JS code injected into the low-code component configuration item and binding its runtime context. Thus, two-way communication and mutual control between the low-code rendering engine and the customized development content are realized, significantly improving the flexibility and practicality of the low-code platform. Description of the Drawings

[0053] To more clearly illustrate the technical solutions in the embodiments of the present application, the following will briefly introduce the accompanying drawings required for the description of the embodiments or the prior art. Obviously, the accompanying drawings in the following description are only some embodiments of the present application. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0054] Figure 1 It is a schematic flowchart of a two-way interaction method based on a low-code front-end rendering engine provided by an embodiment of the present application;

[0055] Figure 2 It is a schematic diagram of two-way interaction between a rendering engine and a customized business component provided by an embodiment of the present application;

[0056] Figure 3 It is a schematic structural diagram of a two-way interaction system based on a low-code front-end rendering engine provided by an embodiment of the present application. Detailed implementation manners

[0057] In the following description, for the purpose of illustration rather than limitation, specific details such as specific system structures and technologies are presented to thoroughly understand the embodiments of the present application. However, those skilled in the art should clearly understand that the present application can also be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to avoid unnecessary details from interfering with the description of the present application.

[0058] It should be understood that when used in the specification of the present application and the appended claims, the term "comprising" indicates the presence of the described features, wholes, steps, operations, elements, and / or components, but does not exclude the presence or addition of one or more other features, wholes, steps, operations, elements, components, and / or their combinations.

[0059] It should also be understood that the term "and / or" used in the specification of the present application and the appended claims refers to any combination and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0060] As used in the specification of the present application and the appended claims, the term "if" can be interpreted as "when", "once", "in response to determining", or "in response to detecting" according to the context. Similarly, the phrase "if determined" or "if detecting [the described condition or event]" can be interpreted as meaning "once determined", "in response to determining", "once detecting [the described condition or event]", or "in response to detecting [the described condition or event]" according to the context.

[0061] In addition, in the description of the specification and the appended claims of the present application, the terms "first", "second", "third", etc. are only used for distinguishing descriptions and should not be construed as indicating or implying relative importance.

[0062] The reference to "one embodiment" or "some embodiments" etc. described in the specification of the present application means that in one or more embodiments of the present application, specific features, structures or characteristics described in connection with that embodiment are included. Thus, statements such as "in one embodiment", "in some embodiments", "in other some embodiments", "in still other embodiments", etc. that appear in different places in this specification do not necessarily all refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways. The terms "comprising", "including", "having" and their variants all mean "including but not limited to", unless otherwise specifically emphasized in other ways.

[0063] The two-way interaction method provided by the present application based on a low-code front-end rendering engine will be described in detail below with reference to the accompanying drawings.

[0064] Figure 1 The flowchart of a two-way interaction method provided by an embodiment of the present application based on a low-code front-end rendering engine is shown.

[0065] As Figure 1 shown, the two-way interaction method based on the low-code front-end rendering engine includes the following steps:

[0066] S1. The product side adds dynamic components in the component library, and the dynamic components are used to dynamically load business components developed through external customization of the low-code system;

[0067] Furthermore, in one embodiment of the present application, the visual configuration items supported by the dynamic components in the above step S1 include component code componentCode, input parameters requestParams, output parameters exposes, and preview image previewImg; the component code is the unique identifier for the rendering engine to load the business components developed through external customization, and the rendering engine obtains the business components developed through external customization through the component code for rendering; the preview image is the file path of the overall effect diagram of the component, which is used to quickly preview the component effect when building the low-code system; the input parameters are the parameters received by the dynamic components during the rendering on the business side, and the dynamic components process the input parameters according to their own business logics; the output parameters are the attributes and methods exposed by the dynamic components during the rendering on the business side, enabling the rendering engine to control them.

[0068] Furthermore, in the embodiments of the present application, the above step S1 includes:

[0069] Step S11. Define the input parameters and attributes of the dynamic components:

[0070] The input parameter componentsMap is a collection of all dynamic components, the input parameter variables is a reference to all page variables of the rendering engine, the input parameter schema is the overall DSL of the currently rendered page of the rendering engine, the input parameter config is the DSL of the current dynamic component, the input parameter componentsInstanceMap is a collection of references to all component instances in the rendering engine, the dynamicComponentRef attribute is a reference to the dynamic component instance of the rendering engine, the dynamicComponent attribute is the currently rendered dynamic component, and the componentProp attribute is a collection of input parameters of the dynamic component;

[0071] Step S12: Parse the currently rendered dynamic component:

[0072] Find the corresponding dynamic component in componentsMap according to the component code componentCode of the current dynamic component. As an input parameter, call the defineAsyncComponent method of the vue framework to generate the actually rendered component;

[0073] Step S13: Parse the input parameters of the current dynamic component:

[0074] Traverse the requestParams array of the input parameter configuration of the current dynamic component. If the current traversed item is a static parameter, directly obtain the static value of the input parameter configuration. If the current traversed item is the value of a bound page variable, call the getVariableValue method to obtain the dynamic value of the bound page variable from the rendering engine.

[0075] S2. The product side uses the dynamic components in S1 and multiple low-code components to encapsulate the DSL rendering engine SDK and publish it through the NPM internal network repository;

[0076] Furthermore, in the embodiment of the present application, the above step S2 includes:

[0077] Step S21: Develop the rendering engine components:

[0078] Create a new LowCodeRender.vue component. The input parameters are the unique identifier pageId of the low-code page, the DSL, and the collection dynamicComponentsMap of customized business components. The rendering engine automatically pulls the DSL according to pageId or directly renders the page according to the passed-in DSL;

[0079] In the embodiment of the present application, step S21 includes:

[0080] Step S211: Analyze the DSL:

[0081] Analyze the DSL, and deconstruct the configured page variables and the configuration information of the page structure according to the DSL;

[0082] Step S212: Initialize the low-code system variables:

[0083] According to the page variables deconstructed in S211, perform an initialization assignment operation on all page variables, and save all page variables in the variables variable of the rendering engine runtime context;

[0084] Step S213: Initialize and render low-code components:

[0085] Traverse the page structure deconstructed in S211, determine the target low-code component according to the component code in the DSL of the current traversed item. The input parameters of the low-code component can be configured with static values and bound variables, and each low-code component exposes its supported attributes and methods externally;

[0086] After the target low-code component is loaded, save the reference of its instance with the unique id in the DSL as the key value in the componentInstanceMap variable of the rendering engine runtime context.

[0087] Step S22: Package the build entry lowCodeBuild.js of the rendering engine SDK:

[0088] Introduce the LowCodeRender component in S21, follow the component registration rules defined by the vue framework, create an install method, and call the component method of the vue framework to register the rendering engine component;

[0089] Step S23: Configure the Lib mode of the vite tool to build and package the rendering engine SDK in es format. The key configurations for the build are as follows:

[0090] The packaging entry entry is configured as lowCodeBuild.js, the name is configured as LowCodeRender, the format formats is configured as es, and the name of the build product file fileName is configured as LowCodeRender.es.js;

[0091] Step S24: Publish the rendering engine SDK to the NPM internal network repository:

[0092] Use the npm publish --registry=xxx command to publish the rendering engine SDK to the NPM internal network repository.

[0093] S3. Based on business requirements, the business side uses the low-code system to select a low-code integration solution to complete the development of the low-code page. The low-code integration solution includes building the entire low-code page using low-code and embedding business components developed through customization in some areas of the low-code page.

[0094] S4. The business side takes the page code pageId or DSL of the low-code page in S3 and all the business components developed through customization as input parameters, and injects the input parameters into the rendering engine SDK in S2.

[0095] Further, in the embodiment of the present application, the above step S4 includes:

[0096] Step S41. Install the rendering engine SDK:

[0097] Use the command "npm i LowCodeRender --registry=xxx" to specify installing the rendering engine SDK from the intranet repository.

[0098] Step S42. Obtain all the business components developed through customization:

[0099] The business side sets that all the business components developed through customization are placed in the / src / dynamicComponents directory. The program uses the glob matching pattern to traverse all vue files in this directory, uses regular expressions to obtain the file names of the traversed items as component codes, and takes the component codes as keys and the file contents of the traversed items as values, and saves them in the componentsMap variable.

[0100] Step S43. Call the rendering page of the rendering engine SDK. The calling method is defined as follows:

[0101] <LowCodeRender :componentsMap="componentsMap"

[0102] :pageId="xxx" :DSL="xxx" / >

[0103] componentsMap is all the business components developed through customization by the business side. pageId is the unique identifier of the low-code page, which is used to automatically pull the DSL by initiating an http request through fetch. The DSL input parameter is the metadata for direct rendering. When pageId is empty and DSL is not empty, the DSL is directly rendered.

[0104] The business components customized and developed by injecting the rendering engine SDK in S5 and S4 control the low-code content by obtaining the runtime context of the rendering engine SDK; the rendering engine SDK controls the business components customized and developed by parsing the JS code injected in the low-code component configuration items in S2 and binding the runtime context of the rendering engine SDK.

[0105] Further, in the embodiment of the present application, the above step S5 includes:

[0106] Step S51: The business components customized and developed by injecting the rendering engine SDK in S4 control the low-code content by obtaining the runtime context of the rendering engine SDK:

[0107] The business components customized and developed trigger the update of the associated component view by operating on the target variable values of the rendering engine through variables, obtain the reference of the target component instance to be interacted with through componentInstanceMap, and directly interact with it by calling the exposed methods of the target component instance;

[0108] Step S52: The rendering engine SDK controls the business components customized and developed by parsing the JS code injected in the low-code component configuration items in S2 and binding the runtime context of the rendering engine SDK:

[0109] The low-code component configuration items can inject JS code to operate on the target variable values, trigger the update of the dynamic component view associated with the variable, or directly interact with the dynamic component by obtaining the reference of the target component instance and calling the exposed methods of the target component instance; the rendering engine dynamically parses the injected JS code into a function through new Function, and binds variables and componentInstanceMap to the function runtime context through the call method of the js function prototype chain, and executes the injected JS code.

[0110] As a possible implementation, in an embodiment of the present application, as Figure 2 shown, the above step S5 includes:

[0111] 1. The business components customized and developed control the rendering engine:

[0112] The sample code of the dynamic component props is as follows:

[0113] const props = defineProps({

[0114] componentProp: {

[0115] type: Object,

[0116] default() {

[0117] return {}

[0118] }

[0119] },

[0120] variables: {

[0121] type: Object,

[0122] default() {

[0123] return {}

[0124] }

[0125] },

[0126] componentInstanceMap: {

[0127] type: Object,

[0128] default() {

[0129] return {}

[0130] }

[0131] }

[0132] });

[0133] There are two ways for dynamic components to control the rendering engine:

[0134] (1) The dynamic component triggers the update of the associated component view by operating on the target variable value of the rendering engine. The sample code is as follows: props.variables.paramA = xxx

[0135] The dynamic component modifies the value of the low-code system variable through this operation. Since the low-code system is data-driven for views, all components associated with the paramA variable will have their views updated, thus achieving the control of the rendering engine update;

[0136] (2) Direct interaction with the component is achieved by obtaining a reference to the target component instance and calling its exposed method. The sample code is as follows: props.componentInstanceMap['tableComponentA'].getList()

[0137] The sample code obtains a reference to a certain instance of the low-code system table component and calls the method to refresh the data of the table component, thus achieving the function of controlling the refresh of the low-code table component.

[0138] II. Rendering Engine Controls Dynamic Components:

[0139] The low-code component configuration items support injecting JS code, where any business logic code can be injected. For example, when the low-code button component is clicked, the methodA method of the custom-developed business component dynamicComponentA is triggered. The following example code can be injected into the 'click event' property of the button component's configuration item:

[0140] this.componentInstanceMap['dynamicComponentA'].methodA()

[0141] Here, this is the runtime context of the injected JS code. The rendering engine dynamically parses the injected JS code and binds variables and componentInstanceMap to the code runtime context to execute the injected code. The example code for parsing the injected JS code as a function and binding the runtime context is as follows:

[0142] function parseExpression(rawCode, context = {variables,componentInstanceMap}) {

[0143] try {

[0144] return new Function(`return (${rawCode})`).call(context)

[0145] } catch (error) {

[0146] console.error(`parseExpression error: ${error}`)

[0147] return undefined

[0148] }

[0149] }.

[0150] The two-way interaction method based on the low-code front-end rendering engine provided by this application is as follows: on the product side, dynamic components are added to the component library. The dynamic components and multiple low-code components are used to encapsulate the DSL rendering engine and publish it through the intranet repository. On the business side, based on business requirements, the low-code system is used to select a low-code integration solution to complete the development of the low-code page. The page code pageId or DSL of the low-code page, as well as all customized business components, are used as input parameters and injected into the rendering engine. The customized business components injected into the rendering engine control the low-code content by obtaining the runtime context of the rendering engine. The rendering engine binds its runtime context through the JS code injected by parsing the configuration items of the low-code components to control the customized business components. Thus, two-way communication and mutual control between the low-code rendering engine and the customized development content are achieved, significantly improving the flexibility and practicality of the low-code platform.

[0151] It should be understood that the magnitudes of the sequence numbers of the steps in the above embodiments do not mean the order of execution. The order of execution of each process should be determined by its function and internal logic, and should not constitute any limitation to the implementation process of the embodiments of this application.

[0152] Corresponding to the two-way interaction method based on the low-code front-end rendering engine in the above embodiments, Figure 3 The structural schematic diagram of the two-way interaction system based on the low-code front-end rendering engine provided by the embodiments of this application is shown. For the convenience of description, only the parts related to the embodiments of this application are shown.

[0153] Refer to Figure 3 , the system 300 includes:

[0154] The component library 301 is used to manage the low-code components in the low-code system. All low-code components are designed based on page variables, and two-way binding is performed between data and views.

[0155] The attribute configuration module 302 is used for visual configuration of different low-code components. The configuration items of all low-code components can be bound to page variables. Modifying the value of the page variable will automatically trigger the update of the component view, and the change of the internal state of the component will automatically update the value of the page variable bound by the configuration item. The component configuration items support injecting JS code, and all page variables and references to all component instances in the rendering engine can be accessed in the runtime context of the injected JS code.

[0156] The rendering engine module 303 is used to parse and render the metadata DSL and encapsulate it into a rendering engine SDK for the business side to call. The construction data of each low-code page is saved in the metadata DSL.

[0157] In one embodiment, in a two-way interaction system based on a low-code front-end rendering engine, the low-code components in the component library management system display the dynamic components supported by the low-code system in the form of icons plus text on the page. Users select the required components according to business requirements and drag them to the intermediate rendering engine area. The property configuration module can visually configure different low-code components, such as configuring the name, id, etc. of the components. The rendering engine module is responsible for parsing and rendering the DSL metadata generated by the setup and encapsulating it into an SDK for the business side to call.

[0158] The two-way system based on the low-code front-end rendering engine provided by this application includes a component library, a property configuration module, and a rendering engine module, which can achieve two-way communication and mutual control between the low-code rendering engine and the customized development content, significantly improving the flexibility and practicality of the low-code platform.

[0159] It should be understood that the magnitudes of the sequence numbers of the steps in the above embodiments do not mean the order of execution. The order of execution of each process should be determined by its function and internal logic, and should not constitute any limitation to the implementation process of the embodiments of this application.

[0160] The above embodiments are only used to illustrate the technical solutions of this application, rather than to limit them; although this application has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions described in the foregoing embodiments, or perform equivalent replacements for some of the technical features; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of this application, and should all be included in the protection scope of this application.

Claims

1. A two-way interaction method based on a low-code front-end rendering engine, characterized in that: A two-way interactive system applied to a low-code front-end rendering engine, the method comprising the following steps: S1. The product side adds a dynamic component to the component library, and the dynamic component is used to dynamically load the business components customized and developed outside the low-code system; S2. The product side uses the dynamic components and multiple low-code components in S1 to encapsulate the DSL rendering engine SDK and publish it through the NPM intranet repository; Step S21: Develop rendering engine components: Create a new LowCodeRender.vue component, with the input parameters being the unique identifier of the low-code page, pageId, DSL, and the customized business component set dynamicComponentsMap. The rendering engine automatically pulls the DSL according to the pageId or directly renders the page according to the passed-in DSL. Step S22: Encapsulate the building entry of the rendering engine SDK lowCodeBuild.js: Introduce the LowCodeRender component in S21, follow the component registration rules defined by the vue framework, create a new install method, call the component method of the vue framework, and register the rendering engine component; Step S23, configure the Lib mode of the vite tool, and build the rendering engine SDK in es format, wherein the key configuration of the build is as follows: The package entry entry is configured as lowCodeBuild.js, the name name is configured as LowCodeRender, the formats formats is configured as es, and the build product file name fileName is configured as LowCodeRender.es.js; Step S24: Publish the rendering engine SDK to the NPM intranet repository: Use the npmpublish --registry=xxx command to publish the rendering engine SDK to the NPM intranet repository; S3. Based on business needs, the business side uses the low-code system to select a low-code integration solution to complete the development of the low-code page. The low-code integration solution includes building the entire low-code page using low-code and embedding the customized business components in some areas of the low-code page; S4: The business side uses the page ID or DSL of the low-code page in S3 and all the customized business components as input parameters, and injects the input parameters into the rendering engine SDK in S2; The custom-developed business components injected into the rendering engine SDK in S5 and S4 control the low-code content by obtaining the rendering engine SDK runtime context; the rendering engine SDK controls the custom-developed business components by parsing the JS code injected by the low-code component configuration items in S2 and binding the rendering engine SDK runtime context.

2. The method according to claim 1, characterized in that The visualization configuration items supported by the dynamic component described in step S1 include component code componentCode, input parameter requestParams, output parameter exposes, and preview image previewImg; the component code is the unique identifier of the customized business component loaded by the rendering engine, and the rendering engine obtains the customized business component through the component code for rendering; the preview image is the file path of the overall rendering of the component, which is used to quickly preview the component effect when building a low-code system; the input parameter is the parameter received by the dynamic component when rendering on the business side, and the dynamic component configures the input parameter for processing according to its own business logic; the output parameter is the properties and methods exposed to the outside by the dynamic component when rendering on the business side, so that the rendering engine can control it.

3. The method according to claim 2, characterized in that Step S1 includes: Step S11: Define the input parameters and properties of the dynamic component: The componentsMap input parameter is a collection of all dynamic components, the variables input parameter is a reference to all page variables of the rendering engine, the schema input parameter is the overall DSL of the current rendered page of the rendering engine, the config input parameter is the DSL of the current dynamic component, the componentsInstanceMap input parameter is a collection of all component instance references in the rendering engine, the dynamicComponentRef property is a reference to the dynamic component instance of the rendering engine, and the dynamicComponent property is the dynamic component currently rendered. The componentProp property is the input parameter collection of the dynamic component; Step S12: parse the currently rendered dynamic component: According to the component code componentCode of the current dynamic component, the corresponding dynamic component is found in componentsMap, and as an input parameter, the defineAsyncComponent method of the Vue framework is called to generate the actual rendered component; Step S13: parse the input parameters of the current dynamic component: Traverse the requestParams array of the current dynamic component input parameter configuration. If the current traversal item is a static parameter, directly obtain the static value of the input parameter configuration. If the current traversal item is the value of the bound page variable, call the getVariableValue method to obtain the dynamic value of the bound page variable from the rendering engine.

4. The method according to claim 3, characterized in that Step S21 includes: Step S211: Analyze DSL: Analyze DSL and deconstruct the configuration information of page variables and page structure according to DSL; Step S212: Initialize low-code system variables: According to the page variables deconstructed in S211, all page variables are initialized and assigned values, and all page variables are saved in the variables variable of the runtime context of the rendering engine; Step S213, initialize rendering low-code components: Traverse the page structure deconstructed by S211, and determine the target low-code component according to the component code in the DSL of the current traversal item. The input parameters of the low-code component can be configured with static values ​​and binding variables. Each low-code component exposes its supported properties and methods. After the target low-code component is loaded, the reference to its instance is saved in the rendering engine runtime context componentInstanceMap variable with the unique id in the DSL as the key value.

5. The method according to claim 4, characterized in that Step S4 includes: Step S41: Install the rendering engine SDK: Use the npm i LowCodeRender --registry=xxx command to specify the installation of the rendering engine SDK from the intranet warehouse; Step S42: Obtain all customized business components: On the business side, all customized business components are placed in the / src / dynamicComponents directory. The program uses the glob matching pattern to traverse all vue files in the directory, uses regular expressions to obtain the file name of the traversed item as the component code, and uses the component code as the key and the file content of the traversed item as the value, which are saved in the componentsMap variable. Step S43: Call the rendering page of the rendering engine SDK. The calling method is defined as follows: <LowCodeRender:componentsMap="componentsMap" :pageId="xxx":DSL="xxx" / > componentsMap is all customized business components developed on the business side. pageId is the unique identifier of the low-code page, which is used to automatically pull DSL by initiating an http request through fetch. The DSL input parameter is the metadata for direct rendering. When pageId is empty and DSL is not empty, DSL is directly rendered.

6. The method according to claim 5, characterized in that Step S5 includes: The custom-developed business component injected into the rendering engine SDK in steps S51 and S4 controls the low-code content by obtaining the runtime context of the rendering engine SDK: The customized business component triggers the update of the associated component view through variables to operate the rendering engine target variable value, obtains the target component instance reference to interact with through componentInstanceMap and calls its exposed method to interact with it directly; Step S52, the rendering engine SDK parses the JS code injected by the low-code component configuration item in S2 and binds the rendering engine SDK runtime context to control the customized business component: Low-code component configuration items can inject JS code to operate the target variable value, trigger the update of the dynamic component view associated with the variable, or directly interact with the dynamic component by obtaining the reference of the target component instance and calling its exposed methods; the rendering engine dynamically parses the injected JS code into a function through new Function, and binds variables and componentInstanceMap to the function runtime context through the call method of the js function prototype chain to execute the injected JS code.

7. A two-way interactive system based on a low-code front-end rendering engine, characterized in that: include: Component library, used to manage low-code components in the low-code system. All low-code components are designed based on page variables, and two-way binding is performed between data and views; The property configuration module is used to perform visual configuration for different low-code components. The configuration items of all low-code components can be bound to page variables. Modifying the value of the page variable will automatically trigger the update of the component view. Changes in the internal state of the component will automatically update the value of the page variable bound to the configuration item. The component configuration item supports the injection of JS code. The injected JS code running context can access all page variables and references to all component instances in the rendering engine. The rendering engine module is used to parse and render the metadata DSL and encapsulate it into a rendering engine SDK for the business side to call. The construction data of each low-code page is stored in the metadata DSL; The metadata DSL is parsed, rendered, and encapsulated into a rendering engine SDK, and further includes: Develop rendering engine components: create a new LowCodeRender.vue component, with the input parameters being the unique identifier of the low-code page, pageId, DSL, and the customized business component set dynamicComponentsMap. The rendering engine automatically pulls the DSL based on the pageId or directly renders the page based on the passed-in DSL. Encapsulate the rendering engine SDK's build entry lowCodeBuild.js: Introduce the LowCodeRender component, follow the component registration rules defined by the vue framework, create a new install method, call the vue framework's component method, and register the rendering engine component; Configure the Lib mode of the vite tool and build the rendering engine SDK in es format. The key configurations of the build are as follows: The package entry entry is configured as lowCodeBuild.js, the name name is configured as LowCodeRender, the formats formats is configured as es, and the build product file name fileName is configured as LowCodeRender.es.js; Publish the rendering engine SDK to the NPM intranet repository: Use the npm publish --registry=xxx command to publish the rendering engine SDK to the NPM intranet repository.

Images