Component rendering method, device and equipment and computer readable storage medium

Abstract

The invention discloses a component rendering method, device and equipment and a computer readable storage medium. The method comprises the following steps: acquiring target source code data of a custom component in an application program; according to target features of the target source code data, the component type of the custom component is determined, and the target features comprise at least one of structural features, attribute features and event features; determining a user-defined view template according to the component type, wherein the user-defined view template describes a conversion mode from the target source code data to the user-defined component; based on the component type, performing parameter extraction on the target source code data to obtain parameter information of the custom component; and rendering the user-defined view template and the parameter information to obtain and display the user-defined component. According to the component rendering method provided by the embodiment of the invention, the development cost of the application program can be saved.

Description

Technical Field

[0001] The present application belongs to the field of application technology, and in particular, relates to a component rendering method, device, equipment and computer-readable storage medium. Background Art

[0002] Generally, low-code tools can be used to quickly build applications based on a visual interface to improve application development efficiency. Currently, low-code tools can also generate a visual interface by scanning and parsing the application's project code, so that users can update the application in the visual interface, expanding the use of low-code tools.

[0003] With the diversification of business scenarios, the demand for custom components in applications has become increasingly prominent. However, the component library of low-code tools currently mainly covers front-end common components, and the support for custom components is still insufficient. R&D personnel are required to use traditional coding methods to realize the visualization of custom components, which increases the development cost of applications. Summary of the invention

[0004] The embodiments of the present application provide a component rendering method, apparatus, device, computer-readable storage medium, and computer program product, which can save application development costs.

[0005] In a first aspect, an embodiment of the present application provides a component rendering method, the method comprising:

[0006] Get the target source code data of the custom component in the application;

[0007] Determining a component type of the custom component according to a target feature of the target source code data, wherein the target feature includes at least one of a structural feature, an attribute feature, and an event feature;

[0008] Determining a custom view template according to the component type, wherein the custom view template describes a conversion method from the target source code data to the custom component;

[0009] Based on the component type, extract parameters from the target source code data to obtain parameter information of the custom component;

[0010] The custom view template and the parameter information are rendered to obtain and display the custom component.

[0011] In a second aspect, an embodiment of the present application provides a rendering device for a component, the device comprising:

[0012] The acquisition module is used to obtain the target source code data of the custom components in the application;

[0013] A first determination module, configured to determine a component type of the custom component according to a target feature of the target source code data, wherein the target feature includes at least one of a structural feature, an attribute feature, and an event feature;

[0014] A second determination module is used to determine a custom view template according to the component type, wherein the custom view template describes a conversion method from the target source code data to the custom component;

[0015] An extraction module, used to extract parameters from the target source code data based on the component type to obtain parameter information of the custom component;

[0016] The first rendering module is used to render the custom view template and the parameter information to obtain and display the custom component.

[0017] In a third aspect, an embodiment of the present application provides an electronic device, the device comprising: a processor and a memory storing computer program instructions;

[0018] When the processor executes the computer program instructions, the processor implements any possible implementation method of the first aspect described above.

[0019] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium having computer program instructions stored thereon, which, when executed by a processor, implements a method in any possible implementation method of the first aspect described above.

[0020] In a fifth aspect, an embodiment of the present application provides a computer program product. When instructions in the computer program product are executed by a processor of an electronic device, the electronic device executes a method as any possible implementation method in the first aspect above.

[0021] In the embodiment of the present application, on the one hand, by determining the custom view template according to the component type of the custom component, a conversion method from the target source code data to the custom component can be provided for the visual display of the custom component; on the other hand, by extracting parameters from the target source code data based on the component type, the parameter information of the custom component can be obtained, which can provide data support for the visual display of the custom component. In this way, by rendering the custom view template and parameter information, the custom component is obtained and displayed, and the automation of the visual display of the custom component can be realized, which saves labor costs and thus saves the development costs of the application. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] In order to more clearly illustrate the technical solution of the embodiments of the present application, the following is a brief introduction to the drawings required for use in the embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0023] Figure 1 It is a rendering schematic diagram of a component library component provided in an embodiment of the present application;

[0024] Figure 2 It is a rendering schematic diagram of a custom component provided in an embodiment of the present application;

[0025] Figure 3 It is a flowchart of a component rendering method provided in an embodiment of the present application;

[0026] Figure 4 This is a schematic diagram of determining a component type based on a keyword code provided by an embodiment of the present application;

[0027] Figure 5 It is a schematic diagram of determining the component type of a custom component based on a structural feature specification, an attribute feature specification, and an event feature specification provided in an embodiment of the present application;

[0028] Figure 6 It is a schematic diagram of determining parameter information of a custom component based on a type parsing module provided by an embodiment of the present application;

[0029] Figure 7 It is a schematic diagram of a process from AST of target source code data to a visual custom component provided by an embodiment of the present application;

[0030] Figure 8 It is a schematic diagram of rendering a custom component based on a preset rendering strategy provided by an embodiment of the present application;

[0031] Fig. 9 It is a schematic diagram of determining a custom component and a component type provided by an embodiment of the present application;

[0032] Fig.10 It is a flow chart of a visualization of a custom component provided in an embodiment of the present application;

[0033] Fig.11 is a schematic diagram of visual rendering based on a preset rendering strategy provided by an embodiment of the present application;

[0034] Fig.12 It is a structural schematic diagram of a rendering device of a component provided in an embodiment of the present application;

[0035] Fig.13 It is a structural schematic diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0036] The features and exemplary embodiments of various aspects of the present application will be described in detail below. In order to make the purpose, technical solutions and advantages of the present application clearer, the present application will be further described in detail below in conjunction with the accompanying drawings and specific embodiments. It should be understood that the specific embodiments described herein are only intended to explain the present application, rather than to limit the present application. For those skilled in the art, the present application can be implemented without the need for some of these specific details. The following description of the embodiments is only to provide a better understanding of the present application by illustrating the examples of the present application.

[0037] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the statement "include..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.

[0038] In addition, the acquisition, storage, use, and processing of data in the technical solution of this application comply with the relevant provisions of national laws and regulations.

[0039] As mentioned in the background technology section, with the diversification of business scenarios, the demand for custom components in applications has become increasingly prominent. However, the component library of low-code tools currently mainly covers front-end common components, and the support for custom components is still insufficient. R&D personnel are required to use traditional coding methods to realize the visualization of custom components, which increases the development cost of applications.

[0040] In addition, when low-code tools scan project codes and parse them, custom components are often not automatically recognized and converted into visual operation components. In order to view the view effect, R&D personnel have to manually write view template files, which not only reduces work efficiency but also increases the possibility of errors.

[0041] The prior art is introduced in detail below.

[0042] At present, the industry's low-code tools are mainly aimed at users with non-technical backgrounds such as product and operation, rather than R&D personnel, and have not yet considered compiling and visualizing self-written components. Therefore, there is currently no technical solution or product that supports parsing the Abstract Syntax Tree (AST) of custom components and then supports visualization operations.

[0043] The current process of generating a visual interface corresponding to the project source code through low-code tools is as follows Figure 1 shown.

[0044] like Figure 1 As shown in the figure, the low-code tool generates an abstract syntax tree of the component library components by scanning and analyzing the source code, and matches the domain-specific language (DSL) template, that is, the built-in view template, and then builds a domain-specific language instance (DSL instance) according to the AST related parameters, and finally renders to achieve the visual rendering operation of the component library components. However, due to the lack of visualization-related view templates, custom components cannot create DSL instances, which makes it impossible to implement visualization operations for custom components.

[0045] In order to achieve visual rendering of custom components, the following solution can be temporarily adopted:

[0046] like Figure 2 As shown in the figure, R&D personnel manually write the view template of the custom component according to the component DSL specification and upload it to the component library. When the source code parsing engine of the low-code tool parses the custom component, it matches the manually uploaded view template in the component library according to the AST information of the custom component, and then creates a DSL instance to realize the reverse visualization operation of the component.

[0047] In the temporary solution, developers need to manually write the view template of the custom component according to the component DSL description specification and enter it into the component library, which has the following problems:

[0048] 1) High cost of view template writing and maintenance: In the temporary solution, the creation and update of view templates completely rely on manual operations of R&D personnel. This not only reduces development efficiency, but also poses the risk of template writing errors and inconsistent standards, and increases the update and maintenance costs of view template files.

[0049] 2) Poor visual rendering performance of custom components: Compared with library components, custom components do not have a pre-loaded template rendering mechanism, and their rendering efficiency is low. This will cause the visual interface to freeze during operation, which seriously restricts the developer's operation fluency and overall development experience.

[0050] Thus, in order to solve the problems of the prior art, the embodiments of the present application provide a component rendering method, apparatus, device, computer-readable storage medium and computer program product. The component rendering method can be applied to the scene of rendering a custom component.

[0051] The following is an introduction to the component rendering method provided in the embodiment of the present application.

[0052] Figure 3 A flowchart of a component rendering method provided in an embodiment of the present application is shown. The component rendering method can be executed by a low-code tool. Figure 3 As shown, the component rendering method provided in the embodiment of the present application includes the following steps:

[0053] S310, obtaining target source code data of the custom component in the application program;

[0054] S320, determining a component type of the custom component according to a target feature of the target source code data, where the target feature includes at least one of a structural feature, an attribute feature, and an event feature;

[0055] S330, determining a custom view template according to the component type, where the custom view template describes a conversion method from target source code data to a custom component;

[0056] S340, based on the component type, extracting parameters from the target source code data to obtain parameter information of the custom component;

[0057] S350: Render the custom view template and parameter information to obtain and display the custom component.

[0058] In the embodiment of the present application, on the one hand, by determining the custom view template according to the component type of the custom component, a conversion method from the target source code data to the custom component can be provided for the visual display of the custom component; on the other hand, by extracting parameters from the target source code data based on the component type, the parameter information of the custom component can be obtained, which can provide data support for the visual display of the custom component. In this way, by rendering the custom view template and parameter information, the custom component is obtained and displayed, and the automation of the visual display of the custom component can be realized, which saves labor costs and thus saves the development costs of the application.

[0059] The specific implementation methods of the above steps are introduced below.

[0060] In some embodiments, in S310, the component library of the low-code tool may include some common components commonly used in the front end. Components in the component library may be referred to as component library components. Custom components may be components that are not in the component library. For example, a component library component may include a first button, and a user may click the first button to jump to the next page. Correspondingly, a custom component may include a second button, and a user may click the second button to display a special effect instead of jumping to the next page.

[0061] As an example, the application may include component library components and custom components. The target source code data may be the engineering source code data corresponding to the custom components. In addition, the target source code data may exist in the form of an abstract syntax tree (AST).

[0062] Since the components in the application program generally include component library components and custom components, in order to accurately identify the custom components and obtain the target source code data of the custom components, in some embodiments, the above S310 may specifically include:

[0063] Get the source code data of the components in the application;

[0064] Determine the reference path and basic component features of the component based on the source code data;

[0065] When the reference path does not include the component library address and the basic component characteristics meet the preset conditions, the component is determined as a custom component, and the source code data of the component is determined as the target source code data.

[0066] Here, the basic component features may include necessary component features and optional component features. Among them, the necessary component features may include features related to the component life cycle. The component life cycle may be related to the constructor, didMount, render, etc. in the source code data. In addition, the optional component features may include some style structures and inherited base classes. The basic component features satisfying the preset conditions may include the necessary component features included in the source code data, and the optional component features satisfying the preset feature conditions.

[0067] In addition, as mentioned above, a custom component can be a component that is not in the component library. Therefore, if the reference path of the component in the source code data comes from the component library address, it can be determined that the component is a component library component. If the reference path of the component in the source code data does not include the component library address, it can be determined that the component may be a custom component. On this basis, if the source code data includes relevant codes such as constructor, didMount, render, and the style structure meets the preset style structure and the inherited base class is the preset base class, it can be determined that the component is determined to be a custom component, and the source code data of the component is determined to be the target source code data.

[0068] The embodiment of the present application can accurately identify the custom component and obtain the target source code data of the custom component by performing feature analysis on the source code data of the component.

[0069] In some embodiments, in S320, the component types of the custom component may include general components, layout components, input components, and display components. Among them, general components may include button components, graphic components, etc.; layout components may include Flex layout container components, multi-layer nested container components, etc.; input components may include form components, input box components, etc.; display components may include card components, list components, etc.

[0070] In addition, the target feature may include at least one of a structural feature, an attribute feature, and an event feature. Among them, the structural feature may be a feature determined based on a predefined structural feature specification; the attribute feature may be a feature determined based on a predefined attribute feature specification; and the event feature may be a feature determined based on a predefined event feature specification. The definitions of the structural feature specification, the attribute feature specification, and the event feature specification may be as shown in Table 1 below:

[0071] Table 1

[0072]

[0073]

[0074] As can be seen from Table 1, the structural feature specifications, attribute feature specifications and event feature specifications are used to identify component types, and the structural features, attribute features and event features are determined based on the structural feature specifications, attribute feature specifications and event feature specifications. Therefore, there may be a correspondence between the structural features, attribute features and event features and the component types. Based on at least one of the structural features, attribute features and event features and the above correspondence, the component type of the custom component can be determined.

[0075] Taking custom components including graphic components, form components, button components and list components as examples, the correspondence between component types and structural characteristics, attribute characteristics and event characteristics is introduced in detail.

[0076] The structural feature specification mainly contains language and framework specific structural indicators. In front-end programming languages ​​​​(such as TypeScript), custom components are often implemented through class definitions. This specification defines how to find specific class declaration nodes or module export nodes in the AST and process these feature-specific codes. The correspondence between structural features and component types can be shown in Table 2 below:

[0077] Table 2

[0078]

[0079]

[0080] Attributes are one of the key factors to distinguish different component types. By designing corresponding specifications for attributes and event processing features, custom components can be further accurately distinguished. The corresponding relationship between attribute features, event features and component types can be shown in Table 3 below:

[0081] Table 3

[0082]

[0083]

[0084] In addition, all types of custom components are divided into interactive components and non-interactive components according to whether they are bound to interactive events. Interactive components can have event features as shown in Table 4 below:

[0085] Table 4

[0086]

[0087] It should be noted that the above-mentioned graphic components, form components, button components and list components may be interactive components or not, and are not limited here. In addition, since button components are usually used for interaction, if a component is an interactive component, it is more likely to be a button component by further distinguishing the component.

[0088] Based on this, in order to ensure the accuracy of the component type, in some embodiments, the above S320 may specifically include:

[0089] Searching for keyword codes corresponding to target features in target source code data;

[0090] The component type of the custom component is determined based on the correspondence between the keyword code and the component type.

[0091] Here, the keyword code may include the relevant codes in the "Structural Features" column of Table 2, the "Attribute Features or Event Features" column of Table 3, and the "Feature Specifications" and "Supplementary Notes" columns of Table 4. The correspondence between the keyword code and the component type may be as shown in Tables 2, 3, and 4 above.

[0092] A schematic diagram of determining a component type based on a keyword code provided in an embodiment of the present application can be as follows: Figure 4 As shown. Figure 4In the example, the operation feedback component is the button component.

[0093] To give some specific examples, for example, if the target source code data includes interactive tags <button>, and the label belongs to the structural characteristics of button-type components, so it can be determined that the component is a button-type component in the interactive component set.

[0094] For another example, if the target source code data does not have an interactive feature tag, but has an onClick event, or the event is registered for the corresponding component through js code, it can be determined that the component is an interactive component. If the tag has the event feature of a button component, it can be determined that the component is a button component in the interactive component set.

[0095] For another example, if the target source data includes a display tag , and the tag belongs to the structural characteristics of the graphic component, so it can be determined that the component is the graphic component in the display component set.

[0096] The embodiment of the present application determines the component type of the custom component according to the correspondence between the keyword code and the component type, thereby ensuring the accuracy of the component type.

[0097] In addition, there may be multiple keyword codes in the target source code data. Multiple keyword codes may correspond to the same component type or different component types. Based on this, in order to accurately determine the component type of the custom component when there are multiple keyword codes, in some embodiments, the component type of the custom component is determined based on the correspondence between the keyword code and the component type, which may specifically include:

[0098] Determine, according to the correspondence between the keyword code and the component type, the first component type corresponding to each of the plurality of keyword codes;

[0099] A component type of the custom component is determined based on the plurality of first component types.

[0100] Here, multiple first component types may be the same or different. If multiple first component types are the same, the first component type can be determined as the component type of the custom component. If multiple first component types are the same, the proportional relationship between the multiple first component types can be determined to determine the component type of the custom component. For example, multiple keyword codes correspond to two first component types, one of which is a button-type component, accounting for 80%, and the other first component type is a graphic component, accounting for 20%, then the component type of the custom component can be determined as a button-type component.

[0101] The embodiment of the present application determines the component type of the custom component based on the first component types respectively corresponding to multiple keyword codes, so that the component type of the custom component can be accurately determined when there are multiple keyword codes.

[0102] On this basis, a schematic diagram of determining the component type of a custom component based on a structural feature specification, an attribute feature specification, and an event feature specification provided in an embodiment of the present application can be as follows: Figure 5 As shown. Figure 5 In the second half, it can be indicated that when there are multiple keyword codes, the component type of the custom component is jointly determined according to the first component types respectively corresponding to the multiple keyword codes.

[0103] In some embodiments, in S330, the custom view template may be a view template of a custom component that is pre-customized and assembled in accordance with the component library specification in terms of structure and function, and describes the conversion method from the target source code data to the custom component. That is, the custom view template may be a view template that conforms to the component library specification standard. The custom view template may be entered into the custom component material library of the component library so as to be used in the visualization process of the custom component.

[0104] In addition, there can be a one-to-one correspondence between custom view templates and component types. Custom view templates can include general class templates, layout class templates, input class templates, and display class templates. Among them, general class templates can include button class templates, graphic class templates, etc.; layout class templates can include Flex layout container class templates, multi-layer nested container class templates, etc.; input class templates can include form templates, input box templates, etc.; display class templates can include card class templates, list class templates, etc.

[0105] In this way, after the component type is determined, the custom view template corresponding to the component type can be determined according to the corresponding relationship between the component type and the custom view template.

[0106] In addition, a custom component may include one custom subcomponent or multiple custom subcomponents, which is not limited here. If a custom component includes multiple custom subcomponents, the multiple custom subcomponents may correspond to one subcomponent type or multiple subcomponent types. If multiple custom subcomponents correspond to multiple subcomponent types, the component type of the custom component may include the above multiple subcomponent types.

[0107] As an example, if a custom component includes multiple custom sub-components, the target source code data may include multiple target sub-source code data. As described above, the target source code data may exist in the form of AST, and therefore, the target sub-source code data corresponding to the multiple custom sub-components may be distinguished by the structure of AST. The sub-component type of the custom sub-component may be determined according to the target features of the target sub-source code data in the same manner as determining the component type of the custom component according to the target features of the target source code data.

[0108] Based on this, in order to improve the matching degree between the custom view template and the target source code file, and thus improve the rendering effect of the subsequent custom component, in some embodiments, the above S330 may specifically include:

[0109] Determine the custom sub-view templates corresponding to the multiple custom sub-components respectively according to the corresponding relationship between the sub-component type and the custom sub-view template;

[0110] Determines a custom view template based on multiple custom subview templates.

[0111] Here, the subcomponent type and the component type can be the same. That is, the subcomponent type can include button components, graphic components, form components, list components, etc. In addition, by splicing multiple custom subview templates, multiple custom subview templates can be combined into one custom view template. For example, if multiple custom subcomponents include button components and graphic components, the custom view template can include button templates and graphic templates.

[0112] As an example, the low-code tool may include a template compilation module. After determining multiple sub-component types, the low-code tool may match custom sub-view templates corresponding to the multiple sub-component types in the custom component material library, and splice and combine the multiple custom sub-view templates into one custom view template.

[0113] In this way, by determining a custom view template based on a plurality of custom sub-view templates, the matching degree between the custom view template and the target source code file can be improved, thereby improving the rendering effect of subsequent custom components.

[0114] In some embodiments, in S340, the parameter extraction methods corresponding to different component types may be different. For example, for graphic components, the focus can be on parsing the style code in the target source code data to determine the parameter information related to the style code. For button components, the focus can be on parsing the event and interaction code in the target source code data to determine the parameter information related to the event and interaction code. For list components, the focus can be on parsing the relevant code of Layout drawing and component life cycle in the target source code data to obtain the parameter information related to the relevant code of Layout drawing and component life cycle. For form components, the focus can be on parsing the code of function management and data status classes to obtain the parameter information related to the code of function management and data status classes.

[0115] Based on this, in order to ensure that the parameter information can represent the complete structure and function of the custom component, thereby improving the subsequent rendering effect of the custom component, in some embodiments, the above S340 may specifically include:

[0116] Perform general analysis on the target source code data to determine the basic properties of the custom component;

[0117] Extracting first parameter information corresponding to the basic attribute from the target source code data;

[0118] Perform proprietary parsing of target source code data based on component type to determine target attributes of custom components;

[0119] Extracting second parameter information corresponding to the target attribute from the target source code data;

[0120] Parameter information of the custom component is determined according to the first parameter information and the second parameter information.

[0121] Here, general analysis refers to the analysis and splitting of the basic properties common to components. General analysis can include Props analysis, lifecycle analysis, hierarchy analysis, and event analysis. As shown in Table 5, general analysis can include the following:

[0122] Table 5

[0123]

[0124]

[0125] As an example, the basic properties of the custom component can be determined by matching the keywords in the last column of Table 5. The first parameter information can be obtained by extracting parameter information related to the basic properties in the target source code data.

[0126] In addition, proprietary analysis refers to special analysis based on the characteristics of the component. As shown in Table 6, the proprietary analysis corresponding to different component types may include the following:

[0127] Table 6

[0128]

[0129] As an example, the target attribute of the custom component can be determined by matching the keywords in the last column of Table 6. The second parameter information can be obtained by extracting parameter information related to the target attribute in the target source code data.

[0130] As an example, a low-code tool may include a type parsing module, which performs general and proprietary parsing on the target source code data based on the component type, and can output parameter information representing the complete structure and function of the custom component, thereby improving the subsequent rendering effect of the custom component.

[0131] Based on this, in order to obtain the parameter information of the custom component, in some embodiments, before the above S340, the following steps may also be included:

[0132] Generate an abstract syntax tree AST corresponding to the target source code data;

[0133] Use the lexical analyzer to break down the AST into multiple grammatical fragments;

[0134] The syntax analyzer is used to load and compile multiple syntax fragments to obtain multiple semantic data.

[0135] Based on this, the above S340 may specifically include:

[0136] Based on the component type, parameters of multiple semantic data are extracted to obtain parameter information of the custom component.

[0137] Here, after the low-code tool generates an AST corresponding to the target source code data, it can pass the AST into the type parsing module. The type parsing module can first perform semantic / structural analysis on the AST and use a lexical analyzer (Lexer) to decompose the AST into multiple grammatical fragments. Afterwards, the multiple grammatical fragments can be loaded and compiled by the grammatical analyzer (Parser) and assembled into multiple semantic data including processing instructions, interpolation expressions, etc. Among them, semantic data can be an abbreviation for grammatical compilation data. Semantic data is compiled data that can be recognized by low-code tools.

[0138] In this way, by performing parameter extraction on multiple semantic data based on component type, parameter information of a custom component can be obtained.

[0139] In addition, a custom component may include multiple subcomponents, and the multiple subcomponents may include custom subcomponents and component library subcomponents. Therefore, the parameter information may include custom subparameter information corresponding to the custom subcomponent and built-in parameter information corresponding to the component library subcomponent. In addition, multiple semantic data may correspond to multiple subcomponents. The multiple semantic data may include semantic data corresponding to the custom subcomponent and semantic data corresponding to the component library subcomponent.

[0140] Based on this, in order to ensure the accuracy of parameter information and thus improve the subsequent rendering effect of custom components, in some embodiments, the above-mentioned parameter extraction of multiple semantic data based on component type to obtain parameter information of custom components may specifically include:

[0141] Based on the component type, the semantic data corresponding to each sub-component is parsed to determine the sub-component's structural information and sub-parameter information;

[0142] In the case where any one of the structure information and the sub-parameter information does not satisfy the component library component condition, the sub-component is determined as a custom sub-component, and the sub-parameter information is determined as custom sub-parameter information;

[0143] When both the structural information and the sub-parameter information satisfy the component library component conditions, the sub-component is determined as a component library sub-component, and the sub-parameter information is determined as built-in component parameter information.

[0144] Here, if the custom component includes multiple sub-components, the AST may include source code data corresponding to the multiple sub-components. By parsing the structure of the AST, the source code data corresponding to the multiple sub-components can be distinguished, and then the semantic data corresponding to the multiple sub-components can be determined. By parsing the semantic data corresponding to the sub-components, the structural information and sub-parameter information of the sub-components can be determined. If any one of the structural information and the sub-parameter information is inconsistent with the component library specification, the sub-component can be determined as a custom sub-component, and the sub-parameter information can be determined as custom sub-parameter information. Conversely, if both the structural information and the sub-parameter information meet the component library specification, the sub-component can be determined as a component library sub-component, and the sub-parameter information can be determined as built-in component parameter information.

[0145] In this way, by distinguishing between custom sub-parameter information and built-in component parameter information, the accuracy of the parameter information can be guaranteed, thereby improving the subsequent rendering effect of the custom component.

[0146] A schematic diagram of determining parameter information of a custom component based on a type parsing module provided in an embodiment of the present application can be as follows: Figure 6 As shown. Figure 6 In the component library, the type parser can be used to determine whether the structure information and sub-parameter information meet the component library component conditions.

[0147] In some embodiments, in S350, after the custom view template and parameter information are determined, the custom view template and parameter information can be rendered by the rendering engine in the low-code tool to obtain and display the custom component.

[0148] Based on this, in order to ensure the rendering effect, in some embodiments, the above S350 may specifically include:

[0149] Fill the parameter information into the corresponding position of the custom view template to obtain the object to be rendered;

[0150] Render the object to be rendered, get and display the custom component.

[0151] Here, the custom view template may include fill positions corresponding to keywords in the general parsing and the proprietary parsing. By filling the parameter information corresponding to the keyword into the corresponding position of the custom view template, the object to be rendered (i.e., the DSL instance) can be obtained. By rendering the object to be rendered, the custom component can be obtained and displayed.

[0152] In addition, as can be seen from the above description, the parameter information may include the custom sub-parameter information corresponding to the custom sub-component and the built-in component parameter information corresponding to the component library sub-component. Therefore, in order to ensure the rendering effect, in some embodiments, the above S350 may specifically include:

[0153] Render the custom view template and custom sub-parameter information to obtain and display the custom sub-component;

[0154] Render the built-in component parameters and their corresponding built-in view templates to obtain and display the component library subcomponents;

[0155] Identify custom components based on custom subcomponents and component library subcomponents.

[0156] Here, the custom subview template may include fill positions corresponding to keywords in the general parsing and the proprietary parsing. By filling the custom subparameter information corresponding to the keyword into the corresponding position of the custom subview template, the object to be rendered (i.e., DSL instance) can be obtained. By rendering the object to be rendered, the custom subcomponent can be obtained and displayed.

[0157] In addition, the component library may also include a built-in component material library. The built-in view template may be stored in the built-in component material library. The process of rendering the built-in component parameters and their corresponding built-in view templates may refer to the prior art and will not be described in detail here.

[0158] The schematic diagram of converting the AST of target source code data to a visual custom component provided by the embodiment of the present application can be as follows: Figure 7 shown.

[0159] In addition, since parameter information is obtained through Props parsing, lifecycle parsing, hierarchy parsing, event parsing, and proprietary parsing corresponding to component types, parameter information can correspond to multiple parameter types. Among them, multiple parameter types can include period parameters, state parameters, function parameters, style parameters, event parameters, etc.

[0160] In actual situations, users often focus on different types of components. For example, for display components, users may be more concerned about the style of the component. Therefore, giving priority to rendering the style of the component can more easily meet user needs.

[0161] Based on this, in order to improve the user's visual experience, in some embodiments, the above S350 may specifically include:

[0162] Determine the rendering order of multiple parameter types based on component type;

[0163] Based on the rendering order of multiple parameter types, the custom view template and parameter information are rendered to obtain and display the custom component.

[0164] Here, different component types may correspond to different preset rendering strategies. The preset rendering strategy may specify the rendering order of multiple parameter types. The corresponding relationship between a component type and a preset rendering strategy provided in an embodiment of the present application may be shown in Table 7.

[0165] Table 7

[0166]

[0167]

[0168] As an example, a low-code tool may include a custom priority renderer. After determining the custom view template and parameter information (or determining the object to be rendered), the custom priority renderer may first load a preset rendering strategy corresponding to the component type, and then render the custom component based on the preset rendering strategy. A schematic diagram of rendering a custom component based on a preset rendering strategy may be as follows: Figure 8 shown.

[0169] like Figure 8 As shown, rendering a custom component based on a preset rendering strategy may include the following steps:

[0170] 1) After the rendering process generates the custom component DSL (i.e., the object to be rendered), the custom priority renderer will identify the preset rendering strategy generated based on the component type of the custom component;

[0171] 2) The rendering strategy loading module in the custom priority renderer will load the preset rendering strategy of the custom component DSL and adjust the priority of the custom rendering queue according to the feature anchor point; wherein the feature anchor point can represent and express the key content of the component composition and behavior, and is determined based on the values ​​of the five dimensions of style, state, function, cycle, and event in the custom component type data;

[0172] 3) The custom component DSL is loaded into the renderer. When rendering starts, the rendering queue loads the rendering according to the preset priority. Different queues will send the parsed content to the rendering process in sequence to achieve differentiated drawing display in the view layer.

[0173] Through the above steps, the custom component achieves the effect of accelerated rendering based on the preset rendering strategy, achieving the same performance as the component library component.

[0174] In this way, the embodiment of the present application can greatly improve the rendering efficiency of optimized custom components on the visual operation page by distinguishing the preset rendering strategies of different types of components, so that the original component rendering logic can be updated and displayed in a targeted manner according to differentiated demands, thereby improving the user's visual experience.

[0175] On this basis, in order to further enhance the user's visual experience, in some embodiments, after the above S350, the method may further include:

[0176] Receive user input for updating custom components;

[0177] In response to the update input, determining updated target parameter information and a plurality of target parameter types corresponding to the target parameter information;

[0178] Determine the rendering order of multiple target parameter types based on component type;

[0179] Updates and renders custom components based on the rendering order of multiple target parameter types.

[0180] Here, the update input may be the editing input of the user on the custom component in the visual interface. The update input may include, for example, the interactive event of changing a button, the display style of a picture, etc. In addition, the target parameter information may be the parameter information corresponding to the update input. Continuing with the above example, the target parameter information may include, for example, event information and style information. In addition, the target parameter type may include periodic parameters, state parameters, function parameters, style parameters, event parameters, etc.

[0181] As an example, after the custom component is displayed in the visual interface, the user can update the custom component. The process of updating and rendering the custom component based on the rendering order of multiple target parameter types can be referred to the above process of rendering the custom view template and parameter information based on the rendering order of multiple parameter types to obtain and display the custom component, which will not be described in detail here.

[0182] The embodiment of the present application can further enhance the user's visual experience by updating and rendering the custom component in response to the update input based on the rendering order of multiple target parameter types.

[0183] Based on the above embodiments, the invention points of this application are as follows:

[0184] 1) If Fig. 9 As shown, this application divides component library components and custom components according to the source code feature structure (codes in the source code that represent specific functions). In addition, component types are divided into four types of components with typical feature structures, namely, form custom components, graphic custom components, button custom components, and list custom components, through custom component feature specifications (including structure feature specifications, attribute feature specifications, and event feature specifications).

[0185] That is, the invention point 1 designs a component definition scheme based on the source code feature structure: through this scheme, the feature structure of the project source code is defined, and the component functions and boundaries are defined according to different feature structures. Finally, according to the corresponding structural feature specifications, the compilation, import and recognition processing of the component are completed.

[0186] 2) If Fig.10 As shown, this application designs a component identification and compilation module based on AST feature structure. This module performs real-time syntax analysis on the project source code AST, analyzes and completes component type annotation according to the component definition specification of the feature structure, determines the predicate-argument structure, and obtains semantic information such as component attributes, behaviors, and objects of action. By analyzing the above syntax, custom components are identified and the corresponding syntax compilation data is output.

[0187] During the real-time compilation (runtime) stage, the source code AST is lexically analyzed to obtain the lexical analysis data of the custom component. This data is used as the input item of the component compilation and parsing module. After type parsing and other steps, a visual template file is generated, and the low-code tool rendering and parsing engine is used to create a custom component visual rendering instance (i.e., the object to be rendered).

[0188] That is, the invention point 2 designs a component identification method based on feature structure AST compilation: through the component compilation identification module, the feature structure of the source code is parsed based on AST to identify the custom component. After the compilation stage is completed, the structural data of the custom component is synchronously processed to generate a template file so as to build an instance in the view layer and complete the visualization operation of the custom component.

[0189] 3) If Fig.11 As shown, in order to improve the rendering performance of custom components in front-end low-code tools, this application designs a preset rendering strategy based on component type.

[0190] By analyzing the different demands of various components in rendering logic, we design the rendering priorities of different categories of components in a targeted manner. Based on the values ​​of the five dimensions of style, state, function, cycle, and event in the custom component type data as feature anchors (which can represent and express the key content of component composition and behavior), we design a "custom priority renderer" to support R&D personnel in loading different rendering strategies for custom components.

[0191] In the custom component parsing process, the component function is first identified and the corresponding strategy is preset in the custom priority renderer. When the component is updated, the preset rendering strategy is read and the view is updated and rendered in the front-end low-code tool.

[0192] That is, Invention Point 3 designs a set of custom component rendering optimization strategies, which presets the rendering priorities of different attributes according to the component type and functional display characteristics. When the component code or configuration is modified, it is processed according to the attribute rendering priority to improve the rendering efficiency of component updates.

[0193] Based on the component rendering method provided in the above embodiment, the present application also provides a specific implementation of a component rendering device. Please refer to the following embodiment.

[0194] like Fig.12 As shown, the rendering device 1200 of the component provided in the embodiment of the present application includes the following modules:

[0195] An acquisition module 1210 is used to acquire target source code data of a custom component in an application;

[0196] A first determination module 1220, configured to determine a component type of a custom component according to a target feature of the target source code data, wherein the target feature includes at least one of a structural feature, an attribute feature, and an event feature;

[0197] The second determination module 1230 is used to determine a custom view template according to the component type, where the custom view template describes a conversion method from target source code data to a custom component;

[0198] The extraction module 1240 is used to extract parameters from the target source code data based on the component type to obtain parameter information of the custom component;

[0199] The first rendering module 1250 is used to render the custom view template and parameter information to obtain and display the custom component.

[0200] The rendering device 1200 of the above components is described in detail below, as shown below:

[0201] In some embodiments, the rendering device 1200 of the component may further include:

[0202] A generation module is used to extract parameters from the target source code data based on the component type to generate an abstract syntax tree AST corresponding to the target source code data before obtaining parameter information of the custom component;

[0203] The disassembly module is used to disassemble the AST into multiple grammar fragments using the lexical analyzer;

[0204] The compiling module is used to load and compile multiple grammar fragments using a grammar analyzer to obtain multiple semantic data.

[0205] Based on this, the extraction module 1240 may specifically include:

[0206] The first extraction submodule is used to extract parameters of multiple semantic data based on component type to obtain parameter information of the custom component.

[0207] In some of the embodiments, the plurality of semantic data corresponds to a plurality of sub-components, the plurality of sub-components include custom sub-components and component library sub-components, and the parameter information includes custom sub-parameter information and built-in component parameter information.

[0208] Based on this, the extraction module 1240 may specifically include:

[0209] The first parsing submodule is used to parse the semantic data corresponding to each subcomponent based on the component type, and determine the structural information and sub-parameter information of the subcomponent;

[0210] A first determination submodule is used to determine the subcomponent as a custom subcomponent and the subparameter information as custom subparameter information when any one of the structure information and the subparameter information does not satisfy the component library component condition;

[0211] The second determination submodule is used to determine the subcomponent as a component library subcomponent and determine the subparameter information as built-in component parameter information when both the structure information and the subparameter information meet the component library component conditions.

[0212] In some embodiments, the first rendering module 1250 may specifically include:

[0213] The first rendering submodule is used to render the custom view template and the custom sub-parameter information, and obtain and display the custom sub-component;

[0214] The second rendering submodule is used to render the built-in component parameters and their corresponding built-in view templates to obtain and display the component library subcomponents;

[0215] The third determination submodule is used to determine the custom component according to the custom subcomponent and the component library subcomponent.

[0216] In some embodiments, there are multiple custom sub-components, and the multiple custom sub-components correspond to multiple sub-component types, and the component type includes multiple sub-component types. Based on this, the second determination module 1230 may specifically include:

[0217] A fourth determination submodule, used to determine the custom subview templates corresponding to the plurality of custom subcomponents respectively according to the correspondence between the subcomponent type and the custom subview template;

[0218] The fifth determining submodule is used to determine a custom view template according to multiple custom sub-view templates.

[0219] In some embodiments, the first determining module 1220 may specifically include:

[0220] A search submodule is used to search for keyword codes corresponding to target features in target source code data;

[0221] The sixth determination submodule is used to determine the component type of the custom component according to the corresponding relationship between the keyword code and the component type.

[0222] In some embodiments, the keyword code is multiple. Based on this, the sixth determination submodule may specifically include:

[0223] A first determining unit, configured to determine first component types corresponding to the plurality of keyword codes respectively according to a correspondence between the keyword codes and the component types;

[0224] The second determining unit is used to determine the component type of the custom component according to the multiple first component types.

[0225] In some embodiments, the extraction module 1240 may specifically include:

[0226] The second parsing submodule is used to perform general parsing on the target source code data to determine the basic properties of the custom component;

[0227] A second extraction submodule, used to extract first parameter information corresponding to the basic attribute from the target source code data;

[0228] The third parsing submodule is used to perform proprietary parsing on the target source code data based on the component type to determine the target attributes of the custom component;

[0229] A third extraction submodule is used to extract second parameter information corresponding to the target attribute from the target source code data;

[0230] The seventh determination submodule is used to determine parameter information of the custom component according to the first parameter information and the second parameter information.

[0231] In some embodiments, the first rendering module 1250 may specifically include:

[0232] The filling submodule is used to fill the parameter information into the corresponding position of the custom view template to obtain the object to be rendered;

[0233] The third rendering submodule is used to render the object to be rendered, obtain and display the custom component.

[0234] In some embodiments, the parameter information corresponds to multiple parameter types. Based on this, the first rendering module 1250 may specifically include:

[0235] An eighth determination submodule, used to determine a rendering order of multiple parameter types according to the component type;

[0236] The fourth rendering submodule is used to render the custom view template and parameter information based on the rendering order of multiple parameter types, and obtain and display the custom component.

[0237] In some embodiments, the rendering device 1200 of the component may include:

[0238] A receiving module, used for receiving a user's update input for the custom component after obtaining and displaying the custom component;

[0239] A third determination module, configured to determine, in response to the update input, the updated target parameter information and a plurality of target parameter types corresponding to the target parameter information;

[0240] A fourth determination module, used to determine a rendering order of multiple target parameter types according to the component type;

[0241] The second rendering module is used to update and render the custom component based on the rendering order of multiple target parameter types.

[0242] In some embodiments, the acquisition module 1210 may specifically include:

[0243] Get submodules, which are used to get source code data of components in the application;

[0244] The ninth determination submodule is used to determine the reference path and basic component features of the component according to the source code data;

[0245] The tenth determination submodule is used to determine the component as a custom component and determine the source code data of the component as target source code data when the reference path does not include the component library address and the basic component characteristics meet preset conditions.

[0246] In the embodiment of the present application, on the one hand, by determining the custom view template according to the component type of the custom component, a conversion method from the target source code data to the custom component can be provided for the visual display of the custom component; on the other hand, by extracting parameters from the target source code data based on the component type, the parameter information of the custom component can be obtained, which can provide data support for the visual display of the custom component. In this way, by rendering the custom view template and parameter information, the custom component is obtained and displayed, and the automation of the visual display of the custom component can be realized, which saves labor costs and thus saves the development costs of the application.

[0247] Based on the component rendering method provided in the above embodiment, the embodiment of the present application also provides a specific implementation of the electronic device. Fig.13 A schematic diagram of an electronic device 1300 provided in an embodiment of the present application is shown.

[0248] The electronic device 1300 may include a processor 1310 and a memory 1320 storing computer program instructions.

[0249] Specifically, the processor 1310 may include a central processing unit (CPU), or an application specific integrated circuit (ASIC), or may be configured to implement one or more integrated circuits of the embodiments of the present application.

[0250] The memory 1320 may include a large capacity memory for data or instructions. By way of example and not limitation, the memory 1320 may include a hard disk drive (HDD), a floppy disk drive, a flash memory, an optical disk, a magneto-optical disk, a magnetic tape, or a universal serial bus (USB) drive or a combination of two or more of these. Where appropriate, the memory 1320 may include a removable or non-removable (or fixed) medium. Where appropriate, the memory 1320 may be inside or outside the electronic device 1300. In a particular embodiment, the memory 1320 is a non-volatile solid-state memory.

[0251] The memory may include a read-only memory (ROM), a random access memory (RAM), a magnetic disk storage medium device, an optical storage medium device, a flash memory device, an electrical, optical or other physical / tangible memory storage device. Thus, typically, the memory includes one or more tangible (non-transitory) computer-readable storage media (e.g., a memory device) encoded with software including computer-executable instructions, and when the software is executed (e.g., by one or more processors), it is operable to perform the operations described with reference to the method according to the first aspect of the present application.

[0252] The processor 1310 reads and executes computer program instructions stored in the memory 1320 to implement any component rendering method in the above embodiments.

[0253] In one example, the electronic device 1300 may further include a communication interface 1330 and a bus 1340. Fig.13 As shown, the processor 1310, the memory 1320, and the communication interface 1330 are connected via a bus 1340 and communicate with each other.

[0254] The communication interface 1330 is mainly used to implement communication between various modules, devices, units and / or equipment in the embodiments of the present application.

[0255] Bus 1340 includes hardware, software or both, and the parts of electronic equipment are coupled to each other. For example, but not limitation, bus may include accelerated graphics port (AGP) or other graphics bus, enhanced industrial standard architecture (EISA) bus, front side bus (FSB), hypertransport (HT) interconnection, industrial standard architecture (ISA) bus, infinite bandwidth interconnection, low pin count (LPC) bus, memory bus, micro channel architecture (MCA) bus, peripheral component interconnection (PCI) bus, PCI-Express (PCI-X) bus, serial advanced technology attachment (SATA) bus, video electronics standard association local (VLB) bus or other suitable bus or two or more of these combinations. In appropriate cases, bus 1340 may include one or more buses. Although the present application embodiment describes and shows a specific bus, the application considers any suitable bus or interconnection.

[0256] Exemplarily, the electronic device 1300 may be a mobile phone, a tablet computer, a laptop computer, a PDA, an in-vehicle electronic device, an ultra-mobile personal computer (UMPC), a netbook, or a personal digital assistant (PDA).

[0257] The electronic device can execute the rendering method of the component in the embodiment of the present application, thereby realizing the combination Figures 3 to 12 A method and apparatus for rendering a component are described.

[0258] In addition, in combination with the component rendering method in the above embodiment, the embodiment of the present application can provide a computer-readable storage medium for implementation. The computer-readable storage medium stores computer program instructions; when the computer program instructions are executed by a processor, any component rendering method in the above embodiment is implemented.

[0259] In combination with the component rendering method in the above embodiment, the present application embodiment can provide a computer program product for implementation. When the instructions in the computer program product are executed by a processor of an electronic device, any component rendering method in the above embodiment is implemented.

[0260] It should be clear that the present application is not limited to the specific configuration and processing described above and shown in the figures. For the sake of simplicity, a detailed description of the known method is omitted here. In the above embodiments, several specific steps are described and shown as examples. However, the method process of the present application is not limited to the specific steps described and shown, and those skilled in the art can make various changes, modifications and additions, or change the order between the steps after understanding the spirit of the present application.

[0261] The functional blocks shown in the above-described block diagram can be implemented as hardware, software, firmware or a combination thereof. When implemented in hardware, it can be, for example, an electronic circuit, an application specific integrated circuit (ASIC), appropriate firmware, a plug-in, a function card, etc. When implemented in software, the elements of the present application are programs or code segments that are used to perform the required tasks. Programs or code segments can be stored in machine-readable media, or transmitted on a transmission medium or a communication link by a data signal carried in a carrier wave. "Machine-readable media" can include any medium capable of storing or transmitting information. Examples of machine-readable media include electronic circuits, semiconductor memory devices, ROM, flash memory, erasable ROM (EROM), floppy disks, CD-ROMs, optical disks, hard disks, optical fiber media, radio frequency (RF) links, etc. Code segments can be downloaded via computer networks such as the Internet, intranets, etc.

[0262] It should also be noted that the exemplary embodiments mentioned in this application describe some methods or systems based on a series of steps or devices. However, this application is not limited to the order of the above steps, that is, the steps can be performed in the order mentioned in the embodiment, or in a different order from the embodiment, or several steps can be performed simultaneously.

[0263] The above reference is according to the method of the embodiment of the present application, the flow chart of the device (system) and the computer program product and / or the block diagram described various aspects of the present application.It should be understood that each square box in the flow chart and / or the block diagram and the combination of each square box in the flow chart and / or the block diagram can be realized by computer program instructions.These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer or other programmable data processing device to produce a machine so that these instructions executed by the processor of the computer or other programmable data processing device enable the realization of the function / action specified in one or more square boxes of the flow chart and / or the block diagram.Such a processor can be but is not limited to a general-purpose processor, a special-purpose processor, a special application processor or a field programmable logic circuit.It can also be understood that each square box in the block diagram and / or the flow chart and the combination of the square boxes in the block diagram and / or the flow chart can also be realized by the dedicated hardware that performs the specified function or action, or can be realized by the combination of dedicated hardware and computer instructions.

[0264] The above is only a specific implementation of the present application. Those skilled in the art can clearly understand that for the convenience and simplicity of description, the specific working processes of the systems, modules and units described above can refer to the corresponding processes in the aforementioned method embodiments, and will not be repeated here. It should be understood that the protection scope of the present application is not limited to this. Any technician familiar with the technical field can easily think of various equivalent modifications or replacements within the technical scope disclosed in this application, and these modifications or replacements should be included in the protection scope of this application.< / button>

Claims

1. A component rendering method, characterized in that: include: Get the target source code data of the custom component in the application; Determining a component type of the custom component according to a target feature of the target source code data, wherein the target feature includes at least one of a structural feature, an attribute feature, and an event feature; Determining a custom view template according to the component type, wherein the custom view template describes a conversion method from the target source code data to the custom component; Based on the component type, extract parameters from the target source code data to obtain parameter information of the custom component; The custom view template and the parameter information are rendered to obtain and display the custom component.

2. The method according to claim 1, characterized in that Before extracting parameters from the target source code data based on the component type to obtain parameter information of the custom component, the method further includes: Generate an abstract syntax tree AST corresponding to the target source code data; Decomposing the AST into multiple grammatical fragments using a lexical analyzer; Using a syntax analyzer to load and compile the multiple syntax fragments to obtain multiple semantic data; The step of extracting parameters from the target source code data based on the component type to obtain parameter information of the custom component includes: Based on the component type, parameters are extracted from the plurality of semantic data to obtain parameter information of the custom component.

3. The method according to claim 2, characterized in that The plurality of semantic data correspond to a plurality of sub-components, the plurality of sub-components include custom sub-components and component library sub-components, and the parameter information includes custom sub-parameter information and built-in component parameter information; The step of extracting parameters from the plurality of semantic data based on the component type to obtain parameter information of the custom component includes: Based on the component type, the semantic data corresponding to each of the subcomponents is parsed to determine the structural information and sub-parameter information of the subcomponent; In the case that any one of the structure information and the sub-parameter information does not satisfy the component library component condition, determining the sub-component as the custom sub-component, and determining the sub-parameter information as the custom sub-parameter information; In the case where both the structure information and the sub-parameter information satisfy the component library component condition, the sub-component is determined as the component library sub-component, and the sub-parameter information is determined as the built-in component parameter information.

4. The method according to claim 3, characterized in that The rendering of the custom view template and the parameter information to obtain and display the custom component includes: Rendering the custom view template and the custom sub-parameter information to obtain and display the custom sub-component; Rendering the built-in component parameters and their corresponding built-in view templates to obtain and display the component library subcomponents; The custom component is determined according to the custom sub-component and the component library sub-component.

5. The method according to claim 3, characterized in that: There are multiple custom sub-components, the multiple custom sub-components correspond to multiple sub-component types, and the component type includes the multiple sub-component types; The step of determining a custom view template according to the component type includes: Determine the custom sub-view templates corresponding to the plurality of custom sub-components respectively according to the correspondence between the sub-component type and the custom sub-view template; The custom view template is determined according to a plurality of the custom sub-view templates.

6. The method according to any one of claims 1 to 5, characterized in that: The step of determining the component type of the custom component according to the target feature of the target source code data includes: Searching for a keyword code corresponding to the target feature in the target source code data; The component type of the custom component is determined according to the correspondence between the keyword code and the component type.

7. The method according to claim 6, characterized in that There are multiple keyword codes, and determining the component type of the custom component according to the correspondence between the keyword codes and the component types includes: Determine, according to the correspondence between the keyword code and the component type, the first component type corresponding to each of the keyword codes; A component type of the custom component is determined based on a plurality of the first component types.

8. The method according to any one of claims 1 to 5, characterized in that: The step of extracting parameters from the target source code data based on the component type to obtain parameter information of the custom component includes: Performing general analysis on the target source code data to determine basic properties of the custom component; Extracting first parameter information corresponding to the basic attribute from the target source code data; Performing proprietary parsing on the target source code data based on the component type to determine target attributes of the custom component; Extracting second parameter information corresponding to the target attribute from the target source code data; Parameter information of the custom component is determined according to the first parameter information and the second parameter information.

9. The method according to any one of claims 1 to 5, characterized in that: The rendering of the custom view template and the parameter information to obtain and display the custom component includes: Fill the parameter information into the corresponding position of the custom view template to obtain the object to be rendered; The object to be rendered is rendered to obtain and display the custom component.

10. The method according to any one of claims 1 to 5, characterized in that: The parameter information corresponds to a plurality of parameter types, and the rendering of the custom view template and the parameter information to obtain and display the custom component includes: Determining a rendering order of the multiple parameter types according to the component type; Based on the rendering order of the multiple parameter types, the custom view template and the parameter information are rendered to obtain and display the custom component.

11. The method according to any one of claims 1 to 5, characterized in that: After obtaining and displaying the custom component, the method further includes: Receiving user input for updating the custom component; In response to the update input, determining updated target parameter information and a plurality of target parameter types corresponding to the target parameter information; Determining, according to the component type, a rendering order of the multiple target parameter types; Based on the rendering order of the multiple target parameter types, the custom component is updated and rendered.

12. The method according to any one of claims 1 to 5, characterized in that: The step of obtaining the target source code data of the custom component in the application includes: Obtaining source code data of components in the application; Determine a reference path and basic component features of the component according to the source code data; When the reference path does not include a component library address and the basic component feature meets a preset condition, the component is determined as the custom component, and the source code data of the component is determined as the target source code data.

13. A component rendering device, characterized in that: The device comprises: The acquisition module is used to obtain the target source code data of the custom components in the application; A first determination module, configured to determine a component type of the custom component according to a target feature of the target source code data, wherein the target feature includes at least one of a structural feature, an attribute feature, and an event feature; A second determination module is used to determine a custom view template according to the component type, wherein the custom view template describes a conversion method from the target source code data to the custom component; An extraction module, used to extract parameters from the target source code data based on the component type to obtain parameter information of the custom component; The first rendering module is used to render the custom view template and the parameter information to obtain and display the custom component.

14. An electronic device, characterized in that: The electronic device comprises: a processor and a memory storing computer program instructions; When the processor executes the computer program instructions, the component rendering method according to any one of claims 1 to 12 is implemented.

15. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer program instructions, and when the computer program instructions are executed by a processor, the component rendering method according to any one of claims 1 to 12 is implemented.

16. A computer program product, characterized in that When the instructions in the computer program product are executed by a processor of an electronic device, the electronic device executes the component rendering method as described in any one of claims 1 to 12.

Images