A method and system for visually building cross-terminal applications for the entire business process

By using Vue framework and component materials in low-code visualization construction, abstract components and generate cross-end application pages, the problems of high requirements for developers, high business complexity and performance in the existing technology are solved, and the personality of cross-end application is achieved Integrated construction and process support improve the universality and performance of the system.

CN117742684BActive Publication Date: 2025-01-14CHINA UNICOM ONLINE INFORMATION TECHNOLOGY CO LTD
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN202311508072.2
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2023-11-14
Publication Date
2025-01-14
Estimated Expiration
2043-11-14

AI Technical Summary

Technical Problem

The existing cross-end applications for low-code visualization construction have high requirements for developers, difficulty for non-developers to access external systems, high business complexity, resulting in some scenarios being unable to fully visually constructed, performance problems, and excessive page unnecessary resources.

Method used

Provide a method to visually build cross-end applications of the business process. Through the Vue framework and component materials, the application page is abstracted into multiple components, and configuration parameters are provided. The user drags and drops the components in the rendering editor to form a page structure and outputs the page json protocol. To the backend publishing system, the application page code is generated that is adapted to multiple user terminals. Users can access external databases and configuration components through the terminal to realize cross-end dynamic rendering.

Benefits of technology

It solves the lack of universality of visual construction systems built within the department, realizes personalized matching of cross-end applications and support for business processes, reduces component coupling, and improves performance and versatility.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN117742684B_ABST
    Figure CN117742684B_ABST
Patent Text Reader

Abstract

The present invention relates to a method and system for visually building a full-process cross-terminal application for a business, and belongs to the field of data processing technology. The method includes: providing a Vue framework, component materials, and multiple configuration parameters; obtaining configuration components, and deploying them in an external docking system server, forming application page code resources that can adapt to multiple user terminals based on each configuration component, and multiple user terminals dynamically render corresponding application pages; abstracting the business process into a basic node, entering its corresponding form based on the basic node, and storing the field information of the form in a basic database or business database deployed in the external docking system server; users access the basic database, business database, and various configuration components in the external docking system server through user terminals. The method and system provided by the present application can personalize and match the configuration components required by the user according to the user's needs; and can solve the problem of visual cross-terminal use.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the field of data processing technology, and in particular to a method and system for visually building a full-process cross-terminal application for a business. Background Art

[0002] Low-code visual construction of cross-end applications means that cross-end application construction can be completed through visual drag and drop without developing code. In contrast, customized development code can be used. The low-code visual construction mode allows non-developers or developers to build applications such as applets, web, android, ios, etc. more quickly. At present, there are some disadvantages of low-code visual construction: high quality requirements for developers, non-developers must understand the corresponding database knowledge, and thus cannot flexibly connect to external systems. In addition, due to the high complexity of the business or excessive customization capabilities, some scenarios of low-code visual construction cannot be completed through complete visual construction, and developers need to intervene to carry out partial development. The resulting problem is that there are too many component-coupled business customization codes and they lose versatility; currently, the visual construction system is easier to build within the department to meet the internal business of the department, and it is more difficult to provide it to other departments or other companies for construction and use; the current low-code visual construction mode has corresponding performance problems, and there are too many non-essential resources on the page. Summary of the invention

[0003] The present invention aims to provide a method and system for visually building cross-terminal applications for the entire business process to solve the deficiencies in the prior art. The technical problem to be solved by the present invention is achieved through the following technical solutions.

[0004] The method for visually building a full-process cross-terminal application of a business provided by the present invention includes:

[0005] Provide Vue framework and component materials on the construction platform, abstract the application page to be formed into multiple components in the Vue framework, abstract each component into a composite of component interface, component attributes, component data, data embedding points, component events and component logic, and provide multiple configuration parameters;

[0006] A page module library is provided on the building platform, and a page to be used in the page module library is dragged to a canvas in a page editing area in the rendering editor in the rendering editor, and a plurality of corresponding configuration components are obtained in the rendering editor through the component materials, the configuration parameters or the configuration parameters provided by the user in the json format, and each of the obtained configuration components is deployed in an external docking system server;

[0007] Obtain the application page structure based on each configuration component, render the application page structure on the canvas of the page editing area through the rendering editor, and output the page json protocol corresponding to the application page structure to the backend publishing system;

[0008] After receiving the page JSON protocol, the backend publishing system processes the code corresponding to the page JSON protocol accordingly to form application page code resources that can adapt to multiple user terminals. Multiple user terminals parse the application page code resources and dynamically render the corresponding application pages.

[0009] The user selects or uploads a business process on the building platform, abstracts the business process selected or uploaded by the user into a basic node, drags the basic node in the rendering editor to form a flowchart, enters the corresponding form for each node in the flowchart, and stores the field information of the form in the basic database or business database deployed in the external docking system server;

[0010] The user accesses the basic database, business database and various configuration components in the external docking system server through the user terminal.

[0011] In the above scheme, the multiple user terminals include Android, iOS and web terminals. The Android terminal uses addview to parse the application page code resources and dynamically renders the corresponding application page. The iOS terminal uses loadView to parse the application page code resources and dynamically renders the corresponding application page. The web terminal uses dom to parse the application page code resources and dynamically renders the corresponding application page.

[0012] In the above scheme, the configuration parameters include component interface, component attributes, component data, data embedding points, component events and component logic.

[0013] In the above solution, in the rendering editor, a plurality of corresponding configuration components are obtained through the component material, the configuration parameters or the configuration parameters provided by the user and represented by data in json format, including:

[0014] Determine whether the component to be configured has its corresponding component material. For the component to be configured that has the corresponding component material, match the component materials corresponding to each component to be configured corresponding to the page to be used in the rendering editor based on the component name corresponding to each component to be configured to obtain the configuration component;

[0015] For a component to be configured for which there is no corresponding component material, determining whether the configuration parameters meet the user's requirements, and if the user's requirements are met, configuring the multiple configuration parameters according to the user's requirements to obtain a corresponding configuration component;

[0016] When the configuration parameters do not meet the user's needs, the user provides corresponding configuration parameters, and the provided configuration parameters are represented by data in json format, and corresponding configuration components are generated by the data in json format.

[0017] In the above scheme, obtaining the application page structure based on each configuration component includes:

[0018] Based on each configuration component, a corresponding high-order component is generated, and a stacker is used to arrange the generated multiple high-order components to obtain the application page structure.

[0019] In the above scheme, after receiving the page JSON protocol, the backend publishing system processes the code corresponding to the page JSON protocol accordingly to form application page code resources that can adapt to multiple user terminals, including:

[0020] After receiving the page JSON protocol, the backend publishing system checks the code corresponding to the page JSON protocol and removes the code corresponding to the components not used in the current page;

[0021] Use AST abstract syntax tree to perform structural analysis on the code corresponding to the page JSON protocol, and abstract the code corresponding to the page JSON protocol into a tree structure;

[0022] The Vue framework is used to parse the tree structure to form application page code resources that can adapt to user terminals.

[0023] In the above solution, the user selects or uploads the business process on the platform including:

[0024] A business process template library is provided on the construction platform. Users select the corresponding business process according to their needs in the front-end business process template library through the defined APi interface. If the business process required by the user does not exist in the business process template library, the user uploads the business process through the APi interface.

[0025] In the above solution, storing the field information of the form in the basic database or business database deployed in the external docking system server includes:

[0026] The field information of each form is mapped to a field in the database table according to user needs. After the form is entered and submitted, the form field information is stored in the basic database or business database according to the mapping relationship between the form and the database table.

[0027] In the above solution, the user customizes the form entered at each node in the flowchart through basic cloud functions or custom cloud functions and sends it to the front end through the APi interface.

[0028] The system for visually building a cross-end application for the entire business process provided by the present invention adopts the method for visually building a cross-end application for the entire business process as described above to visually build a cross-end application for the entire business process, including:

[0029] The data preparation module is used to provide the Vue framework and component materials on the construction platform, abstract the application page to be formed into multiple components in the Vue framework, abstract each component into a composite of component interface, component attributes, component data, data embedding points, component events and component logic, and provide multiple configuration parameters;

[0030] An application page rendering module is used to provide a page module library on the construction platform, drag the page to be used in the page module library to the canvas of the page editing area in the rendering editor, obtain multiple corresponding configuration components in the rendering editor through the component materials, the configuration parameters or the configuration parameters provided by the user in the json format, deploy each obtained configuration component in the external docking system server, obtain the application page structure based on each configuration component, and render the application page structure on the canvas of the page editing area through the rendering editor, and output the page json protocol corresponding to the application page structure to the back-end publishing system. After receiving the page json protocol, the back-end publishing system performs corresponding processing on the code corresponding to the page json protocol to form an application page code resource that can be adapted to multiple user terminals. Multiple user terminals parse the application page code resources and dynamically render the corresponding application pages;

[0031] The business building module is used for users to select or upload business processes on the building platform, abstract the business processes selected or uploaded by users into basic nodes, drag and drop basic nodes in the rendering editor to form a flow chart, enter the corresponding form for each node in the flow chart, and store the field information of the form in the basic database or business database deployed in the external docking system server;

[0032] The access module is used for users to access the basic database, business database and various configuration components in the external docking system server through the user terminal.

[0033] The embodiments of the present invention include the following advantages:

[0034] The method and system for visually building a full-process cross-terminal application of a business provided by an embodiment of the present invention obtain multiple corresponding configuration components through the component materials, the configuration parameters or the configuration parameters provided by the user in the json format in the rendering editor, and can personalize the configuration components required by the user according to the needs of the user; by forming an application page code resource that can adapt to user terminals including Android, iOS and web terminals, and publishing the application page code resource to user terminals including Android, iOS and web terminals, the problem of visual cross-terminal use can be solved; a flow chart is formed based on the business process selected or uploaded by the user, and a corresponding form is entered for each node in the flow chart, which can meet the business needs of the user; the user can access the basic database, business database and various configuration components in the external docking system server through the user terminal, which solves the problem that the visual building system is easier to build within the department to meet the internal business of the department, but it is difficult to provide it to other departments or other companies for construction and use; the scene corresponding to the application page focusing on style combination and the scene corresponding to the business process focusing on logical data are unified and integrated into a platform for construction, which solves the problem of focusing on only one of the scene construction in the prior art. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] Figure 1 This is a step diagram of a method for visually building a full-process cross-terminal application of a business in one embodiment of the present invention;

[0036] Figure 2 is an abstract schematic diagram of pages and components in one embodiment of the present invention;

[0037] Figure 3 is a schematic diagram of a process of rendering an application page in one embodiment of the present invention;

[0038] Figure 4 It is a schematic diagram of the process of establishing a business in one embodiment of the present invention;

[0039] Figure 5 It is a schematic diagram of the composition of a system for visually building a full-process cross-terminal application of a business in an embodiment of the present invention. DETAILED DESCRIPTION

[0040] It should be noted that, in the absence of conflict, the embodiments and features in the embodiments of the present application can be combined with each other. The present invention will be described in detail below with reference to the accompanying drawings and in combination with the embodiments.

[0041] like Figure 1 As shown, the present invention provides a method for visually building a cross-terminal application of the entire business process, the method comprising the following steps:

[0042] Step S1: Provide Vue framework and component materials on the construction platform, abstract the application page to be formed into multiple components in the Vue framework, abstract each component into a composite of component interface, component attributes, component data, data embedding, component event and component logic, and provide multiple configuration parameters including component interface, component attributes, component data, data embedding, component event and component logic, wherein the component materials include packaged particle components, particle components include button components, image components and video components, etc.; the component interface includes component name, component id and component type, component attributes include style, location, description, life cycle and animation, component data includes static data and interface request data, data embedding includes unified embedding indicators and custom embedding indicators, component events include general events, business customized events, component built-in events and events associated with other components, component logic includes logic basic units, logic node concatenators, custom cloud functions, logic unit callback data processors and data parameters, for details, please refer to Figure 2 .

[0043] Step S2: Provide a page module library on the building platform, drag the page to be used in the page module library to the canvas of the page editing area in the rendering editor in the rendering editor, determine whether the component to be configured has its corresponding component material, and for the components to be configured that have corresponding component materials, match the component materials corresponding to each component to be configured corresponding to the page to be used in the rendering editor based on the component names corresponding to each component to be configured to obtain the configuration component. For the components to be configured that do not have corresponding component materials, determine whether the above-mentioned multiple configuration parameters including component interface, component attributes, component data, data embedding points, component events and component logic meet the corresponding user needs, and if the corresponding user needs are met, When the user needs to configure the above multiple configuration parameters including component interface, component attributes, component data, data embedding, component events and component logic according to the user's needs, the corresponding configuration components are obtained. When the configuration parameters do not meet the user's needs, the user provides the corresponding configuration parameters including component interface, component attributes, component data, data embedding, component events and component logic, and the provided configuration parameters are represented by data in json format. The corresponding configuration components are generated through the data in json format, and the obtained configuration components are deployed in the external docking system server. Based on each configuration component, a corresponding high-order component is generated, where the high-order component can be a function, and the function accepts a component as a parameter and returns a new Components, and use an overlay to arrange the generated multiple high-order components to obtain the application page structure, wherein the application page structure includes js code, html code and css code, and renders the application page structure on the canvas of the page editing area through a rendering editor, and outputs the page json protocol corresponding to the application page structure to the back-end publishing system, wherein the page json protocol corresponding to the application page structure is all configuration components represented by data in json format corresponding to the application page structure. After receiving the page json protocol, the back-end publishing system checks the code corresponding to the page json protocol, removes the code corresponding to the components not used in the current page, and uses the AST abstract syntax tree to analyze the page json protocol. The code corresponding to the protocol is structurally parsed, the code corresponding to the page json protocol is abstracted into a tree structure, and the tree structure is parsed using the Vue framework to form application page code resources that can adapt to user terminals including Android, iOS and web. The publishing system publishes the application page code resources to user terminals including Android, iOS and web. The Android terminal uses addview to parse the application page code resources and dynamically render the corresponding application page. The iOS terminal uses loadView to parse the application page code resources and dynamically render the corresponding application page. The web terminal uses dom to parse the application page code resources and dynamically render the corresponding application page. For details, please refer to Figure 3 .

[0044] Step S3: Provide a business process template library on the above-mentioned construction platform. The user selects the corresponding business process in the business process template library of the front end through the defined APi interface as needed. If the business process required by the user does not exist in the business process template library, the user uploads the business process through the APi interface, abstracts the business process selected or uploaded by the user into a basic node, drags the basic node in the rendering editor to form a flow chart, enters the corresponding form for each node in the flow chart, and maps the field information of each form to a field in the database table according to user needs. After the form is entered and submitted, the field information of the form is stored in the basic database or business database according to the mapping relationship between the form and the database table. The user customizes the form entered for each node in the flow chart through the basic cloud function or the custom cloud function and sends it to the front end through the APi interface. The basic database and the business database are deployed in the external docking system server. For details, please refer to Figure 4 .

[0045] Step S4: The user accesses the basic database and business database in the external docking system server through user terminals including Android, iOS and web terminals, and accesses various configuration components deployed in the external docking system server through user terminals including Android, iOS and web terminals.

[0046] like Figure 5 As shown, the present invention provides a system for visually building a cross-end application for the entire business process, and adopts the method for visually building a cross-end application for the entire business process as described above to visually build a cross-end application for the entire business process, and the method includes a system:

[0047] The data preparation module is used to provide the Vue framework and component materials on the construction platform, abstract the application page to be formed into multiple components in the Vue framework, abstract each component into a composite of component interface, component attributes, component data, data embedding, component event and component logic, and provide multiple configuration parameters including component interface, component attributes, component data, data embedding, component event and component logic, wherein the component materials include packaged particle components, and the particle components include button components, image components and video components, etc.; the component interface includes component name, component id and component type, component attributes include style, location, description, life cycle and animation, component data includes static data and interface request data, data embedding includes unified embedding indicators and custom embedding indicators, component events include general events, business customized events, component built-in events and events associated with other components, and component logic includes logic basic units, logic node serializers, custom cloud functions, logic unit callback data processors and data parameters;

[0048] The application page rendering module is used to provide a page module library on the construction platform. In the rendering editor, the page to be used in the page module library is dragged to the canvas of the page editing area in the rendering editor to determine whether the component to be configured has its corresponding component material. For the components to be configured that have corresponding component materials, the components to be configured corresponding to the page to be used are matched with the component materials corresponding to the components to be configured based on the component names corresponding to the components to be configured in the rendering editor to obtain the configuration components. For the components to be configured that do not have corresponding component materials, it is determined whether the above-mentioned multiple configuration parameters including component interface, component attributes, component data, data embedding points, component events and component logic meet the corresponding user needs. When the corresponding user needs are met, the above-mentioned multiple configuration parameters including component interface, component attributes, component data, data embedding points, component events and component logic are configured according to user needs to obtain corresponding configuration components. When the configuration parameters do not meet user needs, the user provides corresponding configuration parameters including component interface, component attributes, component data, data embedding points, component events and component logic, and the provided configuration parameters are represented by data in json format. The corresponding configuration components are generated through the data in json format, and the corresponding high-order components are generated based on each configuration component. The high-order component can be a function, and the function accepts a component as a parameter, returns a new component, and uses stacking. The adder arranges the generated multiple high-order components to obtain the application page structure, wherein the application page structure includes js code, html code and css code, and renders the application page structure on the canvas of the page editing area through the rendering editor, and outputs the page json protocol corresponding to the application page structure to the back-end publishing system, wherein the page json protocol corresponding to the application page structure is all configuration components represented by data in json format corresponding to the application page structure. After receiving the page json protocol, the back-end publishing system checks the code corresponding to the page json protocol, removes the code corresponding to the components not used in the current page, and uses the AST abstract syntax tree to analyze the page json protocol. The corresponding code is structurally parsed, the code corresponding to the page json protocol is abstracted into a tree structure, and the Vue framework is used to parse the tree structure to form application page code resources that can adapt to user terminals including Android, iOS and web. The publishing system publishes the application page code resources to user terminals including Android, iOS and web. The Android terminal uses addview to parse the application page code resources and dynamically renders the corresponding application page. The iOS terminal uses loadView to parse the application page code resources and dynamically renders the corresponding application page. The web terminal uses dom to parse the application page code resources and dynamically renders the corresponding application page.

[0049] The business building module is used to provide a business process template library on the building platform. Users select the corresponding business process in the business process template library of the front-end through the APi interface as needed. If the business process required by the user does not exist in the business process template library, the user uploads the business process through the APi interface, abstracts the business process selected or uploaded by the user as a basic node, drags the basic node in the rendering editor to form a flow chart, enters the corresponding form for each node in the flow chart, and maps the field information of each form to a field in the database table according to user needs. After the form is entered and submitted, the field information of the form is stored in the basic database or business database according to the mapping relationship between the form and the database table. The user customizes the form entered for each node in the flow chart through basic cloud functions or custom cloud functions and sends it to the front end through the APi interface. The basic database and business database are deployed in the external docking system server.

[0050] The access module is used for users to access the basic database and business database in the external docking system server through user terminals including Android, iOS and web, and to access various configuration components deployed in the external docking system server through user terminals including Android, iOS and web.

[0051] It should be noted that the above detailed descriptions are exemplary and are intended to provide further explanation of the present application. Unless otherwise specified, all technical and scientific terms used herein have the same meaning as commonly understood by those of ordinary skill in the art to which the present application belongs.

[0052] It should be noted that the terms used herein are only for describing specific embodiments and are not intended to limit the exemplary embodiments according to the present application. As used herein, unless the context clearly indicates otherwise, the singular form is also intended to include the plural form. In addition, it should also be understood that when the terms "comprise" and / or "include" are used in this specification, it indicates the presence of features, steps, operations, devices, components and / or combinations thereof.

[0053] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the terms used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein.

[0054] In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product, or apparatus that includes a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units that are not explicitly listed or inherent to these processes, methods, products, or apparatuses.

[0055] For ease of description, spatially relative terms, such as "above", "above", "on the upper surface of", "above", etc., may be used herein to describe the spatial positional relationship between a device or feature and other devices or features as shown in the figure. It should be understood that spatially relative terms are intended to include different orientations of the device in use or operation in addition to the orientation described in the figure. For example, if the device in the accompanying drawings is inverted, the device described as "above other devices or structures" or "above other devices or structures" will be positioned as "below other devices or structures" or "below other devices or structures". Thus, the exemplary term "above" may include both "above" and "below". The device may also be positioned in other different ways, such as rotated 90 degrees or in other orientations, and the spatially relative descriptions used herein are interpreted accordingly.

[0056] In the above detailed description, reference is made to the accompanying drawings, which form a part of this document. In the accompanying drawings, similar symbols typically identify similar components unless the context indicates otherwise. The illustrated embodiments described in the detailed description, drawings, and claims are not meant to be limiting. Other embodiments may be used, and other changes may be made, without departing from the spirit or scope of the subject matter presented herein.

[0057] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. For those skilled in the art, the present invention may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A method for visually building a cross-terminal application for the entire business process, characterized in that: The method comprises: Provide Vue framework and component materials on the construction platform, abstract the application page to be formed into multiple components in the Vue framework, abstract each component into a composite of component interface, component attributes, component data, data tracking, component events and component logic, and provide multiple configuration parameters; wherein, component materials include packaged particle components, particle components include button components, image components and video components; component interface includes component name, component id and component type, component attributes include style, location, description, life cycle and animation, component data includes static data and interface request data, data tracking includes unified tracking indicators and custom tracking indicators, component events include general events, business customized events, component built-in events and events associated with other components, component logic includes logic basic units, logic node serializers, custom cloud functions, logic unit callback data processors and data parameters; A page module library is provided on the building platform, and a page to be used in the page module library is dragged to a canvas in a page editing area in the rendering editor in the rendering editor, and a plurality of corresponding configuration components are obtained in the rendering editor through the component materials, the configuration parameters or the configuration parameters provided by the user in the json format, and each of the obtained configuration components is deployed in an external docking system server; First, determine whether there is a component material corresponding to the component to be configured. When the judgment result is "no", determine whether the configuration parameters meet the user's needs. When the configuration parameters do not meet the user's needs, the user provides corresponding configuration parameters including component interface, component attributes, component data, data embedding points, component events and component logic, obtain the application page structure based on each configuration component, and render the application page structure on the canvas of the page editing area through the rendering editor, and output the page json protocol corresponding to the application page structure to the backend publishing system; the acquisition of the application page structure based on each configuration component includes: generating a corresponding high-order component based on each configuration component, and using an overlay to arrange the generated multiple high-order components, and obtaining the application page structure, the high-order component is a function, and the function accepts a component as a parameter and returns a new component, the application page structure includes js code, html code and css code, and the application page structure is rendered on the canvas of the page editing area through the rendering editor; After receiving the page JSON protocol, the backend publishing system processes the code corresponding to the page JSON protocol accordingly to form application page code resources that can adapt to multiple user terminals. Multiple user terminals parse the application page code resources and dynamically render the corresponding application pages. The user selects or uploads a business process on the building platform, abstracts the business process selected or uploaded by the user into a basic node, drags the basic node in the rendering editor to form a flowchart, enters the corresponding form for each node in the flowchart, and stores the field information of the form in the basic database or business database deployed in the external docking system server; The user accesses the basic database, business database and various configuration components in the external docking system server through the user terminal; and the method integrates the scenes corresponding to the application page focusing on style combination and the scenes corresponding to the business process focusing on logical data into one platform for construction.

2. The method for visually building a full-process cross-terminal application of a business according to claim 1 is characterized in that: The multiple user terminals include an Android terminal, an iOS terminal and a web terminal; The Android terminal uses addview to parse the application page code resources and dynamically render the corresponding application page; The iOS end uses loadView to parse the application page code resources and dynamically render the corresponding application page; The web end uses DOM to parse the application page code resources and dynamically render the corresponding application page.

3. The method for visually building a full-process cross-terminal application of a business according to claim 1 is characterized in that: In the rendering editor, a plurality of corresponding configuration components are obtained through the component material, the configuration parameters or the configuration parameters provided by the user and represented by data in json format, including: Determine whether the component to be configured has its corresponding component material. For the component to be configured that has the corresponding component material, match the component materials corresponding to each component to be configured corresponding to the page to be used in the rendering editor based on the component name corresponding to each component to be configured to obtain the configuration component; For a component to be configured for which there is no corresponding component material, determining whether the configuration parameters meet the user's requirements, and if the user's requirements are met, configuring the multiple configuration parameters according to the user's requirements to obtain a corresponding configuration component; The configuration parameters provided by the user are represented by data in JSON format, and the corresponding configuration components are generated by the data in JSON format.

4. The method for visually building a full-process cross-terminal application of a business according to claim 1 is characterized in that: After receiving the page JSON protocol, the backend publishing system processes the code corresponding to the page JSON protocol accordingly to form application page code resources that can adapt to multiple user terminals, including: After receiving the page JSON protocol, the backend publishing system checks the code corresponding to the page JSON protocol and removes the code corresponding to the components not used in the current page; Use AST abstract syntax tree to perform structural analysis on the code corresponding to the page json protocol, and abstract the code corresponding to the page json protocol into a tree structure; The Vue framework is used to parse the tree structure to form application page code resources that can adapt to user terminals.

5. The method for visually building a full-process cross-terminal application of a business according to claim 1 is characterized in that: The business process for users to select or upload on the platform includes: A business process template library is provided on the construction platform. Users select the corresponding business process according to their needs in the front-end business process template library through the defined APi interface. If the business process required by the user does not exist in the business process template library, the user uploads the business process through the APi interface.

6. The method for visually building a full-process cross-terminal application of a business according to claim 1 is characterized in that: Storing the form field information in the basic database or business database deployed in the external docking system server includes: Map the field information of each form to a field in the database table according to user needs. After the form is entered and submitted, the form field information is stored in the basic database or business database according to the mapping relationship between the form and the database table.

7. The method for visually building a full-process cross-terminal application of a business according to claim 1 is characterized in that: The user customizes the form entered at each node in the flowchart through basic cloud functions or custom cloud functions and sends it to the front end through the APi interface.

8. A system for visually building a cross-end application for the entire business process, using the method for visually building a cross-end application for the entire business process as described in any one of claims 1 to 7 to visually build a cross-end application for the entire business process, characterized in that: The system comprises: The data preparation module is used to provide the Vue framework and component materials on the construction platform, abstract the application page to be formed into multiple components in the Vue framework, abstract each component into a composite of component interface, component attributes, component data, data tracking, component events and component logic, and provide multiple configuration parameters; wherein, the component materials include packaged particle components, and the particle components include button components, image components and video components; the component interface includes component name, component id and component type, component attributes include style, location, description, life cycle and animation, component data includes static data and interface request data, data tracking includes unified tracking indicators and custom tracking indicators, component events include general events, business customized events, component built-in events and events associated with other components, and component logic includes logic basic units, logic node serializers, custom cloud functions, logic unit callback data processors and data parameters; The application page rendering module is used to provide a page module library on the construction platform, drag the page to be used in the page module library to the canvas of the page editing area in the rendering editor, obtain multiple corresponding configuration components in the rendering editor through the component materials, the configuration parameters or the configuration parameters provided by the user in json format, deploy each obtained configuration component in the external docking system server, first determine whether there is a component material corresponding to the component to be configured, when the judgment result is "no", determine whether the configuration parameters meet the user's needs, when the configuration parameters do not meet the user's needs, the user provides the corresponding configuration parameters including component interface, component attributes, component data, data embedding points, component events and component logic, obtain the application page structure based on each configuration component, and render the application page structure on the page through the rendering editor The application page structure is displayed on the canvas of the page editing area, and the page json protocol corresponding to the application page structure is output to the back-end publishing system. The acquisition of the application page structure based on each configuration component includes: generating a corresponding high-order component based on each configuration component, and using an overlay to arrange the generated multiple high-order components to obtain the application page structure, the high-order component is a function, and the function accepts a component as a parameter and returns a new component. The application page structure includes js code, html code and css code, and the application page structure is rendered on the canvas of the page editing area through a rendering editor; after receiving the page json protocol, the back-end publishing system processes the code corresponding to the page json protocol accordingly to form an application page code resource that can be adapted to multiple user terminals, and multiple user terminals parse the application page code resources and dynamically render the corresponding application page; The business building module is used for users to select or upload business processes on the building platform, abstract the business processes selected or uploaded by users into basic nodes, drag and drop basic nodes in the rendering editor to form a flow chart, enter the corresponding form for each node in the flow chart, and store the field information of the form in the basic database or business database deployed in the external docking system server; The access module is used for users to access the basic database, business database and various configuration components in the external docking system server through the user terminal; and the system integrates the scenarios corresponding to the application pages focusing on style combinations and the scenarios corresponding to the business processes focusing on logical data into a unified platform for construction.

Citation Information

Patent Citations

  • Web application development method and device, server and development terminal

    CN112947900A

  • Low-code page building system and method and computer readable storage medium

    CN115617327A