Rendering method, device and equipment of component, and computer readable storage medium

Abstract

The application discloses a rendering method and device of an assembly, equipment and a computer readable storage medium. The method comprises the following steps: obtaining target source code data of a custom assembly in an application program; determining an assembly type of the custom assembly according to a target feature of the target source code data, wherein the target feature comprises at least one of a structure feature, an attribute feature and an event feature; determining a custom view template according to the assembly type, wherein the custom view template describes a conversion mode from the target source code data to the custom assembly; performing parameter extraction on the target source code data based on the assembly type to obtain parameter information of the custom assembly; and rendering the custom view template and the parameter information to obtain and display the custom assembly. According to the assembly rendering method, the development cost of the application program can be saved.

Description

TECHNICAL FIELD

[0001] The present application belongs to the technical field of application programs, and particularly relates to a component rendering method and device, equipment and a computer readable storage medium. BACKGROUND

[0002] Generally, a low-code tool can be used to quickly build an application based on a visual interface to improve the development efficiency of the application. Currently, the low-code tool can also generate a visual interface by scanning and analyzing project code of the application, so that a user can update the application on the visual interface, thereby expanding the use boundary of the low-code tool.

[0003] With the diversification of business scenarios, the demand for custom components in the application program is increasingly prominent. However, the component library of the current low-code tool mainly covers front-end public components, and the support for custom components is still insufficient. Developers need to realize the visual display of custom components through traditional coding, which increases the development cost of the application program. SUMMARY

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

[0005] In a first aspect, the embodiments of the present application provide a component rendering method, which comprises:

[0006] obtaining target source code data of a custom component in an application program;

[0007] determining a component type of the custom component according to a target feature of the target source code data, the target feature comprising at least one of a structure feature, an attribute feature and an event feature;

[0008] determining a custom view template according to the component type, the custom view template describing a conversion mode from the target source code data to the custom component;

[0009] performing parameter extraction on the target source code data based on the component type to obtain parameter information of the custom component;

[0010] rendering the custom view template and the parameter information to obtain and display the custom component.

[0011] In a second aspect, the embodiments of the present application provide a component rendering device, which comprises:

[0012] an obtaining module configured to obtain target source code data of a custom component in an application program;

[0013] The first determining module is configured to determine a component type of the custom component according to a target feature of the target source code data, the target feature including at least one of a structure feature, an attribute feature, and an event feature.

[0014] The second determining module is configured to determine a custom view template according to the component type, the custom view template describing a conversion manner from the target source code data to the custom component.

[0015] The extracting module is configured to perform parameter extraction on the target source code data based on the component type to obtain parameter information of the custom component.

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

[0017] In a third aspect, an electronic device is provided, which includes a processor and a memory storing computer program instructions.

[0018] The processor implements the method in any possible implementation method of the first aspect when executing the computer program instructions.

[0019] In a fourth aspect, a computer readable storage medium is provided, which stores computer program instructions. The computer program instructions are executed by a processor to implement the method in any possible implementation method of the first aspect.

[0020] In a fifth aspect, a computer program product is provided. Instructions in the computer program product are executed by a processor of an electronic device to cause the electronic device to perform the method in any possible implementation method of the first aspect.

[0021] In the embodiments of the present application, on the one hand, by determining a custom view template according to a component type of a custom component, a conversion manner from target source code data to the custom component can be provided for visual display of the custom component. On the other hand, by performing parameter extraction on the target source code data based on the component type to obtain parameter information of the custom component, data support can be provided for the visual display of the custom component. In this way, by rendering the custom view template and the parameter information to obtain and display the custom component, the automation of visual display of the custom component can be achieved, the human cost is saved, and the development cost of the application program is further saved. BRIEF DESCRIPTION OF DRAWINGS

[0022] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings needed to be used in the embodiments of the present application will be briefly introduced. Those of ordinary skill in the art can further obtain other drawings according to these drawings without any creative effort.

[0023] Figure 1 is a rendering schematic diagram of a component library component provided by the embodiments of the present application;

[0024] Figure 2 is a rendering schematic diagram of a custom component provided by the embodiments of the present application;

[0025] Figure 3 is a flow schematic diagram of a component rendering method provided by the embodiments of the present application;

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

[0027] Figure 5 is a schematic diagram for determining a component type of a custom component based on a structure feature specification, an attribute feature specification and an event feature specification provided by the embodiments of the present application;

[0028] Figure 6 is a schematic diagram for determining parameter information of a custom component based on a type analysis module provided by the embodiments of the present application;

[0029] Figure 7 is a schematic diagram for visualizing a custom component from AST of target source code data provided by the embodiments of the present application;

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

[0031] Figure 9 is a schematic diagram for determining a custom component and a component type provided by the embodiments of the present application;

[0032] Figure 10 is a flow schematic diagram of custom component visualization provided by the embodiments of the present application;

[0033] Figure 11 is a schematic diagram for visualizing rendering based on a preset rendering strategy provided by the embodiments of the present application;

[0034] Figure 12 is a structural schematic diagram of a component rendering device provided by the embodiments of the present application;

[0035] Figure 13 is a structural schematic diagram of an electronic device provided by the embodiments of the present application. DETAILED DESCRIPTION

[0036] In order to make the purposes, technical solutions and advantages of the present application clearer, the following further describes the present application with reference to the accompanying drawings and specific embodiments. It should be understood that the specific embodiments described herein are only intended to explain the present application, but not to limit the present application. The present application can be implemented without some of the specific details by those skilled in the art. The following description of the embodiments is only to provide a better understanding of the present application by showing examples of the present application.

[0037] It should be noted that, in this document, relational terms such as first and second and the like can only be used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply that there is any such actual relationship or order between these entities or operations. Moreover, the terms "comprising", "including", or any other variant thereof are intended to cover non-exclusive inclusion, so that a process, method, article or apparatus that includes a list of elements does not only include those elements, but also includes other elements not explicitly listed, or further includes elements inherent in such process, method, article or apparatus. Without more limitations, an element defined by the statement "comprising" does not exclude the presence of additional identical elements in the process, method, article or apparatus that includes the element.

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

[0039] As described in the background section, with the diversification of business scenarios, the demand for custom components in application programs is increasingly prominent. However, the component library of the current low-code tool mainly covers front-end public components, and the support for custom components is still insufficient. Developers need to implement the visual display of custom components through traditional coding methods, which increases the development cost of application programs.

[0040] In addition, in the process of scanning project code and parsing, custom components often cannot be automatically identified and converted into visual operation components. In order to view the view effect, developers have to manually write view template files, which not only reduces work efficiency, but also increases the possibility of errors.

[0041] The prior art will be described in detail below.

[0042] Currently, the low-code tool in the industry is mainly for product, operation and other non-technical background users, rather than R&D personnel, and has not considered compiling and visualizing operation for self-written components. Therefore, there is currently no technical solution or product that supports visualizing operation by parsing the Abstract Syntax Tree (AST) of a custom component.

[0043] Currently, the process of generating a visual interface corresponding to the project source code through a low-code tool is as shown in Figure 1

[0044] As shown in Figure 1 , the low-code tool generates an Abstract Syntax Tree (AST) of a component library component by scanning and analyzing the source code, matches a Domain-specific language (DSL) template, i.e., a built-in view template, and then constructs a Domain-specific language instance (DSL instance) according to the AST-related parameters to finally render and realize the visual rendering operation of the component library component. However, since the custom component lacks a visual-related view template, it is not possible to create a DSL instance, thereby causing the custom component to be unable to realize visual operation.

[0045] In order to realize the visual rendering of the custom component, the following scheme can be temporarily used for processing:

[0046] As shown in Figure 2 , the R&D personnel manually write a view template for 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 visual operation of the component.

[0047] In the temporary scheme, the R&D personnel need to manually write a view template for 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 scheme, the creation and update of the view template completely depend on the manual operation of the R&D personnel. This not only reduces the development efficiency, but also has the risk of template writing errors and inconsistent standards, increasing the update and maintenance cost of the view template file.

[0049] 2) Poor visual rendering performance of custom components: Compared with the component library components, the custom components have no preloaded template rendering mechanism, and their rendering efficiency is low. This will cause the visual interface to appear lagging when operating, seriously affecting the smoothness of the operation of the developer and the overall development experience.

[0050] ​Therefore, to solve the problems in the prior art, the embodiment of the present application provides a component rendering method, device, equipment, computer readable storage medium and computer program product. The component rendering method can be applied to the scenario of rendering a custom component.

[0051] The component rendering method provided by the embodiment of the present application is introduced below.

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

[0053] S310, target source code data of a custom component in an application program is acquired;

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

[0055] S330, a custom view template is determined according to the component type, and the custom view template describes a conversion mode from the target source code data to the custom component;

[0056] S340, parameter extraction is performed on the target source code data based on the component type, and parameter information of the custom component is obtained;

[0057] S350, the custom view template and the parameter information are rendered, and the custom component is obtained and displayed.

[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, the conversion mode 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 performing parameter extraction on the target source code data based on the component type, the parameter information of the custom component can be obtained to provide data support for the visual display of the custom component. Therefore, by rendering the custom view template and the parameter information, the custom component is obtained and displayed, which can realize the automation of the visual display of the custom component, save the labor cost, and further save the development cost of the application program.

[0059] The specific implementation of each step is introduced below.

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

[0061] As an example, the application program can include component library components and custom components. The target source code data can be the engineering source code data corresponding to the custom components. In addition, the target source code data can be in the form of an Abstract Syntax Tree (AST).

[0062] Since the components in the application program usually 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, S310 can specifically include:

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

[0064] Determining a reference path and basic component features of the components according to the source code data;

[0065] In a case where the reference path does not include a component library address and the basic component features satisfy a preset condition, determining the component as a custom component, and determining the source code data of the component as the target source code data.

[0066] Here, the basic component features can include necessary component features and optional component features. The necessary component features can include features related to the component lifecycle. The component lifecycle can be related to the constructor, didMount, render, etc. in the source code data. In addition, the optional component features can include some style structures and inherited base classes. The basic component features satisfying the preset condition can include the source code data including the necessary component features, and the optional component features satisfying the preset feature condition.

[0067] In addition, as described above, the custom components can be components that are not in the component library, therefore, if the reference path of the component in the source code data is 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 can be a custom component. On this basis, if the source code data includes the constructor, didMount, render, etc. related code, and the style structure satisfies the preset style structure, the inherited base class is the preset base class, it can be determined that the component is determined as a custom component, and the source code data of the component is determined as the target source code data.

[0068] The embodiment of the 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 type of the custom component can include a general class component, a layout class component, an input class component, and a display class component. The general class component can include a button class component, a text-image class component, etc.; the layout class component can include a Flex layout container class component, a multi-layer nested container class component, etc.; the input class component can include a form component, an input box component, etc.; and the display class component can include a card (Card) class component, a list (List) class component, etc.

[0070] In addition, the target feature can include at least one of a structure feature, an attribute feature, and an event feature. The structure feature can be a feature determined based on a pre-defined structure feature specification; the attribute feature can be a feature determined based on a pre-defined attribute feature specification; and the event feature can be a feature determined based on a pre-defined event feature specification. The definitions of the structure feature specification, the attribute feature specification, and the event feature specification can be as shown in Table 1:

[0071] Table 1

[0072]

[0073]

[0074] As can be seen from Table 1, the structure feature specification, the attribute feature specification, and the event feature specification are used to identify the component type, and the structure feature, the attribute feature, and the event feature are determined based on the structure feature specification, the attribute feature specification, and the event feature specification. Therefore, there can be a corresponding relationship between the structure feature, the attribute feature, and the event feature and the component type, and based on at least one of the structure feature, the attribute feature, and the event feature and the above corresponding relationship, the component type of the custom component can be determined.

[0075] Taking the custom component including a text-image class component, a form class component, a button class component, and a list class component as an example, the corresponding relationship between the component type and the structure feature, the attribute feature, and the event feature is described in detail.

[0076] The structure feature specification mainly includes language and framework specific structure indicators. In a front-end programming language (such as TypeScript), a custom component is often implemented through class definition. This specification defines how to find specific class declaration nodes or module export nodes in the AST, and processes the code that is clear about these features. The corresponding relationship between the structure feature and the component type can be as shown in Table 2:

[0077] Table 2

[0078]

[0079]

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

[0081] Table 3

[0082]

[0083]

[0084] In addition, for all types of self-defined components, according to whether an interactive event is bound, the components are divided into interactive components and non-interactive components, and the interactive components can have the event features shown in Table 4 as follows:

[0085] Table 4

[0086]

[0087] It should be noted that the above image-text components, form components, button components and list components can be interactive components or can not be interactive components, which are not limited here. In addition, since the button component is usually used for interaction, if a component is an interactive component, the possibility of the component being a button component is greater through further distinguishing the component.

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

[0089] finding a keyword code corresponding to the target feature in the target source code data;

[0090] determining the component type of the self-defined component according to the corresponding relationship between the keyword code and the component type.

[0091] Here, the keyword code can include the related codes in the "structure feature" column of Table 2, the "attribute feature or event feature" column of Table 3, and the "feature specification" and "supplementary explanation" columns of Table 4. The corresponding relationship between the keyword code and the component type can be shown in Table 2, Table 3 and Table 4 as described above.

[0092] The schematic diagram provided by the embodiment of the present application for determining the component type based on the keyword code can be as shown in Figure 4 Figure 4 ​In some embodiments, the operation feedback component is a button component.

[0093] For example, if the target source data includes an interactive tag <button>and the label belongs to the structural feature of the button type component, and thus 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 type feature label, but has an onClick event, or the corresponding component is registered for an event through js code, and thus it can be determined that the component is an interactive type component. If the label has an event feature of a button type component, it can be determined that the component is a button type component in the interactive component set.

[0095] For another example, if the target source code data includes a display label and the label belongs to the structural feature of the image-text type component, and thus it can be determined that the component is an image-text type component in the display component set.

[0096] The embodiment of the application can ensure the accuracy of the component type by determining the component type of the custom component according to the correspondence between the keyword code and the component type.

[0097] In addition, the keyword code in the target source code data can be multiple. Multiple keyword codes can correspond to the same component type, or can correspond to different component types. Based on this, in the case where there are multiple keyword codes, in order to accurately determine the component type of the custom component, in some embodiments, the above determination of the component type of the custom component according to the correspondence between the keyword code and the component type can specifically include:

[0098] determining a first component type corresponding to each of the multiple keyword codes according to the correspondence between the keyword code and the component type;

[0099] determining the component type of the custom component according to the multiple first component types.

[0100] Here, the multiple first component types can be the same or different. If the multiple first component types are the same, the first component type can be determined as the component type of the custom component. If the 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, the multiple keyword codes correspond to two first component types, one of which is a button type component and accounts for 80%, and the other of which is an image-text type component and accounts for 20%, and thus the component type of the custom component can be determined as the button type component.

[0101] The embodiment of the application can accurately determine the component type of the custom component in the case where there are multiple keyword codes by determining the component type of the custom component according to the first component types corresponding to the multiple keyword codes.

[0102] On this basis, the schematic diagram for determining the component type of the custom component based on the structure feature specification, the attribute feature specification and the event feature specification can be as shown in Figure 5 In the Figure 5 , the latter part can represent that in the case of multiple keyword codes, the component type of the custom component is determined according to the first component types corresponding to the multiple keyword codes respectively.

[0103] In some embodiments, in S330, the custom view template can be a view template of the custom component assembled and generated according to the component library specification in structure and function, which describes the conversion mode from the target source code data to the custom component. That is, the custom view template can be a view template conforming to the component library specification standard. The custom view template can be entered into the custom component material library of the component library for use in the visualization process of the custom component.

[0104] In addition, there can be a one-to-one correspondence between the custom view template and the component type. The custom view template can include a general class template, a layout class template, an input class template and a display class template. Among them, the general class template can include a button class template, a picture-text class template, etc.; the layout class template can include a Flex layout container class template, a multi-layer nested container class template, etc.; the input class template can include a form template, an input box template, etc.; and the display class template can include a card (Card) class template, a list (List) class template, etc.

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

[0106] In addition, the custom component can include one custom sub-component or multiple custom sub-components, which are not limited here. If the custom component includes multiple custom sub-components, the multiple custom sub-components can correspond to one sub-component type or multiple sub-component types. If the multiple custom sub-components correspond to multiple sub-component types, the component type of the custom component can include the multiple sub-component types.

[0107] As an example, if the custom component includes multiple custom sub-components, the target source code data can include multiple target sub-source code data. As described above, the target source code data can exist in the form of AST, so the multiple target sub-source code data corresponding to the multiple custom sub-components can be distinguished by the structure of the AST. In the same way as determining the component type of the custom component according to the target features of the target source code data, the sub-component types of the custom sub-components can be determined according to the target features of the target sub-source code data.

[0108] To improve the matching degree between the custom view template and the target source code file, and further improve the rendering effect of the subsequent custom component, in some embodiments, S330 can specifically include the following steps:

[0109] According to the correspondence between the sub-component type and the custom sub-view template, determine the custom sub-view template corresponding to each of the plurality of custom sub-components;

[0110] Determine the custom view template according to the plurality of custom sub-view templates.

[0111] Here, the sub-component type can be the same as the component type. That is, the sub-component type can include button type components, image-text type components, form type components, list type components, and the like. In addition, by splicing the plurality of custom sub-view templates, the plurality of custom sub-view templates can be combined into one custom view template. For example, if the plurality of custom sub-components include button type components and image-text type components, the custom view template can include button type templates and image-text type templates.

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

[0113] In this way, by determining the custom view template according to the plurality of custom sub-view templates, the matching degree between the custom view template and the target source code file can be improved, and further the rendering effect of the subsequent custom component can be improved.

[0114] In some embodiments, in S340, the parameter extraction manner corresponding to different component types can be different. For example, for image-text type components, the style code in the target source code data can be focused on for analysis to determine parameter information related to the style code. For button type components, the event and interaction type code in the target source code data can be focused on for analysis to determine parameter information related to the event and interaction type code. For list type components, the code related to the drawing of Layout and the component lifecycle in the target source code data can be focused on for analysis to obtain parameter information related to the code. For form type components, the function management and data state type code can be focused on for analysis to obtain parameter information related to the code.

[0115] To ensure that the parameter information can represent the complete structure and function of the custom component, and further improve the rendering effect of the subsequent custom component, in some embodiments, S340 can specifically include the following steps:

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

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

[0118] performing special analysis on the target source code data based on the component type to determine target attributes of the custom component;

[0119] extracting second parameter information corresponding to the target attributes from the target source code data;

[0120] determining parameter information of the custom component according to the first parameter information and the second parameter information.

[0121] Here, the general analysis refers to analyzing and splitting the basic attributes common to the component. The general analysis can include Props analysis, life cycle analysis, hierarchy analysis, and Event analysis. As shown in Table 5, the general analysis can include the following contents:

[0122] Table 5

[0123]

[0124]

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

[0126] In addition, the special analysis refers to special analysis with emphasis according to the characteristics of the component. As shown in Table 6, the special analysis corresponding to different component types can include the following contents:

[0127] Table 6

[0128]

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

[0130] As an example, the low-code tool can include a type analysis module. By using the type analysis module to perform general analysis and special analysis on the target source code data based on the component type, parameter information representing the complete structure and function of the custom component can be output, thereby improving the subsequent rendering effect of the custom component.

[0131] Based on this, in order to realize obtaining the parameter information of the custom component, in some embodiments, before the above S340, it can also include:

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

[0133] using a lexical analyzer to disassemble the AST into multiple syntax fragments;

[0134] using a syntax analyzer to load and compile the multiple syntax fragments to obtain multiple semantic data.

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

[0136] based on the component type, parameter extraction is performed on the multiple semantic data to obtain the parameter information of the custom component.

[0137] Here, after the low-code tool generates the AST corresponding to the target source code data, the AST can be passed into the type resolution module. The type resolution module can first perform semantic / structural analysis on the AST, and use a lexical analyzer (Lexer) to disassemble the AST into multiple syntax fragments. Then, the multiple syntax fragments can be loaded and compiled by a syntax analyzer (Parser) to assemble multiple semantic data including processing instructions, interpolation expressions, etc. Among them, semantic data can be a short form of syntax compilation data. Semantic data is compilation data that can be recognized by a low-code tool.

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

[0139] In addition, the custom component can include multiple sub-components, and the multiple sub-components can include custom sub-components and component library sub-components. Therefore, the parameter information can include custom sub-parameter information corresponding to the custom sub-components and built-in parameter information corresponding to the component library sub-components. In addition, the multiple semantic data can correspond to the multiple sub-components. The multiple semantic data can include semantic data corresponding to the custom sub-components and semantic data corresponding to the component library sub-components.

[0140] Based on this, in order to ensure the accuracy of the parameter information and further improve the rendering effect of the custom component, in some embodiments, the above based on the component type, parameter extraction is performed on the multiple semantic data to obtain the parameter information of the custom component, specifically can include:

[0141] based on the component type, the semantic data corresponding to each sub-component is parsed to determine the structure information and sub-parameter information of the sub-component;

[0142] In a 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] In a case where both the structure information and the sub-parameter information satisfy the component library component condition, 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 can include source code data corresponding to the multiple sub-components respectively. By parsing the structure of the AST, the source code data corresponding to the multiple sub-components respectively can be distinguished, and then semantic data corresponding to the multiple sub-components respectively can be determined. By parsing the semantic data corresponding to the sub-component, the structure information and the sub-parameter information of the sub-component can be determined. If any one of the structure 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 structure information and the sub-parameter information satisfy 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 the custom sub-parameter information and the built-in component parameter information, the accuracy of the parameter information can be ensured, and then the rendering effect of the custom component in the subsequent stage can be improved.

[0146] An example of a schematic diagram for determining parameter information of a custom component based on a type analysis module provided by an embodiment of the present application can be as shown in Figure 6 Figure 6 In the example, the type parser can be used to determine whether the structure information and the sub-parameter information satisfy the component library component condition.

[0147] In some embodiments, after the custom view template and the parameter information are determined in S350, the custom view template and the parameter information can be rendered by a 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, S350 can specifically include:

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

[0150] rendering the to-be-rendered object to obtain and display the custom component.

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

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

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

[0154] rendering the built-in component parameter and the built-in view template corresponding thereto to obtain and display the component library sub-component;

[0155] determining the custom component according to the custom sub-component and the component library sub-component.

[0156] Here, the custom sub-view template can include filling positions corresponding to the keywords in the general parsing and the special parsing. By filling the custom sub-parameter information corresponding to the keywords into the corresponding positions of the custom sub-view template, a to-be-rendered object (i.e., a DSL instance) can be obtained. By rendering the to-be-rendered object, the custom sub-component can be obtained and displayed.

[0157] In addition, the component library can further include a built-in component material library. The built-in view template can be stored in the built-in component material library. The process of rendering the built-in component parameter and the built-in view template corresponding thereto can refer to the prior art, and will not be described in detail here.

[0158] The schematic diagram of the application embodiment from the AST of the target source code data to the visual custom component can be as shown in Figure 7 .

[0159] In addition, since the parameter information is obtained through the Props parsing, the life cycle parsing, the level parsing, the Event parsing, and the special parsing corresponding to the component type, the parameter information can correspond to multiple parameter types. The multiple parameter types can include periodic parameters, state parameters, function parameters, style parameters, event parameters, and the like.

[0160] In actual situations, for different component types, the user's focus on the component is often different. For example, for a display component, the user can be more concerned about the style of the component, and therefore, the style of the component is rendered preferentially, which can more easily meet the user's demand.

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

[0162] determining the rendering order of the plurality of parameter types according to the component type;

[0163] rendering the custom view template and the parameter information based on the rendering order of the plurality of parameter types, obtaining and displaying the custom component.

[0164] Here, different component types can correspond to different preset rendering strategies. The preset rendering strategy can specify the rendering order of the plurality of parameter types. The correspondence between a component type and a preset rendering strategy provided by the embodiments of the application can be as shown in Table 7.

[0165] Table 7

[0166]

[0167]

[0168] As an example, the low-code tool can include a custom priority renderer. After determining the custom view template and the parameter information (or determining the object to be rendered), the custom priority renderer can be used to first load the 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 the custom component based on the preset rendering strategy can be as shown in Figure 8 .

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

[0170] 1) After generating the custom component DSL (i.e., the object to be rendered) in the rendering process, the custom priority renderer identifies 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 loads the preset rendering strategy of the custom component DSL, and adjusts the priority of the custom rendering queue according to the feature anchor point. The feature anchor point can represent and indicate the key content of the component composition and behavior, and is determined according to the values of the five dimensions of style, state, function, period, and event in the custom component type data;

[0172] 3) The custom component DSL is loaded into the renderer, and when the 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 order, and realize differentiated drawing and display in the view layer.

[0173] Through the above steps, the custom component realizes the effect of accelerating rendering according to the preset rendering strategy, and achieves the same performance as the component library component.

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

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

[0176] receiving an update input of the custom component by the user;

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

[0178] determining a rendering order of the plurality of target parameter types according to the component type;

[0179] updating and rendering the custom component based on the rendering order of the plurality of target parameter types.

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

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

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

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

[0184] 1) as Figure 9 As shown, the application divides the component library components and custom components according to the source code feature structure (the code in the source code representing a specific function). Moreover, the component types are divided through the custom component feature specification (including the structural feature specification, the attribute feature specification, and the event feature specification), which are divided into four types of components with typical feature structures, namely, the form class custom component, the picture-text class custom component, the button class custom component, and the list class custom component.

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

[0186] 2) As shown in Figure 10 , the application designs a component recognition and compilation module based on the AST feature structure. The module performs real-time syntax analysis on the project source code AST, analyzes the component type label according to the component definition specification of the feature structure, determines the predicate-argument structure, and obtains the semantic information of the component, such as the attribute, behavior, and action object. Through the analysis of the above syntax, the custom component is recognized and the corresponding syntax compilation data is output.

[0187] In the real-time compilation (runtime) stage, the source code AST is subjected to lexical analysis to obtain custom component lexical analysis data, which is used as the input item of the component compilation and parsing module to generate a visual template file through type parsing and other steps, and the custom component visual rendering instance (i.e., the object to be rendered) is created by using the low-code tool rendering analysis engine.

[0188] That is, the application point 2 designs a component recognition method based on the feature structure AST compilation: through the component compilation and recognition module, the feature structure of the source code is parsed based on the AST, and the custom component can be recognized. After the compilation stage is completed, the structure data of the custom component is processed synchronously 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) As shown in Figure 11 , in order to improve the rendering performance of the custom component in the front-end low-code tool, the application designs a preset rendering strategy based on the component type.

[0190] By analyzing the difference of various components in the rendering logic, the rendering priority of different types of components is designed, and the values of the five dimensions of style, state, function, period and event in the custom component type data are used as feature anchors (which can represent and express the key content of component composition and behavior) to design a custom priority renderer, which supports developers to load different rendering strategies for custom components.

[0191] In the custom component parsing process, the component function is first identified in the custom priority renderer to preset the corresponding strategy. 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, the third inventive point designs a set of custom component rendering optimization strategies, which preset rendering priorities of different attributes according to component types and function display characteristics. When the code or configuration of the component is modified, the attribute rendering priority is processed to improve the rendering efficiency of the component update.

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

[0194] As shown in Figure 12 The component rendering device 1200 provided by the embodiments of the present application includes the following modules:

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

[0196] The first determination module 1220 is configured to determine a component type of the custom component according to a target feature of the target source code data, the target feature including at least one of a structure feature, an attribute feature, and an event feature;

[0197] The second determination module 1230 is configured to determine a custom view template according to the component type, the custom view template describing a conversion mode from the target source code data to the custom component;

[0198] The extraction module 1240 is configured to perform parameter extraction on 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 configured to render the custom view template and the parameter information to obtain and display the custom component.

[0200] The above component rendering device 1200 will be described in detail as follows:

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

[0202] The generating module is configured to generate an abstract syntax tree (AST) corresponding to the target source code data before performing parameter extraction on the target source code data based on the component type to obtain the parameter information of the custom component.

[0203] The disassembling module is configured to disassemble the AST into a plurality of syntax segments by using a lexical analyzer.

[0204] The compiling module is configured to load and compile the plurality of syntax segments by using a syntax analyzer to obtain a plurality of semantic data.

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

[0206] The first extraction submodule is configured to perform parameter extraction on the plurality of semantic data based on the component type to obtain the parameter information of the custom component.

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

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

[0209] The first analysis submodule is configured to analyze the semantic data corresponding to each sub-component based on the component type to determine the structure information and the sub-parameter information of the sub-component.

[0210] The first determination submodule is configured to determine the sub-component as the custom sub-component and determine the sub-parameter information as the custom sub-parameter information in a case where any one of the structure information and the sub-parameter information does not satisfy the component library component condition.

[0211] The second determination submodule is configured to determine the sub-component as the component library sub-component and determine the sub-parameter information as the built-in component parameter information in a case where both the structure information and the sub-parameter information satisfy the component library component condition.

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

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

[0214] The second rendering submodule is configured to render the built-in component parameter and the corresponding built-in view template to obtain and display the component library sub-component.

[0215] The third determination submodule is configured to determine the custom component according to the custom sub-component and the component library sub-component.

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

[0217] A fourth determining sub-module, configured to determine, according to a correspondence between the sub-component types and the custom sub-view templates, custom sub-view templates corresponding to the multiple custom sub-components respectively;

[0218] A fifth determining sub-module, configured to determine the custom view template according to the multiple custom sub-view templates.

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

[0220] A searching sub-module, configured to search, in the target source code data, a keyword code corresponding to the target feature;

[0221] A sixth determining sub-module, configured to determine, according to a correspondence between the keyword code and the component type, the component type of the custom component.

[0222] In some embodiments, the keyword code is multiple. Based on this, the sixth determining sub-module can specifically include:

[0223] A first determining unit, configured to determine, according to the correspondence between the keyword code and the component type, first component types corresponding to the multiple keyword codes respectively;

[0224] A second determining unit, configured to determine, according to the multiple first component types, the component type of the custom component.

[0225] In some embodiments, the extracting module 1240 can specifically include:

[0226] A second parsing sub-module, configured to perform general parsing on the target source code data to determine a basic attribute of the custom component;

[0227] A second extracting sub-module, configured to extract, in the target source code data, first parameter information corresponding to the basic attribute;

[0228] A third parsing sub-module, configured to perform special parsing on the target source code data based on the component type to determine a target attribute of the custom component;

[0229] A third extracting sub-module, configured to extract, in the target source code data, second parameter information corresponding to the target attribute;

[0230] A seventh determining sub-module, configured to determine, according to the first parameter information and the second parameter information, the parameter information of the custom component.

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

[0232] a filling sub-module, configured to fill the parameter information to the corresponding positions of the custom view template to obtain the object to be rendered;

[0233] a third rendering sub-module, configured to render the object to be rendered to obtain and display the custom component.

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

[0235] an eighth determining sub-module, configured to determine a rendering order of the plurality of parameter types according to the component type;

[0236] a fourth rendering sub-module, configured to render the custom view template and the parameter information based on the rendering order of the plurality of parameter types to obtain and display the custom component.

[0237] In some embodiments, the component rendering apparatus 1200 can include:

[0238] a receiving module, configured to receive an update input of the custom component by a user after obtaining and displaying the custom component;

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

[0240] a fourth determining module, configured to determine a rendering order of the plurality of target parameter types according to the component type;

[0241] a second rendering module, configured to update render the custom component based on the rendering order of the plurality of target parameter types.

[0242] In some embodiments, the obtaining module 1210 can specifically include:

[0243] an obtaining sub-module, configured to obtain source code data of the component in the application program;

[0244] a ninth determining sub-module, configured to determine a reference path and a basic component feature of the component according to the source code data;

[0245] a tenth determining sub-module, configured to determine the component as the custom component and determine the source code data of the component as the target source code data in a case where the reference path does not include a component library address and the basic component feature satisfies a preset condition.

[0246] In the embodiments of the present application, on the one hand, the conversion mode from the target source code data to the custom component can be provided for the visual display of the custom component by determining the custom view template according to the component type of the custom component; on the other hand, the data support can be provided for the visual display of the custom component by extracting the parameter information of the custom component based on the component type. In this way, the custom component can be obtained and displayed by rendering the custom view template and the parameter information, and the automation of the visual display of the custom component can be implemented, the human cost is saved, and the development cost of the application program is saved.

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

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

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

[0250] The memory 1320 can include a mass storage for data or instructions. By way of example and not limitation, the memory 1320 can 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 can include removable or non-removable (or fixed) media. Where appropriate, the memory 1320 can be internal or external to the electronic device 1300. In certain embodiments, the memory 1320 is a non-volatile solid-state memory.

[0251] The memory can include read-only memory (ROM), random access memory (RAM), a disk storage medium device, an optical storage medium device, a flash memory device, an electrical, optical, or other physical / tangible memory storage device. Thus, generally, the memory includes one or more tangible (non-transitory) computer-readable storage media (e.g., memory devices) encoded with software that, when executed (e.g., by one or more processors), 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 implements the rendering method of any one of the components in the above-described embodiments by reading and executing computer program instructions stored in the memory 1320.

[0253] In one example, the electronic device 1300 can further include a communication interface 1330 and a bus 1340. As shown, the processor 1310, the memory 1320, and the communication interface 1330 are connected through the bus 1340 and complete communication therebetween. Figure 13

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

[0255] The bus 1340 includes hardware, software, or both, which couples the components of the electronic device to each other. By way of example, and not limitation, the bus can include an Accelerated Graphics Port (AGP) or other graphics bus, an Enhanced Industry Standard Architecture (EISA) bus, a Front Side Bus (FSB), a HyperTransport (HT) interconnect, an Industry Standard Architecture (ISA) bus, an InfiniBand (IB) interconnect, a Low Pin Count (LPC) bus, a memory bus, a Micro Channel Architecture (MCA) bus, a Peripheral Component Interconnect (PCI) bus, a PCI-Express (PCI-X) bus, a Serial Advanced Technology Attachment (SATA) bus, a Video Electronics Standards Association Local (VLB) bus, or another suitable bus or a combination of two or more of these. Where appropriate, the bus 1340 can include one or more buses. Although the present embodiments describe and show a particular bus, the present application contemplates any suitable bus or interconnect.

[0256] By way of example, the electronic device 1300 can be a mobile phone, a tablet computer, a notebook computer, a palm computer, a vehicle-mounted electronic device, an ultra-mobile personal computer (UMPC), a netbook, or a personal digital assistant (PDA), etc.

[0257] The electronic device can execute the rendering method of the components in the embodiments of the present application, thereby realizing the rendering method and device of the components described in combination Figures 3 to 12 with the above-described embodiments.

[0258] In addition, in combination with the rendering method of the components in the above-described embodiments, the embodiments of the present application can provide a computer-readable storage medium to realize. The computer-readable storage medium has computer program instructions stored thereon; the computer program instructions are executed by a processor to implement the rendering method of any one of the components in the above-described embodiments. ​

[0259] In combination with the rendering method of the components in the above embodiments, the embodiments of the present application can provide a computer program product to implement. The instructions in the computer program product are executed by the processor of the electronic device to implement the rendering method of any one of the components in the above embodiments.

[0260] It should be noted that the present application is not limited to the specific configurations and processes described above and shown in the drawings. For the sake of brevity, detailed descriptions of well-known methods are omitted. In the above embodiments, several specific steps are described and shown as examples. However, the method processes of the present application are 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 of the steps, after understanding the spirit of the present application.

[0261] The functional blocks shown in the structural block diagrams described above 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 functional card, etc. When implemented in software, the elements of the present application are program or code segments used to perform the required tasks. The program or code segments can be stored in a machine-readable medium or transmitted through a data signal carried in a carrier wave over a transmission medium or communication link. The "machine-readable medium" 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. The code segments can be downloaded via a computer network such as the Internet, an intranet, etc.

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

[0263] The computer program instructions can also be loaded onto a computer, other programmable data processing apparatus, or other processing device to cause a series of operational steps to be performed on the computer, other programmable apparatus or other processing device to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide processes for implementing the functions / acts specified in the flowchart and / or block diagram block or blocks.

[0264] The above only is a specific implementation of the present application, and those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the above-described system, module and unit can refer to the corresponding process in the foregoing method embodiments, which will not be described herein. It should be understood that the protection scope of the present application is not limited to this, and any person skilled in the art can easily think of various equivalent modifications or replacements within the technical range disclosed in the present application, and these modifications or replacements shall be covered within the protection scope of the present application.< / button>

Claims

1. A method of rendering an assembly, the method comprising: The method comprises the following steps: acquiring target source code data of a custom component in an application program; determining a component type of the custom component according to target characteristics of the target source code data, wherein the target characteristics comprise at least one of a structural characteristic, an attribute characteristic and an event characteristic; determining a custom view template according to the component type, wherein the custom view template describes a conversion mode from the target source code data to the custom component; extracting parameters of the target source code data based on the component type to obtain parameter information of the custom component; rendering the custom view template and the parameter information to obtain and display the custom component; before the step of extracting parameters of the target source code data based on the component type to obtain parameter information of the custom component, the method further comprises the following steps: generating an abstract syntax tree (AST) corresponding to the target source code data; dissolving the AST into a plurality of syntax segments by using a lexical analyzer; loading and compiling the plurality of syntax segments by using a syntax analyzer to obtain a plurality of semantic data, wherein the plurality of semantic data correspond to a plurality of sub-components, the plurality of sub-components comprise a custom sub-component and a component library sub-component, and the parameter information comprises custom sub-parameter information and built-in component parameter information; the step of extracting parameters of the target source code data based on the component type to obtain parameter information of the custom component comprises the following steps: analyzing the semantic data corresponding to each of the sub-components based on the component type to determine structural information and sub-parameter information of the sub-components; in a case where any one of the structural information and the sub-parameter information does not satisfy a 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 a case where the structural information and the sub-parameter information both satisfy the component library component condition, determining the sub-component as the component library sub-component and determining the sub-parameter information as the built-in component parameter information.

2. The method of claim 1, wherein, the step of rendering the custom view template and the parameter information to obtain and display the custom component comprises the following steps: rendering the custom view template and the custom sub-parameter information to obtain and display the custom sub-component; rendering the built-in component parameter and its corresponding built-in view template to obtain and display the component library sub-component; determining the custom component according to the custom sub-component and the component library sub-component.

3. The method of claim 1, wherein, the custom sub-component is a plurality of custom sub-components, the plurality of custom sub-components correspond to a plurality of sub-component types, and the component type comprises the plurality of sub-component types; the step of determining a custom view template according to the component type comprises the following steps: determining custom sub-view templates corresponding to the plurality of custom sub-components respectively according to a correspondence between the sub-component types and custom sub-view templates; determining the custom view template according to the plurality of custom sub-view templates.

4. The method according to any one of claims 1 to 3, characterized in that, the step of determining a component type of the custom component according to target characteristics of the target source code data comprises the following steps: searching for a keyword code corresponding to the target feature in the target source code data; determining the component type of the custom component according to a correspondence between the keyword code and the component type.

5. The method of claim 4, wherein, The keyword code is multiple, and the component type of the custom component is determined according to the correspondence between the keyword code and the component type, including: determining a first component type corresponding to each of the multiple keyword codes according to the correspondence between the keyword code and the component type; determining the component type of the custom component according to the multiple first component types.

6. The method according to any one of claims 1 to 3, characterized in that, The parameter extraction of the target source code data based on the component type to obtain the parameter information of the custom component, including: performing general analysis on the target source code data to determine the basic attribute of the custom component; extracting first parameter information corresponding to the basic attribute from the target source code data; performing special analysis on the target source code data based on the component type to determine the target attribute of the custom component; extracting second parameter information corresponding to the target attribute from the target source code data; determining the parameter information of the custom component according to the first parameter information and the second parameter information.

7. The method according to any one of claims 1 to 3, characterized in that, The rendering of the custom view template and the parameter information to obtain and display the custom component, including: filling the parameter information into the corresponding position of the custom view template to obtain a rendering object; rendering the rendering object to obtain and display the custom component.

8. The method according to any one of claims 1 to 3, characterized in that, The parameter information corresponds to multiple parameter types, and the rendering of the custom view template and the parameter information to obtain and display the custom component, including: determining the rendering order of the multiple parameter types according to the component type; rendering the custom view template and the parameter information based on the rendering order of the multiple parameter types to obtain and display the custom component.

9. The method according to any one of claims 1 to 3, characterized in that, After obtaining and displaying the custom component, the method further includes: receiving user update input of the custom component; determining updated target parameter information and multiple target parameter types corresponding to the target parameter information in response to the update input; determining the rendering order of the multiple target parameter types according to the component type; updating the rendering of the custom component based on the rendering order of the multiple target parameter types.

10. The method according to any one of claims 1 to 3, characterized in that, The target source code data of the custom component in the application program includes: obtaining source code data of a component in the application program; determining a reference path and a basic component feature of the component according to the source code data; in the case that the reference path does not include a component library address and the basic component feature meets a preset condition, determining the component as the custom component and the source code data of the component as the target source code data.

11. An apparatus for rendering an assembly, the apparatus comprising: The device includes: an acquisition module configured to acquire target source code data of a custom component in an application program; The first determining module is configured to determine a component type of the custom component according to a target feature of the target source code data, the target feature including at least one of a structure feature, an attribute feature, and an event feature. The second determining module is configured to determine a custom view template according to the component type, the custom view template describing a conversion manner from the target source code data to the custom component. The extraction module is configured to perform parameter extraction on the target source code data based on the component type to obtain parameter information of the custom component. The first rendering module is configured to render the custom view template and the parameter information to obtain and display the custom component. The generation module is configured to generate an abstract syntax tree (AST) corresponding to the target source code data before performing parameter extraction on the target source code data based on the component type to obtain the parameter information of the custom component. The disassembling module is configured to disassemble the AST into a plurality of syntax segments by using a lexical analyzer. The compiling module is configured to load and compile the plurality of syntax segments by using a syntax analyzer to obtain a plurality of semantic data, the plurality of semantic data corresponding to a plurality of sub-components, the plurality of sub-components including a custom sub-component and a component library sub-component, and the parameter information including custom sub-parameter information and built-in component parameter information. The extraction module is specifically configured to: perform analysis on the semantic data corresponding to each of the sub-components based on the component type to determine structure information and sub-parameter information of the sub-component; in a case where any one of the structure information and the sub-parameter information does not satisfy a component library component condition, determine the sub-component as the custom sub-component and the sub-parameter information as the custom sub-parameter information; and in a case where both the structure information and the sub-parameter information satisfy the component library component condition, determine the sub-component as the component library sub-component and the sub-parameter information as the built-in component parameter information.

12. An electronic device, comprising: The electronic device includes a processor and a memory storing computer program instructions. The processor executes the computer program instructions to implement the component rendering method in any one of claims 1-10.

13. A computer-readable storage medium, characterized in that, The computer readable storage medium stores computer program instructions, and the computer program instructions are executed by the processor to implement the component rendering method in any one of claims 1-10.

14. A computer program product, characterised in that, The instructions in the computer program product are executed by the processor of the electronic device to cause the electronic device to perform the component rendering method in any one of claims 1-10.

Images