Remote component adaptation method, device and equipment of low-code platform and medium

Abstract

This invention relates to the field of R&D management technology, and discloses a method, apparatus, device, and medium for remote component adaptation to a low-code platform. The method includes: compiling the source code of an external business component into a standard module data package and constructing a corresponding online remote link; generating component standard metadata based on a preset low-code platform; extracting the component constructor based on the online remote link and the component standard metadata when loading a remotely developed component; merging component parameters in the component standard metadata and generating a runnable component instance using the component constructor; updating the parameters of the runnable component instance according to changes in user configuration on the low-code platform; monitoring the native event list of the parameter synchronization component instance, performing event-linked updates based on the native event list, and generating a target component instance. This invention can be applied to business system platforms such as fintech and healthcare, and can effectively improve the compatibility between the platform and remote components.

Description

Technical Field

[0001] This invention relates to the field of research and development management technology, and in particular to a method, apparatus, device and medium for remote component adaptation of a low-code platform. Background Technology

[0002] Low-code platforms based on the Vue2 front-end framework have significantly improved page building efficiency through drag-and-drop component functionality and are widely used in various software applications. With the evolution of front-end technologies, the team has accumulated a large number of high-performance Svelte components. However, integrating Svelte components as remote assets into the existing Vue2 platform faces the following challenges: On the one hand, the differences in cross-framework mechanisms make adaptation difficult. Vue2 is based on the Virtual DOM (Document Object Model) and a reactive system, while Svelte uses compile-time optimization to directly manipulate the DOM. The lifecycle, data flow, and event models of the two are incompatible, and direct integration will lead to rendering errors and communication blockages.

[0003] On the other hand, existing solutions often require manually writing Vue wrapper layers or complex transformation logic for each Svelte component, lacking a general adaptation layer, resulting in high integration costs and failing to meet the needs of low-code platforms for "plug-and-play" rapid reuse of component assets.

[0004] Meanwhile, the event communication mechanisms of Vue and Svelte components are not interoperable, and low-code platforms cannot listen to remote Svelte component interaction events, resulting in the failure of page interaction capabilities.

[0005] For example, in the financial insurance scenario, low-code platforms use drag-and-drop to build underwriting approval pages and risk control indicator monitoring dashboards, embedding high-performance Svelte big data policy table components. Direct integration often results in issues such as stagnant table data updates, scrolling rendering errors, and memory leaks due to component destruction. In the healthcare scenario, outpatient workstations and laboratory report browsing pages built on Vue2 low-code platforms, integrating Svelte's multi-time-series patient test trend chart component, are highly prone to chart initialization failures and failures in bidirectional synchronization of patient indicator data, severely impacting the continuity of business operations.

[0006] Therefore, how to shield the differences in the underlying framework and improve the compatibility between the platform and remote components has become an urgent problem to be solved. Summary of the Invention

[0007] This invention provides a method, apparatus, device, and medium for adapting remote components to a low-code platform, the main purpose of which is to solve the problem of poor compatibility between the platform and remote components.

[0008] In a first aspect, to achieve the above objectives, the present invention provides a remote component adaptation method for a low-code platform, comprising: Obtain the source code of external business components and compile the source code of external business components into a standard module data package; Construct the online remote link corresponding to the standard module data package, and generate component standard metadata according to the preset low-code platform; When loading remote development components on the low-code platform, the component constructor of the remote development component is extracted based on the online remote link and the component standard metadata; The component parameters in the component standard metadata are merged using a pre-built adaptation intermediate layer, and a runnable component instance based on the merged component parameters is generated using the component constructor. Monitor user configuration changes on the low-code platform, update parameters of the runnable component instance based on the user configuration changes, and obtain a parameter synchronization component instance; The adaptation intermediate layer is used to listen to the native event list of the parameter synchronization component instance, and the parameter synchronization component instance is updated in a linked manner according to the native event list to generate the target component instance.

[0009] Secondly, the present invention also provides a remote component adaptation device for a low-code platform, comprising: The source code compilation module is used to obtain the source code of external business components and compile the source code of the external business components into a standard module data package. The data construction module is used to construct the online remote link corresponding to the standard module data package and generate component standard metadata according to the preset low-code platform. The component constructor extraction module is used to extract the component constructor of the remote development component based on the online remote link and the component standard metadata when loading the remote development component on the low-code platform. A runnable component instance generation module is used to merge component parameters in the component standard metadata using a pre-built adaptation intermediate layer, and to generate a runnable component instance based on the merged component parameters using the component constructor. The parameter update module is used to monitor changes in user configuration of the low-code platform, update the parameters of the runnable component instance according to the changes in user configuration, and obtain a parameter synchronization component instance. The event-linked update module is used to listen to the native event list of the parameter synchronization component instance using the adaptation intermediate layer, and perform event-linked updates on the parameter synchronization component instance according to the native event list to generate the target component instance.

[0010] Thirdly, the present invention also provides an electronic device, the electronic device comprising: At least one processor; and, A memory communicatively connected to the at least one processor; wherein, The memory stores a computer program that can be executed by the at least one processor, the computer program being executed by the at least one processor to enable the at least one processor to perform the remote component adaptation method for the low-code platform described above.

[0011] Fourthly, the present invention also provides a computer-readable storage medium storing at least one computer program, which is executed by a processor in an electronic device to implement the remote component adaptation method for a low-code platform described above.

[0012] In this embodiment of the invention, by compiling the source code of external business components into a standard module data package, remote components can be seamlessly integrated into the low-code platform, adapting to all existing low-code business projects and improving the compatibility between remote components and the platform; constructing an online remote link corresponding to the standard module data package and generating component standard metadata according to the preset low-code platform can fit various adaptation scenarios; when loading remote development components, the component constructor is extracted according to the online remote link and the component standard metadata, and a runnable component instance can be generated according to the component parameters in the component standard metadata; Furthermore, by monitoring user configuration changes on the low-code platform, the issue of missing parameters in remote components is resolved. Parameters are automatically synchronized, eliminating the need for manual completion of default configurations and effectively improving the cross-frame rendering stability of remotely developed components. By listening to the native event list of parameter synchronization component instances and updating events in a linked manner based on the native event list, the target component instance is generated. This can shield the differences in event mechanisms between the two frames, significantly reducing the cost of expanding the low-code platform component library while improving the adaptability of Svelte remote components. Attached Figure Description

[0013] To more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the description of the embodiments of the present invention will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0014] Figure 1 This is a schematic diagram of an application environment for a remote component adaptation method for a low-code platform according to an embodiment of the present invention. Figure 2 A flowchart illustrating a remote component adaptation method for a low-code platform provided in an embodiment of the present invention; Figure 3 for Figure 2A flowchart illustrating the process of compiling the source code of external business components into a standard module data package in step S1. Figure 4 for Figure 2 A flowchart illustrating the process of generating component standard metadata based on a preset low-code platform in step S2. Figure 5 for Figure 2 A flowchart illustrating the process of merging component parameters in the standard metadata of components in step S4. Figure 6 for Figure 2 A flowchart illustrating the process of generating a runnable component instance with merged component parameters using the component constructor in step S4. Figure 7 for Figure 2 A flowchart illustrating the process of monitoring user configuration changes on the low-code platform in step S5. Figure 8 for Figure 2 A flowchart illustrating the process of updating the parameter synchronization component instance via event linkage in step S6. Figure 9 A functional block diagram of a remote component adaptation device for a low-code platform provided in an embodiment of the present invention; Figure 10 A schematic diagram of the structure of an electronic device that implements a remote component adaptation method for a low-code platform according to an embodiment of the present invention; Figure 11 This is another structural schematic diagram of an electronic device that implements a remote component adaptation method for a low-code platform, according to an embodiment of the present invention.

[0015] The objectives, features, and advantages of this invention will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation

[0016] It should be noted that in the technical solutions disclosed in this invention, the acquisition of user information (personal image data (e.g., facial videos or pictures, facial feature videos or pictures, etc.) and personal privacy information (e.g., name, ID number, occupation, address, etc.)) is all completed with the user's knowledge and consent, and the acquisition of the relevant user information is legal and compliant.

[0017] To enable those skilled in the art to better understand the technical solutions of this disclosure, and to fully understand and implement the process of how this disclosure applies technical means to solve technical problems and achieve corresponding technical effects, the technical solutions in the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this disclosure, not all embodiments. The embodiments of this disclosure and the various features within them can be combined with each other without conflict, and the resulting technical solutions are all within the protection scope of this disclosure. All other embodiments obtained by those skilled in the art based on the embodiments of this disclosure without creative effort should fall within the protection scope of this disclosure.

[0018] It should be noted that the terms "first," "second," etc., used in this disclosure and the accompanying drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this disclosure described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, apparatus, product, or device that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or devices.

[0019] This application provides a remote component adaptation method for a low-code platform. The execution subject of this method includes, but is not limited to, at least one of the following electronic devices that can be configured to execute the device provided in this application: a server, a terminal, etc. In other words, the remote component adaptation method for the low-code platform can be executed by software or hardware installed on a terminal device or a server device. The server includes, but is not limited to, a single server, a server cluster, a cloud server, or a cloud server cluster. The server can be an independent server or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks (CDNs), and big data and artificial intelligence platforms.

[0020] The remote component adaptation method for low-code platforms of this invention can be applied to, for example... Figure 1In this application environment, the client communicates with the server via a network. The client can be, but is not limited to, various personal computers, laptops, smartphones, tablets, and portable wearable devices. The server can be implemented using a standalone server or a server cluster consisting of multiple servers. The invention will now be described in detail through specific embodiments.

[0021] Reference Figure 2 The diagram shown is a flowchart illustrating a remote component adaptation method for a low-code platform according to an embodiment of the present invention. In this embodiment, the remote component adaptation method for the low-code platform includes: S1. Obtain the source code of the external business component and compile the source code of the external business component into a standard module data package.

[0022] In this embodiment of the invention, the external business component source code is not a native built-in material of the low-code platform. It is independently developed, compiled, and packaged by external developers, follows the platform extension protocol, and is used after being imported into the low-code platform. For example, the external business component source code can be the source code of a completed Svelte component. It is the component source code developed by R&D personnel based on the Svelte syntax specification, completed with unit testing, and implemented for specific business scenarios. It has the suffix .svelte and includes templates, styles, and business scripts.

[0023] Furthermore, the standard module data package is a data package in the standard UMD (Universal Module Definition) format.

[0024] Specifically, see Figure 3 As shown, compiling the external business component source code into a standard module data package includes: S31. Construct the component packaging environment for the source code of the external business components; S32. Configure the mapping relationship between external dependency events and global variables of the external business component source code according to the component packaging environment; S33. Write the addressing logic for the external dependent events in different runtime environments according to the global variable mapping relationship; S34 encapsulates the addressing logic with the source code of the external business component to obtain a standard module data package.

[0025] In detail, the component packaging environment is a set up isolated and standardized compilation and build pipeline, which is specifically used for batch compilation of external business component source code, ensuring that all component packaging rules are consistent and the output artifacts are standardized. It can use Vite and Rollup as the underlying packaging kernel, and then configure the compilation parameters to uniformly constrain the process to obtain the component packaging environment.

[0026] Furthermore, we analyze the external resources referenced internally by external business components, establish a mapping table between component internal identifiers and runtime environment global variables or event names, obtain the external dependency time of global variable mapping relationship, and solve the problems of cross-environment dependency not being found and inconsistent event naming.

[0027] Among them, external dependency events are external dependencies imported from the source code of external business components, such as date tools, common business software development kits, chart libraries, etc. Global variable mapping relationships are established using preset mapping rules to create global variable mapping relationships between external dependencies of external business component source code and custom events of external business components.

[0028] For example, when the external business component is a Svelte component and the low-code platform is implemented based on the Vue framework, for external dependency events, the names are imported into the source code of the external business component and mapped to global mounted variables under the browser window; for component custom events: standardizing event names and establishing unified event identifiers can eliminate the naming differences between the native event mechanism of Svelte components and the event mechanism of the Vue low-code platform.

[0029] Furthermore, branch addressing logic is generated for different runtime environments: for the AMD runtime environment, the module loader is used to import dependencies; for the CommonJS environment, require is used to import; for browsers without modules, the default variables are read directly from the browser's window global object, which is the addressing logic. When loading remote development components, the addressing logic forwards internal events as standardized global events according to the mapping table, ensuring that the low-code platform environment can capture them.

[0030] In this embodiment of the invention, the addressing logic is translated into executable code to obtain addressing pad code. First, the addressing pad code is placed at the forefront, concatenated with the source code of external business components, and component style resources are processed. Based on preset global variable mapping configuration packaging parameters, the module import logic is automatically rewritten. Then, it is wrapped with a UMD standardized shell to achieve adaptability to various operating environments. Event forwarding hooks are injected synchronously to coordinate with the addressing logic to uniformly handle component event dispatch. After code processing and resource integration, a standard module data package is generated.

[0031] This invention facilitates unified loading on low-code platforms by constructing standard module data packages, eliminating the development costs of customizing and encapsulating each component individually, and providing standardized input for cross-framework component rendering and communication.

[0032] In this embodiment of the invention, UMD format remote components can be seamlessly accessed through standard module data packages, adapting to all existing low-code business projects and improving the compatibility between remote components and the platform.

[0033] S2. Construct the online remote link corresponding to the standard module data package, and generate component standard metadata according to the preset low-code platform.

[0034] In this embodiment of the invention, the online remote link is a resource URL (Uniform Resource Locator) that can be accessed remotely via the network and dynamically retrieved by the low-code platform, allowing the low-code platform to dynamically load the source code of remote external business components.

[0035] Furthermore, the standard module data package is uploaded to a pre-defined private object storage cluster. A standardized online access URL is constructed based on the upload path and the static resource domain name of the private object storage cluster. Simultaneously, response headers are configured on the server side to ensure that the low-code platform can remotely retrieve resources across domains. The generated online remote link is stored in a pre-defined operations and maintenance knowledge base. When the low-code platform renders a page, it dynamically initiates network requests based on the stored online remote link, enabling remote loading of the standard module data package.

[0036] In the embodiments of the present invention, see Figure 4 As shown, component standard metadata is generated based on the preset low-code platform, including: S41. Determine the metadata items to be filled based on the source code of the external business component; S42. Fill the metadata items to be filled based on the low-code platform to obtain the basic information of the component; S43. Perform format verification on the basic information of the component to obtain the component standard metadata.

[0037] In detail, the low-code platform is a visual application development engine system that includes a design-state designer and a runtime rendering engine. The design-state designer receives visual drag-and-drop and parameter configuration operations, and outputs page configuration data that describes the page structure, component attributes, and event logic. The runtime rendering engine loads and parses the page configuration data, instantiates components and initializes the runtime context, maintains reactive variables in the runtime context, and completes component rendering, data binding, and event scheduling to realize the running display of the business page. The low-code platform supports the integration of external business components to expand material capabilities.

[0038] In an optional embodiment, the low-code platform can be a Vue2 low-code platform based on the Vue2 technology stack. According to the material specifications of the low-code platform, standardized metadata fields are defined to obtain the metadata items to be filled, such as component identifier, component export name, online remote link, global mounted variable, matching style resource link, component attribute and event version information, etc.

[0039] Based on the custom material management module of the low-code platform, a new remote component entry is created. Standardized information of the metadata items to be filled in is entered one by one according to the specifications. The previously obtained online remote link is bound to generate basic component information and complete registration of global variable identifiers required when loading remote components.

[0040] Furthermore, format validation checks for missing critical loading parameters. Once validation passes, the component's basic information is stored in the material database, forming readable standard metadata for the component. This standard metadata is then written to the material database within the low-code platform for caching.

[0041] In this embodiment of the invention, component panel display, visual configuration, and dynamic loading at runtime can be achieved through component standard metadata. Direct loading via online remote link perfectly matches the core runtime scenarios of low-code online editing, real-time preview, and dynamic component switching, effectively improving the adaptability of remote components.

[0042] S3. When loading remote development components on the low-code platform, extract the component constructor of the remote development component based on the online remote link and the component standard metadata.

[0043] In this embodiment of the invention, loading remote development components on the low-code platform involves the user dragging and dropping the remote development component onto the canvas of the low-code platform. The remote development component can be a Svelte component corresponding to the source code of the external business component compiled above.

[0044] When a remote Svelte component is selected by dragging and dropping, a native Vue2 container component (adapter shell) is generated within the canvas of the low-code platform. This container, as a standard node within the Vue2 canvas system, is responsible for remotely loading standard module data package resources, creating component instances, bidirectional proxy properties, forwarding events, isolating the underlying framework differences between the low-code platform and the remotely developed component, and enabling rendering interoperability and business interaction between the two framework components.

[0045] For example, in the fintech field, a remote development component could be a virtual scrolling table of insurance policy big data. Developers can drag and drop the virtual policy table from the material panel of a low-code platform onto the underwriting page canvas; the canvas then generates a Vue remote adaptation container for loading. In the healthcare field, a remote development component could be a time-series trend chart of patient test results. Developers can drag and drop the test result trend chart component onto the low-code platform canvas and embed it into the outpatient browsing page for loading.

[0046] Further, the component constructor of the remote development component is extracted based on the online remote link and the component standard metadata, including: Check if the standardized metadata for the component exists in the material database of the low-code platform; If it exists, extract the standardized metadata of the component from the material database; Parse the global mount identifier in the standardized metadata of the component; The global mount identifier is used to access the browser global object corresponding to the low-code platform, and the component constructor of the remote development component is retrieved from the global object; If it does not exist, load the global root object from the standard module data package from the online remote link; Retrieve the component constructor of the remote development component from the global root object.

[0047] In this embodiment of the invention, the metadata stores two key pieces of information: global mount variables and component export names. First, it queries whether the standardized metadata of the component is cached in the material database of the low-code platform. If so, it parses the standardized metadata of the component, retrieves the pre-stored global root variable name (such as window.SvelteMaterial) and the export field name (such as Table) corresponding to the current remote development component, and obtains the global mount identifier in the standardized metadata.

[0048] Furthermore, the browser's top-level window global object is accessed based on the global mount identifier to obtain the browser global object. Then, the component constructor is retrieved from the global object using the exported field name of the standardized metadata record as an index.

[0049] In another optional embodiment of the present invention, if there is no standardized metadata, a standard module data package is loaded from an online remote link. After the standard module data package is loaded normally, a global root object must exist on the window. The root object contains the component constructor classes of all exported remote components. Then, based on the unique component ID of the remote development component, the component constructor class of the remote development component is retrieved from the global root object.

[0050] In detail, the component constructor is the component factory function, which is the core capability carrier exposed by the standard module package. It can support external calls to create independent running instances of components. After loading remote development components on the Vue2 low-code platform, the component constructor is obtained, providing a unified and standardized way to create components for the cross-framework general adaptation layer. This is the foundation for enabling plug-and-play functionality on the Vue2 low-code platform canvas for remote development teams.

[0051] S4. Merge the component parameters in the component standard metadata using the pre-built adaptation intermediate layer, and generate a runnable component instance based on the merged component parameters using the component constructor.

[0052] In this embodiment of the invention, the adaptation middleware is a general native component deployed inside the low-code platform and developed based on the low-code platform, serving as a neutral proxy middleware between the low-code engine of the low-code platform and remote components.

[0053] The adaptation middleware automatically collects three types of parameters: canvas user configuration parameters that users manually modify in the properties panel on the right side of the low-code application; platform preset default parameters configured in the backend when writing component standardized metadata; and component native default parameters defined inside the remote development component.

[0054] Specifically, see Figure 5 As shown, the step of merging component parameters in the component standard metadata using a pre-built adaptation intermediate layer includes: S51. Use the adaptation intermediate layer to extract the component's native default parameters and canvas user configuration parameters when loading remote development components on the low-code platform. S52. Calculate the parameter priority of the component's native default parameters, the canvas user configuration parameters, and the platform preset default parameters in the component's standard metadata; S53. Based on the parameter priority, the original default parameters of the component, the user configuration parameters of the canvas, and the preset default parameters of the platform are overridden to obtain the initial merge parameters; S54. Clean up the invalid null values ​​in the initial merging parameters to obtain the merging component parameters.

[0055] Furthermore, parameter priorities can be pre-configured, with canvas user-configured parameters having the highest priority, platform-preset default parameters having the next highest priority, and component native default parameters having the lowest priority. The platform-preset default parameters override the component native default parameters, using the lowest priority component native default parameters as the base.

[0056] Specifically, iterate through all fields of the platform's default parameters: if the component's native default parameter has a field with the same name: directly replace the original value of the component's native default parameter with the value of the platform's default parameter; If the component's native default parameters do not contain this field: add the platform's preset default parameter field and its corresponding parameter value to the base; after execution, the base will be the result of the component's native default parameters and the platform's preset default parameters overriding each other. Similarly, the base will be overridden again using the canvas user configuration parameters to obtain the initial merge parameters.

[0057] Furthermore, meaningless parameters such as null, undefined, empty strings, and invalid empty arrays are removed from the initial merge parameters. At the same time, if a required field still has no valid value after three layers of merging, the valid default value of the next lower layer is retrieved. This process cleans up invalid null values ​​in the initial merge parameters and yields the merged component parameters.

[0058] In the embodiments of the present invention, see Figure 6 As shown, generating a runnable component instance based on merged component parameters using the component constructor includes: S61. Construct instantiated configuration parameters based on the parameters of the merged components; S62. The component is instantiated and compiled using the component constructor according to the instantiation configuration parameters to obtain the instantiated component; S63. Initialize the internal response listening mechanism of the instantiated component to obtain the runnable component instance with the merged component parameters.

[0059] Among them, a runnable component instance is a component that is actually rendered and effective on the page, generated by calling the component constructor to perform the instantiation standard calculation.

[0060] Specifically, the merged component parameters are integrated into the same options (instantiation configuration) object according to the component instantiation specification, assembled into a standard configuration object, and the instantiation configuration parameters are obtained. These parameters are then passed to the component constructor to perform a new operation to generate an independent instantiated component. After the instantiated component is generated, it is synchronously bound to pre-built internal response listening mechanisms such as cross-framework event delegation and Vue parameter synchronous listening, and incorporated into the unified lifecycle management of the two frameworks to complete the runnable rendering of heterogeneous components on the low-code platform.

[0061] The `new` operator is the standard operator for component instantiation and compilation. When applied to a component's constructor, it automatically creates an independent component instance, injects the merged component parameters, renders the document object model, and attaches the full set of native operation APIs (Application Programming Interface), thereby generating an instantiated component.

[0062] S5. Monitor user configuration changes on the low-code platform, update the parameters of the runnable component instance according to the user configuration changes, and obtain a parameter synchronization component instance.

[0063] In this embodiment of the invention, the user configuration change on the low-code platform is a parameter modification behavior in the low-code canvas of the low-code platform, in which the user drags, inputs, and selects from the drop-down properties panel on the right to modify the parameters (size, text, switch, business fields, etc.) of the remote development component.

[0064] For example, when banking staff drag and drop the "Credit Limit Svelte Form Component" to build a customer loan H5 page, they can modify the maximum loan amount, adjust the term options, enable mandatory credit check validation, and modify the prompt text. Similarly, when medical institutions drag and drop the "Chronic Disease Consultation Svelte Form Component" to build an online consultation page, they can add chronic disease type options, modify symptom input box prompts, enable mandatory blood pressure values, and adjust the form layout width, among other configuration changes.

[0065] Specifically, see Figure 7 As shown, monitoring user configuration changes on the low-code platform includes: S71. Create a listener on the low-code platform and use the listener to monitor the reactive variables of the low-code platform to obtain variable change data. S72. Identify the valid parameter change data in the variable change data; S73. Generate the user configuration change for the low-code platform based on the effective parameter change data.

[0066] In detail, on a low-code platform, you can set up a Vue2 reactive deep listener as a listener to capture user actions in the property panel (entering text, selecting from dropdowns, toggling switches, dragging sliders) in real time, and modify the variable changes of any field within the reactive variable.

[0067] Among them, reactive variables are business variables built into the low-code platform with reactive tracking capabilities. Once the value of a business variable is modified, the low-code platform can automatically capture the change in value through listeners, obtain the variable change data, and automatically drive the page components, forms, expressions, and business logic bound to the variable to update and render synchronously.

[0068] Furthermore, reactive variables are variable objects managed by the low-code platform runtime context. The underlying framework of the low-code platform performs read / write proxy interception on reactive variables. When a reactive variable's value changes, the platform runtime can automatically identify the variable modification behavior and publish the variable change event. As a data carrier, reactive variables support binding with the low-code platform's visualization components, business expressions, and data sources. When the variable's value changes, it drives the bound components to automatically update their views. Listeners are also deployed within the low-code platform runtime environment, subscribing to the change events published by reactive variables to obtain variable change data.

[0069] Furthermore, the parameter values ​​of each field are compared layer by layer from the variable change data, and only fields whose values ​​have changed substantially and belong to the component's business input parameters are selected. The selected "key-value pairs that have changed substantially" are encapsulated to obtain the effective parameter change data.

[0070] For example, the previous parameter value was: {title:"Policy List", width:600, disabled:false} The parameter value after listening is: {title:"Car Insurance Policy", width:600, disabled:false} Only the title field has been actually changed; the effective parameter change data is {title:"Car Insurance Policy"}.

[0071] Furthermore, using the initial reactive variables of the low-code platform as a base, the corresponding fields are overwritten with valid parameter change data to obtain the user configuration changes of the low-code platform.

[0072] In this embodiment of the invention, after obtaining the user configuration change, the step of merging the component parameters in the component standard metadata using the pre-built adaptation intermediate layer is returned, and then the svelteInstance.$set() method is called to update the parameters of the running component instance, thereby realizing the canvas user configuration change of the low-code platform and synchronously updating the component view of the running component instance.

[0073] In detail, this invention completely solves the problem of missing parameters and errors in remote components by monitoring user configuration changes on low-code platforms. Parameters are automatically synchronized, eliminating the need for manual completion of default configurations and effectively improving the rendering stability of remotely developed components.

[0074] S6. Use the adaptation intermediate layer to listen to the native event list of the parameter synchronization component instance, and update the parameter synchronization component instance according to the native event list to generate the target component instance.

[0075] In this embodiment of the invention, the native event list refers to the custom business events actively dispatched by the remote development component, which is the standard capability of the component to transmit interactive behaviors and business data to the outside world.

[0076] Furthermore, when writing standardized metadata in the low-code backend, all native custom event names thrown by Svelte components (such as rowClick, confirm, filterChange, etc.) are pre-registered; thus, when the middle layer calls svelteInstance.on(event name, callback), the native event list of the parameter synchronization component instance can be captured.

[0077] Further, see Figure 8 As shown, the step of updating the parameter synchronization component instance based on the native event list to generate the target component instance includes: S81. Standardize the event format of the original event list to generate a standardized event list; S82. Convert the standardized event list into platform-custom events of the low-code platform; S83. Update the parameter synchronization component instance according to the platform's custom events to generate the target component instance.

[0078] In this embodiment of the invention, since low-code platforms cannot directly recognize the structure of native events, the native events are standardized and encapsulated by an adaptation intermediate layer, and then forwarded as platform-custom events that the low-code platform can recognize through methods such as this.$emit, thereby achieving cross-framework interoperability.

[0079] Furthermore, the platform's custom events are passed to the low-code canvas engine layer of the low-code platform. The low-code canvas engine layer matches the pre-configured visual linkage rules of the page. After conditional filtering, it executes business actions such as assignment, interface request, pop-up control, and component refresh in the platform's custom events. These actions modify the page component configuration variables, triggering user configuration change detection and parameter updates again, ultimately completing the full business linkage across components and pages.

[0080] For example, if the platform's custom event is a form submission event, the linkage rules are: after verifying that the form has no errors, a pop-up window of successful appointment will appear, and the form input will be cleared; the execution logic of the event linkage update is: modify the pop-up window's display variables, reset the form component parameters, change the view in real time, and generate the target component instance.

[0081] Preferably, after the event-linked update is completed, a new component configuration change will be generated, and the step of updating the parameters of the runnable component instance according to the user configuration change will be performed again to form a complete closed loop.

[0082] Furthermore, each loaded remote development component can be wrapped in an independent Vue 2 wrapper. The lifecycle management of the component hooks is implemented through these Vue component hooks. When the adaptation middleware receives a unique and reliable destruction signal (canvas component deletion, page route switching, pop-up closing, etc.), the Vue component hooks execute a complete set of component destruction and cleanup logic, thereby unifying the management of the entire component lifecycle. At the moment of component destruction, instance destruction logic is forcibly executed, cache is cleared, and events are unbound, completely solving the problems of cross-framework memory leaks and global pollution.

[0083] In this embodiment of the invention, by updating in a linked event manner, the differences in the dual-frame event mechanism between the Svelte remote component and the low-code platform can be masked. The upper-layer low-code platform does not need to be aware of the underlying component technology stack and can complete the interactive linkage by using the original event configuration logic. There is no need to repeatedly develop Vue components with the same function, which greatly reduces the cost of expanding the low-code platform component library while improving the adaptability of the Svelte remote component.

[0084] It should be understood that the sequence number of each step in the above embodiments does not imply 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 invention.

[0085] like Figure 9 The diagram shown is a functional block diagram of a remote component adaptation device for a low-code platform provided in an embodiment of the present invention.

[0086] In this disclosure, a remote component adaptation device for a low-code platform is provided, which corresponds one-to-one with the remote component adaptation method for the low-code platform described in the above embodiments. For example... Figure 9 As shown, this remote component adaptation device 100 for a low-code platform can be installed in an electronic device. According to its implemented functions, the remote component adaptation device 100 for a low-code platform includes a source code compilation module 101, a data construction module 102, a component constructor extraction module 103, a runnable component instance generation module 104, a parameter update module 105, and an event-linked update module 106. Detailed descriptions of each functional module are as follows: Source code compilation module 101 is used to obtain the source code of external business components and compile the source code of the external business components into a standard module data package; The data construction module 102 is used to construct the online remote link corresponding to the standard module data package and generate component standard metadata according to the preset low-code platform. The component constructor extraction module 103 is used to extract the component constructor of the remote development component based on the online remote link and the component standard metadata when loading the remote development component on the low-code platform. Runnable component instance generation module 104 is used to merge component parameters in the component standard metadata using a pre-built adaptation intermediate layer, and generate a runnable component instance based on the merged component parameters using the component constructor. The parameter update module 105 is used to monitor changes in user configuration of the low-code platform, update the parameters of the runnable component instance according to the changes in user configuration, and obtain a parameter synchronization component instance. The event linkage update module 106 is used to listen to the native event list of the parameter synchronization component instance using the adaptation intermediate layer, and perform event linkage update on the parameter synchronization component instance according to the native event list to generate the target component instance.

[0087] In one embodiment, when the source code compilation module 101 compiles the external business component source code into a standard module data package, it is used to: Construct the component packaging environment for the source code of the external business components; Configure the mapping relationship between external dependency events and global variables of the external business component source code according to the component packaging environment; The addressing logic for external dependent events in different runtime environments is written according to the global variable mapping relationship; The addressing logic is encapsulated with the source code of the external business component to obtain a standard module data package.

[0088] In one embodiment, when the data construction module 102 generates component standard metadata according to a preset low-code platform, it is used to: The metadata items to be filled are determined based on the source code of the external business components. The component's basic information is obtained by filling in the metadata items to be filled based on the low-code platform. The basic information of the component is formatted and validated to obtain the component's standard metadata.

[0089] In one embodiment, the runnable component instance generation module 104, when performing the merging of component parameters in the component standard metadata using a pre-built adaptation intermediate layer, is configured to: The adaptation intermediate layer is used to extract the component's native default parameters and canvas user configuration parameters when loading remote development components on the low-code platform. Calculate the parameter priority of the component's native default parameters, the canvas user configuration parameters, and the platform preset default parameters in the component's standard metadata; Based on the parameter priority, the original default parameters of the component, the user configuration parameters of the canvas, and the preset default parameters of the platform are overridden to obtain the initial merge parameters; Clean up any invalid null values ​​in the initial merge parameters to obtain the merge component parameters.

[0090] In one embodiment, when the runnable component instance generation module 104 generates a runnable component instance based on merged component parameters using the component constructor, it is configured to: Construct instantiation configuration parameters based on the merged component parameters; The component is instantiated and compiled using the component constructor based on the instantiation configuration parameters to obtain an instantiated component. The internal response listening mechanism of the instantiated component is initialized to obtain a runnable component instance with merged component parameters.

[0091] In one embodiment, the parameter update module 105, when performing the monitoring of user configuration changes on the low-code platform, is used to: Create a listener on the low-code platform and use the listener to monitor the reactive variables of the low-code platform to obtain variable change data; Identify valid parameter change data in the variable change data; The user configuration changes for the low-code platform are generated based on the valid parameter change data.

[0092] In one embodiment, when the event-linked update module 106 performs event-linked updates on the parameter synchronization component instance based on the native event list to generate the target component instance, it is used to: The original event list is standardized in terms of event format to generate a standardized event list; Convert the standardized event list into platform-custom events for the low-code platform; The parameter synchronization component instance is updated in a synchronized manner according to the platform's custom events, thereby generating the target component instance.

[0093] In this invention, the specific limitations of a remote component adaptation device for a low-code platform can be found in the above-described limitations of the remote component adaptation method for a low-code platform, and will not be repeated here. Each module in the aforementioned remote component adaptation device for a low-code platform can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device in hardware form, or stored in the memory of a computer device in software form, so that the processor can call and execute the operations corresponding to each module.

[0094] In one embodiment, a computer device is provided, which may be a server, and its internal structure diagram may be as follows: Figure 10 As shown. The computer device includes a processor, memory, network interface, and database connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile and / or volatile storage media and internal memory. The non-volatile storage media stores the operating system, computer programs, and database. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage media. The network interface is used to communicate with external clients via a network connection. When the computer program is executed by the processor, it implements the functions or steps of the server-side of the low-code platform remote component adaptation method.

[0095] In one embodiment, a computer device is provided, which may be a client, and its internal structure diagram may be as follows: Figure 11As shown, the computer device includes a processor, memory, network interface, display screen, and input devices connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage media. The network interface is used to communicate with an external server via a network connection. When the computer program is executed by the processor, it implements the client-side functions or steps of the remote component adaptation method for a low-code platform.

[0096] In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to perform the following steps: Obtain the source code of external business components and compile the source code of external business components into a standard module data package; Construct the online remote link corresponding to the standard module data package, and generate component standard metadata according to the preset low-code platform; When loading remote development components on the low-code platform, the component constructor of the remote development component is extracted based on the online remote link and the component standard metadata; The component parameters in the component standard metadata are merged using a pre-built adaptation intermediate layer, and a runnable component instance based on the merged component parameters is generated using the component constructor. Monitor user configuration changes on the low-code platform, update parameters of the runnable component instance based on the user configuration changes, and obtain a parameter synchronization component instance; The adaptation intermediate layer is used to listen to the native event list of the parameter synchronization component instance, and the parameter synchronization component instance is updated in a linked manner according to the native event list to generate the target component instance.

[0097] In the several embodiments provided by this invention, it should be understood that the disclosed devices and apparatuses can be implemented in other ways. For example, the system embodiments described above are merely illustrative; for instance, the division of modules is only a logical functional division, and other division methods may be used in actual implementation.

[0098] Furthermore, the functional modules in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or in the form of hardware plus software functional modules.

[0099] Therefore, the embodiments should be considered exemplary and non-limiting in all respects, and the scope of the invention is defined by the appended claims rather than the foregoing description. Thus, all variations falling within the meaning and scope of equivalents of the claims are intended to be embraced within the invention. No appended diagram markings in the claims should be construed as limiting the scope of the claims.

[0100] In some embodiments of this example, a computer-readable storage medium is provided, on which a computer program is stored, which, when executed by a processor, implements the steps of the method described in the above embodiments.

[0101] The readable storage medium of the present invention stores a computer program, which, when executed by a processor of an electronic device, can perform the following: Obtain the source code of external business components and compile the source code of external business components into a standard module data package; Construct the online remote link corresponding to the standard module data package, and generate component standard metadata according to the preset low-code platform; When loading remote development components on the low-code platform, the component constructor of the remote development component is extracted based on the online remote link and the component standard metadata; The component parameters in the component standard metadata are merged using a pre-built adaptation intermediate layer, and a runnable component instance based on the merged component parameters is generated using the component constructor. Monitor user configuration changes on the low-code platform, update parameters of the runnable component instance based on the user configuration changes, and obtain a parameter synchronization component instance; The adaptation intermediate layer is used to listen to the native event list of the parameter synchronization component instance, and the parameter synchronization component instance is updated in a linked manner according to the native event list to generate the target component instance.

[0102] It should be noted that the functions or steps that can be implemented by the computer-readable storage medium or computer device described above can be referred to the relevant descriptions on the server side and client side in the foregoing method embodiments. To avoid repetition, they will not be described one by one here.

[0103] Computer-readable storage media may also store at least one computer-executable program / instruction, such as computer-readable instructions. Computer-readable storage media include, but are not limited to, volatile memory and / or non-volatile memory. Volatile memory may include, for example, random access memory (RAM) and / or cache memory. Computer-readable storage media may include, for example, read-only memory (ROM), hard disk, flash memory, etc. For example, a non-transitory computer-readable storage medium may be connected to a computing device such as a computer, and then, when the computing device executes the computer-readable instructions stored on the computer-readable storage medium, the various methods described above can be performed.

[0104] In addition, the computer device may include (but is not limited to) a data bus, an input / output (I / O) bus, a display, and input / output devices (e.g., keyboard, mouse, speakers, etc.).

[0105] In one embodiment, the at least one computer-executable instruction may also be compiled into or comprise a software product / computer program product, wherein one or more computer-executable instructions are executed by a processor to perform the steps of the various functions and / or methods in the embodiments described herein.

[0106] Those skilled in the art will understand that all or part of the processes in the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Furthermore, any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory.

[0107] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is used as an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.

[0108] In the embodiments provided in this disclosure, it should be understood that the disclosed apparatus and methods can also be implemented in other ways. The apparatus embodiments described above are merely illustrative; for example, the flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks may occur in a different order than those marked in the drawings. It should also be noted that each block in a block diagram and / or flowchart, and combinations of blocks in block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or action, or using a combination of dedicated hardware and computer instructions.

[0109] The above-described embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included within the protection scope of the present invention.

[0110] It should be noted that any AI models, software tools, or components not belonging to this company appearing in the embodiments of this application are merely illustrative examples and do not represent actual use. All user personal information involved in the embodiments of this application has been authorized (with the knowledge and consent) by the relevant parties or has been fully authorized by all parties, and the executing entity may obtain it through various legal and compliant means. The collection, storage, use, processing, transmission, provision, and disclosure of the information, data, and signals involved all comply with relevant laws and regulations and do not violate public order and good morals.

Claims

1. A method for adapting remote components to a low-code platform, characterized in that, The method includes: Obtain the source code of external business components and compile the source code of external business components into a standard module data package; Construct the online remote link corresponding to the standard module data package, and generate component standard metadata according to the preset low-code platform; When loading remote development components on the low-code platform, the component constructor of the remote development component is extracted based on the online remote link and the component standard metadata; The component parameters in the component standard metadata are merged using a pre-built adaptation intermediate layer, and a runnable component instance based on the merged component parameters is generated using the component constructor. Monitor user configuration changes on the low-code platform, update parameters of the runnable component instance based on the user configuration changes, and obtain a parameter synchronization component instance; The adaptation intermediate layer is used to listen to the native event list of the parameter synchronization component instance, and the parameter synchronization component instance is updated in a linked manner according to the native event list to generate the target component instance.

2. The remote component adaptation method for a low-code platform as described in claim 1, characterized in that, The step of compiling the source code of the external business component into a standard module data package includes: Construct the component packaging environment for the source code of the external business components; Configure the mapping relationship between external dependency events and global variables of the external business component source code according to the component packaging environment; The addressing logic for external dependent events in different runtime environments is written according to the global variable mapping relationship; The addressing logic is encapsulated with the source code of the external business component to obtain a standard module data package.

3. The remote component adaptation method for a low-code platform as described in claim 1, characterized in that, The step of generating component standard metadata based on a preset low-code platform includes: The metadata items to be filled are determined based on the source code of the external business components. The component's basic information is obtained by filling in the metadata items to be filled based on the low-code platform. The basic information of the component is formatted and validated to obtain the component's standard metadata.

4. The remote component adaptation method for a low-code platform as described in claim 1, characterized in that, The process of merging component parameters from the component standard metadata using a pre-built adaptation intermediate layer includes: The adaptation intermediate layer is used to extract the component's native default parameters and canvas user configuration parameters when loading remote development components on the low-code platform. Calculate the parameter priority of the component's native default parameters, the canvas user configuration parameters, and the platform preset default parameters in the component's standard metadata; Based on the parameter priority, the original default parameters of the component, the user configuration parameters of the canvas, and the preset default parameters of the platform are overridden to obtain the initial merge parameters; Clean up any invalid null values ​​in the initial merge parameters to obtain the merge component parameters.

5. The remote component adaptation method for a low-code platform as described in claim 1, characterized in that, The step of generating a runnable component instance based on merged component parameters using the component constructor includes: Construct instantiation configuration parameters based on the merged component parameters; The component is instantiated and compiled using the component constructor based on the instantiation configuration parameters to obtain an instantiated component. The internal response listening mechanism of the instantiated component is initialized to obtain a runnable component instance with merged component parameters.

6. The remote component adaptation method for a low-code platform as described in claim 1, characterized in that, The monitoring of user configuration changes on the low-code platform includes: Create a listener on the low-code platform and use the listener to monitor the reactive variables of the low-code platform to obtain variable change data; Identify valid parameter change data in the variable change data; The user configuration changes for the low-code platform are generated based on the valid parameter change data.

7. The remote component adaptation method for a low-code platform as described in claim 1, characterized in that, The step of updating the parameter synchronization component instance based on the native event list to generate the target component instance includes: The original event list is standardized in terms of event format to generate a standardized event list; Convert the standardized event list into platform-custom events for the low-code platform; The parameter synchronization component instance is updated in a synchronized manner according to the platform's custom events, thereby generating the target component instance.

8. A remote component adaptation device for a low-code platform, characterized in that, The device includes: The source code compilation module is used to obtain the source code of external business components and compile the source code of the external business components into a standard module data package. The data construction module is used to construct the online remote link corresponding to the standard module data package and generate component standard metadata according to the preset low-code platform. The component constructor extraction module is used to extract the component constructor of the remote development component based on the online remote link and the component standard metadata when loading the remote development component on the low-code platform. A runnable component instance generation module is used to merge component parameters in the component standard metadata using a pre-built adaptation intermediate layer, and generate a runnable component instance based on the merged component parameters using the component constructor. The parameter update module is used to monitor changes in user configuration of the low-code platform, update the parameters of the runnable component instance according to the changes in user configuration, and obtain a parameter synchronization component instance. The event-linked update module is used to listen to the native event list of the parameter synchronization component instance using the adaptation intermediate layer, and perform event-linked updates on the parameter synchronization component instance according to the native event list to generate the target component instance.

9. An electronic device, characterized in that, The electronic device includes: At least one processor; and, A memory communicatively connected to the at least one processor; wherein, The memory stores a computer program that can be executed by the at least one processor, the computer program being executed by the at least one processor to enable the at least one processor to perform the remote component adaptation method for a low-code platform as described in any one of claims 1 to 7.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the remote component adaptation method for a low-code platform as described in any one of claims 1 to 7.

Images