Theme switching method and device for low-code WEB configuration

Abstract

The invention discloses a theme switching method and device for low-code WEB configuration. The method comprises the following steps: calling a theme editing tool according to a theme editing instruction to construct a theme file; binding the css variable of the application component with a theme variable of a theme file; loading the selected theme file to a canvas of the WEB configuration tool library; deploying the application component to the canvas according to the canvas deployment instruction to obtain a configuration picture; in response to a received theme switching instruction, acquiring a theme file from a theme library according to the keyword, and performing theme switching on the configuration picture based on the theme file; sending the keyword to an application component, modifying a css variable of the application component, and rendering the configuration picture according to the css variable; the application component is automatically updated when the theme is switched through the binding mechanism, so that the condition that codes of the application component are re-edited along with the iteration of the theme file is avoided, and the development and maintenance cost is reduced.

Description

Technical Field

[0001] The present invention belongs to the field of theme switching, and specifically relates to a theme switching method and device for low-code WEB configuration. Background Art

[0002] With the rapid development of computer web application technology, low-code configuration has been widely used, and users can generate WEB pages by dragging and dropping. In addition to the "low-code components" that come with the application, low-code configuration also provides users with independent application modules developed locally as application components in low-code configuration. Since the design of WEB pages varies, low-code tools need to be oriented to various project scenarios, and the requirements for the adaptability of theme styles are getting higher and higher.

[0003] At present, the styles of low-code configuration tools and application components are usually designed separately, and it is difficult to achieve unified style. With the iteration of low-code configuration tools, application components also have certain compatibility issues. The above situation will greatly reduce the user experience, increase the development and maintenance costs of application components, and it is difficult to share application components between different projects. Summary of the invention

[0004] The present invention provides a method and device for switching themes of a low-code WEB configuration to solve the problems of difficult adaptation of theme styles and complex deployment and maintenance of low-code configuration application components.

[0005] In order to achieve the above object, the technical solution adopted by the present invention is: A first aspect of the present invention provides a method for switching themes of a low-code WEB configuration, comprising: Obtain theme editing instructions, call theme editing tools according to theme editing instructions to build theme files; store theme files in theme library; Registering the application component developed by the custom component in the WEB configuration tool library, and binding the css variable of the application component with the theme variable of the theme file; Loading the selected theme file into the canvas of the WEB configuration tool library; receiving a canvas deployment instruction, and deploying the application component into the canvas according to the canvas deployment instruction to obtain a configuration screen; In response to receiving a theme switching instruction, the theme switching instruction includes a keyword for switching the theme; obtaining a theme file from a theme library according to the keyword, and switching the theme of the configuration screen based on the theme file; sending the keyword to an application component and modifying the CSS variable of the application component, and rendering the configuration screen according to the CSS variable.

[0006] Furthermore, the process of calling the theme editing tool to build the theme file according to the theme editing instruction includes: Call the theme editing tool according to the theme editing instruction, deploy the theme interface elements through the theme editing tool to build a theme file, set the theme variables of the theme file according to the theme template, and the theme variables include color values, transparency, numerical values, strings and picture names; establish a mapping relationship between the display properties of the theme interface elements and the theme variables.

[0007] Furthermore, the process of developing application components through custom components includes: Use the application component front-end development scaffolding to generate application components, and use custom components to set the application interface elements of the application components; In the head tag of the HTML file of the application component, the less file is introduced through the link tag; the CSS variables of the application component are defined in the less file, and the interface elements of the application component are written into the CSS variables; the CSS variables defined in the less file are written into the configuration file of the application component; the display properties of the theme interface elements are set in a one-to-one correspondence with the CSS variables of the application component.

[0008] Furthermore, the application component is registered in the WEB configuration tool library, and the process includes: Sending the registration request information of the application component to the WEB configuration tool library, the registration request information includes the name of the application component, component type, access address, component thumbnail, component size and component initialization parameters; The registration request information is verified. When the registration request information is complete and the name and access address of the registration request information are different from the application component information stored in the WEB configuration tool library, it is determined that the registration request information verification is passed; and the application component is stored in the WEB configuration tool library.

[0009] Further, the selected theme file is loaded into the canvas of the WEB configuration tool library; a canvas deployment instruction is received, and the application component is deployed into the canvas according to the canvas deployment instruction to obtain a configuration screen; the process includes: Select a theme file and read theme configuration information, wherein the theme configuration information includes theme file storage path information, and load the selected theme file to the canvas of the WEB configuration tool library according to the theme configuration information; obtain keywords of the selected theme file through the WEB configuration tool library and cache them; Receive canvas deployment instructions, deploy application components to the theme page of the canvas according to the canvas deployment instructions to obtain the configuration screen; send the keywords of the selected theme file to the application component, associate the application component with the theme file based on the keywords and modify the css variables of the application component; The application component information, application component storage path information, subject configuration information and subject keywords are saved and the configuration screen is published.

[0010] Furthermore, the keyword is sent to the application component and the CSS variable of the application component is modified. The process includes: When the application component is developed using Qiankun scaffolding, the WEB configuration tool library sends a keyword for switching themes to the application component through the setGlobalState programming interface; the application component receives the keyword through the OnGlobalStateChange programming interface; and the css variable of the application component is modified according to the keyword; When the application component is developed using the Iframe scaffold, the WEB configuration tool library sends a keyword for switching the theme to the application component through the postmessage programming interface; the application component receives the keyword through onmessage; and the css variable of the application component is modified according to the keyword.

[0011] A second aspect of the present invention provides a low-code WEB configuration theme switching device, comprising: The theme building unit obtains theme editing instructions, calls theme editing tools according to the theme editing instructions to build theme files; and stores the theme files in the theme library; An application component registration unit registers the application component developed by the custom component in the WEB configuration tool library, and binds the css variable of the application component with the theme variable of the theme file; The editing unit loads the selected theme file into the canvas of the WEB configuration tool library; receives the canvas deployment instruction, and deploys the application component into the canvas according to the canvas deployment instruction to obtain the configuration screen; The browsing unit, in response to receiving a theme switching instruction, the theme switching instruction includes a keyword for switching the theme; obtains a theme file from a theme library according to the keyword, and switches the theme of the configuration screen based on the theme file; sends the keyword to an application component and modifies a CSS variable of the application component, and renders the configuration screen according to the CSS variable.

[0012] Furthermore, the editing unit includes a platform component, a screen management module, a theme management module, a configuration layout, a resource management module, a data binding module and a style editing module. The platform components are configured with basic text, pictures, tables, trees, pictures, charts, forms and maps; The screen management module is used to load screen information into the canvas and edit the configuration screen; The theme management module can read all theme lists stored in the theme library, retrieve theme files in the theme list and load them into the canvas of the WEB configuration tool library; The configuration layout device is used to receive a canvas deployment instruction, and deploy the application component to the canvas to obtain a configuration screen according to the canvas deployment instruction; The resource management module is used to manage the uploaded static resources and send the static resources to the platform component; the static resource image data and video data; The data binding module is used to bind the application components and the display data of the configuration screen; The style editing module is used to adjust the styles of the platform components and application components.

[0013] Further, the browsing unit includes a component parsing unit, a component rendering module and a component communication module; The component parsing unit is used to obtain screen information; the screen information includes keywords, application component information and component layout information; The component rendering module performs application component rendering according to the application component type, CSS variables and screen information; The component communication module is used for communication between two application components, between an external framework and a browsing unit, and between a theme library and a browsing unit.

[0014] The third aspect of the present invention provides an electronic device, comprising a storage medium and a processor; the storage medium is used to store instructions; and the processor is used to operate according to the instructions to execute the theme switching method described in the first aspect of the present invention.

[0015] Compared with the prior art, the present invention has the following beneficial effects: The present invention binds the CSS variables of the application component with the theme variables of the theme file; obtains the theme file from the theme library according to the keyword, and switches the theme of the configuration screen based on the theme file; sends the keyword to the application component and modifies the CSS variables of the application component, and renders the configuration screen according to the CSS variables; automatically updates the application component when switching the theme through the binding mechanism, avoids re-editing the application component code with the iteration of the theme file, and reduces the development and maintenance costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] Figure 1 A flowchart of a method for switching themes in a low-code WEB configuration provided in Example 1 of the present invention; Figure 2 A structural diagram of the low-code WEB configuration theme switching device provided in Example 2 of the present invention. DETAILED DESCRIPTION

[0017] The present invention will be further described below in conjunction with the accompanying drawings. The following embodiments are only used to more clearly illustrate the technical solution of the present invention, and cannot be used to limit the protection scope of the present invention.

[0018] Example 1

[0019] like Figure 1 As shown, this implementation provides a method for switching themes in a low-code WEB configuration, including: The process of obtaining the theme editing instructions and calling the theme editing tool to build the theme file according to the theme editing instructions includes: Call the theme editing tool according to the theme editing instruction, deploy the theme interface elements through the theme editing tool to build the theme file, set the theme variables of the theme file according to the theme template, and the theme variables include color values, transparency, numerical values, strings and picture names; establish a mapping relationship between the display properties of the theme interface elements and the theme variables; store the theme file in the theme library.

[0020] Specifically, when the theme variable is a color value, the color value of the G1-G10 gradient is generated through the color scale algorithm, G6 is the input color value, the color value less than G6 is the color value after the algorithm lightens, and the color value greater than G6 is the color value after the algorithm darkens, which is used to generate approximate colors; similarly, the transparency of the A0-A100 gradient is established, and the numbers represent the transparency of the color values.

[0021] The process of developing application components through custom components includes: Use the application component front-end development scaffolding to generate application components, and use custom components to set the application interface elements of the application components; In the head tag of the HTML file of the application component, the less file is introduced through the link tag; the CSS variables of the application component are defined in the less file, and the interface elements of the application component are written into the CSS variables; the CSS variables defined in the less file are written into the configuration file of the application component; the display properties of the theme interface elements are set in a one-to-one correspondence with the CSS variables of the application component; the CSS variables of the application component are bound to the theme variables of the theme file.

[0022] Registering application components in the WEB configuration tool library includes the following steps: Sending the registration request information of the application component to the WEB configuration tool library, the registration request information includes the name of the application component, component type, access address, component thumbnail, component size and component initialization parameters; The registration request information is verified. When the registration request information is complete and the name and access address of the registration request information are different from the application component information stored in the WEB configuration tool library, it is determined that the registration request information verification is passed; and the application component is stored in the WEB configuration tool library.

[0023] Loading the selected theme file into the canvas of the WEB configuration tool library; receiving the canvas deployment instruction, and deploying the application component into the canvas according to the canvas deployment instruction to obtain the configuration screen; the process includes: Select a theme file and read theme configuration information, wherein the theme configuration information includes theme file storage path information, and load the selected theme file to the canvas of the WEB configuration tool library according to the theme configuration information; obtain keywords of the selected theme file through the WEB configuration tool library and cache them; Receive canvas deployment instructions, deploy application components to the theme page of the canvas according to the canvas deployment instructions to obtain the configuration screen; send the keywords of the selected theme file to the application component, associate the application component with the theme file based on the keywords and modify the css variables of the application component; The application component information, application component storage path information, subject configuration information and subject keywords are saved and the configuration screen is published.

[0024] In response to receiving a theme switching instruction, the theme switching instruction includes a keyword for switching the theme; a theme file is obtained from a theme library according to the keyword, and the configuration screen is switched based on the theme file.

[0025] Send keywords to application components and modify the CSS variables of application components. The process includes: When the application component is developed using Qiankun scaffolding, the WEB configuration tool library sends a keyword for switching themes to the application component through the setGlobalState programming interface; the application component receives the keyword through the OnGlobalStateChange programming interface; and the css variable of the application component is modified according to the keyword; When the application component is developed using the Iframe scaffold, the WEB configuration tool library sends a keyword for switching themes to the application component through the postmessage programming interface; the application component receives the keyword through onmessage; the CSS variables of the application component are modified according to the keyword; and the configuration screen is rendered according to the CSS variables.

[0026] When the application component is rendered, the configuration file of the association relationship between the application component CSS variables and the theme template when the application component is registered is read; the application component reads the cached current screen theme file and assigns the application theme value to the application component CSS variable; the new CSS variable is written into the application component style file to realize the theme style switching.

[0027] This embodiment achieves the uniformity of the configuration page style by building a binding mechanism between theme templates and components; low-code components use CSS variable technology to dynamically adjust variable values ​​according to the current theme of the page to achieve dynamic switching of component styles; through the binding mechanism, application component developers do not need to update component codes with the iteration of theme versions, reducing development and maintenance costs. Therefore, low-code product users can achieve dynamic switching of system theme styles through simple configuration, with beautiful and unified styles, improving the user experience of low-code products and enabling application components to be shared between different application systems.

[0028] Example 2

[0029] like Figure 2 As shown, this embodiment provides a low-code WEB configuration theme switching device, which can execute the theme switching method described in Example 1, and the theme switching device includes: The theme building unit obtains theme editing instructions, calls theme editing tools according to the theme editing instructions to build theme files; and stores the theme files in the theme library; An application component registration unit registers the application component developed by the custom component in the WEB configuration tool library, and binds the css variable of the application component with the theme variable of the theme file; The editing unit loads the selected theme file into the canvas of the WEB configuration tool library; receives the canvas deployment instruction, and deploys the application component into the canvas according to the canvas deployment instruction to obtain the configuration screen; The browsing unit, in response to receiving a theme switching instruction, the theme switching instruction includes a keyword for switching the theme; obtains a theme file from a theme library according to the keyword, and switches the theme of the configuration screen based on the theme file; sends the keyword to an application component and modifies a CSS variable of the application component, and renders the configuration screen according to the CSS variable.

[0030] The editing unit includes a platform component, a screen management module, a theme management module, a configuration layout, a resource management module, a data binding module and a style editing module; The platform components are configured with basic text, pictures, tables, trees, pictures, charts, forms and maps; The screen management module is used to load screen information into the canvas and edit the configuration screen; The theme management module can read all theme lists stored in the theme library, retrieve theme files in the theme list and load them into the canvas of the WEB configuration tool library; The configuration layout device is used to receive a canvas deployment instruction, and deploy the application component to the canvas to obtain a configuration screen according to the canvas deployment instruction; The resource management module is used to manage the uploaded static resources and send the static resources to the platform component; the static resource image data and video data; The data binding module is used to bind the application components and the display data of the configuration screen; The style editing module is used to adjust the styles of the platform components and application components.

[0031] The browsing unit includes a component parsing unit, a component rendering module and a component communication module; The component parsing unit is used to obtain screen information; the screen information includes keywords, application component information and component layout information; The component rendering module performs application component rendering according to the application component type, CSS variables and screen information; The component communication module is used for communication between two application components, between an external framework and a browsing unit, and between a theme library and a browsing unit.

[0032] Example 3

[0033] This embodiment provides an electronic device, including a storage medium and a processor; the storage medium is used to store instructions; it is characterized in that the processor is used to operate according to the instructions to execute the theme switching method described in Example 1.

[0034] Users can quickly create and modify themes through theme building units to adapt to different visual needs; registered application components can be reused in different configuration screens to improve development efficiency; the WEB configuration tool library automatically updates application components when switching themes, avoiding the need to re-edit application component codes as theme files are iterated, reducing development and maintenance costs.

[0035] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Furthermore, the present application may take the form of one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, etc.) containing computer-usable program code. M , optical storage, etc.).

[0036] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0037] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0038] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0039] The above is only a preferred embodiment of the present invention. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the technical principles of the present invention. These improvements and modifications should also be regarded as the scope of protection of the present invention.

Claims

1. A method for switching themes in a low-code WEB configuration, characterized in that: include: Get the theme editing instructions, and call the theme editing tool to build the theme file according to the theme editing instructions; Store the theme file in the theme library; Registering the application component developed by the custom component in the WEB configuration tool library, and binding the css variable of the application component with the theme variable of the theme file; Loading the selected theme file into the canvas of the WEB configuration tool library; receiving a canvas deployment instruction, and deploying the application component into the canvas according to the canvas deployment instruction to obtain a configuration screen; In response to receiving a theme switching instruction, the theme switching instruction includes a keyword for switching the theme; The theme file is obtained from the theme library according to the keyword, and the theme of the configuration screen is switched based on the theme file; the keyword is sent to the application component and the CSS variable of the application component is modified, and the configuration screen is rendered according to the CSS variable.

2. The theme switching method according to claim 1, characterized in that: The process of calling the theme editing tool to build the theme file according to the theme editing instruction includes: Call the theme editing tool according to the theme editing instruction, deploy the theme interface elements through the theme editing tool to build a theme file, set the theme variables of the theme file according to the theme template, and the theme variables include color values, transparency, numerical values, strings and picture names; establish a mapping relationship between the display properties of the theme interface elements and the theme variables.

3. The theme switching method according to claim 1, characterized in that: The process of developing application components through custom components includes: Use the application component front-end development scaffolding to generate application components, and use custom components to set the application interface elements of the application components; In the head tag of the HTML file of the application component, the less file is introduced through the link tag; the CSS variables of the application component are defined in the less file, and the interface elements of the application component are written into the CSS variables; the CSS variables defined in the less file are written into the configuration file of the application component; the display properties of the theme interface elements are set in a one-to-one correspondence with the CSS variables of the application component.

4. The theme switching method according to claim 3, characterized in that: Registering application components in the WEB configuration tool library includes the following steps: Sending the registration request information of the application component to the WEB configuration tool library, the registration request information includes the name of the application component, component type, access address, component thumbnail, component size and component initialization parameters; The registration request information is verified. When the registration request information is complete and the name and access address of the registration request information are different from the application component information stored in the WEB configuration tool library, it is determined that the registration request information verification is passed; and the application component is stored in the WEB configuration tool library.

5. The theme switching method according to claim 1, characterized in that: Loading the selected theme file into the canvas of the WEB configuration tool library; Receive canvas deployment instructions, and deploy application components to the canvas to obtain a configuration screen according to the canvas deployment instructions; The process includes: Select a theme file and read theme configuration information, wherein the theme configuration information includes theme file storage path information, and load the selected theme file to the canvas of the WEB configuration tool library according to the theme configuration information; obtain keywords of the selected theme file through the WEB configuration tool library and cache them; Receive canvas deployment instructions, and deploy application components to the theme page of the canvas according to the canvas deployment instructions to obtain the configuration screen; Send the keywords of the selected theme file to the application component, associate the application component with the theme file based on the keywords and modify the CSS variables of the application component; The application component information, application component storage path information, subject configuration information and subject keywords are saved and the configuration screen is published.

6. The theme switching method according to claim 1, characterized in that: Send keywords to application components and modify the CSS variables of application components. The process includes: When the application component is developed using Qiankun scaffolding, the WEB configuration tool library sends a keyword for switching the theme to the application component through the setGlobalState programming interface; the application component receives the keyword through the OnGlobalStateChange programming interface; and the css variable of the application component is modified according to the keyword; When the application component is developed using the Iframe scaffold, the WEB configuration tool library sends a keyword for switching themes to the application component through a postmessage programming interface; the application component receives the keyword through onmessage; and the css variable of the application component is modified according to the keyword.

7. A low-code WEB configuration theme switching device, characterized in that: include: The theme building unit obtains theme editing instructions, and calls the theme editing tool to build the theme file according to the theme editing instructions; Store the theme file in the theme library; An application component registration unit registers the application component developed by the custom component in the WEB configuration tool library, and binds the css variable of the application component with the theme variable of the theme file; The editing unit loads the selected theme file into the canvas of the WEB configuration tool library; receives the canvas deployment instruction, and deploys the application component into the canvas according to the canvas deployment instruction to obtain the configuration screen; a browsing unit, in response to receiving a theme switching instruction, wherein the theme switching instruction includes a keyword for switching the theme; The theme file is obtained from the theme library according to the keyword, and the theme of the configuration screen is switched based on the theme file; the keyword is sent to the application component and the CSS variable of the application component is modified, and the configuration screen is rendered according to the CSS variable.

8. The theme switching device according to claim 7, characterized in that: The editing unit includes a platform component, a screen management module, a theme management module, a configuration layout, a resource management module, a data binding module and a style editing module. The platform components are configured with basic text, pictures, tables, trees, pictures, charts, forms and maps; The screen management module is used to load screen information into the canvas and edit the configuration screen; The theme management module can read all theme lists stored in the theme library, retrieve theme files in the theme list and load them into the canvas of the WEB configuration tool library; The configuration layout device is used to receive a canvas deployment instruction, and deploy the application component to the canvas to obtain a configuration screen according to the canvas deployment instruction; The resource management module is used to manage the uploaded static resources and send the static resources to the platform component; the static resource image data and video data; The data binding module is used to bind the application components and the display data of the configuration screen; The style editing module is used to adjust the styles of the platform components and application components.

9. The theme switching device according to claim 7, characterized in that: The browsing unit includes a component parsing unit, a component rendering module and a component communication module; The component parsing unit is used to obtain screen information; the screen information includes keywords, application component information and component layout information; The component rendering module performs application component rendering according to the application component type, CSS variables and screen information; The component communication module is used for communication between two application components, between an external framework and a browsing unit, and between a theme library and a browsing unit.

10. An electronic device comprising a storage medium and a processor; the storage medium is used to store instructions; characterized in that: The processor is used to operate according to the instruction to execute the theme switching method according to any one of claims 1 to 6.

Images