The rendering methods and devices, processors and electronic devices for the first page

Abstract

This application discloses a rendering method, apparatus, processor, and electronic device for a first page. Relating to the field of artificial intelligence, the method includes: detecting whether the attribute value of a target variable in the first page has changed; if it is determined that the attribute value has changed, determining a first condition satisfied by the changed attribute value; and re-rendering the target variable in the first page according to a first style corresponding to the first condition. This solution addresses the problem in the prior art where low-code platforms require setting multiple text components to change bound styles, resulting in resource waste and low efficiency.

Description

Technical Field

[0001] This application relates to the field of artificial intelligence, and more specifically, to a method and apparatus for rendering a first page, a processor, and an electronic device. Background Technology

[0002] A low-code platform is a software development platform that enables developers to quickly build applications without writing large amounts of code, using visual development tools and simplified programming languages. Low-code platforms provide a set of predefined components and modules, allowing developers to design user interfaces, define business logic, and integrate various services and systems through drag-and-drop configuration. The goal of low-code platforms is to accelerate application development and reduce development costs, enabling non-specialized developers to participate in application development. Low-code platforms can also be used for rapid prototyping and iterative development to respond more quickly to market demands and user feedback.

[0003] However, in the current technology, low-code platforms in the industry can only statically bind CSS styles and cannot dynamically calculate and bind style values ​​during data loading, resulting in a relatively monotonous display. For example, when setting font color, it can only be represented by #232212 or RGB. If you want the text color to change according to the content (such as displaying green on success and red on failure), you have to set up multiple text components to switch between, which wastes resources and is inefficient.

[0004] Currently, there is no effective solution to the problem that changing the bound style in low-code platforms requires setting up multiple text components, resulting in resource waste and inefficiency. Summary of the Invention

[0005] The main purpose of this application is to provide a method, apparatus, processor, and electronic device for rendering a first page, in order to solve the problem in the related art where low-code platforms need to set up multiple text components to change the bound style, resulting in resource waste and low efficiency.

[0006] To achieve the above objectives, according to one aspect of this application, a method for rendering a first page is provided. The method includes: detecting whether the attribute value of a target variable in the first page has changed; if it is determined that the attribute value has changed, determining a first condition satisfied by the changed attribute value; and re-rendering the target variable in the first page according to a first style corresponding to the first condition.

[0007] Optionally, before detecting whether the attribute value of the target variable in the target page has changed, the method further includes: obtaining the abstract syntax tree corresponding to the first page, wherein the nodes of the abstract syntax tree are used to indicate the components contained in the first page; receiving a selection operation triggered by the first object in the second page, wherein the selection operation is used to select at least M style variables contained in the first style, wherein M is a positive integer; generating style child nodes according to the M style variables carried by the selection operation and the initial values ​​of the M style variables, and attaching the style child nodes to the target node, wherein the target node is the node of the target component corresponding to the target variable in the abstract syntax tree.

[0008] Optionally, before receiving the selection operation triggered by the first object on the second page, the method further includes: receiving a configuration operation triggered by the second object on the third page, wherein the configuration operation is used to configure the style variable; and determining the variable name, variable type, and initial value of the style variable according to the configuration operation.

[0009] Optionally, after attaching the style child node to the target node, the method further includes: receiving a logic definition operation triggered by the first object on the fourth page, wherein the logic definition operation is used to configure the judgment logic for triggering style transformation of the target variable; determining, according to the logic definition operation, N second conditions corresponding to the N value ranges of the attribute value, and the variable values ​​of M style variables contained in the N second styles respectively, wherein N is a positive integer, the N second conditions include the first condition, the N second conditions correspond one-to-one with the N second styles, and the N second styles include the first style.

[0010] Optionally, the method further includes: converting the style child nodes into CSS code using a code translator, and converting the logical arrangement content into JS code, wherein the logical arrangement content is used to indicate the judgment logic; and rendering the first page based on the CSS code and the JS code.

[0011] Optionally, re-rendering the target variable in the first page according to the first style corresponding to the first condition includes: matching a target JS statement in the JS code according to the first condition; updating the CSS code through the target JS statement, so as to re-render the target variable through the updated CSS code.

[0012] Optionally, matching a target JavaScript statement in the JavaScript code according to the first condition includes: obtaining the correspondence between the N second conditions and the N second styles; matching the first style corresponding to the first condition among the N second styles according to the correspondence; and determining the target JavaScript statement corresponding to the first style.

[0013] To achieve the above objectives, according to another aspect of this application, a rendering apparatus for a first page is provided. The apparatus includes: a detection module for detecting whether the attribute value of a target variable in the first page has changed; a determination module for determining, if the attribute value has changed, a first condition satisfied by the changed attribute value; and a rendering module for re-rendering the target variable in the first page according to a first style corresponding to the first condition.

[0014] Optionally, the apparatus further includes: a mounting module, configured to obtain an abstract syntax tree corresponding to the first page, wherein the nodes of the abstract syntax tree are used to indicate components contained in the first page; receive a selection operation triggered by a first object in a second page, wherein the selection operation is used to select at least M style variables contained in the first style, wherein M is a positive integer; generate style child nodes according to the M style variables carried by the selection operation and the initial values ​​of the M style variables, and mount the style child nodes to a target node, wherein the target node is the node of the target component corresponding to the target variable in the abstract syntax tree.

[0015] Optionally, the device further includes: a receiving module, configured to receive a configuration operation triggered by a second object on a third page, wherein the configuration operation is used to configure the style variable; and to determine the variable name, variable type, and initial value of the style variable based on the configuration operation.

[0016] Optionally, the mounting module is further configured to receive a logical definition operation triggered by the first object on the fourth page, wherein the logical definition operation is used to configure the judgment logic for triggering style transformation of the target variable; and to determine, according to the logical definition operation, N second conditions corresponding to the N value ranges of the attribute value, and the variable values ​​of M style variables contained in the N second styles respectively, wherein N is a positive integer, the N second conditions include the first condition, the N second conditions correspond one-to-one with the N second styles, and the N second styles include the first style.

[0017] Optionally, the rendering module is further configured to convert the style child nodes into CSS code and the logic arrangement content into JS code using a code translator, wherein the logic arrangement content is used to indicate the judgment logic; and to render the first page based on the CSS code and the JS code.

[0018] Optionally, the rendering module is further configured to match a target JavaScript statement in the JavaScript code according to the first condition; update the CSS code using the target JavaScript statement, so as to re-render the target variable using the updated CSS code.

[0019] Optionally, the apparatus further includes: a matching module, configured to obtain the correspondence between the N second conditions and the N second styles; match the first style corresponding to the first condition among the N second styles according to the correspondence; and determine the target JavaScript statement corresponding to the first style.

[0020] This application employs the following steps: Real-time detection of whether the attribute value of the target variable on the first page has changed; if a change is confirmed, further determination of the first condition satisfied by the changed attribute value; and re-rendering of the target variable on the first page based on the first style corresponding to the first condition. By adopting this scheme, the variable value is parsed in real-time during program execution, and the dynamic change of the variable value is used to change the style of the component (target variable), thereby improving the style display flexibility of low-code applications. This solves the problem in related technologies where low-code platforms require setting multiple text components to change bound styles, resulting in resource waste and low efficiency. Attached Figure Description

[0021] The accompanying drawings, which form part of this application, are used to provide a further understanding of this application. The illustrative embodiments and descriptions of this application are used to explain this application and do not constitute an undue limitation of this application. In the drawings:

[0022] Figure 1 This is a flowchart of an optional first page rendering method provided according to an embodiment of this application;

[0023] Figure 2 This is a schematic diagram of an optional abstract syntax tree structure provided according to an embodiment of this application;

[0024] Figure 3 This is a schematic diagram of a configuration interface for an optional initial value of a style variable provided according to an embodiment of this application;

[0025] Figure 4 This is a flowchart illustrating an optional first page rendering method provided according to an embodiment of this application;

[0026] Figure 5 This is a schematic diagram of an optional first page rendering device provided according to an embodiment of this application;

[0027] Figure 6 This is a schematic diagram of an optional electronic device provided according to an embodiment of this application. Detailed Implementation

[0028] It should be noted that, unless otherwise specified, the embodiments and features described in this application can be combined with each other. This application will now be described in detail with reference to the accompanying drawings and embodiments.

[0029] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of the present application.

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

[0031] For ease of description, the following explains some of the nouns or terms used in the embodiments of this application:

[0032] CSS (Cascading Style Sheets) is a style sheet language used to define how markup languages ​​such as HTML are displayed and their layout. It controls the page's appearance by adding different appearance attributes such as color, font, size, and spacing to page elements.

[0033] In web development, CSS is commonly used to enhance the appearance of various website elements and achieve responsive design. Due to its high flexibility and maintainability, more and more websites are using CSS to replace traditional HTML inline styles or JavaScript DOM manipulation.

[0034] "Cascading" refers to the numerous priority levels and inheritance mechanisms defined in CSS. When selectors have the same weight, they are processed according to a specific algorithm, and the `!important` keyword can be used to force a higher priority for a particular property value. These rules allow us to precisely control the final effect of each page element in different scenarios.

[0035] In conclusion, CSS, as an indispensable component of modern web development, plays a crucial role in improving user experience and increasing interactivity.

[0036] Abstract Syntax Tree (AST): An abstract representation of the syntax structure of source code. It represents the syntax structure of a programming language in a tree-like form, with each node in the tree representing a structure in the source code.

[0037] The present invention will now be described in conjunction with preferred implementation steps. Figure 1 This is a flowchart of a first page rendering method provided according to an embodiment of this application, such as... Figure 1 As shown, the method includes the following steps:

[0038] Step S101: Detect whether the attribute value of the target variable in the first page has changed;

[0039] Step S102: If it is determined that the attribute value has changed, determine the first condition that the changed attribute value satisfies;

[0040] Step S103: Re-render the target variable in the first page according to the first style corresponding to the first condition.

[0041] The rendering method for the first page provided in this application embodiment detects in real time whether the attribute value of the target variable in the first page has changed. If it is determined that the attribute value has changed, it further determines the first condition satisfied by the changed attribute value, and re-renders the target variable in the first page according to the first style corresponding to the first condition. By adopting the above scheme, the variable value is parsed in real time during program operation, and the style of the component (target variable) is changed by dynamically changing the variable value, thereby improving the display flexibility of the style of the low-code application. It solves the problem in related technologies that if the low-code platform needs to change the bound style, it needs to set multiple text components, which causes resource waste and low efficiency.

[0042] Optionally, before performing step S101 above: detecting whether the attribute value of the target variable in the target page has changed, the method further includes: obtaining the abstract syntax tree corresponding to the first page, wherein the nodes of the abstract syntax tree are used to indicate the components contained in the first page; receiving a selection operation triggered by the first object in the second page, wherein the selection operation is used to select at least M style variables contained in the first style, wherein M is a positive integer; generating style child nodes according to the M style variables carried by the selection operation and the initial values ​​of the M style variables, and attaching the style child nodes to the target node, wherein the target node is the node of the target component corresponding to the target variable in the abstract syntax tree.

[0043] To implement the above method of dynamic style binding, a style node needs to be added to the abstract syntax tree (AST) corresponding to the front-end page (first page) defined by the low-code platform's visual language. This AST should at least indicate the components contained in the first page. Then, based on the selection operation triggered by the first object in the second page, the variables (style variables) that each component needs to be bound to are determined. Next, a style child node is generated based on the selected M style variables and their corresponding initial values, and this style child node is attached to the node corresponding to the target component in the AST. The structure of the generated AST is as follows: Figure 2 As shown, Figure 2 This is a schematic diagram of an optional abstract syntax tree provided in an embodiment of the present invention. Originally, the nodes in the abstract syntax tree generated based on the first page only contain child nodes such as component name, attribute, and event. After the above mounting operation, the nodes of the abstract syntax tree have added style child nodes, thereby enabling dynamic updates of styles.

[0044] Optionally, before performing the above steps: receiving the selection operation triggered by the first object on the second page, the method further includes: receiving the configuration operation triggered by the second object on the third page, wherein the configuration operation is used to configure the style variable; and determining the variable name, variable type, and initial value of the style variable according to the configuration operation.

[0045] Before users select style variables, they need to configure them first. One optional method is to display a style variable configuration table on the platform's third page, visually defining the variable name, variable type, and initial value. Users can customize various style variables according to their needs. The initial values ​​can specifically include initial values ​​for various parameters such as font color, background color, margins, and size. Figure 3 As shown, Figure 3 This is a schematic diagram of an optional configuration interface for the initial value of a style variable according to an embodiment of the present invention.

[0046] It should be noted that the first object and the second object mentioned above can be the same object or different objects, and the present invention does not limit this.

[0047] Based on the above steps, after attaching the style child node to the target node, the method further includes: receiving a logic definition operation triggered by the first object on the fourth page, wherein the logic definition operation is used to configure the judgment logic for triggering style transformation of the target variable; determining, according to the logic definition operation, N second conditions corresponding to the N value ranges of the attribute value, and the variable values ​​of M style variables contained in the N second styles respectively, wherein N is a positive integer, the N second conditions include the first condition, the N second conditions correspond one-to-one with the N second styles, and the N second styles include the first style.

[0048] For a component (target variable), after completing the initial value binding of the variable, it is also necessary to configure the different styles corresponding to the dynamic changes of a certain attribute value in the component. For example, if the component is used to display a table, when the output value of a certain field in the table is True, it needs to be displayed in green, and when the output value is False, it needs to be displayed in red. Therefore, the user can configure the N value ranges of the attribute value in the target variable as {True, False}. These two values ​​correspond to two second conditions, and configure the variable values ​​of the M style variables specifically included in the second style corresponding to the second condition. The style variables can include font color, font size, etc.

[0049] It should be noted that developers can create a logic visualization editor based on the above requirements, allowing users to quickly edit the judgment logic corresponding to each component.

[0050] Optionally, the method further includes: converting the style child nodes into CSS code using a code translator, and converting the logical arrangement content into JS code, wherein the logical arrangement content is used to indicate the judgment logic; and rendering the first page based on the CSS code and the JS code.

[0051] After completing the above configuration, the code translator can automatically convert the multiple style variables bound to the component (target variable) and the logical arrangement content into CSS code and JS code respectively. The logical arrangement content is the judgment logic edited by the above logic visual editor, and then the rendering of the first page is completed based on the generated CSS code and JS code.

[0052] Optionally, in this embodiment, the target variable in the first page is re-rendered according to the first style corresponding to the first condition in the following way: matching the target JS statement in the JS code according to the first condition; updating the CSS code through the target JS statement, so as to re-render the target variable through the updated CSS code.

[0053] First, match the target JavaScript statement in the JavaScript code based on the first condition satisfied by the changed attribute value. Then, dynamically assign values ​​to the CSS code by executing the target JavaScript statement. That is, update the corresponding statements in the CSS code according to the values ​​of various style variables indicated by the target JavaScript statement, and then re-render the target variable through the updated CSS code.

[0054] Optionally, the above steps can be performed as follows: matching the target JavaScript statement in the JavaScript code according to the first condition can be achieved through the following scheme: obtaining the correspondence between the N second conditions and the N second styles; matching the first style corresponding to the first condition in the N second styles according to the correspondence; and determining the target JavaScript statement corresponding to the first style.

[0055] Extract the correspondence between the N second conditions and the N second styles from the logical arrangement content. Then, match the first style corresponding to the first condition from the N second styles according to the correspondence. Finally, determine the target JS statement corresponding to the first style in the JS code.

[0056] It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions, and although a logical order is shown in the flowchart, in some cases the steps shown or described may be executed in a different order than that shown here.

[0057] This invention also provides an optional method for rendering the first page, such as... Figure 4 As shown, Figure 4 This is a flowchart illustrating an optional first page rendering method provided in an embodiment of the present invention, specifically including the following steps:

[0058] Step 4.1: Define style variables. On the low-code platform page, define the variable name, variable type, and set the initial value visually.

[0059] Step 4.2: Style variable binding. In the style property dynamic binding panel, for the style type that needs to be set, click "Please select variable" and select the corresponding variable defined in the previous step in the pop-up dialog box;

[0060] Step 4.3: Syntax Tree Mounting: Mount the currently set style variables and initial values ​​to the syntax tree to complete the binding;

[0061] Step 4.4: Variable logic arrangement. In the logic visual editor, define operations such as judgment and assignment for changes in variables;

[0062] Step 4.5: Target code generation. The bound variables and logical arrangement are converted into CSS and JS target code through a code translator. CSS is dynamically assigned using JS statements to achieve dynamic style display effects.

[0063] Optionally, dynamic assignment of CSS values ​​via JavaScript statements can be done in the following ways:

[0064] 1. Using the `style` property: You can assign values ​​to CSS properties by directly modifying the `style` property of an element. For example, you can use the following statement to set the background color of an element to red:

[0065] ```javascript

[0066] document.getElementById("elementId").style.backgroundColor="red";

[0067] ```

[0068] 2. Using the `setAttribute()` method: You can use the `setAttribute()` method of an element to set the value of a CSS property. For example, you can use the following statement to set the border width of an element to 2 pixels:

[0069] ```javascript

[0070] document.getElementById("elementId").setAttribute("style","border-width:2px");

[0071] ```

[0072] 3. Using the `classList` property: You can use the `classList` property of an element to add or remove CSS classes. For example, you can use the following statement to add a CSS class named "highlight" to an element:

[0073] ```javascript

[0074] document.getElementById("elementId").classList.add("highlight");

[0075] ```

[0076] 4. Using the `style` object: You can use an element's `style` object to directly set the values ​​of CSS properties. For example, you can use the following statement to set the font size of an element to 16 pixels:

[0077] ```javascript

[0078] document.getElementById("elementId").style.fontSize="16px";

[0079] ```

[0080] Note: In the above method, "elementId" should be replaced with the ID of the actual element.

[0081] Through the above steps, dynamic style binding is completed during the visual building process, supporting low-code page building to dynamically update styles based on data, API results, etc., enriching the page display effect, thus bringing the following benefits: 1. The display effect can be adjusted in real time according to data; 2. The definition process is simple and convenient, and users do not need to learn complex programming syntax to complete the configuration operation.

[0082] This application also provides a rendering apparatus for a first page. It should be noted that the rendering apparatus for the first page in this application can be used to execute the rendering method for the first page provided in this application. The rendering apparatus for the first page provided in this application will be described below.

[0083] Figure 5 This is a schematic diagram of a rendering apparatus for a first page according to an embodiment of this application. Figure 5 As shown, the device includes:

[0084] The detection module 502 is used to detect whether the attribute value of the target variable in the first page has changed;

[0085] The determining module 504 is used to determine the first condition satisfied by the changed attribute value when it is determined that the attribute value has changed.

[0086] The rendering module 506 is used to re-render the target variable in the first page according to the first style corresponding to the first condition.

[0087] The rendering apparatus for the first page provided in this application embodiment detects in real time whether the attribute value of the target variable in the first page has changed. If it is determined that the attribute value has changed, it further determines the first condition satisfied by the changed attribute value, and re-renders the target variable in the first page according to the first style corresponding to the first condition. By adopting the above scheme, the variable value is parsed in real time during program operation, and the style of the component (target variable) is changed by dynamically changing the variable value, thereby improving the style display flexibility of low-code applications. It solves the problem in related technologies that if a low-code platform needs to change the bound style, it needs to set up multiple text components, resulting in resource waste and low efficiency.

[0088] Optionally, the above apparatus further includes: a mounting module, configured to obtain an abstract syntax tree corresponding to the first page, wherein the nodes of the abstract syntax tree are used to indicate components contained in the first page; receive a selection operation triggered by a first object in a second page, wherein the selection operation is used to select at least M style variables contained in the first style, wherein M is a positive integer; generate style child nodes according to the M style variables carried by the selection operation and the initial values ​​of the M style variables, and mount the style child nodes to a target node, wherein the target node is the node of the target component corresponding to the target variable in the abstract syntax tree.

[0089] To implement the above method of dynamic style binding, a style node needs to be added to the abstract syntax tree (AST) corresponding to the front-end page (first page) defined by the low-code platform's visual language. This AST should at least indicate the components contained in the first page. Then, based on the selection operation triggered by the first object in the second page, the variables (style variables) that each component needs to be bound to are determined. Next, a style child node is generated based on the selected M style variables and their corresponding initial values, and this style child node is attached to the node corresponding to the target component in the AST. The structure of the generated AST is as follows: Figure 2 As shown, Figure 2 This is a schematic diagram of an optional abstract syntax tree provided in an embodiment of the present invention. Originally, the nodes in the abstract syntax tree generated based on the first page only contain child nodes such as component name, attribute, and event. After the above mounting operation, the nodes of the abstract syntax tree have added style child nodes, thereby enabling dynamic updates of styles.

[0090] Based on the above process, the device further includes: a receiving module, configured to receive a configuration operation triggered by a second object on a third page, wherein the configuration operation is used to configure the style variable; and to determine the variable name, variable type, and initial value of the style variable according to the configuration operation.

[0091] Before users select style variables, they need to configure them first. One optional method is to display a style variable configuration table on the platform's third page, visually defining the variable name, variable type, and initial value. Users can customize various style variables according to their needs. The initial values ​​can specifically include initial values ​​for various parameters such as font color, background color, margins, and size. Figure 3 As shown, Figure 3 This is a schematic diagram of an optional configuration interface for the initial value of a style variable according to an embodiment of the present invention.

[0092] It should be noted that the first object and the second object mentioned above can be the same object or different objects, and the present invention does not limit this.

[0093] Optionally, the above-mentioned mounting module is further configured to receive a logical definition operation triggered by the first object on the fourth page, wherein the logical definition operation is configured to configure the judgment logic for triggering style transformation of the target variable; and to determine the variable values ​​of the N second conditions corresponding to the N value ranges of the attribute value and the M style variables contained in the N second styles according to the logical definition operation, wherein N is a positive integer, the N second conditions include the first condition, the N second conditions correspond one-to-one with the N second styles, and the N second styles include the first style.

[0094] For a component (target variable), after completing the initial value binding of the variable, it is also necessary to configure the different styles corresponding to the dynamic changes of a certain attribute value in the component. For example, if the component is used to display a table, when the output value of a certain field in the table is True, it needs to be displayed in green, and when the output value is False, it needs to be displayed in red. Therefore, the user can configure the N value ranges of the attribute value in the target variable as {True, False}. These two values ​​correspond to two second conditions, and configure the variable values ​​of the M style variables specifically included in the second style corresponding to the second condition. The style variables can include font color, font size, etc.

[0095] It should be noted that developers can create a logic visualization editor based on the above requirements, allowing users to quickly edit the judgment logic corresponding to each component.

[0096] Optionally, the rendering module 506 is further configured to convert the style child nodes into CSS code and the logic arrangement content into JS code using a code translator, wherein the logic arrangement content is used to indicate the judgment logic; and to render the first page according to the CSS code and the JS code.

[0097] After completing the above configuration, the code translator can automatically convert the multiple style variables bound to the component (target variable) and the logical arrangement content into CSS code and JS code respectively. The logical arrangement content is the judgment logic edited by the above logic visual editor, and then the rendering of the first page is completed based on the generated CSS code and JS code.

[0098] Optionally, the rendering module 506 is further configured to match a target JavaScript statement in the JavaScript code according to the first condition; update the CSS code using the target JavaScript statement, so as to re-render the target variable using the updated CSS code.

[0099] First, match the target JavaScript statement in the JavaScript code based on the first condition satisfied by the changed attribute value. Then, dynamically assign values ​​to the CSS code by executing the target JavaScript statement. That is, update the corresponding statements in the CSS code according to the values ​​of various style variables indicated by the target JavaScript statement, and then re-render the target variable through the updated CSS code.

[0100] Optionally, the above apparatus further includes: a matching module, configured to obtain the correspondence between the N second conditions and the N second styles; match the first style corresponding to the first condition among the N second styles according to the correspondence; and determine the target JavaScript statement corresponding to the first style.

[0101] Extract the correspondence between the N second conditions and the N second styles from the logical arrangement content. Then, match the first style corresponding to the first condition from the N second styles according to the correspondence. Finally, determine the target JS statement corresponding to the first style in the JS code.

[0102] The rendering device for the first page includes a processor and a memory. The detection module 502, determination module 504, rendering module 506, mounting module, matching module, etc. are all stored in the memory as program units. The processor executes the program units stored in the memory to realize the corresponding functions.

[0103] The processor contains a kernel, which retrieves the corresponding program units from memory. One or more kernels can be configured. Adjusting kernel parameters can resolve issues. In low-code platforms, changing the bound style requires setting multiple text components, leading to resource waste and inefficiency.

[0104] The memory may include non-permanent memory in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM, and the memory includes at least one memory chip.

[0105] This invention provides a computer-readable storage medium storing a program that, when executed by a processor, implements a method for rendering the first page.

[0106] This invention provides a processor for running a program, wherein the program executes a rendering method for the first page during runtime.

[0107] like Figure 6 As shown, an embodiment of the present invention provides an electronic device, which includes a processor, a memory, and a program stored in the memory and executable on the processor. When the processor executes the program, it performs the following steps: detecting whether the attribute value of a target variable in a first page has changed; if it is determined that the attribute value has changed, determining a first condition satisfied by the changed attribute value; and re-rendering the target variable in the first page according to a first style corresponding to the first condition.

[0108] Optionally, before detecting whether the attribute value of the target variable in the target page has changed, the method further includes: obtaining the abstract syntax tree corresponding to the first page, wherein the nodes of the abstract syntax tree are used to indicate the components contained in the first page; receiving a selection operation triggered by the first object in the second page, wherein the selection operation is used to select at least M style variables contained in the first style, wherein M is a positive integer; generating style child nodes according to the M style variables carried by the selection operation and the initial values ​​of the M style variables, and attaching the style child nodes to the target node, wherein the target node is the node of the target component corresponding to the target variable in the abstract syntax tree.

[0109] Optionally, before receiving the selection operation triggered by the first object on the second page, the method further includes: receiving a configuration operation triggered by the second object on the third page, wherein the configuration operation is used to configure the style variable; and determining the variable name, variable type, and initial value of the style variable according to the configuration operation.

[0110] Optionally, after attaching the style child node to the target node, the method further includes: receiving a logic definition operation triggered by the first object on the fourth page, wherein the logic definition operation is used to configure the judgment logic for triggering style transformation of the target variable; determining, according to the logic definition operation, N second conditions corresponding to the N value ranges of the attribute value, and the variable values ​​of M style variables contained in the N second styles respectively, wherein N is a positive integer, the N second conditions include the first condition, the N second conditions correspond one-to-one with the N second styles, and the N second styles include the first style.

[0111] Optionally, the method further includes: converting the style child nodes into CSS code using a code translator, and converting the logical arrangement content into JS code, wherein the logical arrangement content is used to indicate the judgment logic; and rendering the first page based on the CSS code and the JS code.

[0112] Optionally, re-rendering the target variable in the first page according to the first style corresponding to the first condition includes: matching a target JS statement in the JS code according to the first condition; updating the CSS code through the target JS statement, so as to re-render the target variable through the updated CSS code.

[0113] Optionally, matching a target JavaScript statement in the JavaScript code according to the first condition includes: obtaining the correspondence between the N second conditions and the N second styles; matching the first style corresponding to the first condition among the N second styles according to the correspondence; and determining the target JavaScript statement corresponding to the first style.

[0114] The devices mentioned in this article can be servers, PCs, tablets, mobile phones, etc.

[0115] This application also provides a computer program product, which, when executed on a data processing device, is suitable for executing an initialization program having the following method steps: detecting whether the attribute value of a target variable in a first page has changed; if it is determined that the attribute value has changed, determining a first condition satisfied by the changed attribute value; and re-rendering the target variable in the first page according to a first style corresponding to the first condition.

[0116] Optionally, before detecting whether the attribute value of the target variable in the target page has changed, the method further includes: obtaining the abstract syntax tree corresponding to the first page, wherein the nodes of the abstract syntax tree are used to indicate the components contained in the first page; receiving a selection operation triggered by the first object in the second page, wherein the selection operation is used to select at least M style variables contained in the first style, wherein M is a positive integer; generating style child nodes according to the M style variables carried by the selection operation and the initial values ​​of the M style variables, and attaching the style child nodes to the target node, wherein the target node is the node of the target component corresponding to the target variable in the abstract syntax tree.

[0117] Optionally, before receiving the selection operation triggered by the first object on the second page, the method further includes: receiving a configuration operation triggered by the second object on the third page, wherein the configuration operation is used to configure the style variable; and determining the variable name, variable type, and initial value of the style variable according to the configuration operation.

[0118] Optionally, after attaching the style child node to the target node, the method further includes: receiving a logic definition operation triggered by the first object on the fourth page, wherein the logic definition operation is used to configure the judgment logic for triggering style transformation of the target variable; determining, according to the logic definition operation, N second conditions corresponding to the N value ranges of the attribute value, and the variable values ​​of M style variables contained in the N second styles respectively, wherein N is a positive integer, the N second conditions include the first condition, the N second conditions correspond one-to-one with the N second styles, and the N second styles include the first style.

[0119] Optionally, the method further includes: converting the style child nodes into CSS code using a code translator, and converting the logical arrangement content into JS code, wherein the logical arrangement content is used to indicate the judgment logic; and rendering the first page based on the CSS code and the JS code.

[0120] Optionally, re-rendering the target variable in the first page according to the first style corresponding to the first condition includes: matching a target JS statement in the JS code according to the first condition; updating the CSS code through the target JS statement, so as to re-render the target variable through the updated CSS code.

[0121] Optionally, matching a target JavaScript statement in the JavaScript code according to the first condition includes: obtaining the correspondence between the N second conditions and the N second styles; matching the first style corresponding to the first condition among the N second styles according to the correspondence; and determining the target JavaScript statement corresponding to the first style.

[0122] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0123] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart... Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0124] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0125] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0126] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0127] Memory may include non-persistent memory in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0128] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. 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 technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0129] It should also be noted that the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, commodity, or apparatus that includes a series of elements includes not only those elements but also other elements not explicitly listed, or includes elements inherent to such process, method, commodity, or apparatus. In the absence of further limitations, an element defined by the phrase "comprises a ..." does not exclude the presence of other identical elements in the process, method, commodity, or apparatus that includes the element.

[0130] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0131] The above are merely embodiments of this application and are not intended to limit the scope of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of the claims of this application.

Claims

1. A method for rendering a first page, characterized in that, include: Detect whether the attribute value of the target variable has changed on the first page; If it is determined that the attribute value has changed, determine the first condition that the changed attribute value satisfies; The target variable in the first page is re-rendered according to the first style corresponding to the first condition; Before detecting whether the attribute value of the target variable in the target page has changed, the method further includes: Obtain the abstract syntax tree corresponding to the first page, wherein the nodes of the abstract syntax tree are used to indicate the components contained in the first page; Receive a selection operation triggered by a first object on a second page, wherein the selection operation is used to select at least M style variables contained in the first style, where M is a positive integer; Based on the M style variables carried by the selection operation and the initial values ​​of the M style variables, style child nodes are generated, and the style child nodes are attached to the target node, wherein the target node is the node of the target component corresponding to the target variable in the abstract syntax tree.

2. The method according to claim 1, characterized in that, Before receiving the selection operation triggered by the first object on the second page, the method further includes: Receive a configuration operation triggered by a second object on a third page, wherein the configuration operation is used to configure the style variable; The configuration operation determines the variable name, variable type, and initial value of the style variable.

3. The method according to claim 1, characterized in that, After attaching the style child node to the target node, the method further includes: Receive the logic definition operation triggered by the first object on the fourth page, wherein the logic definition operation is used to configure the judgment logic for triggering style transformation of the target variable; Based on the logical definition operation, determine the N second conditions corresponding to the N value ranges of the attribute value, and the variable values ​​of the M style variables contained in the N second styles, where N is a positive integer, the N second conditions include the first condition, the N second conditions correspond one-to-one with the N second styles, and the N second styles include the first style.

4. The method according to claim 3, characterized in that, The method further includes: The style child nodes are converted into CSS code using a code translator, and the logical arrangement content is converted into JS code, wherein the logical arrangement content is used to indicate the judgment logic; The first page is rendered based on the CSS and JS code.

5. The method according to claim 4, characterized in that, Re-render the target variable in the first page according to the first style corresponding to the first condition, including: Match the target JavaScript statement in the JavaScript code according to the first condition; The target JavaScript statement updates the CSS code, and the updated CSS code is used to re-render the target variable.

6. The method according to claim 5, characterized in that, Matching target JavaScript statements in the JavaScript code based on the first condition includes: Obtain the correspondence between the N second conditions and the N second styles; According to the correspondence, match the first style corresponding to the first condition among the N second styles; Determine the target JavaScript statement corresponding to the first style.

7. A rendering device for a first page, characterized in that, include: The detection module is used to detect whether the attribute values ​​of the target variable on the first page have changed; The determining module is used to determine a first condition satisfied by the changed attribute value when it is determined that the attribute value has changed; The rendering module is used to re-render the target variable in the first page according to the first style corresponding to the first condition; The detection module is further configured to: obtain the abstract syntax tree corresponding to the first page, wherein the nodes of the abstract syntax tree are used to indicate the components contained in the first page; receive a selection operation triggered by a first object in the second page, wherein the selection operation is used to select at least M style variables contained in the first style, wherein M is a positive integer; generate style child nodes according to the M style variables carried by the selection operation and the initial values ​​of the M style variables, and attach the style child nodes to the target node, wherein the target node is the node of the target component corresponding to the target variable in the abstract syntax tree.

8. A processor, characterized in that, The processor is used to run a program, wherein the program executes the method according to any one of claims 1 to 6 when it runs.

9. An electronic device, characterized in that, It includes one or more processors and a memory, the memory being used to store one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors cause the one or more processors to implement the method of any one of claims 1 to 6.

Images