Page rendering method and device, electronic equipment and storage medium

Abstract

The invention discloses a page rendering method and device, electronic equipment and a storage medium, and relates to the technical field of front-end development. The page rendering method comprises the steps of determining a routing component of a page where a target component is located through routing information of the page where the target component is located in response to instantiation of the target component, and traversing a component tree in the direction of the routing component by taking the target component as an initial position when the target component is a sub-component of the routing component, and searching at least one ancestor component with preset reference configuration, and then rendering the target component according to the preset reference configuration corresponding to the ancestor component with the highest level. Therefore, the components of different hierarchies in the component tree can be uniformly rendered according to the preset reference configuration set by the ancestor component with the highest hierarchies in the component tree during rendering, so that the problem of component rendering distortion caused by reference inheritance disorder among the components is avoided, and the consistency of page rendering is ensured.

Description

Technical Field

[0001] This invention relates to the field of front-end development technology, specifically to a method, apparatus, electronic device, and storage medium for determining component benchmarks. Background Technology

[0002] As the complexity of front-end applications continues to increase, front-end pages typically adopt a component-based development model, which involves dividing the interface into multiple reusable and nestable components to improve development efficiency and maintainability.

[0003] Currently, in some technologies, the rendering baseline of components is mainly passed through dependency injection, that is, the rendering baseline of the parent component is inherited by the child component, thereby realizing the rendering baseline configuration. However, this method is prone to rendering baseline inheritance errors when dealing with complex nested component structures, resulting in component rendering distortion. Improvement is needed. Summary of the Invention

[0004] This invention provides a component reference determination method, apparatus, electronic device, and storage medium to at least solve the problem of component rendering distortion caused by rendering reference inheritance errors in related technologies.

[0005] In a first aspect, the present invention provides a page rendering method, comprising: In response to the instantiation of the target component, obtain the routing information of the page where the target component is located; Based on routing information, locate the route component of the page where the target component is located; If the target component is a child component of the route component, the component tree is traversed from the target component as the starting position in the direction of the route component to find at least one ancestor component with a preset baseline configuration. The component tree represents the hierarchical relationship between different components in multiple pages. Among at least one ancestor component found, the target component is rendered according to the preset baseline configuration corresponding to the highest-level ancestor component.

[0006] Secondly, the present invention provides a page rendering apparatus, including: a routing information acquisition module, used to acquire routing information of the page where the target component is located in response to the instantiation of the target component; The routing component lookup module is used to find the routing component of the page where the target component is located based on the routing information; An ancestor component confirmation module is used to, if the target component is a child component of the routing component, traverse the component tree from the target component as the starting position towards the routing component to find at least one ancestor component with a preset baseline configuration. The component tree represents the hierarchical relationship between different components in multiple pages. The target component rendering module is used to render the target component according to the preset baseline configuration corresponding to the highest-level ancestor component among at least one ancestor component found.

[0007] Thirdly, the present invention provides an electronic device, comprising: a memory and a processor, wherein the memory and the processor are communicatively connected to each other, the memory stores computer instructions, and the processor executes the computer instructions to perform the page rendering method of the first aspect or any corresponding embodiment described above.

[0008] Fourthly, the present invention provides a computer-readable storage medium storing computer instructions for causing a computer to execute the page rendering method of the first aspect or any corresponding embodiment thereof.

[0009] Fifthly, the present invention provides a computer program product, including computer instructions for causing a computer to execute the page rendering method of the first aspect or any corresponding embodiment thereof.

[0010] In some implementations of this application, in response to the instantiation of a target component, the routing component of the page containing the target component is determined through the routing information of the page containing the target component. When the target component is a child component of the routing component, the component tree is traversed from the target component as the starting position in the direction of the routing component to find at least one ancestor component with a preset baseline configuration. Then, the target component is rendered according to the preset baseline configuration corresponding to the highest-level ancestor component. In this way, components at different levels in the component tree can be rendered uniformly according to the preset baseline configuration set by the highest-level ancestor component in the component tree, thereby avoiding the problem of component rendering distortion caused by chaotic baseline inheritance between components, and thus ensuring the consistency of page rendering. Attached Figure Description

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

[0012] Figure 1 This is a schematic diagram of a component tree structure; Figure 2 A flowchart illustrating the page rendering method provided in an embodiment of this application; Figure 3 A schematic diagram of the module of the page rendering apparatus provided in the embodiments of this application; Figure 4 A schematic diagram of the modules of an electronic device provided in an embodiment of this application. Detailed Implementation

[0013] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0014] It should be noted that, in the description of this application, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. The terms "first," "second," etc., in this application are used to distinguish similar objects and are not used to describe a specific order or sequence.

[0015] To enable those skilled in the art to better understand the present application, the present application will be further described in detail below with reference to the accompanying drawings and specific embodiments.

[0016] When developing front-end pages, component-based development frameworks are typically used for page construction. Specifically, in actual development, developers can break down a page into multiple reusable components and build a hierarchical component tree structure. At the same time, frequently used components can be encapsulated and then reused on different pages or in different locations on the same page, improving development efficiency. The relevant concepts involved in component-based development frameworks are as follows.

[0017] 1) Component: A pre-built, reusable UI (User Interface) unit with independent functionality, which can be nested and combined to form complex page structures. Components can be basic components such as buttons, text boxes, labels, and tables, or composite components made up of multiple basic components, such as a search bar component composed of buttons, text boxes, and labels. 2) Component Tree: A tree-like structure formed by the hierarchical relationship between components. The outermost container is the root node, i.e., the top-level component. All components nested within this top-level component are child nodes, forming a top-down tree structure. Each node represents a component. Through the component tree, you can trace the ancestor and descendant components of any target component. Ancestor components refer to all components from the target component upwards to the root node, while descendant components refer to all components from the target component downwards. 3) Routing: Establishes the mapping between URL (Uniform Resource Locator) paths and routing components, realizing the core mechanism of page switching and path mapping. That is, when a certain URL path is accessed, the router can load and render the page content corresponding to that path based on the preset routing information.

[0018] Based on the above description, we will further explain using the Vue.js framework as an example. (See also...) Figure 1 , Figure 1 This is a schematic diagram of a component tree structure. For example... Figure 1 As shown, in a Vue project, the top-level component is "App.vue", and all components in the entire project are nested under App.vue. Assuming this Vue project has two pages, a login page and a main page, then... Figure 1 Login.vue is the login page component, and Home.vue is the main page component. After mapping " / login" to Login.vue via routing, the login page can be accessed via the URL " / login". Similarly, after mapping " / home" to Home.vue via routing, the main page can be accessed via the URL " / home".

[0019] The login page component Login.vue and the main page component Home.vue mentioned above can also be called routing components. Each page has a routing component. Routing components are page-level components; they can serve as the top-level container for page rendering, holding all the components of the entire page. For example... Figure 1 In this example, assuming the login page includes sub-components such as a login button, username input field, and password input field, these sub-components can all be mounted under the login page's routing component, Login.vue. When the accessed URL is " / login", the routing component Login.vue can be loaded, and all components nested under Login.vue can be rendered to the view layer, completing the page display.

[0020] Currently, mainstream component-based frameworks primarily use layer-by-layer propagation or dependency injection to achieve the inheritance of baselines between components. A component baseline is a set of configurable parameters representing the component's style, layout, and visual presentation, such as font size and spacing. Taking Vue.js as an example, suppose there are three components, A, B, and C, where C is nested within B, and B is nested within A. If component C needs to obtain a baseline, component A must pass the baseline to B, and then B passes it to C. When this approach is applied to deeply nested structures, the baseline propagation chain becomes too long. If any parent component in an intermediate level fails to correctly pass the baseline, its child components and all subsequent components will fail to inherit the baseline correctly, leading to rendering errors. Furthermore, this approach results in high coupling between components, reducing code maintainability.

[0021] Furthermore, in some technologies, the layout of front-end pages mainly adopts responsive layout and flexible sizing based on a global baseline. The specific principles of these two layout methods are as follows.

[0022] 1) Responsive layout: By setting multiple breakpoints based on screen width, different page layouts are switched according to the current interface size to adapt to the display needs of different terminal devices. For example, three breakpoints are preset: 768px, 1024px, and 1920px. When the screen width is less than 768px, the page layout switches to mobile adaptation mode; when the screen width is between 768px and 1024px, tablet adaptation mode is used; when the screen width is between 1024px and 1920px, desktop layout is enabled; and when the screen width is greater than 1920px, ultrawide screen display mode is adapted. However, the layout schemes corresponding to different breakpoints need to be designed and developed separately, resulting in high maintenance costs and difficulty in ensuring the consistency of display effects between different modes. In addition, due to the increasing diversity of screen sizes, fixed breakpoints are difficult to cover all device scenarios.

[0023] 2) Flexible sizing based on a global baseline: The size of all components on the page is scaled relative to a unified global baseline. This global baseline typically depends on the baseline setting of the HTML (Hypertext Markup Language) root element or custom properties of the global CSS (Cascading Style Sheet). While this method achieves adaptive page display to some extent, it cannot independently adjust the rendering baseline in different scenarios. For example, a table component might display correctly in a regular backend management interface but may appear distorted or have excessive white space in a large-screen display due to over-scaling.

[0024] In view of this, this application provides a component benchmark determination method that can solve the above problems. This component benchmark determination method can be applied to a front-end page rendering engine, or to a terminal device that includes a front-end page rendering engine, such as a mobile terminal, tablet computer, or desktop computer.

[0025] See also Figure 2 , Figure 2 This is a flowchart illustrating the page rendering method provided in an embodiment of this application, as shown below. Figure 2 As shown, the page rendering method includes the following steps S201 to S204.

[0026] Step S201: In response to the instantiation of the target component, obtain the routing information of the page where the target component is located.

[0027] Specifically, the instantiation of the target component includes, but is not limited to, component rendering, initialization during page loading, and component mounting after route navigation; the route information is used to represent the route configuration data corresponding to the page where the target component is located, wherein the route configuration data includes, but is not limited to, page identifier and path mapping information.

[0028] Step S202: Based on the routing information, find the routing component of the page where the target component is located.

[0029] Specifically, regarding the routing component, please refer to the relevant descriptions above, which will not be repeated here.

[0030] In this embodiment, the target component can be any component on the page, that is, it can be a routing component of the page or a child component under the routing component.

[0031] Step S203: If the target component is a child component of the routing component, then starting from the target component, traverse the component tree in the direction of the routing component to find at least one ancestor component with a preset baseline configuration. The component tree represents the hierarchical relationship between different components in multiple pages.

[0032] Specifically, when the target component is nested under the route component, it indicates that the target component is a child component of the route component. Then, by finding the position of the target component in the component tree, the component tree is traversed in the direction of the route component to find at least one ancestor component with a preset baseline configuration.

[0033] It should be noted that when traversing the component tree upwards, when the route component is reached, since there may be parent components above the route component, it is necessary to continue traversing upwards until all ancestor components with preset base configurations are found.

[0034] Step S204: Among the at least one ancestor component found, the target component is rendered according to the preset baseline configuration corresponding to the highest-level ancestor component.

[0035] Specifically, the highest-level ancestor component refers to the ancestor component in the component tree that is furthest from the target component and has a preset baseline configuration. The higher the level, the wider its scope of action and the greater its control over page rendering. Therefore, it can avoid rendering inconsistencies caused by interference from the baseline of intermediate components.

[0036] The page rendering method provided in this embodiment, in response to the instantiation of the target component, determines the routing component of the page where the target component is located through the routing information of the page where the target component is located. When the target component is a child component of the routing component, the component tree is traversed from the target component as the starting position in the direction of the routing component to find at least one ancestor component with a preset baseline configuration. Then, the target component is rendered according to the preset baseline configuration corresponding to the highest-level ancestor component. In this way, components located at different levels in the component tree can be rendered uniformly according to the preset baseline configuration set by the highest-level ancestor component in the component tree, thereby avoiding the problem of component rendering distortion caused by chaotic baseline inheritance between components, and thus ensuring the consistency of page rendering.

[0037] In some embodiments, if the target component has an initial baseline configuration, the page rendering method further includes: If the target component is a route component, then the target component will be rendered based on the initial baseline configuration; And / or, if the target component is a child component of the route component, and the component tree is traversed from the target component towards the route component without obtaining an ancestor component with a preset baseline configuration, then the target component is rendered based on the initial baseline configuration.

[0038] Specifically, the target component can pre-define an initial baseline configuration as the benchmark for its own rendering. This initial baseline configuration can be specified explicitly during component definition, representing the target component's independent rendering method, such as custom font size, spacing, etc.

[0039] Optionally, when the target component is a route component, it indicates that the target component is already a page-level component of the current page, and can be directly rendered using the initial baseline configuration. In other words, a baseline can be defined for different pages. For example, for the login page and the main page, each can be rendered using its own initial baseline configuration, so that different pages have different baselines to achieve different display effects.

[0040] Optionally, if the target component is a child component of the route component, and the component tree is traversed from the target component as the starting position towards the route component without obtaining an ancestor component with a preset base configuration, it indicates that the target component does not have an ancestor component in the component tree that meets the inheritance conditions. In this case, the target component also uses its initial base configuration for rendering to ensure that the component still has independent rendering capabilities when there are no upper-level constraints.

[0041] In the above embodiments, by setting an initial baseline configuration for the target component, it can be ensured that when an inheritable preset baseline configuration exists, the preset baseline configuration of the highest-level ancestor component is inherited first. It can also be ensured that when there is no inheritance source, the target component can complete rendering based on its own preset initial baseline configuration. Thus, while ensuring personalized rendering of the target component, the consistency of page rendering is guaranteed.

[0042] In some embodiments, when multiple ancestor components are found, and each ancestor component has a preset baseline configuration with a preset weight value, the page rendering method further includes: If at least some of the preset baseline configurations have different preset weight values, the target component will be rendered according to the preset baseline configuration corresponding to the preset weight value with the largest value. If the preset weight values ​​of each preset baseline configuration are the same, then the preset baseline configuration corresponding to the ancestor component with the highest level in the component tree is selected to render the target component.

[0043] Specifically, when multiple ancestor components with preset baseline configurations are found, each ancestor component's preset baseline configuration has a preset weight value. The preset weight value is used to characterize the priority of the corresponding ancestor component in the rendering successor.

[0044] Based on the above description, it can be understood that when there are at least some different preset weight values ​​in the preset baseline configuration, the size of each preset weight value can be compared, and the target component can be rendered according to the preset baseline configuration corresponding to the preset weight value with the largest value; while when the preset weight values ​​of each preset baseline configuration are equal, the target component is still rendered according to the preset baseline configuration corresponding to the ancestor component with the highest level in the component tree.

[0045] For example, the component tree includes components A, B, C, and D, where A is a routing component and D is a target component. B is a child component of A, C is a child component of B, and D is a child component of C. If both B and C have preset baseline configurations with preset weight values ​​of 3 and 5 respectively, then D inherits C's preset baseline configuration for rendering. If B and C have the same preset weight value, then the target component D is rendered according to the preset baseline configuration of B, which has a higher hierarchy.

[0046] In the above embodiments, by introducing a preset weight value, when there are multiple inheritable preset baseline configurations in the component tree, the preset baseline configuration can be selected for inheritance according to the size of the preset weight value, thereby controlling the rendering strategy more flexibly, taking into account the hierarchical order on the basis of weight priority, and improving the flexibility and controllability of component rendering.

[0047] In some embodiments, the initial baseline configuration of the target component has initial weight values, and the page rendering method further includes: Among the preset weight values ​​of multiple preset benchmark configurations, find the first preset weight value with the largest value; If the initial weight value is less than or equal to the first preset weight value, the target component is rendered based on the preset baseline configuration corresponding to the first preset weight value. If the initial weight value is greater than the first preset weight value, the target component will be rendered based on the initial baseline configuration.

[0048] Based on the above description, it can be understood that if the initial baseline configuration of the target component has an initial weight value, then among the preset weight values ​​of multiple preset baseline configurations, the first preset weight value with the largest value is found, and this first preset weight value is compared with the initial weight value. If the first preset weight value is greater than the initial weight value, the target component is rendered according to the preset baseline configuration corresponding to the first preset weight value; if the initial weight value is greater than the first preset weight value, the target component is rendered according to the initial baseline configuration.

[0049] It should also be noted that among the preset weight values ​​of multiple preset baseline configurations, there may be multiple first preset weight values ​​with the largest value. If these first preset weight values ​​are greater than the initial weight value, then the preset baseline configuration corresponding to the highest-level ancestor component in the component tree is selected from the multiple preset baseline configurations to render the target component.

[0050] To facilitate understanding, the following example illustrates the concept. Assume there are components A, B, and C in the component tree, where A is the root component, C is the target component, and B is a child component of A. A and B both have preset baseline configurations, and C has an initial baseline configuration: 1) If the preset weight values ​​of A and B are 1 and 2 respectively, and the initial weight value of C is 3, then the first preset weight value is 2, which is less than the initial weight value of 3. Therefore, C is rendered based on the initial baseline configuration. 2) If the preset weight values ​​of A and B are 4 and 6 respectively, and the initial weight value of C is 5, then the first preset weight value is 6, which is greater than the initial weight value of 5. Therefore, C is rendered according to the preset baseline configuration of B. 3) If the preset weight values ​​of A and B are both 8, and the initial weight value of C is 7, then the first preset weight value is 8, which is greater than the initial weight value of 7. And the highest ancestor component in A and B is A. Therefore, C is rendered according to the preset baseline configuration of A.

[0051] In the above embodiments, by comparing the initial weight value of the target component with the largest preset weight value among its ancestor components, the initial baseline configuration of the target component can be rendered using the initial baseline configuration if the target component has a higher weight, thereby preserving the display characteristics of the target component itself. Simultaneously, when multiple ancestor components have the same preset weight value that is higher than the initial weight value, the preset baseline configuration corresponding to the highest-level ancestor component in the component tree is preferentially selected for rendering, ensuring consistency in page rendering.

[0052] In some embodiments, when the target component is located on multiple different pages, and at least some of the pages have different routing information, the page rendering method further includes: For one of the target pages containing the target component, obtain the target route information corresponding to that page; Based on the target routing information, locate the target routing component for the target page; If the target routing component has a preset baseline configuration, the target component will be rendered based on the preset baseline configuration.

[0053] In some embodiments, the page rendering method further includes: If the target route component does not have a preset baseline configuration, the component tree is traversed from the target route component as the starting position towards the parent route component of the target component to find a route component with a preset baseline configuration as a reference route component. The target component is rendered based on the preset baseline configuration of the reference routing component.

[0054] In these embodiments, since the target component is a pre-packaged reusable component, it can be reused on different pages. However, for each page, the target component needs to be rendered separately to adapt to the rendering requirements of that page. The rendering method of the target component in each target page can be found in the relevant descriptions in steps S101 to S104 above.

[0055] It is understandable that, in addition to rendering the target component based on the preset baseline configuration of the target routing component or the parent routing component, the baseline configuration can also be dynamically selected by comparing weight values ​​in the above embodiments to render the target component.

[0056] It should also be noted that the target component can be reused multiple times on the same page. In this case, the target component may be at a different level in the component tree each time it is reused. Therefore, the base configuration needs to be determined and rendered separately for each reused target component.

[0057] In some embodiments, the page rendering method further includes: If the page containing the target component includes at least one subpage, and the target component is located on one of the subpages, then obtain the component subtree of the subpage. The component subtree represents the hierarchical relationship between different components in the same subpage. If the target component has an initial baseline configuration and is the root node of the component subtree, then each component in the component subtree is rendered according to the initial baseline configuration of the target component.

[0058] Specifically, in front-end development, a page can typically be divided into multiple subpages, each hosted by an independent component, such as a header, footer, sidebar, and content area. The routing component is a page-level component and also the root node of the component tree. Therefore, a sub-route node of a subpage is one of the child nodes under the root node in the component tree, and this sub-route node, as the root node of the component subtree, nests all components within the subpage.

[0059] Based on the above description, if the target component is the root node of the component subtree, then the target component has already been rendered when rendering other nodes in the component subtree except for the root node. Therefore, the target component has an initial baseline configuration. At this time, each component in the component subtree can be rendered based on the initial baseline configuration of the target component.

[0060] It should also be noted that if some components in the component subtree have a preset baseline configuration and the preset baseline configuration has a corresponding preset weight value, then during rendering, the preset baseline configuration or the initial baseline configuration can be selected to render some components in the component subtree in the manner described in the above embodiments.

[0061] In this embodiment, the subpage can also be a modal or pop-up window or other floating layer component, which can also be rendered in the manner described in the above embodiment.

[0062] In the above embodiments, for scenarios where there are subpages in the page, by rendering the subpages as independent component subtrees, the initial baseline configuration of the target component can not only be applied to itself, but also be passed down to the entire component subtree, thereby achieving unified rendering of the entire subpage and ensuring the consistency of subpage rendering.

[0063] In the solution of this application, when the baseline of the target component is determined jointly through baseline inheritance, its own baseline, and weight configuration, the baseline of the target component can come from the preset baseline configuration of its ancestor components or from its own initial baseline configuration. Compared with responsive layout, the solution of this application can dynamically select different baselines according to the design logic of each page to adapt to different device scenarios; compared with flexible size based on global baseline, the solution of this application can make decisions based on the context relationship in the component tree where the target component is located and in combination with weight configuration, so that different pages can achieve different display effects based on different baselines.

[0064] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods according to the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method.

[0065] Embodiments of this application also provide a page rendering apparatus, which can be referred to in conjunction with the following: Figure 3 , Figure 3 Module schematic diagrams of a page rendering apparatus provided for some embodiments of this application, such as Figure 3 As shown, the page rendering device includes the following modules: The routing information acquisition module 301 is used to acquire the routing information of the page where the target component is located in response to the instantiation of the target component; The route component lookup module 302 is used to find the route component of the page where the target component is located based on the route information; Ancestor component confirmation module 303 is used to traverse the component tree from the target component as the starting position to the direction of the route component if the target component is a child component of the route component, and find at least one ancestor component with a preset baseline configuration. The component tree represents the hierarchical relationship between different components in multiple pages. The target component rendering module 304 is used to render the target component according to the preset baseline configuration corresponding to the highest-level ancestor component among at least one ancestor component found.

[0066] In some embodiments, if the target component has an initial baseline configuration, the target component rendering module 304 is further configured to: If the target component is a route component, then the target component will be rendered based on the initial baseline configuration; And / or, if the target component is a child component of the route component, and the component tree is traversed from the target component towards the route component without obtaining an ancestor component with a preset baseline configuration, then the target component is rendered based on the initial baseline configuration.

[0067] In some embodiments, when multiple ancestor components are found, and each ancestor component has a preset baseline configuration with a preset weight value, the target component rendering module 304 is further configured to: If at least some of the preset baseline configurations have different preset weight values, the target component will be rendered according to the preset baseline configuration corresponding to the preset weight value with the largest value. If the preset weight values ​​of each preset baseline configuration are the same, then the preset baseline configuration corresponding to the ancestor component with the highest level in the component tree is selected to render the target component.

[0068] In some embodiments, the initial baseline configuration of the target component has initial weight values, and the target component rendering module 304 is further configured to: Among multiple preset weight values, find the first preset weight value with the largest value; If the initial weight value is less than or equal to the first preset weight value, the target component is rendered based on the preset baseline configuration corresponding to the first preset weight value. If the initial weight value is greater than the first preset weight value, the target component will be rendered based on the initial baseline configuration.

[0069] In some embodiments, when the target component is located on multiple different pages, at least some of the pages have different routing information, and the target component rendering module 304 is further configured to: For one of the target pages containing the target component, obtain the target route information corresponding to that page; Based on the target routing information, locate the target routing component for the target page; If the target routing component has a preset baseline configuration, the target component will be rendered based on the preset baseline configuration.

[0070] In some embodiments, the target component rendering module 304 is further configured to: If the target route component does not have a preset baseline configuration, then starting from the target route component, traverse the component tree towards the parent route component to find a parent route component with a preset baseline configuration. The target component is rendered based on the preset baseline configuration of the parent route component.

[0071] In some embodiments, the target component rendering module 304 is further configured to: If the page containing the target component includes at least one subpage, and the target component is located on one of the subpages, then obtain the component subtree of the subpage. The component subtree represents the hierarchical relationship between different components in the same subpage. If the target component has an initial baseline configuration and is the root node of the component subtree, then each component in the component subtree is rendered according to the initial baseline configuration of the target component.

[0072] The page rendering apparatus provided in this embodiment of the invention can execute the page rendering method provided in any embodiment of the invention, and has the corresponding functional modules and beneficial effects for executing the method. Further functional descriptions of the various modules and units described above are the same as in the corresponding embodiments described above, and will not be repeated here.

[0073] Embodiments of this application also provide an electronic device, such as... Figure 4 As shown, it includes a memory 10 and a processor 20. The memory 10 stores a computer program, and the processor 20 is configured to run the computer program to perform the steps in any of the above-described page rendering method embodiments.

[0074] Embodiments of this application also provide a computer-readable storage medium storing a computer program, wherein the computer program is configured to execute the steps in any of the above-described page rendering method embodiments at runtime.

[0075] In one exemplary embodiment, the aforementioned computer-readable storage medium may include, but is not limited to, various media capable of storing computer programs, such as a USB flash drive, read-only memory (ROM), random access memory (RAM), portable hard disk, magnetic disk, or optical disk.

[0076] Embodiments of this application also provide a computer program product, which includes a computer program that, when executed by a processor, implements the steps in any of the above-described page rendering method embodiments.

[0077] Embodiments of this application also provide another computer program product, including a non-volatile computer-readable storage medium storing a computer program, which, when executed by a processor, implements the steps in any of the above-described page rendering method embodiments.

[0078] Those skilled in the art will further recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of the various examples have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0079] The foregoing has provided a detailed description of a page rendering method, apparatus, electronic device, and storage medium provided in this application. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the embodiments above are only intended to aid in understanding the method and core ideas of this application. It should be noted that those skilled in the art can make various improvements and modifications to this application without departing from its principles, and these improvements and modifications also fall within the protection scope of the claims of this application.

Claims

1. A page rendering method, characterized in that, The method includes: In response to the instantiation of the target component, obtain the routing information of the page where the target component is located; Based on the routing information, locate the routing component of the page where the target component is located; If the target component is a child component of the routing component, then starting from the target component, the component tree is traversed in the direction of the routing component to find at least one ancestor component with a preset baseline configuration. The component tree represents the hierarchical relationship between different components in multiple pages. Among at least one ancestor component found, the target component is rendered according to the preset baseline configuration corresponding to the highest-level ancestor component.

2. The method according to claim 1, characterized in that, If the target component has an initial baseline configuration, the method further includes: If the target component is the routing component, then the target component is rendered based on the initial baseline configuration; And / or, if the target component is a child component of the routing component, and the component tree is traversed from the target component as the starting position towards the routing component without obtaining an ancestor component with a preset baseline configuration, then the target component is rendered based on the initial baseline configuration.

3. The method according to claim 2, characterized in that, When multiple ancestor components are found, and each ancestor component has a preset baseline configuration with a preset weight value, the method further includes: If at least some of the preset baseline configurations have different preset weight values, the target component will be rendered according to the preset baseline configuration corresponding to the preset weight value with the largest value. If the preset weight values ​​of each preset baseline configuration are the same, then the preset baseline configuration corresponding to the ancestor component with the highest level in the component tree is selected to render the target component.

4. The method according to claim 3, characterized in that, The initial baseline configuration of the target component has initial weight values, and the method further includes: Among the preset weight values ​​of multiple preset benchmark configurations, find the first preset weight value with the largest value; If the initial weight value is less than or equal to the first preset weight value, then the target component is rendered according to the preset baseline configuration corresponding to the first preset weight value. If the initial weight value is greater than the first preset weight value, then the target component is rendered based on the initial baseline configuration.

5. The method according to claim 1, characterized in that, When the target component is located on multiple different pages, at least some of the pages have different routing information, and the method further includes: For one of the target pages where the target component is located, obtain the target route information corresponding to the target page; Based on the target routing information, locate the target routing component of the target page; If the target routing component has a preset baseline configuration, then the target component is rendered based on the preset baseline configuration of the target routing component.

6. The method according to claim 5, characterized in that, The method further includes: If the target routing component does not have a preset baseline configuration, then starting from the target routing component, traverse the component tree towards the parent routing component of the target component to find a routing component with a preset baseline configuration as a reference routing component; The target component is rendered based on the preset baseline configuration of the reference routing component.

7. The method according to claim 1, characterized in that, The method further includes: If the page containing the target component includes at least one subpage, and the target component is located on one of the subpages, then the component subtree of the subpage is obtained, and the component subtree represents the hierarchical relationship between different components in the same subpage; If the target component has an initial baseline configuration and the target component is the root node of the component subtree, then each component in the component subtree is rendered according to the initial baseline configuration of the target component.

8. A page rendering apparatus, characterized in that, The device includes: The routing information acquisition module is used to acquire the routing information of the page where the target component is located in response to the instantiation of the target component; The routing component lookup module is used to find the routing component of the page where the target component is located based on the routing information; An ancestor component confirmation module is used to, if the target component is a child component of the routing component, traverse the component tree from the target component as the starting position towards the routing component to find at least one ancestor component with a preset baseline configuration. The component tree represents the hierarchical relationship between different components in multiple pages. The rendering baseline determination module is used to render the target component according to the preset baseline configuration corresponding to the highest-level ancestor component among at least one ancestor component found.

9. An electronic device, characterized in that, include: A memory and a processor are communicatively connected, the memory stores computer instructions, and the processor executes the page rendering method of any one of claims 1 to 7 by executing the computer instructions.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing a computer to perform the page rendering method according to any one of claims 1 to 7.

Images