Bidirectional interaction method and system based on low-code front-end rendering engine

Abstract

The invention is suitable for the technical field of software development, and provides a bidirectional interaction method and system based on a low-code front-end rendering engine, and the method comprises the steps: a product side adds a dynamic component in a component library, uses the dynamic component and a plurality of low-code components to package the rendering engine, and issues the rendering engine through an intranet warehouse, the business side selects a low-code integration scheme by using a low-code system based on business requirements so as to complete low-code page development, takes a page code pageId or DSL of the low-code page and all customized development business components as input parameters and injects the input parameters into a rendering engine; the business component developed in a customized mode controls low-code content by obtaining a context when a rendering engine runs; and the rendering engine binds the service component which is developed in a customized manner by analyzing the JS code injected by the low-code component configuration item and controlling the context during operation of the low-code component configuration item. Therefore, two-way communication and mutual control between the low-code rendering engine and the customized development content are achieved, and the flexibility and practicability of a low-code platform are remarkably improved.

Description

Technical Field

[0001] The present application belongs to the field of software development technology, and in particular, 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 walks of life, and more and more companies have begun to pay attention to software development efficiency. Against this background, low-code development platforms (LCDPs) have emerged and quickly led a wave of new technology crazes. Low-code development platforms use low-code technology to abstract the underlying architecture and infrastructure into a graphical interface, with visual design and configuration as the main focus, supplemented by a small amount of code, thereby providing the ability to quickly build pages and create business logic, and realizing the rapid construction of applications.

[0003] As front-end component framework technologies such as Vue and React mature, front-end component development technology is also developing rapidly. Front-end componentization is the process of splitting a complex user interface into multiple independent, 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 the code, and has become an important trend in modern front-end development.

[0004] The combination of component-based development technology and low-code technology further lowers the threshold for software development, making it easy for non-professionals to get started. However, low-code technology also has limitations. Its design idea is to develop all components in advance, and users build them on a visual interface. In the actual business use process, it is inevitable to encounter some unmet needs that require customized development. How to make full use of the rapid construction advantages of the low-code platform, build most of the supported content, and customize only the parts that require customized development, 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 of the low-code platform. Summary of the invention

[0005] The embodiments of the present 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 practicality of the low-code platform caused by the imperfect two-way communication and mutual control between the current low-code rendering engine and customized development content.

[0006] In the 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 method comprises 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 component customized and developed outside 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 warehouse; 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 using low-code to build the entire low-code page and embedding the customized business component 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 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.

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

[0008] Optionally, in another possible implementation of the first aspect, the visualization configuration items supported by the dynamic component 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. 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 parameters are the parameters received by the dynamic component when rendering on the business side. The dynamic component configures the input parameters for processing according to its own business logic; the output parameters are 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.

[0009] Optionally, in another possible implementation of the first aspect, 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, the dynamicComponent property is the currently rendered dynamic component, and 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.

[0010] Optionally, in another possible implementation of the first aspect, step S2 includes: 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 npm publish --registry=xxx command to publish the rendering engine SDK to the NPM intranet repository.

[0011] Optionally, in another possible implementation of the first aspect, 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 the properties and methods it supports. 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.

[0012] Optionally, in another possible implementation of the first aspect, step S4 includes: Step S41: Install the rendering engine SDK: Use the npm i LowCodeRender --registry=xxx command to specify that the rendering engine SDK be installed from the intranet repository; 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.

[0013] Optionally, in another possible implementation of the first aspect, step S5 includes: The customized 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 components: 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.

[0014] In a second aspect, an embodiment of the present application provides a two-way interactive system based on a low-code front-end rendering engine, including: Component library, used to manage low-code components in the low-code system. All low-code components are designed based on page variables, and data and views are bound bidirectionally. 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 saved in the metadata DSL.

[0015] Beneficial effects: In the technical solution of this application, the product side adds dynamic components to the component library, uses dynamic components and multiple low-code components to encapsulate the DSL rendering engine and publishes it through the intranet warehouse. The business side uses the low-code system to select a low-code integration solution based on business needs to complete the development of low-code pages, 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 by the low-code component configuration item and binding its runtime context. This achieves 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. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0017] Figure 1 It is a flowchart of a two-way interaction method based on a low-code front-end rendering engine provided by an embodiment of the present application; Figure 2 It is a schematic diagram of the two-way interaction between the rendering engine and the customized business component provided in one embodiment of the present application; Figure 3 It is a structural diagram of a two-way interactive system based on a low-code front-end rendering engine provided in one embodiment of the present application. DETAILED DESCRIPTION

[0018] In the following description, specific details such as specific system structures, technologies, etc. are provided for the purpose of illustration rather than limitation, so as to provide a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may 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 prevent unnecessary details from obstructing the description of the present application.

[0019] It should be understood that when used in the present specification and the appended claims, the term "comprising" indicates the presence of 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 combinations thereof.

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

[0021] As used in the specification and appended claims of this application, the term "if" can be interpreted as "when" or "uponce" or "in response to determining" or "in response to detecting", depending on the context. Similarly, the phrase "if it is determined" or "if [described condition or event] is detected" can be interpreted as meaning "uponce it is determined" or "in response to determining" or "uponce [described condition or event] is detected" or "in response to detecting [described condition or event]", depending on the context.

[0022] In addition, in the description of the present application specification and the appended claims, the terms "first", "second", "third", etc. are only used to distinguish the descriptions and cannot be understood as indicating or implying relative importance.

[0023] References to "one embodiment" or "some embodiments" etc. described in the specification of this application mean that one or more embodiments of the present application include specific features, structures or characteristics described in conjunction with the embodiment. Therefore, the statements "in one embodiment", "in some embodiments", "in some other embodiments", "in some other embodiments", etc. that appear in different places in this specification do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways. The terms "including", "comprising", "having" and their variations all mean "including but not limited to", unless otherwise specifically emphasized in other ways.

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

[0025] Figure 1 A flow chart of a two-way interaction method based on a low-code front-end rendering engine provided in an embodiment of the present application is shown.

[0026] like Figure 1 As shown, the two-way interaction method based on the low-code front-end rendering engine includes the following steps: S1. The product side adds dynamic components to the component library. Dynamic components are used to dynamically load business components customized and developed outside the low-code system; Furthermore, in one embodiment of the present application, the visualization configuration items supported by the dynamic component in the above 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.

[0027] Furthermore, in the embodiment of the present application, the above 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, the dynamicComponent property is the currently rendered dynamic component, and 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.

[0028] 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; Furthermore, in the embodiment of the present application, the above step S2 includes: 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. In the embodiment of the present application, 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 the properties and methods it supports. 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.

[0029] 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 npm publish --registry=xxx command to publish the rendering engine SDK to the NPM intranet repository.

[0030] 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 with low-code and embedding 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 customized business components as input parameters, and injects the input parameters into the rendering engine SDK in S2. Furthermore, in the embodiment of the present application, the above step S4 includes: Step S41: Install the rendering engine SDK: Use the npm i LowCodeRender --registry=xxx command to specify that the rendering engine SDK be installed from the intranet repository; 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.

[0031] 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.

[0032] Furthermore, in the embodiment of the present application, the above step S5 includes: The customized 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 components: 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.

[0033] As a possible implementation method, in an embodiment of the present application, Figure 2 As shown, the above step S5 includes: 1. Customized business components control the rendering engine: The dynamic component props sample code is as follows: const props = defineProps({ componentProp: { type: Object, default() { return {} } }, variables: { type: Object, default() { return {} } }, componentInstanceMap: { type: Object, default() { return {} } } }); Dynamic components control the rendering engine in two ways: (1) Dynamic components trigger the update of associated component views by operating the target variable value of the rendering engine. The sample code is as follows: props.variables.paramA=xxx The dynamic component modifies the value of the low-code system variable through this operation. The low-code system is based on data-driven views. All components associated with the paramA variable will update the view, thereby controlling the update of the rendering engine. (2) Interact with the component directly by obtaining the target component instance reference and calling its exposed methods. The sample code is as follows: props.componentInstanceMap['tableComponentA'].getList() The sample code implements the function of controlling the refresh of the low-code system table component by obtaining a reference to an instance of the low-code system table component and calling the refresh data method of the table component.

[0034] 2. Rendering engine controls dynamic components: The low-code component configuration item supports the injection of JS code, into which any business logic code can be injected. For example, when the low-code button component is clicked, the methodA method of the customized business component dynamicComponentA is triggered. The following sample code can be injected into the 'click event' attribute of the button component's configuration item: this.componentInstanceMap['dynamicComponentA'].methodA() Among them, this is the runtime context of the injected JS code. The rendering engine executes the injected code by dynamically parsing the injected JS code and binding variables and componentInstanceMap to the code runtime context. The sample code for parsing the injected JS code into a function and binding the runtime context function is as follows: function parseExpression(rawCode, context = {variables,componentInstanceMap}) { try { return new Function(`return (${rawCode})`).call(context) } catch (error) { console.error(`parseExpression error: ${error}`) return undefined } }.

[0035] The two-way interaction method based on the low-code front-end rendering engine provided in this application is that the product side adds a dynamic component to the component library, uses the dynamic component and multiple low-code components to encapsulate the DSL rendering engine and publishes it through the intranet warehouse. The business side uses the low-code system to select a low-code integration solution based on business needs 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 by the low-code component configuration item and binding its runtime context. In this way, two-way communication and mutual control between the low-code rendering engine and the customized development content are achieved, which significantly improves the flexibility and practicality of the low-code platform.

[0036] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0037] Corresponding to the two-way interaction method based on the low-code front-end rendering engine in the above embodiment, Figure 3 A structural schematic diagram of a two-way interactive system based on a low-code front-end rendering engine provided in an embodiment of the present application is shown. For ease of explanation, only the parts related to the embodiment of the present application are shown.

[0038] Reference Figure 3 , the system 300 comprises: Component library 301 is used to manage low-code components in the low-code system. All low-code components are designed based on page variables, and data and views are bound bidirectionally. The property configuration module 302 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 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.

[0039] In one embodiment, in a two-way interactive 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 on the page in the form of icons and text. Users select the required components according to business needs and drag them to the middle rendering engine area; the property configuration module selects different low-code components and can visually configure the components, such as configuring the component name, id, etc.; the rendering engine module is responsible for parsing and rendering the generated DSL metadata, and encapsulating it as an SDK for the business side to call.

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

[0041] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0042] The embodiments described above are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, a person skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features may be replaced by equivalents. Such modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application, and should all be included in the protection scope of the present 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; 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 component injected into the rendering engine SDK in S5 and S4 controls the low-code content by obtaining the runtime context of the rendering engine SDK; 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 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, the dynamicComponent property is the currently rendered dynamic component, and 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 S2 includes: 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 npm publish --registry=xxx command to publish the rendering engine SDK to the NPM intranet repository.

5. The method according to claim 4, 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.

6. The method according to claim 5, characterized in that Step S4 includes: Step S41: Install the rendering engine SDK: Use the npm i LowCodeRender --registry=xxx command to specify that the rendering engine SDK be installed from the intranet repository; 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.

7. The method according to claim 6, 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.

8. 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 saved in the metadata DSL.

Images