Method and apparatus for rendering applet component

Abstract

The application provides a rendering method and device of a small program component, wherein the rendering method of the small program component comprises the following steps: receiving a component rendering request for a target small program, determining at least one component to be rendered according to the component rendering request; determining a root node of each component to be rendered, and creating a component display area corresponding to each component to be rendered in the browser based on node attribute information of each root node; obtaining an initial hierarchical order of each component to be rendered, and determining a target hierarchical order corresponding to each initial hierarchical order based on a web page hierarchical order threshold; and rendering each component to be rendered according to the target hierarchical order and the component display area corresponding to each component to be rendered.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, in particular to a rendering method of applet component. The present application also relates to a rendering device of applet component, a computing device and a computer readable storage medium. BACKGROUND

[0002] With the continuous development of computer technology, applets are widely used by many users because of their low development difficulty, low development cost and high use efficiency.

[0003] At present, in order to improve the debugging efficiency of applets, debugging on the web side can be supported. However, debugging on the web side will cause the problem that some native components of applets cannot be displayed on the web side, resulting in that the applets cannot be comprehensively debugged.

[0004] Therefore, how to realize the display of native components on the web side becomes a technical problem to be solved by the related technical personnel. SUMMARY

[0005] Therefore, the embodiments of the present application provide a rendering method of applet component. The present application also relates to a rendering device of applet component, a computing device and a computer readable storage medium, so as to solve the problem of incomplete display of applet components on the web side in the prior art.

[0006] According to a first aspect of the embodiments of the present application, a rendering method of applet component is provided, comprising:

[0007] receiving a component rendering request for a target applet, determining at least one to-be-rendered component according to the component rendering request;

[0008] determining a root node of each to-be-rendered component, and creating a component display area corresponding to each to-be-rendered component in the browser based on the node attribute information of each root node;

[0009] obtaining an initial hierarchical order of each to-be-rendered component, and determining a target hierarchical order corresponding to each initial hierarchical order based on a web page hierarchical order threshold;

[0010] rendering each to-be-rendered component according to the target hierarchical order and the component display area corresponding to each to-be-rendered component.

[0011] According to a second aspect of the embodiments of the present application, a rendering device of applet component is provided, comprising:

[0012] a receiving module configured to receive a component rendering request for a target applet, and determine at least one to-be-rendered component according to the component rendering request;

[0013] determining module, configured to determine a root node of each component to be rendered, and create a component display area corresponding to each component to be rendered in the browser based on node attribute information of each root node;

[0014] an obtaining module, configured to obtain an initial hierarchical order of each component to be rendered, and determine a target hierarchical order corresponding to each initial hierarchical order based on a web page hierarchical order threshold;

[0015] a rendering module, configured to render each component to be rendered according to the target hierarchical order corresponding to each component to be rendered and the component display area.

[0016] According to a third aspect of an embodiment of the present application, a computing device is provided, comprising a memory, a processor, and computer instructions stored on the memory and executable on the processor, wherein the processor implements the steps of the rendering method of the applet component when executing the computer instructions.

[0017] According to a fourth aspect of an embodiment of the present application, a computer readable storage medium is provided, which stores computer instructions, wherein the computer instructions are executed by a processor to implement the steps of the rendering method of the applet component.

[0018] The rendering method of the applet component provided in the present application receives a component rendering request for a target applet, determines at least one component to be rendered according to the component rendering request, determines a root node of each component to be rendered, and creates a component display area corresponding to each component to be rendered in the browser based on node attribute information of each root node, obtains an initial hierarchical order of each component to be rendered, and determines a target hierarchical order corresponding to each initial hierarchical order based on a web page hierarchical order threshold, and renders each component to be rendered according to the target hierarchical order corresponding to each component to be rendered and the component display area.

[0019] An embodiment of the present application determines the components to be rendered based on the component rendering request received by the browser, thereby determining the components that need to be displayed in the browser, determines the root node of the component to be rendered, and determines the component display area in the browser according to the node attribute information of the root node, thereby determining the displayable position of the component to be rendered in the browser, determines the target hierarchical order based on the initial hierarchical order of each component to be rendered, thereby determining the hierarchical relationship of the components to be rendered in the browser, and displays each component to be rendered based on the target hierarchical order of the component to be rendered and the component display area, thereby realizing the display of the components to be rendered in the applet in the browser, and facilitating the relevant personnel to debug the applet component based on the display effect in the browser. BRIEF DESCRIPTION OF DRAWINGS

[0020] Figure 1is a scenario diagram of a rendering method of a small program component provided by an embodiment of the present application;

[0021] Figure 2 is a flowchart of a rendering method of a small program component provided by an embodiment of the present application;

[0022] Figure 3a is a flowchart of a component display area determination method provided by an embodiment of the present application;

[0023] Figure 3b is a flowchart of a target level order determination method provided by an embodiment of the present application;

[0024] Figure 3c is a flowchart of a first order set traversal method provided by an embodiment of the present application;

[0025] Figure 3d is a flowchart of a second order set traversal method provided by an embodiment of the present application;

[0026] Figure 3e is a flowchart of a second order set traversal method provided by an embodiment of the present application;

[0027] Figure 4a is a processing flowchart of a rendering method of a small program component applied to a cover-view component provided by an embodiment of the present application;

[0028] Figure 4b is a component order diagram provided by an embodiment of the present application;

[0029] Figure 5 is a structural diagram of a rendering device of a small program component provided by an embodiment of the present application;

[0030] Figure 6 is a structural block diagram of a computing device provided by an embodiment of the present application. DETAILED DESCRIPTION

[0031] In the following description, many specific details are set forth in order to provide a thorough understanding of the present application. However, the present application can be practiced without the specific details, and it is understood that the present application is not limited to the embodiments described herein. Furthermore, it is to be understood that the terminology used herein is for the purpose of describing the present application and the use of such terminology is not intended to limit the scope of the present application.

[0032] The terminology used in this disclosure of one or more embodiments is for the purpose of describing particular embodiments only and is not intended to be limiting of one or more embodiments. As used in this disclosure and the appended claims, the singular forms "a," "an" and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It will also be understood that the term "and / or" as used herein refers to and encompasses any and all possible combinations of one or more of the associated listed items.

[0033] It should be understood that, although the terms first, second, etc. can be used herein to describe various information, but these information should not be limited to these terms. These terms are only used to distinguish one type of information from another type of information. For example, without departing from the scope of one or more embodiments of the present application, first can also be referred to as second, and similarly, second can also be referred to as first. Depending on the context, the word "if" as used herein can be interpreted as meaning "when" or "in response to determining" or "in response to ascertaining".

[0034] Firstly, the noun terms related to one or more embodiments of the present application are explained.

[0035] Applet: refers to an application that can be used without downloading and installing, which can be understood as a subprogram of an application.

[0036] Applet native component: refers to a component rendered by the client native.

[0037] Web side: refers to the web version of the computer side.

[0038] Root node: the root node refers to a node without a parent node.

[0039] On the web side, since there is no corresponding applet environment, the native components of the applet cannot be rendered; the applet component rendering method of the present application determines the component display area by setting the placeholder of the applet component on the web side; further determines the target level on the web side based on the initial level of the component, so as to realize the rendering and display of the applet native component on the web side.

[0040] In the present application, a rendering method of an applet component is provided, and the present application simultaneously relates to a rendering device of an applet component, a computing device, and a computer readable storage medium, which are described one by one in the following embodiments.

[0041] Figure 1 A scene schematic diagram of a rendering method of an applet component according to an embodiment of the present application is shown, which specifically comprises:

[0042] The browser receives a component rendering request; parses the received component rendering request, determines the to-be-rendered applet A and the to-be-rendered components in the applet A, including component 1, component 2 and component 3; each to-be-rendered component contains multiple nodes, and the root node corresponding to each to-be-rendered component can be determined by traversing the nodes corresponding to each to-be-rendered component, that is, the root node a corresponding to component 1, the root node b corresponding to component 2 and the root node c corresponding to component 2 are determined; the node attribute information corresponding to each root node is obtained, and the node attribute information includes node size information and node position information; the component display area of each to-be-rendered component when displayed in the browser webpage is determined according to the node size information and the node position information corresponding to each root node in the browser webpage.

[0043] Further, after determining the component display area corresponding to each to-be-displayed component, the hierarchical relationship when the component is displayed needs to be determined; specifically, the initial component order corresponding to each to-be-rendered component is obtained, that is, the initial order value of component 1 in applet A is-1, the initial order value of component 2 in applet component A is 0, and the initial order value of component 3 in applet component A is 1; it is determined that the webpage order threshold is 300-400, that is, the to-be-rendered components of the applet component A can be displayed in the 300th to 400th layer of the webpage; then the to-be-rendered components are mapped to the displayable layer of the webpage according to the order in the applet A, that is, the target hierarchical order corresponding to each to-be-rendered component is determined; according to the target hierarchical order and the component display area corresponding to each to-be-rendered component, component 1, component 2 and component 3 are displayed in the browser webpage according to the display effect in applet A.

[0044] The rendering method of the applet component of the present application determines the root node corresponding to the to-be-rendered component after determining the to-be-rendered component, so as to determine the placeholder of the to-be-rendered component when displayed in the browser based on the root node; the node attribute information of the root node is obtained, and the component display area is created based on the node attribute information, so as to determine the component display position of the to-be-rendered component in the browser; further, in order to realize the display of the applet component, the initial hierarchical order of each to-be-rendered component needs to be determined and mapped to the hierarchical order of the webpage to determine the target hierarchical order, so as to determine the hierarchical level of each to-be-rendered component when displayed in the webpage; the to-be-rendered component is rendered and displayed in the webpage based on the component display area and the target hierarchical order of each to-be-rendered component; the applet component is displayed in the webpage of the browser without configuring the running environment of the applet, so that the developer can debug the applet on the web side.

[0045] Figure 2 A flowchart of a rendering method of an applet component according to an embodiment of the present application is shown, which specifically includes the following steps:

[0046] Step 202: receiving a component rendering request for a target mini-program, and determining at least one component to be rendered according to the component rendering request.

[0047] In actual application, the components included in the mini-program need to be rendered in the running environment of the mini-program, and the web end does not exist the running environment of the mini-program, so it is impossible to render and display the mini-program components, and thus the user cannot view the mini-program through the web end.

[0048] Among them, the component rendering request refers to the request for rendering the native components of the mini-program on the web end; the mini-program refers to an application that can be used without downloading and installing, which can be understood as a sub-program of the application; the native components of the mini-program refer to components rendered by the client native, such as camera component, canvas component, video component, cover-view component, etc.; the component to be rendered refers to the native component of the mini-program determined based on the component rendering request; the web end refers to the web version of the computer end, such as the web page in the browser; the component to be rendered refers to the native component included in the mini-program to be rendered.

[0049] Specifically, the web end receives a component rendering request for a target mini-program; the component rendering request is analyzed to determine the component to be rendered; since in actual application, the target mini-program can include one or more native components, at least one component to be rendered can be determined.

[0050] In a specific embodiment of the present application, the browser receives a component rendering request for a game mini-program, and analyzes the component rendering request to determine a set of components to be rendered in the game mini-program.

[0051] By receiving the component rendering request and determining the component to be rendered based on the component rendering request, the component to be rendered can be rendered on the web end in the subsequent process.

[0052] Step 204: determining the root node of each component to be rendered, and creating a component display area corresponding to each component to be rendered in the browser based on the node attribute information of each root node.

[0053] The root node refers to a node without a parent node; in actual applications, the to-be-rendered component can include multiple nodes, and there can be a nesting relationship between the nodes; in order to facilitate subsequent determination of the size occupied by the component, the root node of each component can be determined; since the root node is the outermost node of all nodes, other nodes can be contained therein, and therefore the size occupied by the component can be determined according to the root node of the component; the node attribute information refers to information used to interpret the root node, such as node size information, node position information, node content information and the like; the browser refers to a web end that can render and display a web page; and the component display area refers to an area determined in the browser for displaying the to-be-rendered component.

[0054] In an embodiment of the present application, the to-be-rendered component a is determined, the root node 1 of the to-be-rendered component a is determined by a preset method, the node attribute information of the root node 1 is obtained, and the component display area for displaying the to-be-rendered component is created in the browser based on the node attribute information.

[0055] Further, the method of determining the root node of each to-be-rendered component and creating a component display area corresponding to each to-be-rendered component in the browser based on the node attribute information of each root node can include:

[0056] traversing the nodes in each to-be-rendered component to obtain the root node corresponding to each to-be-rendered component;

[0057] obtaining the node position information and the node size information of each root node;

[0058] creating a component display area corresponding to each to-be-rendered component based on the node position information and the node size information corresponding to each root node.

[0059] The traversal of the nodes of the to-be-rendered component refers to the determination of the root node by using a pre-order traversal, an in-order traversal, a post-order traversal or the like, and the specific method for determining the root node is not limited in the present application; the node position information refers to the position information of the root node when it is displayed in the applet, for example, the coordinate value of the root node when it is displayed in the applet page; and the node size information refers to the size information of the root node when it is displayed in the applet, for example, the node length and the node width of the root node when it is displayed in the applet page.

[0060] In an embodiment of the present application, the nodes of the to-be-rendered component are traversed by using an in-order traversal method to determine the root node corresponding to the to-be-rendered component; the node coordinate information and the node width information and the node height information of the root node in the applet are obtained; and the component display area when the to-be-rendered component is displayed in the browser page is determined according to the node coordinate information, the node width information and the node height information.

[0061] In actual application, the method for creating the component display area corresponding to each to-be-rendered component based on the node position information and the node size information corresponding to each root node can include:

[0062] determining component display size information based on preset display size information of the browser and each node size information;

[0063] determining component display position information of each to-be-rendered component in the browser according to each node position information;

[0064] creating a component display area corresponding to each to-be-rendered component based on the component display size information and the component display position information corresponding to each to-be-rendered component.

[0065] The preset display size information refers to the size information of the content displayed in the browser; the component position display information refers to the position information of the to-be-rendered component when displayed in the browser; and the component display size information refers to the size information of the to-be-rendered component when displayed in the browser.

[0066] Specifically, the preset display size information corresponding to the browser is determined, that is, the size of the content that can be displayed in the browser is determined, for example, the browser can display content with a size of 300px*100px; the component display size information of the to-be-rendered component in the browser is determined based on the preset display size information and the node size information corresponding to each root node, for example, if the node size information is greater than the preset display size information of the browser, scaling is needed when displaying, that is, the node size information can be adjusted based on the preset display size information to determine the component display size information; the component display position of the to-be-rendered component in the browser is further determined according to the node position information; the actual placeholder of the to-be-rendered component in the browser is determined through the component display size information and the component display position information, so as to continue to display the to-be-rendered component in the browser subsequently.

[0067] In an embodiment of the present application, as shown in Figure 3a , Figure 3a is a flowchart of a component display area determination method provided by an embodiment of the present application, and the method for determining the component display area is further described taking the cover-view component as an example.

[0068] Step 20402: determining the root node of the cover-view component.

[0069] Specifically, the root node of the component is determined so as to create a placeholder based on the size and position of the root node subsequently; since the cover-view component supports nesting, the placeholder of the root node can cover each node including the root node, therefore, only the placeholder of the root node needs to be determined, and the placeholders corresponding to each node do not need to be determined.

[0070] Step 20404: Set the node identifier and the level attribute for each root node.

[0071] Specifically, the setAttribute method in js can be used to set the node identifier nodeId for the root node; a class named zIndexByJs is created, which will be found in all elements during level calculation to calculate the component level; the data-zIndex is set, and the user-set z-index, i.e., the initial level attribute value, is passed in to facilitate subsequent level calculation during component rendering.

[0072] Step 20406: Remove irrelevant nodes in the cover-view component.

[0073] Specifically, the cover-view component will be displayed above other components during the rendering of the applet, so nodes unrelated to the cover-view component will not be rendered; in order to achieve the same rendering effect in the browser, the irrelevant nodes in the cover-view component need to be removed.

[0074] Step 20408: Obtain the node attribute information of each root node.

[0075] Specifically, the getBoundingClientRect method can be used to obtain the node information of the root node of the cover-view component and save it.

[0076] Step 20410: Obtain the node attribute information of the root node and create a component placeholder.

[0077] Specifically, the cloneNode method can be used to copy the root node of the cover-view component as a placeholder for the cover-view component.

[0078] Step 20412: Remove irrelevant attributes in the component placeholder.

[0079] Specifically, the nodeID and other attributes in the placeholder are deleted to obtain a more accurate placeholder.

[0080] Step 20414: Determine the component display position and component display size based on the node attribute information of the root node, and further determine the component display area.

[0081] Specifically, the node attribute information of each root node is obtained, and the position attribute of each root node in the browser is set based on the node position information, including the fixed, top, and left attributes, to ensure that the display position of the component in the applet is consistent with the display position in the browser.

[0082] Step 20416: Real-time monitoring of the cover-view component, and continuously adjusting the component display area corresponding to the cover-view component based on the monitoring result.

[0083] Specifically, when the small program page changes, it is detected whether the cover-view component has component style changes; in the case of changes, the placeholder and style of the component are updated at the same time, including the x, y position information of the placeholder, the length and width information of the cover-view, etc.

[0084] By determining the component display area of the to-be-rendered component in the browser, the subsequent display of the to-be-rendered component in the component display area is ensured, and the restoration of the small program effect in the browser is guaranteed.

[0085] Step 206: Obtain the initial hierarchical order of each to-be-rendered component, and determine the target hierarchical order corresponding to each initial hierarchical order based on the web hierarchical order threshold.

[0086] After determining the component display area, the hierarchical order of the component needs to be further determined, so as to realize the consistency of the display effect of the to-be-rendered component in the small program and the display effect in the browser.

[0087] Among them, the initial hierarchical order refers to the hierarchical order of the to-be-rendered component when displayed in the small program; the web hierarchical order threshold refers to the order value corresponding to the hierarchical order that can display the component in the browser; the target hierarchical order refers to the hierarchical order corresponding to the initial hierarchical order in the browser.

[0088] Specifically, the method for obtaining the initial hierarchical order of each to-be-rendered component and determining the target hierarchical order corresponding to each initial hierarchical order based on the web hierarchical order threshold includes:

[0089] Collecting the initial hierarchical order corresponding to the root node of each to-be-rendered component;

[0090] Determining the preset hierarchical order threshold corresponding to the browser, and setting the web hierarchical order threshold based on the preset hierarchical order threshold;

[0091] Mapping each initial hierarchical order to the web hierarchical order threshold to obtain the target hierarchical order corresponding to each to-be-rendered component.

[0092] Among them, the preset hierarchical order threshold refers to the order value corresponding to the hierarchical order of the actual browser; the web hierarchical order threshold refers to the order value corresponding to the hierarchical order for displaying the component determined in advance in the browser hierarchical order, which can be a threshold set.

[0093] Specifically, the node level value of the component when displayed in the applet is determined in the node attribute information corresponding to each root node, that is, the order value corresponding to the initial level order, for example, the level value of component 1 is determined as 0, the level value of component 2 is determined as 3, and so on; a preset level order threshold corresponding to the browser is determined, for example, the maximum value of the level that can be displayed by the browser is 2147483647, and the preset level order threshold can be 2147483647; based on the preset level order threshold, the web page level order threshold can be set, for example, the web page level order threshold can be set as 2146000000, and less than the web page level order threshold can be used as the level of the display component; in addition, since new components can be set on the native components in the subsequent process, and these components need to be overlaid on the native components, therefore, the web page level order threshold can be a value range, for example, the range of displayable components is set as [2146000000, 2146999999], and the reserved 83648 levels can be used for subsequent display of components with higher display levels.

[0094] Further, the method of mapping each initial level order to the web page level order threshold to obtain the target level order corresponding to each to-be-rendered component can include:

[0095] classifying each initial level order based on a level classification rule to obtain a classification result;

[0096] traversing the initial level order corresponding to each classification result according to the web page level order threshold to determine the target level order corresponding to each to-be-rendered component.

[0097] The level classification rule refers to a rule for classifying the initial level order; the classification result refers to the classification corresponding to each initial level order based on the classification of the initial level order based on the level classification rule.

[0098] Specifically, each initial level order can be further classified based on a preset classification threshold, that is, the method of classifying each initial level order based on the level classification rule to obtain the classification result can include:

[0099] obtaining a preset classification threshold and the order value of each initial level order;

[0100] adding the initial level order with the order value equal to the preset classification threshold to a first order set;

[0101] adding the initial level order with the order value greater than the preset classification threshold to a second order set;

[0102] adding the initial level order with the order value less than the preset classification threshold to a third order set.

[0103] The preset classification threshold refers to a threshold determined based on a hierarchical classification rule. For example, the preset classification hierarchy is 0. The sequence value refers to a numerical value corresponding to the initial hierarchical order. In actual application, the sequence value of the component in the applet includes numerical values greater than 0, less than 0, and equal to 0. Therefore, the initial hierarchical order can be further classified based on the preset classification threshold 0, so as to determine the target hierarchical order subsequently.

[0104] The first sequence set refers to a set composed of the initial hierarchical orders corresponding to the sequence values equal to the preset classification threshold. The second sequence set refers to a set composed of the initial hierarchical orders corresponding to the sequence values greater than the preset classification threshold. The third sequence set refers to a set composed of the initial hierarchical orders corresponding to the sequence values less than the preset classification threshold.

[0105] Further, the method for traversing the initial hierarchical order corresponding to each classification result based on the web page hierarchical order threshold can include:

[0106] determining a first hierarchical order threshold, a second hierarchical order threshold, and an intermediate hierarchical order threshold, wherein the first hierarchical order threshold is less than the intermediate hierarchical order threshold, and the second hierarchical order threshold is greater than the intermediate hierarchical order threshold;

[0107] traversing the initial hierarchical order corresponding to each classification result based on the first hierarchical order threshold, the second hierarchical order threshold, and the intermediate hierarchical order threshold.

[0108] The first hierarchical order threshold, the second hierarchical order threshold, and the intermediate hierarchical order threshold are determined based on the web page hierarchical order threshold. The first hierarchical order threshold refers to the minimum value of the hierarchical order of the display component. The second hierarchical order threshold refers to the maximum value of the hierarchical order of the display component. The intermediate hierarchical order threshold is an intermediate value between the first hierarchical order threshold and the second hierarchical order threshold. For example, the web page hierarchical order threshold is [2146000000, 2146999999], the first hierarchical order threshold is 2146000000, the second hierarchical order threshold is 2146999999, and the intermediate hierarchical order threshold is 2146500000.

[0109] In an embodiment of the present application, as shown in Figure 3b , the flowchart of the target hierarchical order determination method provided by an embodiment of the present application is shown in Figure 3b The flowchart of the target hierarchical order determination method provided by an embodiment of the present application is shown in

[0110] Step a2: determining a first hierarchical order threshold, a second hierarchical order threshold, and an intermediate hierarchical order threshold.

[0111] Step a4: determining the initial hierarchical order corresponding to each root node.

[0112] Step a6: According to the preset classification threshold 0, each initial hierarchical order is divided into a first array, a second array and a third array.

[0113] Specifically, according to the attribute value corresponding to the initial hierarchical order and the preset classification threshold 0, the first array is generated based on the initial hierarchical order with the sequence value equal to 0, the second array is generated based on the initial hierarchical order with the sequence value greater than 0, and the third array is generated based on the initial hierarchical order with the sequence value less than 0.

[0114] Step a8: The initial hierarchical orders in the second array are sorted from large to small according to the sequence value, and the initial hierarchical orders in the third array are sorted from small to large.

[0115] Step a10: The first array, the second array and the third array are respectively looped to determine the target hierarchical order corresponding to each initial hierarchical order.

[0116] By determining the target hierarchical order corresponding to each initial hierarchical order, the components to be rendered in the browser can be rendered according to the hierarchical order in the applet.

[0117] Further, by traversing the first sequence set, the second sequence set and the third sequence set, the target hierarchical order corresponding to each initial hierarchical order can be determined.

[0118] Specifically, the method for determining the target hierarchical order corresponding to each initial hierarchical order according to the web page hierarchical order threshold can include:

[0119] The intermediate hierarchical order threshold is taken as the target hierarchical order corresponding to each initial hierarchical order in the first sequence set;

[0120] Each initial hierarchical order in the second sequence set is traversed, and based on the sequence value of the adjacent hierarchical order corresponding to each initial hierarchical order, the second hierarchical order threshold and the intermediate hierarchical order threshold, the target hierarchical order corresponding to each component to be rendered in the second sequence set is determined;

[0121] Each initial hierarchical order in the third sequence set is traversed, and based on the sequence value of the adjacent hierarchical order corresponding to each initial hierarchical order, the first hierarchical order threshold and the intermediate hierarchical order threshold, the target hierarchical order corresponding to each component to be rendered in the third sequence set is determined.

[0122] Specifically, in the case where the hierarchical value corresponding to the initial hierarchical order is equal to the preset classification threshold, the intermediate hierarchical order threshold can be taken as the target hierarchical order corresponding to each initial hierarchical order in the set.

[0123] In practical applications, as shown in Figure 3c Figure 3c is a flowchart of a first-order set traversal method provided by an embodiment of the present application. The steps of traversing the first-order set can include:

[0124] Step b2: define a loop variable i = 0.

[0125] Step b4: determine whether the length corresponding to the first-order set is greater than i; if yes, execute step b6; if no, end the loop.

[0126] Step b6: determine whether the current initial hierarchical order exists corresponding to the target hierarchical order; if no, execute step b8; if yes, execute b10.

[0127] Step b8: set the order value corresponding to the current initial hierarchical order as the intermediate hierarchical order threshold.

[0128] Step b10: define a loop variable i = i++, and continue to execute step b4.

[0129] By setting the order value corresponding to the initial hierarchical order as the intermediate hierarchical order threshold for the initial hierarchical order of the preset classification threshold, the components with order values all being the preset classification threshold are displayed at the same level in the browser, thereby ensuring the consistency of the browser and the small program rendering.

[0130] Further, the method of traversing each initial hierarchical order in the second-order set and determining the target hierarchical order corresponding to each to-be-rendered component in the second-order set based on the order value of the adjacent hierarchical order corresponding to each initial hierarchical order, the second hierarchical order threshold, and the intermediate hierarchical order threshold can include:

[0131] Determine a target initial hierarchical order in the second-order set, and obtain the previous order value and the next order value corresponding to the target initial hierarchical order.

[0132] In the case where the previous order value and the next order value are obtained, calculate the target hierarchical order corresponding to the target initial hierarchical order based on the previous order value and the next order value.

[0133] In the case where the previous order value and the next order value are not obtained, calculate the target hierarchical order corresponding to the target initial hierarchical order based on the second hierarchical order threshold and the intermediate hierarchical order threshold.

[0134] In the case where the previous order value is obtained and the next order value is not obtained, calculate the target hierarchical order corresponding to the target initial hierarchical order based on the previous order value and the second hierarchical order threshold.

[0135] ​In a case where the post-order value is acquired and the pre-order value is not acquired, a target initial hierarchical order corresponding to the target initial hierarchical order is calculated based on the post-order value and the intermediate order threshold value.

[0136] The pre-order value refers to an order value corresponding to a previous target hierarchical order corresponding to the target initial hierarchical order; and the post-order value refers to an order value corresponding to a next target hierarchical order corresponding to the target initial hierarchical order.

[0137] Specifically, in a case where the pre-order value and the post-order value corresponding to the target initial hierarchical order can be acquired, an intermediate value of the pre-order value and the post-order value can be calculated as the target hierarchical order corresponding to the target initial hierarchical order; in a case where the pre-order value and the post-order value are not acquired, an intermediate value of the second hierarchical order threshold value and the intermediate hierarchical order threshold value can be calculated as the target hierarchical order corresponding to the target initial hierarchical order; in a case where the pre-order value is acquired and the post-order value is not acquired, an intermediate value of the second hierarchical order threshold value and the pre-order threshold value can be calculated as the target hierarchical order corresponding to the target initial hierarchical order; and in a case where the post-order value is acquired and the pre-order value is not acquired, an intermediate value of the intermediate hierarchical order threshold value and the post-order value can be calculated as the target hierarchical order corresponding to the target initial hierarchical order.

[0138] In actual application, as shown in FIG. 1, Figure 3d Figure 3d FIG. 1 is a flowchart of a second order set traversal method according to an embodiment of the present application. The steps of traversing the second order set can include:

[0139] Step c2: defining a loop variable j=0.

[0140] Step c4: judging whether the length of the second order set is greater than j; if yes, executing step c6; if not, ending the loop.

[0141] Step c6: judging whether a target initial hierarchical order in the second order set has a corresponding target hierarchical order; if not, executing step c8; if yes, executing step c12.

[0142] Step c8: determining the existence of a pre-order value and a post-order value corresponding to the target initial hierarchical order, and obtaining an existence result.

[0143] Step c10: determining the corresponding target hierarchical order for the target initial hierarchical order based on the existence result.

[0144] Specifically, the existence result includes four types; in a case where the existence result is a first type of existence result, i.e., in a case where the pre-order value and the post-order value both exist, the order value of the target hierarchical order corresponding to the target initial hierarchical order is set to (pre-order value+post-order value) / 2;​

[0145] In the case of the existence result being the second type of existence result, i.e., the case where neither the front order value nor the rear order value exists, the order value of the target hierarchical order corresponding to the target initial hierarchical order is set to: (the second hierarchical order threshold + the intermediate hierarchical order threshold) / 2;

[0146] In the case of the existence result being the third type of existence result, i.e., the case where only the front order value is obtained, the order value of the target hierarchical order corresponding to the target initial hierarchical order is set to: (the second hierarchical order threshold + the front order value) / 2;

[0147] In the case of the existence result being the fourth type of existence result, i.e., the case where only the rear order value is obtained, the order value of the target hierarchical order corresponding to the target initial hierarchical order is set to: (the intermediate hierarchical order threshold + the rear order value) / 2.

[0148] Step c12: define j=j++, and continue to execute step c4.

[0149] By traversing each initial hierarchical order in the second order set and determining the corresponding target hierarchical order, it is ensured that the initial hierarchical order in the second order set corresponds to the rendering component in the browser.

[0150] Further, each initial hierarchical order in the third order set is traversed, and based on the order value of the adjacent hierarchical order corresponding to each initial hierarchical order, the first hierarchical order threshold, and the intermediate hierarchical order threshold, the target hierarchical order corresponding to each rendering component in the third order set is determined, including:

[0151] In the third order set, a target initial hierarchical order is determined, and a front order value and a rear order value corresponding to the target initial hierarchical order are obtained;

[0152] In the case where the front order value and the rear order value are obtained, the target hierarchical order corresponding to the target initial hierarchical order is calculated based on the front order value and the rear order value;

[0153] In the case where the front order value and the rear order value are not obtained, the target hierarchical order corresponding to the target initial hierarchical order is calculated based on the first hierarchical order threshold and the intermediate hierarchical order threshold;

[0154] In the case where the front order value is obtained and the rear order value is not obtained, the target hierarchical order corresponding to the target initial hierarchical order is calculated based on the front order value and the first hierarchical order threshold;

[0155] In a case where the post-order value is acquired and the pre-order value is not acquired, a target initial hierarchical order corresponding to the target initial hierarchical order is calculated based on the post-order value and the intermediate order threshold value.

[0156] Specifically, in a case where the pre-order value and the post-order value corresponding to the target initial hierarchical order can be acquired, an intermediate value of the pre-order value and the post-order value can be calculated as the target hierarchical order corresponding to the target initial hierarchical order; in a case where the pre-order value and the post-order value are not acquired, an intermediate value of the first hierarchical order threshold value and the intermediate hierarchical order threshold value can be calculated as the target hierarchical order corresponding to the target initial hierarchical order; in a case where the pre-order value is acquired and the post-order value is not acquired, an intermediate value of the first hierarchical order threshold value and the pre-order threshold value can be calculated as the target hierarchical order corresponding to the target initial hierarchical order; in a case where the post-order value is acquired and the pre-order value is not acquired, an intermediate value of the intermediate hierarchical order threshold value and the post-order value can be calculated as the target hierarchical order corresponding to the target initial hierarchical order.

[0157] In actual application, as shown in Figure 3e , Figure 3e is a flowchart of a second order set traversal method provided by an embodiment of the present application, and the method of traversing the third order set can include:

[0158] Step d2: defining a loop variable k=0.

[0159] Step d4: judging whether the length of the third order set is greater than k; if yes, executing step d6; if not, ending the loop.

[0160] Step d6: judging whether the target initial hierarchical order in the second order set has a corresponding target hierarchical order; if not, executing step d8; if yes, executing step d12.

[0161] Step d8: determining the existence of the pre-order value and the post-order value corresponding to the target initial hierarchical order, and obtaining an existence result.

[0162] Step d10: determining the corresponding target hierarchical order for the target initial hierarchical order based on the existence result.

[0163] Specifically, the existence result includes four types; in a case where the existence result is a first type of existence result, i.e., in a case where the pre-order value and the post-order value both exist, the order value of the target hierarchical order corresponding to the target initial hierarchical order is set to (pre-order value+post-order value) / 2;

[0164] In the case of the existence result being the second type of existence result, i.e., the case where neither the front order value nor the rear order value exists, the order value of the target hierarchical order corresponding to the target initial hierarchical order is set to (the first hierarchical order threshold + the intermediate hierarchical order threshold) / 2.

[0165] In the case of the existence result being the third type of existence result, i.e., the case where only the front order value is obtained, the order value of the target hierarchical order corresponding to the target initial hierarchical order is set to (the first hierarchical order threshold + the front order value) / 2.

[0166] In the case of the existence result being the fourth type of existence result, i.e., the case where only the rear order value is obtained, the order value of the target hierarchical order corresponding to the target initial hierarchical order is set to (the intermediate hierarchical order threshold + the rear order value) / 2.

[0167] Step d12: define k=k++, and continue to perform step d4.

[0168] A simple description of the above method is to set the component hierarchical value to half of the size of the adjacent level, and round down. If there is no adjacent component, the setting is performed according to the existence of the adjacent component, and the maximum, minimum or intermediate value of the value range is used instead of the order value of the adjacent node; and the purpose of setting the level to half of the adjacent level instead of a simple addition or subtraction is that since the level of the component to be rendered later cannot be predicted, it is necessary to reserve enough order values of optional levels around each rendered component, and the above two-value assignment method can as much as possible evenly distribute the levels of the value range, thereby greatly avoiding the case where no value is available for the level value.

[0169] By traversing each initial hierarchical order in the third order set and determining the corresponding target hierarchical order, it is ensured that the initial hierarchical order in the third order set corresponds to the to-be-rendered component in the browser.

[0170] Step 208: render each to-be-rendered component according to the target hierarchical order corresponding to each to-be-rendered component and the component display area.

[0171] Specifically, after determining the target hierarchical order corresponding to each to-be-rendered component and the component display area, the position of each to-be-rendered component in the browser during rendering is determined according to the component display area in the browser; and the hierarchical order of each to-be-rendered component during rendering is further determined according to the target hierarchical order, thereby realizing the reproduction of the component display effect of the applet in the browser, so that the user can see the display effect of the applet on the web side.

[0172] The application provides a rendering method of a small program component, receives a component rendering request for a target small program, determines at least one component to be rendered according to the component rendering request, determines a root node of each component to be rendered, and creates a component display area corresponding to each component to be rendered in the browser based on node attribute information of each root node, obtains an initial hierarchical order of each component to be rendered, and determines a target hierarchical order corresponding to each initial hierarchical order based on a web page hierarchical order threshold, and renders each component to be rendered according to the target hierarchical order corresponding to each component to be rendered and the component display area.

[0173] An embodiment of the application realizes that after the browser receives a component rendering request, the component to be rendered is determined based on the component rendering request, so as to determine the component that needs to be displayed in the browser, the root node of the component to be rendered is determined, and the component display area is determined in the browser according to the node attribute information of the root node, so as to determine the displayable position of the component to be rendered in the browser, the target hierarchical order is determined based on the initial hierarchical order of each component to be rendered, so as to determine the hierarchical relationship of the component to be rendered in the browser, and each component to be rendered is displayed based on the target hierarchical order of the component to be rendered and the component display area, so as to realize the display of the component to be rendered in the small program in the browser, and then it is convenient for relevant personnel to debug the small program component based on the display effect in the browser.

[0174] The following describes an application of the rendering method of the small program component provided by the application to the cover-view component of the small program in detail. Figure 4a and Figure 4b The rendering method of the small program component is further described by taking the application of the rendering method of the small program component provided by the application to the cover-view component of the small program as an example. Wherein, Figure 4a FIG. 1 shows a processing flowchart of the rendering method of the small program component applied to the cover-view component according to an embodiment of the application, and specifically includes the following steps:

[0175] Step 402: receiving a component rendering request for a target small program, and determining a component to be rendered cover-view according to the component rendering request.

[0176] Specifically, the component to be rendered is determined as cover-view1, cover-view2 and cover-view3.

[0177] Step 404: determining the root node of the component to be rendered cover-view, and creating a component display area based on the node attribute information of the root node.

[0178] Step 406: obtaining the initial hierarchical order corresponding to the root node, and determining the web page hierarchical order threshold of the browser.

[0179] Specifically, it is determined that the initial hierarchical order zIndex of the to-be-rendered components cover-view1, cover-view2 and cover-view3 is 2, 1 and 3 respectively, and the web page hierarchical order threshold is [2146000000, 2146999999].

[0180] Step 410: determining the target hierarchical order corresponding to the initial hierarchical order according to the web page hierarchical order threshold.

[0181] Specifically, as shown in FIG. 4, Figure 4b Figure 4b is a component order schematic diagram provided by an embodiment of the present application. In the case of determining the target hierarchical order of cover-view1, there is no corresponding front order value and rear order value, the target hierarchical order threshold is calculated according to the intermediate threshold 2146500000 and the maximum threshold 2146999999, and the order value z-index of the target hierarchical order is (2146500000+2146999999) / 2=2146749999 (the value of z-index is an integer). Further, in the case of rendering cover-view2, it is determined that cover-view1 is the adjacent component, and the order value of the target hierarchical order is (2146500000+2146749999) / 2=2146624999 according to the front order value 2146749999 and the intermediate threshold 2146500000. Further, in the case of determining the target hierarchical order of cover-view3, there is a rear order value but no front order value, and the order value of the target hierarchical order is (2146624999+2146500000) / 2=2146562499 according to the rear order value 2146749999 and the intermediate threshold 2146500000.

[0182] Step 412: rendering the to-be-rendered component cover-view based on the component display area corresponding to the to-be-rendered component cover-view and the target hierarchical order.

[0183] The rendering method of the small program component provided by the present application receives a component rendering request for a target small program, determines at least one to-be-rendered component according to the component rendering request, determines the root node of each to-be-rendered component, and creates a component display area corresponding to each to-be-rendered component in the browser based on the node attribute information of each root node. The initial hierarchical order of each to-be-rendered component is obtained, and the target hierarchical order corresponding to each initial hierarchical order is determined based on the web page hierarchical order threshold. Each to-be-rendered component is rendered according to the target hierarchical order corresponding to each to-be-rendered component and the component display area.

[0184] ​An embodiment of the present application realizes that after the browser receives a component rendering request, the component to be rendered is determined based on the component rendering request, so as to determine the component that needs to be displayed in the browser; the root node of the component to be rendered is determined, and the component display area in the browser is determined according to the node attribute information of the root node, so as to determine the displayable position of the component to be rendered in the browser; the target hierarchical order is determined based on the initial hierarchical order of each component to be rendered, so as to determine the hierarchical relationship of the component to be rendered in the browser; each component to be rendered is displayed based on the target hierarchical order of the component to be rendered and the component display area, so as to realize the display of the component to be rendered in the browser, and then facilitate the relevant counting personnel to debug the small program component based on the display effect in the browser.

[0185] Corresponding to the method embodiments described above, the present application also provides a small program component rendering device embodiment, Figure 5 The structure of a small program component rendering device provided by an embodiment of the present application is shown.

[0186] As Figure 5 shown, the device comprises:

[0187] The receiving module 502 is configured to receive a component rendering request for a target small program, and determine at least one component to be rendered according to the component rendering request;

[0188] The determining module 504 is configured to determine the root node of each component to be rendered, and create a component display area corresponding to each component to be rendered in the browser based on the node attribute information of each root node;

[0189] The obtaining module 506 is configured to obtain the initial hierarchical order of each component to be rendered, and determine the target hierarchical order corresponding to each initial hierarchical order based on a web page hierarchical order threshold;

[0190] The rendering module 508 is configured to render each component to be rendered according to the target hierarchical order and the component display area corresponding to each component to be rendered.

[0191] Optionally, the determining module 504 is further configured to:

[0192] traverse the nodes in each component to be rendered to obtain the root node corresponding to each component to be rendered;

[0193] obtain the node position information and the node size information of each root node;

[0194] create the component display area corresponding to each component to be rendered based on the node position information and the node size information corresponding to each root node.

[0195] Optionally, the determining module 504 is further configured to:

[0196] determine component display size information based on preset display size information of the browser and each node size information;

[0197] determine component display position information of each to-be-rendered component in the browser according to each node position information;

[0198] create a component display area corresponding to each to-be-rendered component based on component display size information and component display position information corresponding to each to-be-rendered component.

[0199] Optionally, the obtaining module 506 is further configured to:

[0200] collect an initial hierarchical order corresponding to a root node of each to-be-rendered component;

[0201] determine a preset hierarchical order threshold corresponding to the browser, and set a web page hierarchical order threshold based on the preset hierarchical order threshold;

[0202] map each initial hierarchical order to the web page hierarchical order threshold to obtain a target hierarchical order corresponding to each to-be-rendered component.

[0203] Optionally, the obtaining module 506 is further configured to:

[0204] classify each initial hierarchical order based on a hierarchical classification rule to obtain a classification result;

[0205] traverse the initial hierarchical order corresponding to each classification result according to the web page hierarchical order threshold to determine a target hierarchical order corresponding to each to-be-rendered component.

[0206] Optionally, the obtaining module 506 is further configured to:

[0207] obtain a preset classification threshold and an order value of each initial hierarchical order;

[0208] add the initial hierarchical order with the order value equal to the preset classification threshold to a first order set;

[0209] add the initial hierarchical order with the order value greater than the preset classification threshold to a second order set;

[0210] add the initial hierarchical order with the order value less than the preset classification threshold to a third order set.

[0211] Optionally, the obtaining module 506 is further configured to:

[0212] determining a first hierarchical order threshold, a second hierarchical order threshold and an intermediate hierarchical order threshold, wherein the first hierarchical order threshold is less than the intermediate hierarchical order threshold, and the second hierarchical order threshold is greater than the intermediate hierarchical order threshold;

[0213] traversing the initial hierarchical order corresponding to each classification result based on the first hierarchical order threshold, the second hierarchical order threshold and the intermediate hierarchical order threshold.

[0214] Optionally, the obtaining module 506 is further configured to:

[0215] taking the intermediate hierarchical order threshold as the target hierarchical order corresponding to each initial hierarchical order in the first order set;

[0216] traversing each initial hierarchical order in the second order set, and determining the target hierarchical order corresponding to each component to be rendered in the second order set based on the order value of the adjacent hierarchical order corresponding to each initial hierarchical order, the second hierarchical order threshold and the intermediate hierarchical order threshold;

[0217] traversing each initial hierarchical order in the third order set, and determining the target hierarchical order corresponding to each component to be rendered in the third order set based on the order value of the adjacent hierarchical order corresponding to each initial hierarchical order, the first hierarchical order threshold and the intermediate hierarchical order threshold.

[0218] Optionally, the obtaining module 506 is further configured to:

[0219] determining a target initial hierarchical order in the second order set, and obtaining the previous order value and the subsequent order value corresponding to the target initial hierarchical order;

[0220] in a case where the previous order value and the subsequent order value are obtained, calculating the target hierarchical order corresponding to the target initial hierarchical order based on the previous order value and the subsequent order value;

[0221] in a case where the previous order value and the subsequent order value are not obtained, calculating the target hierarchical order corresponding to the target initial hierarchical order based on the second hierarchical order threshold and the intermediate hierarchical order threshold;

[0222] in a case where the previous order value is obtained and the subsequent order value is not obtained, calculating the target hierarchical order corresponding to the target initial hierarchical order based on the previous order value and the second hierarchical order threshold;

[0223] in a case where the subsequent order value is obtained and the previous order value is not obtained, calculating the target hierarchical order corresponding to the target initial hierarchical order based on the subsequent order value and the intermediate order threshold.

[0224] Optionally, the obtaining module 506 is further configured to:

[0225] determine a target initial hierarchical order in the third sequence set, and obtain a pre-sequence value and a post-sequence value corresponding to the target initial hierarchical order;

[0226] in a case where the pre-sequence value and the post-sequence value are obtained, calculate a target hierarchical order corresponding to the target initial hierarchical order based on the pre-sequence value and the post-sequence value;

[0227] in a case where the pre-sequence value and the post-sequence value are not obtained, calculate a target hierarchical order corresponding to the target initial hierarchical order based on the first hierarchical order threshold and the intermediate hierarchical order threshold;

[0228] in a case where the pre-sequence value is obtained and the post-sequence value is not obtained, calculate a target hierarchical order corresponding to the target initial hierarchical order based on the pre-sequence value and the first hierarchical order threshold;

[0229] in a case where the post-sequence value is obtained and the pre-sequence value is not obtained, calculate a target hierarchical order corresponding to the target initial hierarchical order based on the post-sequence value and the intermediate order threshold.

[0230] The rendering device of the applet component provided in the application includes a receiving module configured to receive a component rendering request for a target applet and determine at least one component to be rendered according to the component rendering request; a determining module configured to determine a root node of each component to be rendered and create a component display area corresponding to each component to be rendered in the browser based on node attribute information of each root node; an obtaining module configured to obtain an initial hierarchical order of each component to be rendered and determine a target hierarchical order corresponding to each initial hierarchical order based on a web page hierarchical order threshold; and a rendering module configured to render each component to be rendered according to the target hierarchical order corresponding to each component to be rendered and the component display area.

[0231] The embodiment of the application realizes that after the browser receives the component rendering request, the component to be rendered is determined based on the component rendering request, so that the component that needs to be displayed in the browser is determined; the root node of the component to be rendered is determined, and the component display area in the browser is determined according to the node attribute information of the root node, so that the displayable position of the component to be rendered in the browser is determined; the target hierarchical order is determined based on the initial hierarchical order of each component to be rendered, so that the hierarchical relationship of the component to be rendered in the browser is determined; each component to be rendered is displayed based on the target hierarchical order of the component to be rendered and the component display area, so that the display of the component to be rendered in the browser in the applet is realized, and then it is convenient for the relevant counting personnel to debug the applet component based on the display effect in the browser.

[0232] The above is a schematic scheme of the rendering device of the applet component of the embodiment. It should be noted that the technical scheme of the rendering device of the applet component belongs to the same concept as the technical scheme of the rendering method of the applet component described above, and the details of the technical scheme of the rendering device of the applet component that are not described in detail can be referred to the description of the technical scheme of the rendering method of the applet component.

[0233] Figure 6 A structural block diagram of a computing device 600 according to an embodiment of the application is shown. The components of the computing device 600 include, but are not limited to, a memory 610 and a processor 620. The processor 620 is connected to the memory 610 through a bus 630, and a database 650 is used to save data.

[0234] The computing device 600 also includes an access device 640, which enables the computing device 600 to communicate via one or more networks 660. Examples of these networks include a public switched telephone network (PSTN), a local area network (LAN), a wide area network (WAN), a personal area network (PAN), or a combination of communication networks such as the Internet. The access device 640 can include one or more of any type of network interface (for example, a network interface card (NIC)) such as an IEEE 802.11 wireless local area network (WLAN) wireless interface, a worldwide interoperability for microwave access (Wi-MAX) interface, an Ethernet interface, a universal serial bus (USB) interface, a cellular network interface, a Bluetooth interface, a near field communication (NFC) interface, and the like.

[0235] In an embodiment of the application, the above-mentioned components of the computing device 600 and other components not shown in the above-mentioned components can be connected to each other, for example, through a bus. It should be understood that Figure 6 Figure 6 The structural block diagram of the computing device shown is only for the purpose of example, and is not a limitation on the scope of the application. Those skilled in the art can add or replace other components as needed.​

[0236] The computing device 600 can be any type of stationary or mobile computing device, including a mobile computer or mobile computing device (e.g., a tablet computer, a personal digital assistant, a laptop computer, a notebook computer, a netbook, etc.), a mobile phone (e.g., a smartphone), a wearable computing device (e.g., a smart watch, smart glasses, etc.), or other type of mobile device, or a stationary computing device such as a desktop computer or PC. The computing device 600 can also be a mobile or stationary server.

[0237] The processor 620 implements the steps of the rendering method of the applet component when executing the computer instructions.

[0238] The above is a schematic scheme of the computing device of the embodiment. It should be noted that the technical scheme of the computing device belongs to the same concept as the technical scheme of the rendering method of the applet component, and the details of the technical scheme of the computing device that are not described in detail can be referred to the description of the technical scheme of the rendering method of the applet component.

[0239] The embodiment of the present application further provides a computer readable storage medium storing computer instructions, which, when executed by a processor, implement the steps of the rendering method of the applet component as described above.

[0240] The above is a schematic scheme of the computer readable storage medium of the embodiment. It should be noted that the technical scheme of the storage medium belongs to the same concept as the technical scheme of the rendering method of the applet component, and the details of the technical scheme of the storage medium that are not described in detail can be referred to the description of the technical scheme of the rendering method of the applet component.

[0241] The specific embodiments of the present application are described above. Other embodiments are within the scope of the claims. In some cases, the actions or steps recited in the claims can be performed in a different order and still achieve desirable results. In addition, the process depicted in the figures does not necessarily require the particular order shown, or sequential order to achieve the desired results. In certain implementations, multitasking and parallel processing can be advantageous.

[0242] The computer readable medium can include any entity or apparatus capable of carrying the computer program code, recording medium, U disk, mobile hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electrical carrier signal, telecommunication signal, software distribution medium, etc. It should be noted that the computer readable medium can include appropriate additions or subtractions according to the requirements of legislation and patent practice in the jurisdiction, for example, in some jurisdictions, according to legislation and patent practice, the computer readable medium does not include electrical carrier signals and telecommunication signals.

[0243] It should be noted that for the foregoing method embodiments, the descriptions are all expressed as a combination of a series of actions for the sake of simplicity, but those skilled in the art should know that the present application is not limited by the order of the actions described, because according to the present application, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should know that the embodiments described in the specification all belong to preferred embodiments, and the actions and modules involved are not necessarily essential to the present application.

[0244] In the above embodiments, the description of each embodiment has its own focus, and the parts not described in detail in a certain embodiment can be referred to the relevant description of other embodiments.

[0245] The preferred embodiments of the present application disclosed above are only used to help explain the present application. The alternative embodiments do not describe all the details and do not limit the present application to the specific embodiments described. Obviously, according to the content of the present application, many modifications and changes can be made. The present application selects and describes these embodiments in order to better explain the principles and practical applications of the present application, so that those skilled in the art can well understand and utilize the present application. The present application is limited by the claims and their entire scope and equivalents.

Claims

1. A method for rendering a WeChat Mini Program component, characterized in that, Applied to browsers, including: Receive a component rendering request for the target mini-program, and determine at least one component to be rendered based on the component rendering request; Determine the root node of each component to be rendered, and create a component display area corresponding to each component to be rendered in the browser based on the node attribute information of each root node; Obtain the initial layer order of each component to be rendered, and determine the target layer order corresponding to each initial layer order based on the webpage layer order threshold; Render each component according to its target hierarchy and display area. This includes obtaining the initial hierarchy order of each component to be rendered, and determining the target hierarchy order corresponding to each initial hierarchy order based on a webpage hierarchy order threshold, including: Collect the initial hierarchy order corresponding to the root node of each component to be rendered; Determine the preset layer order threshold corresponding to the browser, and set the webpage layer order threshold based on the preset layer order threshold; Each initial hierarchical order is mapped to the webpage hierarchical order threshold to obtain the target hierarchical order corresponding to each component to be rendered. This involves mapping each initial hierarchical order to a webpage hierarchical order threshold to obtain the target hierarchical order for each component to be rendered, including: The initial hierarchical order is classified based on hierarchical classification rules to obtain the classification results; Based on the page hierarchy order threshold, the initial hierarchy order corresponding to each category result is traversed to determine the target hierarchy order corresponding to each component to be rendered.

2. The method as described in claim 1, characterized in that, Determine the root node of each component to be rendered, and create a component display area corresponding to each component in the browser based on the node attribute information of each root node, including: Iterate through the nodes in each component to be rendered to obtain the root node corresponding to each component; Obtain the node position and size information of each root node; Create a component display area for each component to be rendered based on the node position and size information corresponding to each root node.

3. The method as described in claim 2, characterized in that, Based on the node position and size information corresponding to each root node, a component display area is created for each component to be rendered, including: The component display size information is determined based on the browser's preset display size information and the size information of each node; Determine the component display position information of each component to be rendered in the browser based on the position information of each node; Create a component display area for each component to be rendered based on the component display size information and component display position information corresponding to each component to be rendered.

4. The method as described in claim 1, characterized in that, Based on hierarchical classification rules, each initial hierarchical order is classified to obtain classification results, including: Obtain the preset classification threshold and the order value of each initial level; Add the initial hierarchical order whose order value is equal to the preset classification threshold to the first order set; Add the initial hierarchical order whose order value is greater than the preset classification threshold to the second order set; The initial hierarchical order with an order value less than the preset classification threshold is added to the third order set.

5. The method as described in claim 4, characterized in that, Each category result is assigned a corresponding threshold based on its webpage hierarchy. The initial hierarchical order is traversed, including: Determine a first-level order threshold, a second-level order threshold, and an intermediate-level order threshold, wherein the first-level order threshold is less than the intermediate-level order threshold, and the second-level order threshold is greater than the intermediate-level order threshold; The initial hierarchical order corresponding to each classification result is traversed based on the first hierarchical order threshold, the second hierarchical order threshold, and the intermediate hierarchical order threshold.

6. The method as described in claim 5, characterized in that, Based on the webpage hierarchy order threshold, the initial hierarchy order corresponding to each category result is traversed to determine the target hierarchy order corresponding to each component to be rendered, including: The intermediate level order threshold is used as the target level order corresponding to each initial level order in the first order set; Traverse each initial level order in the second order set, and determine the target level order corresponding to each component to be rendered in the second order set based on the order value of the adjacent level order corresponding to each initial level order, the second level order threshold, and the intermediate level order threshold; Traverse each initial hierarchical order in the third sequence set, and determine the target hierarchical order corresponding to each component to be rendered in the third sequence set based on the order value of the adjacent hierarchical order corresponding to each initial hierarchical order, the first hierarchical order threshold, and the intermediate hierarchical order threshold.

7. The method as described in claim 6, characterized in that, Traverse each initial hierarchical order in the second sequence set, and determine the target hierarchical order corresponding to each component to be rendered in the second sequence set based on the order value of the adjacent hierarchical orders corresponding to each initial hierarchical order, the second hierarchical order threshold, and the intermediate hierarchical order threshold, including: Determine the initial hierarchical order of the target in the second sequence set, and obtain the preceding and following sequence values ​​corresponding to the initial hierarchical order of the target; Given the preceding sequence value and the following sequence value, calculate the target hierarchical order corresponding to the initial target hierarchical order based on the preceding sequence value and the following sequence value; In the absence of the preceding and following order values, the target order corresponding to the target order is calculated based on the second level order threshold and the intermediate level order threshold. If the preceding sequence value is obtained but the following sequence value is not obtained, the target hierarchical order corresponding to the target initial hierarchical order is calculated based on the preceding sequence value and the second hierarchical order threshold. If the subsequent order value is obtained but the preceding order value is not obtained, the target level order corresponding to the target initial level order is calculated based on the subsequent order value and the intermediate level order threshold.

8. The method as described in claim 6, characterized in that, Traverse each initial hierarchical order in the third sequence set, and determine the target hierarchical order corresponding to each component to be rendered in the third sequence set based on the order values ​​of the adjacent hierarchical orders corresponding to each initial hierarchical order, the first hierarchical order threshold, and the intermediate hierarchical order threshold, including: Determine the initial hierarchical order of the target in the third sequence set, and obtain the preceding and following sequence values ​​corresponding to the initial hierarchical order of the target; Given the preceding sequence value and the following sequence value, calculate the target hierarchical order corresponding to the initial target hierarchical order based on the preceding sequence value and the following sequence value; In the absence of the preceding and following order values, the target order corresponding to the target order is calculated based on the first level order threshold and the intermediate level order threshold. If the preceding sequence value is obtained but the following sequence value is not obtained, the target hierarchical order corresponding to the initial hierarchical order of the target is calculated based on the preceding sequence value and the first hierarchical order threshold. If the subsequent order value is obtained but the preceding order value is not obtained, the target level order corresponding to the target initial level order is calculated based on the subsequent order value and the intermediate level order threshold.

9. A rendering device for a mini-program component, characterized in that, include: The receiving module is configured to receive a component rendering request for the target mini-program and determine at least one component to be rendered based on the component rendering request. The determination module is configured to determine the root node of each component to be rendered and create a component display area corresponding to each component to be rendered in the browser based on the node attribute information of each root node. The acquisition module is configured to acquire the initial layer order of each component to be rendered, and determine the target layer order corresponding to each initial layer order based on the web page layer order threshold; The rendering module is configured to render each component according to the target hierarchy order and the component display area corresponding to each component to be rendered. The acquisition module is further configured to collect the initial layer order corresponding to the root node of each component to be rendered; determine the preset layer order threshold corresponding to the browser, and set the webpage layer order threshold based on the preset layer order threshold; map each initial layer order to the webpage layer order threshold to obtain the target layer order corresponding to each component to be rendered. The acquisition module is further configured to: classify each initial hierarchical order based on hierarchical classification rules to obtain classification results; and traverse the initial hierarchical order corresponding to each classification result according to the webpage hierarchical order threshold to determine the target hierarchical order corresponding to each component to be rendered.

10. A computing device, comprising a memory, a processor, and computer instructions stored in the memory and executable on the processor, characterized in that, When the processor executes the computer instructions, it implements the steps of the method according to any one of claims 1-8.

11. A computer-readable storage medium storing computer instructions, characterized in that, When executed by a processor, the computer instructions implement the steps of the method according to any one of claims 1-8.

12. A computer program product comprising computer instructions, characterized in that, When executed by a processor, the computer instructions implement the steps of the method according to any one of claims 1-8.

Images