Screen rendering method and device, medium and product

Abstract

The embodiment of the invention relates to the technical field of computers, and discloses a screen rendering method and device, a medium and a product. The method is applied to a low-code visualization platform, and comprises the following steps: determining a size type of a screen to be adapted; according to the size type of the screen to be adapted, determining a style rule table constructed based on Tailwind CSS; according to the style rule table constructed based on the Tailwind CSS, determining a target style object adaptive to the screen size type; and according to the target style object, generating a target code based on Tailwind CSS for rendering. The technical problem of low development efficiency caused by code redundancy and difficulty in maintenance in a solution of a low-code visualization platform in related technologies can be at least solved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a screen rendering method, device, medium and product. Background Art

[0002] Low-Code Visual Platform, also known as Low-Code Development Platform (LCDP), is a development platform that can quickly generate applications without coding or with a small amount of code. Through the visual application development method, developers with different experience levels can use a graphical user interface, drag-and-drop components and model-driven logic to create web pages and mobile applications, lowering the development threshold.

[0003] In the related art, although TailwindCSS can be used directly in traditional development websites to achieve multi-terminal adaptation. However, TailwindCSS cannot be used directly in low-code visualization platforms to achieve multi-terminal adaptation. In some existing LCDP-based multi-terminal adaptation technical solutions, responsive design and media queries are generally used to achieve multi-terminal adaptation. By writing a large amount of CSS code that adapts to different screen sizes and resolutions, developers can ensure that the application can be displayed normally on various terminals.

[0004] However, the inventors have at least found that while the solutions in the related art meet basic requirements, they also have some limitations: there are technical problems of low development efficiency due to code redundancy and maintenance difficulties. For example, for large-scale style management and maintenance, developers need to manually write a large number of media queries and style rules, which leads to code redundancy and maintenance difficulties. It is understandable that maintaining these complex style sheets often takes a lot of time and effort, and is prone to errors and confusion, especially in the case of team collaboration. Summary of the invention

[0005] One purpose of the present application is to provide a screen rendering method, device, medium and product, at least to solve the technical problem of low development efficiency caused by code redundancy and maintenance difficulties in the solution of the low-code visualization platform in the related technology.

[0006] To achieve the above objectives, some embodiments of the present application provide the following aspects:

[0007] In a first aspect, some embodiments of the present application also provide a screen rendering method, which is applied to a low-code visualization platform, and the method includes: determining the size type of the screen to be adapted; determining a style rule table constructed based on Tailwind CSS according to the size type of the screen to be adapted; determining a target style object adapted to the screen size type according to the style rule table constructed based on Tailwind CSS; and generating a target code based on Tailwind CSS for rendering according to the target style object.

[0008] In a second aspect, some embodiments of the present application further provide an electronic device, comprising: one or more processors; and a memory storing computer program instructions, wherein the computer program instructions, when executed, cause the processor to perform the steps of the method described above.

[0009] In a third aspect, some embodiments of the present application further provide a computer-readable medium having computer program instructions stored thereon, wherein the computer program instructions can be executed by a processor to implement the method as described above.

[0010] In a fourth aspect, some embodiments of the present application further provide a computer program product, comprising a computer program / instruction, which implements the steps of the method described above when executed by a processor.

[0011] Compared with the related art, the solution provided in the embodiment of the present application proposes a more efficient and flexible screen rendering method, which is applied to a low-code visualization platform to solve the multi-terminal adaptation problem based on the low-code visualization platform. Specifically, the method includes: determining the size type of the screen to be adapted, and then determining a style rule table built based on Tailwind CSS according to the size type of the screen to be adapted, and then, according to the style rule table built based on Tailwind CSS, determining a target style object adapted to the screen size type, and generating a target code based on Tailwind CSS for rendering according to the target style object.

[0012] 1. In this application, by cleverly introducing the TailwindCSS, developers can quickly build various layouts and customized styles in a short period of time without in-depth understanding of device differences or complex CSS coding skills, saving a lot of development time and effort, and speeding up the development rate of applications on the low-code visualization platform, which is conducive to speeding up the development of the project.

[0013] 2. In this application, while introducing the TailwindCSS, the TailwindCSS is also improved, which can achieve the purpose of multi-terminal adaptation in the low-code visualization platform, which is conducive to lowering the development threshold for developers, improving development efficiency, and ensuring that the application can be implemented on various terminal devices, thereby providing users with a unified and high-quality user experience.

[0014] 3. Compared with the CSS MediaQuery-based technical solution used in traditional low-code visualization platforms, the TailwindCSS-based solution provided in the embodiment of the present application greatly simplifies the writing and management of styles. By using the TailwindCSS atomic framework, developers do not need to manually write a large amount of CSS code, but can directly select the appropriate class name to quickly build styles, greatly improving development efficiency.

[0015] 4. TailwindCSS code is generated according to the style model (CSS Model). That is, in the embodiment of the present application, the TailwindCSS code is automatically generated by using the style model without manual writing, which is conducive to further improving development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] One or more embodiments are exemplarily described by pictures in the corresponding drawings, and these exemplified descriptions do not constitute limitations on the embodiments. Elements with the same reference numerals in the drawings represent similar elements, and unless otherwise stated, the figures in the drawings do not constitute proportional limitations.

[0017] Figure 1 An exemplary flow chart of a screen rendering method provided according to some embodiments of the present application;

[0018] Figure 2 This is an exemplary flow chart of step S102 in a screen rendering method provided according to some embodiments of the present application;

[0019] Figure 3 An exemplary flow chart of a screen rendering method in an application example provided according to some embodiments of the present application;

[0020] Figure 4 This is an exemplary structural diagram of an electronic device provided according to some embodiments of the present application. DETAILED DESCRIPTION

[0021] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0022] The following terms are used in this article.

[0023] TailwindCSS: is an atomic class-based CSS framework that enables fast interface building and is highly customizable. This method combines the features of TailwindCSS to enable developers to easily implement adaptive layout and styling of applications on various devices.

[0024] First embodiment

[0025] The first embodiment of the present application relates to a screen rendering method, which is applied to a low-code visualization platform. Figure 1 As shown, the method may include the following steps:

[0026] Step S101, determining the size type of the screen to be adapted;

[0027] Step S102, determining a style rule table constructed based on Tailwind CSS according to the size type of the screen to be adapted;

[0028] Step S103, determining a target style object adapted to the screen size type according to the style rule table constructed based on Tailwind CSS;

[0029] Step S104: Generate Tailwind CSS-based target code according to the target style object for rendering.

[0030] The following is a detailed description of each of the above steps.

[0031] For step S101, specifically, in some examples, relevant personnel can predefine the size type of the screen in the low-code visualization platform. The size type of the screen is used to characterize the size type of the screen displayed by the electronic device. Screens of different size types are suitable for different electronic devices. Exemplarily, the size type of the screen can specifically be but not limited to: the size type of the screen of electronic devices such as mobile phones, tablet computers, laptops, desktop monitors, and televisions, which is not specifically limited in the embodiments of the present application.

[0032] Exemplarily, the size type may include not only the physical size, but also the resolution and aspect ratio. The resolution is used to characterize the number of pixels on the screen. The higher the resolution, the clearer the image displayed on the screen. The aspect ratio is used to characterize the ratio of the width to the height of the screen. Common aspect ratios include 4:3, 16:9, 16:10, etc.

[0033] Exemplarily, the width information of the screen to be adapted may be obtained through the window.innerWidth property of the browser, and then the size type of the screen to be adapted may be determined according to the width information.

[0034] For step S102, specifically, in some examples, after the size type of the screen is predefined in the low-code visualization platform, relevant personnel can customize the first tool module of the low-code visualization platform; the first tool module is used to match different style components corresponding to different screen size types. In this way, the style rule table built based on TailwindCSS can be determined through the first tool module according to the size type of the screen to be adapted.

[0035] Regarding step S103, specifically, in some examples, multiple style objects may be determined according to the style rule table constructed based on Tailwind CSS, and then a target style object adapted to the screen size type may be determined according to the multiple style objects.

[0036] For step S104, specifically, in some examples, the target style object can be added to the corresponding generated component, and finally generate TailwindCSS-based code. For example, the target code based on TailwindCSS can be the corresponding HTML, CSS, JS code, etc., which is not specifically limited here. For example, rendering can be performed according to the corresponding HTML code. In this way, the target style object is directly applied to the HTML element to present a suitable appearance and layout on the screen. Among them, the target style object carries information such as the color, size, spacing, border, etc. of the component.

[0037] It can be understood that in the related art, the method of using TailwindCSS in a traditional development website to achieve multi-terminal adaptation is to directly write CSS code adapted to different screen sizes and resolutions to add class names in HTML, and then set the component style according to the added class names. Some code examples are as follows:

[0038] <div class＝"bg-blue-500text-white p-4sm:bg-red-500sm:text-black sm:p-2md:bg->

[0039] Hello World

[0040]

[0041] In the embodiment of the present application, corresponding to the low-code visualization platform, after determining the size type of the screen to be adapted, a style rule table built based on Tailwind CSS can be determined, and then a target style object adapted to the screen size type can be determined based on the style rule table built based on Tailwind CSS. In this way, the target style object is added to the corresponding generated component; some code examples are as follows:

[0042]

[0043]

[0044] Furthermore, the target style object is added to the corresponding generated component to automatically generate the target code (HTML code) based on Tailwind CSS for rendering according to the target style object. Some code examples are as follows:

[0045] <! --The following is the code automatically generated after adding the target style object to the corresponding generated component-->

[0046] <div

[0047] class="bg-blue-200text-white p-4sm:bg-red-500sm:text-black sm:p-2md:bg->

[0048] Hello World

[0049]

[0050] It is not difficult to find that compared with the related art, the solution provided in the embodiment of the present application proposes a more efficient and flexible screen rendering method, which is applied to the low-code visualization platform to solve the multi-terminal adaptation problem based on the low-code visualization platform. Specifically, the method includes: determining the size type of the screen to be adapted, and then determining the style rule table built based on Tailwind CSS according to the size type of the screen to be adapted, and then, according to the style rule table built based on Tailwind CSS, determining the target style object adapted to the screen size type, and generating the target code based on Tailwind CSS for rendering according to the target style object.

[0051] 1. In this application, by cleverly introducing the TailwindCSS, developers can quickly build various layouts and customized styles in a short period of time without in-depth understanding of device differences or complex CSS coding skills, saving a lot of development time and effort, and speeding up the development rate of applications on the low-code visualization platform, which is conducive to speeding up the development of the project.

[0052] 2. In this application, while introducing the TailwindCSS, the TailwindCSS is also improved, which can achieve the purpose of multi-terminal adaptation in the low-code visualization platform, which is conducive to lowering the development threshold for developers, improving development efficiency, and ensuring that the application can be implemented on various terminal devices, thereby providing users with a unified and high-quality user experience.

[0053] 3. Compared with the CSS MediaQuery-based technical solution used in traditional low-code visualization platforms, the TailwindCSS-based solution provided in the embodiment of the present application greatly simplifies the writing and management of styles. By using the TailwindCSS atomic framework, developers do not need to manually write a large amount of CSS code, but can directly select the appropriate class name to quickly build styles, greatly improving development efficiency.

[0054] 4. TailwindCSS code is generated according to the style model (CSS Model). That is, in the embodiment of the present application, the TailwindCSS code is automatically generated by using the style model without manual writing, which is conducive to further improving development efficiency.

[0055] Second embodiment

[0056] The second embodiment of the present application relates to a screen rendering method. The second embodiment is an improvement on the first embodiment, and the specific improvement is: in the second embodiment of the present application, according to the size type of the screen to be adapted, the style rule table constructed based on Tailwind CSS is determined, that is, step S102 can further include the following steps, such as Figure 2 As shown:

[0057] Step S1021, obtaining a first tool module custom-written on a low-code visualization platform;

[0058] Step S1022, determining a component model through the first tool module and the size type of the screen to be adapted;

[0059] Step S1023: determining a style rule table constructed based on Tailwind CSS through the first tool module and according to the component model.

[0060] For step S1021, specifically, the relevant personnel can customize and develop a first tool module with extended functions based on the Tailwind CSS framework. It can be understood that the first tool module does not exist in the TailwindCSS framework of the related art. The first tool module is obtained by the relevant personnel after expansion based on the TailwindCSS framework.

[0061] Specifically, the method for generating the custom-written first tool module includes: performing at least one of the following extensions based on TailwindCSS: determining a written size calculation function; the size calculation function is used to convert pixel units px into rem units; determining a written function for creating size class names, the size class name function is used to generate a target number of size class names; determining a grid system built based on TailwindCSS; and determining a breakpoint value setting mechanism for the screen size type.

[0062] The size calculation function is determined. The size calculation function is used to convert the pixel unit px into the rem unit. The rem is the unit of the font size relative to the root element. Through this conversion, the page layout can be adaptively changed according to the screen width.

[0063] Among them, determine the function written to create the size class name. Specifically, pass in the number of size class names that need to be generated, and then generate the target number of size class names according to the size calculation function. For example, if 10 is passed in, size class names such as .w-1, .w-2, .w-3, .... w-10 will be generated. The class name can be used to represent attributes such as width, height, inner margin, outer margin, font size, line height, etc., so that it is easy to unify and reuse styles.

[0064] Among them, the grid system built based on TailwindCSS is determined. In order to meet the needs of most scenarios of the low-code visualization platform, when defining the grid class name, three grid systems are selected by dividing the screen into 12 parts, 24 parts, and 100 parts, and then the corresponding grid class names are generated through the size calculation function. Among them, the 12-part and 24-part grid systems are mainly used to meet some common layout requirements, and the 100-part grid system is mainly used for more refined control of elements.

[0065] Among them, the breakpoint value setting mechanism of the screen size type is determined. Set the breakpoint value according to the screen width. For example, the screen size types include: mobile terminal, tablet terminal, desktop terminal, widescreen terminal, and then generate the corresponding breakpoint class name according to the breakpoint value, sm, md, lg, xl, and each breakpoint value corresponds to a screen width range. For example, the width range of the mobile terminal is 0-640px, the width range of the tablet terminal is 640-1024px, the width range of the desktop terminal is 1024-1280px, and the width range of the widescreen terminal is above 1280px.

[0066] It is understandable that the existing TailwindCSS in the related art lacks style class names for multi-terminal adaptation in the low-code visualization platform, and the size-related style rules are limited, which cannot meet the configuration requirements for various sizes of components in the low-code visualization platform. In the embodiment of the present application, by expanding TailwindCSS, more size-related style class names are added to meet the multi-terminal adaptation requirements in the low-code platform.

[0067] Optionally, in some embodiments, the method 10 for writing a size calculation function may include:

[0068] Step 11, define a function named pxToRem. The pxToRem function is used to receive a value valueInPx in pixels as a parameter.

[0069] Step 12: Using the pxToRem function, valueInPx is divided by a fixed reference value (here 14) to calculate the rem value.

[0070] Step 13: The calculation result is retained to four decimal places and is rounded off for accuracy.

[0071] Step 14, return the calculation result, wherein the calculation result is in rem.

[0072] Optionally, in some embodiments, the method 20 of writing a function for creating a size class name may include:

[0073] Step 21, define a function named createSize. The createSize function is used to receive a count as a parameter.

[0074] Step 22, an empty object size is initialized inside the createSize function.

[0075] Step 23, use a loop to calculate each size value from 0 to count, and call the pxToRem function to store the pixel calculation result in the size object, where the number is used as the key name and the rem value is used as the key value.

[0076] Step 24, finally returns a size object containing all size key-value pairs.

[0077] Optionally, in some embodiments, the implementation method 30 of the grid system built based on TailwindCSS may include:

[0078] Step 31, define a function named createColumnSize, which receives a count as a parameter.

[0079] Step 32, initialize an empty object size inside the function.

[0080] Step 33, use a loop to calculate the width percentage of each grid in turn from 1 to count.

[0081] Step 34, store each width percentage value in the size object, using i / count as the key name and the percentage value as the key value.

[0082] Step 35, finally returns the size object containing all grid key-value pairs.

[0083] Exemplarily, the first tool module may be named: TailwindUtility.

[0084] Regarding step S1022, specifically, determining the component model through the first tool module and the size type of the screen to be adapted may include the following steps:

[0085] Determining, by means of the first tool module, a breakpoint value of a size type of the screen to be adapted;

[0086] Determining the component model according to the breakpoint value;

[0087] For example, please refer to the following algorithm example:

[0088] breakpoint=TailwindUtility.getBreakpoint(screenType)

[0089] cssModel=schemaData.getcssModel(breakpoint);

[0090] The cssModel represents the component model, the breakpoint represents a breakpoint value determined according to the size type of the screen to be adapted, and the schemaData is used to characterize a method of obtaining the component style from the component model according to the breakpoint value.

[0091] It should be noted that the component model is mainly used to describe the style information of the component. It is understandable that in order to meet the style requirements of different screen size types, different styles under different screen size types need to be defined respectively to facilitate subsequent multi-terminal adaptation.

[0092] Specifically, the Tailwind CSS tool class may be used to determine a breakpoint value corresponding to the size type of the screen, wherein the breakpoint value may be used to represent a screen width value under the size type of the screen.

[0093] Exemplarily, assuming that the breakpoint value is 1280, the component model may include the following fields: cssModel={width:'w-full',padding:'1rem'};

[0094] Among them, width:'w-full' means that the current element is controlled to occupy the width of its parent container, that is, the width of the element is 100%. Padding:'1rem' means that the inner margin of the element is 1rem. It can be understood that rem is a relative unit, and 1rem is usually equal to 16px.

[0095] It can be understood that in the low-code visualization platform of the embodiment of the present application, the component style can be statically defined and stored through the Schema data model; this is different from traditional development. Traditional development of a component requires writing code. After writing, the code is directly deployed to the browser to run and obtain the actual page. After that, if the component style needs to be modified, the developer needs to rewrite the code and redeploy it.

[0096] Exemplarily, in the low-code visualization platform, when the component style is statically defined, the style attributes, attribute value ranges, default values ​​and other information of the corresponding component can be described through the JSON file of the Schema data model; since the browser cannot directly parse the information, it is necessary to parse the Schema data model through the parser of the low-code visualization platform.

[0097] Exemplarily, after parsing the Schema data model, a virtual DOM is created, and then the actual target code is generated through the virtual DOM, and finally rendered into the browser according to the target code.

[0098] For step S1023, specifically, by using the first tool module and according to the component model, a style rule table constructed based on Talwind CSS is determined, which can be referred to as follows:

[0099] classes = compute classes(cssModel)

[0100] Result: classes = (width:w-full, paddng:1rem};

[0101] Wherein, the cssModel represents the component model, the classes represents the style rule table, and the style rule table is used to characterize the component style. The component model is taken as an object, and the component model is calculated by the first tool module to obtain the style rule table.

[0102] It should be noted that in each embodiment of the present application, the style rule table is used to characterize the component style; the style rule table and the component style can be regarded as equivalent. It can be understood that one component model corresponds to one style rule table; the style rule table is used to define how the style and layout of the component are controlled by data to characterize the specific style of the interface element.

[0103] Specifically, the component style may include: buttons, adding borders to elements, adjusting the font of text, adding rounded corners to elements to improve the visual effect of the interface, adding shadows to elements to increase the three-dimensional sense and layering, etc. For example, for buttons, the background color, text color, borders, rounded corners, shadows, etc. of the button may be included; for borders, the color, width and style of the border may be included; for fonts, the size, color, font weight, font family, etc. of the text may be included.

[0104] In the low-code visualization platform, in order to enable the user to intuitively see the effects under different screen size types when editing, the first tool module can be dynamically set in the editor.

[0105] Exemplarily, before determining the style rule table constructed based on Tailwind CSS, it is necessary to pre-establish the style rule table. Wherein, the method for determining the style rule table includes: determining the target text style and color specification.

[0106] Specifically, the target text style can be determined according to actual needs. The target text style may include: text classes of different sizes and / or text classes of different colors, etc., which are not specifically limited here. Exemplarily, text classes of different sizes may be .text-sm, .text-lg, etc.; wherein .text-sm is used to represent small-sized text, .text-lg is used to represent large-sized text, etc., and these classes can be used to control the font size of the text; text classes of different colors may be .text-red-500; wherein .text-red-500 is used to represent red, and the number 500 is used to represent the brightness or saturation level of red in the color system.

[0107] Specifically, color variables can be created according to actual needs, and specific values ​​of the color variables can be determined to obtain the color specification. Exemplarily, the color variables may include: primary, secondary, etc., which can represent the main color and the secondary color respectively. The color variables can be reused. Furthermore, the color specification can be applied to different elements and states. For example, the color specification can be applied to different elements such as text, background, border, and different states such as hover, active, focus, etc. In this step, by determining the color specification, it is helpful to maintain the consistency of color use, and it is also convenient for subsequent modification and expansion.

[0108] Third embodiment

[0109] The third embodiment of the present application relates to a screen rendering method. The third embodiment is an improvement based on the second embodiment, and the specific improvement is: in the third embodiment of the present application, a specific implementation method of determining a style rule table built based on Tailwind CSS through the first tool module and according to the component model is provided.

[0110] Specifically, the determining of the style rule table constructed based on TailwindCSS through the first tool module and according to the component model, that is, step S1023, may further include the following steps:

[0111] Step S301, obtaining a grid system built based on TailwindCSS through the first tool module;

[0112] Step S302, determining the component style according to the grid system;

[0113] Step S303: determining a style rule table constructed based on Tailwind CSS according to the component style.

[0114] Specifically, a grid system based on TailwindCSS can be constructed according to the utility class provided by Tailwind CSS; the grid system is specifically a responsive grid system. The grid system is used to arrange content in a grid form and organize content through a combination of columns and rows.

[0115] Specifically, the component style can be determined according to the utility class provided by TailwindCSS; the component style is specifically a reusable component style. Among them, since the component style is a reusable component style, after the component style is determined, the component style can be reused in multiple places, and relevant personnel do not need to repeatedly write the corresponding code. Through this step, developers can create the component style by combining different utility classes, which is conducive to improving development efficiency and maintaining design consistency.

[0116] By obtaining a grid system built based on TailwindCSS and ensuring that the grid system can flexibly adapt to the size types of various screens, the component style is better determined. The method has strong flexibility and adaptability, which is conducive to meeting different display requirements.

[0117] Optionally, in some embodiments, the determining the component style according to the grid system, that is, step S302, may further include the following steps:

[0118] Step S3021, determining the number of columns and spacing of the grid system;

[0119] Step S3022: determining the component style according to the number of columns and spacing of the grid system.

[0120] For example, the entire grid system can be divided into 24 equal parts, which means that the entire page layout can be divided into 24 equal parts, each of which can be used to place content or design elements. By determining the number of columns and spacing of the grid system, a framework can be provided for subsequent designs, so that designers can make more detailed layout plans within the framework.

[0121] For example, for mobile devices, corresponding to smaller screens, each column width can be set to 100%, that is, each column occupies the entire screen width, and the content is stacked vertically; for desktop devices, corresponding to larger screens, a three-column layout can be used, and the width of each column can be set to 1 / 3; for tablet devices, a two-column layout can be used, and the width of each column can be set to 1 / 2, so that the content can be displayed side by side. Through the above configuration, the component style can be determined, and the readability and usability of the component style content can be guaranteed.

[0122] Specifically, in the process of determining the component style according to the number of columns and spacing of the grid system, the container can be designed into two styles: horizontal layout and vertical layout. Among them: the horizontal layout represents that the elements in the container are arranged horizontally, and the vertical layout represents that the elements in the container are arranged vertically. It can be understood that through the container layout, it can be ensured that the content can be reasonably distributed under different screen sizes.

[0123] Optionally, in some embodiments, determining a style rule table constructed based on Tailwind CSS according to the component style, that is, step S303 may further include the following steps:

[0124] Step S3031, determining a plurality of style objects included in the style rule table through the first tool module and according to the component model;

[0125] Step S3032, determining the class names of the multiple style objects to obtain a class name set; wherein different class names are used to define different component styles of the component model.

[0126] It should be noted that the third embodiment of the present application may also be an improvement based on the first embodiment.

[0127] It is not difficult to find that compared with the related art, in the embodiment of the present application, by obtaining the first tool module custom-written in the low-code visualization platform, and then determining the component model through the first tool module and the size type of the screen to be adapted, and determining the style rule table built based on Tailwind CSS through the first tool module and according to the component model. In this way, by customizing the component model in the low-code visualization platform, and custom-writing the first tool module to calculate the component style according to the component model, it is helpful to further improve development efficiency.

[0128] Fourth embodiment

[0129] The fourth embodiment of the present application relates to a screen rendering method. The fourth embodiment is an improvement based on the third embodiment, and the specific improvement is: in the fourth embodiment of the present application, a specific implementation method for determining a target style object adapted to the screen size type according to the style rule table constructed based on Tailwind CSS is provided.

[0130] Specifically, the determining of the target style object adapted to the screen size type according to the style rule table constructed based on Tailwind CSS, that is, step S103 may further include the following steps:

[0131] Step S1031, creating a target DOM node according to the component model;

[0132] Step S1032, obtaining a second tool module custom-written on the low-code visualization platform;

[0133] Step S1033: assigning the class name set to the target DOM node through the second tool module to determine a target style object adapted to the screen size type.

[0134] Optionally, in some embodiments, the class name set is assigned to the target DOM node through the second tool module to determine a target style object adapted to the screen size type, that is, step S1033 may further include the following steps:

[0135] Step S10331, determining each child node of the target DOM node;

[0136] Step S10332: performing a traversal recursive operation according to the class name set and each child node to determine a target style object adapted to the screen size type.

[0137] Specifically, relevant personnel can customize and develop a second tool module with customized extension functions based on the Tailwind CSS framework. In this way, after the low-code visualization platform confirms the style rule table built based on Tailwind CSS, the rule table is passed to the second tool module, so that the second tool module can output the formatted class name according to the style rule table, and the class name is generally represented by a string.

[0138] Exemplarily, the second tool module may be named: DOMUtility.

[0139] Exemplarily, according to the second tool module, the class name of the style rule table is determined, and the following pseudo code may be referred to:

[0140] className = computeClassName(classes);

[0141] Calculation result: className = lg:w-full lg:p-1rem;

[0142] Among them, the classes represents the style rule table, and the ClassName represents the class name.

[0143] In the above calculation results, "w-full" means that the width of the element is 100%. "p-1rem" means that the padding of the element is 1rem. Correspondingly, className=1g:w-full lg:p-1rem means that on the screen, the width of the element is 100%, and a padding of 1rem is added to the element. Among them, lg: represents large size. It can be understood that in the relevant technology, the prefixes sm:, md:, lg:, and xl: can be used to represent the adjustment styles for devices with small, medium, large, and extra-large screen sizes, respectively.

[0144] Exemplarily, a class name set can be obtained according to the class name; the class name set includes multiple class names (CSS class names); wherein different class names are used to define different component styles.

[0145] The class name set can be assigned to the DOM node corresponding to the component model, and rendered through the rendering mechanism of the browser. Specifically, the rendering engine of the browser can read the class name set, and search in the style rule table according to the class name set to obtain the target style object, and parse the target style object. In this way, the rendering engine will render according to the target style object and present the style and layout adapted to the screen size type to the user.

[0146] Among them, the DOM node corresponding to the component model can be obtained according to the HTML element.

[0147] It should be noted that when the browser loads and runs a web page, relevant personnel can dynamically add, remove or change the class name set. In this way, the browser will recalculate the component style accordingly and update the style and layout displayed on the screen size type.

[0148] Optionally, in some embodiments, determining the target style object adapted to the screen size type according to the class name set, that is, step S1033, may further include the following steps:

[0149] Step S10331, recursively traverse all child nodes included in the DOM node of the component model to obtain a traversal result;

[0150] Step S10332: Determine a target style object adapted to the screen size type according to the traversal result.

[0151] Exemplarily, starting from the parent node of the DOM node of the component model, all child nodes under the parent node can be recursively accessed, and then the above access process can be repeated for each child node until all descendant nodes under the parent node are accessed. The above assignment and rendering steps are performed for each child node. Once the child node is rendered, it means that the corresponding style and layout are calculated and ready for display, and then the rendered child node is added to the structure of the DOM node used to characterize the component model. In this way, relevant personnel can define the hierarchy of the component and ensure that each component and its subcomponents can be rendered correctly, which is conducive to improving the construction efficiency of complex user interfaces.

[0152] For example, see Figure 3 Shown is a flowchart of the screen rendering method in some application examples.

[0153] It should be noted that the fourth embodiment of the present application may also be an improvement based on the first embodiment and / or the second embodiment.

[0154] It is not difficult to find that in an embodiment of the present application, a method for determining the component style and layout adapted to the screen according to the style rule table constructed based on Tailwind CSS is provided.

[0155] Fifth embodiment

[0156] The fifth embodiment of the present application relates to a screen rendering method. The fifth embodiment is an improvement on the first embodiment, and the specific improvement is: in the fifth embodiment of the present application, a pre-processing step is provided before implementing the screen rendering method.

[0157] Specifically, before determining the size type of the screen to be adapted, the method may further include the following steps:

[0158] Step S401, obtaining a configuration file based on Tailwind CSS;

[0159] Step S402, determining a target color and a target variant;

[0160] Step S403, generating a modified target configuration file according to the Tailwind CSS-based configuration file, the target color, and the target variant;

[0161] For example, after obtaining a configuration file based on Tailwind CSS, the colors part in the configuration file can be configured to delete all colors except for several main target colors. The main colors include primary, secondary, success, warning, danger, info, light, dark, white, and black.

[0162] For example, after obtaining the configuration file based on Tailwind CSS, you can modify the variant configuration to retain only the target variants theme:['responsive','hover','focus','active'] and delete all other variants.

[0163] It should be noted that the fifth embodiment of the present application may also be an improvement based on any one or more embodiments from the second embodiment to the fourth embodiment.

[0164] It is not difficult to find that in the embodiment of the present application, by modifying the configuration file based on Tailwind CSS and cutting unnecessary styles in the configuration file based on Tailwind CSS, the technical problem in the related art that the style rule table after packaging the configuration file of Tailwind CSSCSS is too large, resulting in slow loading speed of the page edited and published by the low-code visualization platform, can be solved. At the same time, the style of the color part can be handed over to the style attribute of the element for processing. In some examples, the style rule table obtained according to the target configuration file can be reduced by more than 50%.

[0165] Sixth embodiment

[0166] The sixth embodiment of the present application relates to a screen rendering method. The sixth embodiment is an improvement on the second embodiment, and the specific improvement is: in the sixth embodiment of the present application, the first tool module is further encapsulated.

[0167] Specifically, in some application examples, the method for packaging the first tool module may include the following steps:

[0168] Step S501, determining the size type of the screen. For example, the size type of the screen may include: mobile, tablet, desktop, wide-desktop;

[0169] Step S502, obtaining the breakpoint value according to the screen size type. That is, by passing in the screen size type, the corresponding breakpoint value is returned, such as: xl, lg, md, sm;

[0170] Step S503, obtaining the class name of the style rule table according to the screen size type, and returning the class name of the corresponding style rule table by passing in the screen size type and the component model, for example: {sm:"bg-blue-500text-white p-4",md:"bg-red-500text-black p-2",lg:"bg-green-500text-black p-3",xl:"bg-yellow-500text-black p-4"};

[0171] Step S504, obtaining the total class name. Specifically, by passing in the style rule table, the total class name is obtained, for example: "bg-blue-500text-white p-4bg-red-500text-black p-2bg-green-500text-black p-3bg-yellow-500text-black p-4"

[0172] Step S505, add the total class name to the corresponding element. Specifically, by inputting the element and the total class name, the total class name is added to the element, and the generated HTML code is as follows:

[0173] <div class＝"bg-blue-500text-white p-4bg-red-500text-black p-2bg-green-500text-black p-3bg-yell ow-500text-black p-4"> ;

[0174] In this process, you can modify the class name of the element. By passing in the element and class name, the class name is added to the element. If the element already has a class name, the original class name will be replaced. You can also remove the element class name by passing in the element and class name to remove the class name from the element.

[0175] Step S506, defining the type of TailwindCSS class name. By defining the type of TailwindCSS class name, the encapsulation of the first tool module is completed and provided to developers for use, so that code prompts and type checks can be provided during development, effectively avoiding the problem of style class name errors when developing components.

[0176] It should be noted that the sixth embodiment of the present application may also be an improvement based on any one or more of the first embodiment and the third embodiment to the fifth embodiment.

[0177] It is not difficult to find that in the embodiment of the present application, in order to better use TailwindCSS in low-code and more efficiently, it is necessary to encapsulate some methods of TailwindCSS, so the common functional tool functions are encapsulated into a module for easy use in the low-code platform. The encapsulated first tool module can provide support for outdated browsers and adaptation to different browsers, such as IE11, Safari, Chrome, etc.

[0178] Based on the above embodiments, the solution provided by this application has the following beneficial effects:

[0179] 1. Solve the style management and layout complexity problems of traditional CSS MediaQuery-based solutions. By making full use of the features of TailwindCSS, the solution designs a simple and efficient responsive grid system, allowing developers to quickly build various layouts and ensure uniform display on different devices.

[0180] 2. The solution also defines a series of reusable style elements based on TailwindCSS, including colors, fonts, spacing, etc., to facilitate developers to quickly apply and customize in the low-code visualization platform.

[0181] 3. Designed a responsive grid system and defined reusable style elements, allowing developers to quickly build various layouts and customize styles in a short time. Compared with the cumbersome media query and style rule management in traditional solutions, the TailwindCSS-based solution can save a lot of development time and energy, thereby accelerating the development progress of the project. Export data assembly based on memory

[0182] 4. Through responsive design and breakpoint settings, the application is well adapted to different devices, improving the user experience. Compared with the traditional solution that requires manual adjustment and adaptation of styles for various devices, the solution based on TailwindCSS can more easily achieve a unified and high-quality visual experience, reducing the discomfort of users during use.

[0183] 5. TailwindCSS's reusable style elements and component CSS Schema data model make style management and maintenance simpler and more efficient. Developers can build page styles by directly referencing predefined style classes without having to pay attention to the underlying CSS implementation details, thereby reducing code complexity and maintenance costs.

[0184] It can be seen that in the embodiments of the present application, the focus is on how to achieve multi-terminal adaptation based on TailwindCSS in a low-code visualization platform. By transforming and extending TailwindCSS, more style class names are provided to meet the multi-terminal adaptation needs in the low-code platform. At the same time, the TailwindUtility module is provided to facilitate developers to use TailwindCSS in the low-code platform and improve development efficiency.

[0185] The step division of the above methods is only for clear description. When implemented, they can be combined into one step or some steps can be split and decomposed into multiple steps. As long as they include the same logical relationship, they are all within the protection scope of this application; adding insignificant modifications to the algorithm or process or introducing insignificant designs without changing the core design of the algorithm and process are all within the protection scope of this patent.

[0186] In addition, some embodiments of the present application also provide an electronic device. The electronic device may be a digital computer in various forms, such as a laptop computer, a desktop computer, a workbench, a personal digital assistant, a server, a blade server, a mainframe computer, etc. The electronic device may also be a mobile device in various forms, such as a personal digital processing, a cellular phone, a smart phone, a wearable device, and other similar computing devices.

[0187] The electronic device includes: one or more processors; and a memory storing computer program instructions, wherein when the computer program instructions are executed, the processor executes the steps of the method provided in any one or more of the above embodiments. Figure 4 An exemplary structural diagram of the electronic device is disclosed. Figure 4 As shown, the electronic device includes: one or more processors 1101, memory 1102, and interfaces for connecting various components, including high-speed interfaces and low-speed interfaces. The various components are connected to each other using different buses, and can be installed on a common mainboard or installed in other ways as needed. The processor can process instructions executed in the electronic device, including instructions stored in or on the memory to display the graphical information of the GUI on an external input / output device (such as a display device coupled to the interface). In some other embodiments, if necessary, multiple processors and / or multiple buses can be used together with multiple memories and multiple memories. Similarly, multiple electronic devices can be connected, and each device provides some necessary operations (for example, as a server array, a group of blade servers, or a multi-processor system). Among them, the components shown in this article, their connections and relationships, and their functions are only used as examples, and are not intended to limit the implementation of the present application described and / or required herein.

[0188] The electronic device may further include: an input device 1103 and an output device 1104. The processor 1101, the memory 1102, the input device 1103 and the output device 1104 may be connected via a bus or other means. Figure 4 The example of connecting through bus is taken in the following.

[0189] The input device 1103 can receive input digital or character information, and generate key signal input related to the user settings and function control of the electronic device, such as a touch screen, a keypad, a mouse, a track pad, a touch pad, an indicator bar, one or more mouse buttons, a trackball, a joystick and other input devices. The output device 1104 may include a display device, an auxiliary lighting device (e.g., an LED) and a tactile feedback device (e.g., a vibration motor), etc. The display device may include, but is not limited to, a liquid crystal display (LCD), a light emitting diode (LED) display and a plasma display. In some embodiments, the display device may be a touch screen.

[0190] To provide interaction with a user, the electronic device may be a computer. The computer has: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and a pointing device (e.g., a mouse or a trackball), through which the user can provide input to the computer. Other types of devices may also be used to provide interaction with the user; for example, the feedback provided to the user may be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form (including acoustic input, voice input, or tactile input).

[0191] In the embodiments of the present application, a computer program / instruction is stored on a computer-readable medium, and when the computer program / instruction is executed by a processor, the steps of the method provided by any one or more of the above embodiments are implemented. The computer-readable medium may be included in the electronic device described in the above embodiments; or it may exist independently without being assembled into the device. The above computer-readable medium carries one or more computer-readable instructions.

[0192] The memory 1102 can be used as a non-transient computer-readable storage medium, which can be used to store non-transient software programs, non-transient computer executable programs and modules. The processor 1101 executes various functional applications and data processing of the server by running the non-transient software programs, instructions and modules stored in the memory 1102, so as to implement the program instructions / modules corresponding to the method provided by any one or more embodiments in the embodiments of the present application.

[0193] The memory 1102 may include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function; the data storage area may store data created according to the use of the electronic device, etc. In addition, the memory 1102 may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some embodiments, the memory 1102 may optionally include a memory remotely arranged relative to the processor 1101, and these remote memories may be connected to the electronic device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0194] It should be noted that the computer-readable medium described in the present application may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present application, a computer-readable medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device.

[0195] Computer readable media include permanent and non-permanent, removable and non-removable media, and can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, modules of programs or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, read-only compact disk (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape disk storage or other magnetic storage devices or any other non-transmission medium that can be used to store information that can be accessed by a computing device.

[0196] Computer program code for performing the operations of the present application may be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages, such as Java, Smalltalk, C++, and conventional procedural programming languages, such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0197] In the above-described embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. For example, it can be implemented by using an application specific integrated circuit (ASIC), a general-purpose computer or any other similar hardware device. In certain embodiments, the software program of the present application can be executed by a processor to implement the above steps or functions. Similarly, the software program of the present application (including relevant data structures) can be stored in a computer-readable recording medium, for example, a RAM memory, a magnetic or optical drive or a floppy disk and similar devices. In addition, some steps or functions of the present application can be implemented by hardware, for example, as a circuit that cooperates with a processor to perform each step or function.

[0198] The computer program product provided in the embodiment of the present application includes one or more computer programs / instructions, and when the computer program / instructions are executed by the processor, the process or function described in the embodiment of the present application is generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions may be stored in a computer-readable storage medium, or transmitted from a computer-readable storage medium to another computer-readable storage medium, for example, the computer instructions may be transmitted from a website site, a computer, a server or a data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, server or data center. The computer-readable storage medium may be any available medium that a computer can access or a data storage device such as a server or a data center that includes one or more available media integrations. The available medium may be a magnetic medium, (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid state disk (SSD)), etc.

[0199] The flow chart or block diagram in the accompanying drawings shows the possible architecture, function and operation of the equipment, method and computer program product according to various embodiments of the present application. In this regard, each box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flow chart, and the combination of the boxes in the block diagram and / or flow chart can be implemented with a dedicated system for hardware that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0200] The scope of the present application is defined by the appended claims rather than the above description, and it is intended that all changes that fall within the meaning and scope of the equivalent elements of the claims are included in the present application. Any figure mark in the claims should not be regarded as limiting the claims involved. In addition, it is clear that the word "comprising" does not exclude other units or steps, and the singular does not exclude the plural. Multiple units or devices stated in the device claim may also be implemented by one unit or device through software or hardware. The words "first", "second", etc. are only used to distinguish the description, and do not indicate any particular order, nor can they be understood as indicating or implying relative importance.

[0201] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art can easily mention changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims, and the above embodiments should be regarded as exemplary and non-restrictive.

Claims

1. A screen rendering method, characterized in that: The method is applied to a low-code visualization platform, and the method includes: Determine the size type of the screen to be adapted; Determine a style rule table constructed based on Tailwind CSS according to the size type of the screen to be adapted; Determining a target style object adapted to the screen size type according to the style rule table constructed based on Tailwi nd CSS; Generate Tailwind CSS-based target code for rendering according to the target style object.

2. The method according to claim 1, characterized in that Determining the style rule table constructed based on Tailwi nd CSS according to the size type of the screen to be adapted includes: Get the first tool module custom-written on the low-code visualization platform; Determine a component model by using the first tool module and the size type of the screen to be adapted; A style rule table constructed based on Tailwind CSS is determined through the first tool module and according to the component model.

3. The method according to claim 2, characterized in that The custom-written first tool module is generated by performing at least one of the following extensions based on TailwindCSS: Determine a size calculation function to be written; the size calculation function is used to convert pixel units px into rem units; Determine a function for creating a size class name, wherein the function for creating a size class name is used to generate a target number of size class names; Decide on a grid system built on TailwindCSS; Determines the breakpoint value setting mechanism for the screen size type.

4. The method according to claim 2, characterized in that: Determining the style rule table constructed based on Tailwind CSS by using the first tool module and according to the component model includes: Determining, by means of the first tool module and according to the component model, a plurality of style objects included in the style rule table; Determine the class names of the multiple style objects to obtain a class name set.

5. The method according to claim 4, characterized in that The determining, according to the style rule table constructed based on Tailwind CSS, a target style object adapted to the screen size type comprises: According to the component model, create a target DOM node; Obtaining a second tool module custom-written in the low-code visualization platform; The class name set is assigned to the target DOM node through the second tool module to determine a target style object adapted to the screen size type.

6. The method according to claim 2, characterized in that The method also includes: packaging the first tool module.

7. The method according to any one of claims 1 to 6, characterized in that Before determining the size type of the screen to be adapted, the method further includes: Get the Tailwind CSS-based configuration file; Determine the target color and target variant; A modified target configuration file is generated according to the Tailwind CSS-based configuration file, the target color, and the target variation.

8. An electronic device, characterized in that: The electronic device comprises: one or more processors; and A memory storing computer program instructions, which, when executed, cause the processor to perform the steps of the method as claimed in any one of claims 1 to 7.

9. A computer readable medium having a computer program / instructions stored thereon, characterized in that: When the computer program / instructions are executed by a processor, the steps of the method according to any one of claims 1 to 7 are implemented.

10. A computer program product comprising a computer program / instructions, characterized in that When the computer program / instructions are executed by a processor, the steps of the method according to any one of claims 1 to 7 are implemented.

Images