CN117251147A - Composite component development method and device and electronic equipment - Google Patents

Abstract

The invention provides a composite component development method, a device and electronic equipment, wherein the method comprises the following steps: in an integrated development environment, defining a schema protocol of a composite component, defining a parent component and attributes, events and business logic thereof, defining a child component and binding the child component to the attributes of the parent component, wherein the composite component supports source code editing; packaging and storing the defined composite assembly; calling and importing a composite component, wherein the composite component comprises meta data and schema data imported into the composite component; and rendering the invoked composite component by adopting a rendering engine, wherein the composite component comprises composite component source codes. The invention can realize the development of the visual composite component and support the development of the low-code configuration and the source code composite component.

Description

Composite component development method and device and electronic equipment

Technical Field

The invention mainly relates to the technical field of component development, in particular to a composite component development method, a device and electronic equipment.

Background

At present, online component research and development capability is not seen in low-code or zero-code research and development platforms on the market, most of components provided by the research and development platforms are finished in a source code development mode by a three-party research and development tool on the platform side, and then the components are built in the platform and are supplied to platform users (business personnel or developers) in the form of official components, so that the platform users can be helped to quickly develop different types of applications based on the official components. The existing component development mode mainly has the following defects: 1) The components provided by the platform official cannot adapt to the personalized business requirements of users, and the platform also has no specific scene/industry component low code research and development capability; 2) Since the output of all users depends on the official components provided by the platform, the official components have universality, so that the final generated product is seriously homogenized and is not enough in differentiation; 3) The user hopes that the self-research component can only be imported to the platform through three-party tool source code development, and the self-research component does not belong to a low-code development mode, and is high in technical threshold and high in commercial cost.

The component development shown in fig. 1 is an implementation of a block, in which the official definition packages, the user groups the official packaged components into one block, which usually does not have business semantics, each component under the block supports separate configuration and definition, and the blocks can be multiplexed in a snapshot manner on different pages, thereby achieving the purpose of quickly building an application. Because the blocks do not have business semantics and are limited by the component capability provided by the platform, most of the platforms only provide universal basic components and cannot meet the business demands of users, but the traditional research and development mode of source code development is high in development cost, long in period and high in technical basic requirements. Another implementation mode is to use development tools such as Android Studio or Visual Studio Code to realize component development, and then import the components into the platform for use. The method belongs to a pure source code development method, has higher requirements on technical foundation and high realization cost, and is generally realized by a platform side. Currently, each large platform usually develops an access port for three-party components, and the platform does not accept the capability of component research and development.

In a word, the component code rate developed in the prior art is high, professional technical knowledge is needed, the threshold is high, or the component code rate cannot adapt to personalized business requirements, and the homogeneity is serious.

Disclosure of Invention

The invention aims to solve the technical problem of providing a composite component development method, a device and electronic equipment, which have the advantages of visual composite component development, support of low-code configuration, source code composite component development and the like.

In order to solve the above technical problems, in a first aspect, the present invention provides a composite component development method, including: in an integrated development environment, defining a schema protocol of a composite component, defining a parent component and attributes, events and business logic thereof, defining a child component and binding the child component to the attributes of the parent component; wherein the composite component supports source code editing; packaging and storing the defined composite assembly; calling and importing the composite component, wherein the method comprises importing meta data and schema data of the composite component; rendering the invoked composite component with a rendering engine, wherein the composite component includes composite component source code.

Optionally, the method further comprises: and designing the switching function of the composite component so that the composite component can be switched between a source code editing mode and a non-source code editing mode.

Optionally, the method further comprises: the referencing and/or snapshot functions of the composite component are designed such that the composite component is used in a referencing and/or snapshot manner.

Optionally, the method further comprises: and detecting the realization effect of the composite component through online previewing and debugging.

Optionally, the method further comprises: synchronizing the composite component to a piece of real machine equipment, debugging the composite component on the real machine equipment, and detecting the realization effect of the composite component.

Optionally, the method further comprises: designing interaction logic and binding the interaction logic to events of the composite component.

Optionally, calling and importing the composite component step, wherein the meta data includes: component name, component description, component icon, and component attribute.

Optionally, after the composite component is invoked and imported, the defined composite component is initialized before the invoked composite component is rendered with a rendering engine.

Optionally, the method further comprises: the composite component is configured and published.

In a second aspect, the present invention provides a component development apparatus comprising: the definition module is used for defining a schema protocol of the composite component, defining a parent component and attributes, events and business logic thereof, defining a child component and binding the child component to the attributes of the parent component in the integrated development environment; wherein the composite component supports source code editing; the storage module is used for packaging and storing the defined composite assembly; the importing module is used for calling and importing the composite component and comprises meta data and schema data for importing the composite component; and the rendering module is used for rendering the called composite component by adopting a rendering engine, wherein the composite component comprises composite component source codes.

In a third aspect, the present invention provides an electronic device, comprising: a processor and a memory storing a program or instructions executable on the processor, which when executed by the processor, implement the steps of the composite component development method as described in the first aspect.

In a fourth aspect, the present invention provides a readable storage medium having stored thereon a program or instructions which when executed by a processor implement the steps of the composite component development method according to the first aspect.

Compared with the prior art, the invention has the following advantages: firstly, defining a schema protocol of a composite component in an integrated development environment, defining a parent component and attributes, events and business logic of the parent component, defining a child component and binding the child component to the attributes of the parent component, wherein the composite component supports source code editing; secondly, packaging and storing the defined composite assembly; calling and importing the composite component, wherein the composite component comprises meta data and schema data imported into the composite component; and finally, rendering the called composite component by adopting a rendering engine, wherein the composite component comprises composite component source codes, thereby realizing the development of the visual composite component and supporting the low-code configuration and the source code composite component development.

Drawings

The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiments of the application and together with the description serve to explain the principles of the application. In the accompanying drawings:

FIG. 1 is a schematic diagram of a block-wise development of a composite component;

FIG. 2 is a flow chart of a component development method according to an embodiment of the invention;

FIG. 3 is a schematic diagram of a rendering process of a composite component according to an embodiment of the present invention;

FIG. 4 is a schematic illustration of an introduction process of a composite component according to an embodiment of the present invention;

FIG. 5 is a schematic diagram of a publishing process of a composite component according to an embodiment of the invention;

FIG. 6 is a schematic diagram of a component development apparatus according to an embodiment of the present invention;

fig. 7 is a schematic diagram of an electronic device according to an embodiment of the invention.

Detailed Description

In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are used in the description of the embodiments will be briefly described below. It is apparent that the drawings in the following description are only some examples or embodiments of the present application, and it is obvious to those skilled in the art that the present application may be applied to other similar situations according to the drawings without inventive effort. Unless otherwise apparent from the context of the language or otherwise specified, like reference numerals in the figures refer to like structures or operations.

As used in this application and in the claims, the terms "a," "an," "the," and/or "the" are not specific to the singular, but may include the plural, unless the context clearly dictates otherwise. In general, the terms "comprises" and "comprising" merely indicate that the steps and elements are explicitly identified, and they do not constitute an exclusive list, as other steps or elements may be included in a method or apparatus.

The relative arrangement of the components and steps, numerical expressions and numerical values set forth in these embodiments do not limit the scope of the present application unless it is specifically stated otherwise. Meanwhile, it should be understood that the sizes of the respective parts shown in the drawings are not drawn in actual scale for convenience of description. Techniques, methods, and apparatus known to one of ordinary skill in the relevant art may not be discussed in detail, but should be considered part of the specification where appropriate. In all examples shown and discussed herein, any specific values should be construed as merely illustrative, and not a limitation. Thus, other examples of the exemplary embodiments may have different values. It should be noted that: like reference numerals and letters denote like items in the following figures, and thus once an item is defined in one figure, no further discussion thereof is necessary in subsequent figures.

In addition, the terms "first", "second", etc. are used to define the components, and are merely for convenience of distinguishing the corresponding components, and unless otherwise stated, the terms have no special meaning, and thus should not be construed as limiting the scope of the present application. Furthermore, although terms used in the present application are selected from publicly known and commonly used terms, some terms mentioned in the specification of the present application may be selected by the applicant at his or her discretion, the detailed meanings of which are described in relevant parts of the description herein. Furthermore, it is required that the present application be understood, not simply by the actual terms used but by the meaning of each term lying within.

Flowcharts are used in this application to describe the operations performed by systems according to embodiments of the present application. It should be understood that the preceding or following operations are not necessarily performed in order precisely. Rather, the various steps may be processed in reverse order or simultaneously. At the same time, other operations are added to or removed from these processes.

Example 1

FIG. 2 is a flow chart of a component development method according to an embodiment of the invention, and referring to FIG. 2, a method 200 includes:

s210, defining a mode protocol of a composite component, namely a schema protocol, in an Integrated Development Environment (IDE), wherein the schema is a data structure description or template for defining an organization mode of data; defining a parent component and attributes, events and business logic thereof, defining a child component and binding the child component to the attributes of the parent component; wherein the composite component supports source code editing; s220, packaging and storing the defined composite assembly; s230, calling and importing the composite component, wherein the composite component comprises metadata (meta data) and pattern data (schema data) imported into the composite component; and S240, rendering the called composite component by adopting a rendering engine, wherein the composite component comprises composite component source codes.

In this embodiment, the components include a base component, which is the smallest divisible unit that makes up the page, and a composite component, which is built into the system. The composite assembly is an assembly which is built through the foundation assembly and is suitable for a certain service scene, and the method of the embodiment is mainly used for developing the composite assembly.

The method of the embodiment is developed in the IDE, because the IDE integrates various development tools and functions, can improve the efficiency and quality of software development, generally comprises the functions of a source code editor, a debugger, a construction tool and the like, and can also provide various plug-ins and extensions to meet different development requirements. IDE provides visualization development capabilities and publishing capabilities for pages, components. The user can drag the component into the canvas by using the mouse through the visual development capability provided by the IDE to assemble the page, and can modify the component attribute on the attribute panel and see the display effect of the modified composite component in the canvas in real time, so that the page is built quickly with low threshold in a visual mode.

In this embodiment, the principle of the low code platform is that the low code IDE yields the schema, and the rendering engine renders the page or the composite component, so the schema protocol of the composite component needs to be defined first. By way of example, the illustrated schema protocol may contain the following fields: 1. type (2): a composite component; 2. encoding: encoding a composite component; 3. life cycle: the composite component executes life cycles, which comprise three life cycles when the component is rendered, after the component is created and when the component is destroyed; 4. logic: logic definition, wherein the logic comprises a logic name and logic content, and the logic is internally used as a javascript code segment; 5. the variables: variable definition, which includes variable names and variable default values; 6. component source: the method comprises the steps of including a component name, a component package name and a component version; 7. and (3) a sub-assembly: and (3) a structural tree of the components inside the composite component.

Each sub-component needs to conform to the following component schema protocol, 1, component ID; 2. component aliases; 3. component source: the method comprises the steps of including a component name, a component package name and a component version; 4. component properties: the component properties define properties that are passed to the component, which typically exposes different component styles based on the passed properties. The component attribute can bind a variable, and the variable contains a field as a variable name; 5. component events: component events are bridges of interactions between the component and the outside, such as when a click event of the component binds the logic of one print log on a page, the log is printed after clicking the component. The component event needs binding logic, and the logic contains a logic name and a logic scope (page logic or global logic) of a field; 6. and (3) a sub-assembly: a structural tree of internal components; 7. whether or not to display: whether the component is displayed; 8. and (3) cyclic configuration: including the round-robin data, a round-robin item alias, a round-robin sequence number alias, and a round-robin key.

In this embodiment, the composite component supports source code editing, so that the developed composite component supports two use modes of source code and low code to cope with users with different technical bases. The former adopts a source code mode to edit the composite component, and the source code of the composite component can be personalized and customized. The latter composite component is packaged in one layer, and can realize function development through simple configuration.

In this embodiment, the defined composite component is packaged and saved, which may be that the composite component is constructed to generate bundle. When the composite component is constructed, the schema of the composite component which needs to be released at present is obtained from the server side, and the composite component assembly code is added to construct the bundle. After uploading to the OSS, save OSS address bundlePath and bundlePath of the dependent component to the server. Wherein, the bundle. Js is a JavaScript file, and is usually formed by multiple source code files and library packages (bundles); OSS (Object Storage Service, object store service) is a cloud storage solution for storing unstructured data, such as files, pictures, etc.; a component's bundlePath is a path of component resources on a file system or network, typically used to dynamically load components or resources.

Fig. 3 is a schematic drawing of a rendering flow of a composite component according to an embodiment of the present invention, and referring to fig. 3, in this embodiment, a rendering engine converts original schema data into node data of a DSLNode type that can be identified in the engine, and then sends the node data to a renderer of a page or the composite component for processing. Wherein DSLNode represents a domain-specific language node, which is a basic building block or node in a domain-specific language.

Inside the renderer, the life cycle function of the composite component is executed first, and the life cycle function mainly comprises the time of composite component creation, the time of composite component destruction and the time of composite component rendering. After the composite component is created: executing after the first creation of the composite component; after the composite component is destroyed: executing after the composite component is destroyed; when the composite component is rendered: executing at each rendering of the composite component. The lifecycle function is triggered each time a composite component property changes. Traversing the child attribute of the node, when the composite component labels the child node, the property is generated by the tips, and the child node data is obtained and then submitted to componentProxy processing. Wherein the child attribute represents a child node of the composite component tag; in the React and other front end frameworks, tips are parameters or attributes that are passed to the component; componentProxy represents a component proxy, which is a proxy object in a design schema that is used to manage and control access to the actual components.

In this embodiment, the componentProxy execution contents mainly include: a) The current variable value is obtained according to the variable name bound by the attribute; b) Acquiring the attribute value transmitted from the current outside according to the attribute name of the composite component bound by the attribute; c) The corresponding function body is obtained according to the logic name of the event binding; d) And calling the real. The act.createelements are a function in the act library that creates and returns a new act element.

In this embodiment, when the composite component is developed, multi-layer nesting of the composite component is supported, and attribute parameter supporting layer is transmitted in a hierarchical manner, and meanwhile, attribute setters of the composite component are supported in a custom configuration. The composite component has cross-end adaptation capability, which means that the composite component developed on line can adapt to android native applications, H5 applications, web applications and the like. The Setter is a configurator, which refers to an attribute configurator of a component and is used for setting the attribute of a composite component.

In one example, a switching function of the composite component may be designed to enable the composite component to switch between a source code editing mode and a non-source code editing mode.

In this embodiment, if there is a need to individually define the composite component, the source code editing mode may be switched to define the composite component in the manner of the composite component developer. The packaged composite component has the functions, configurable properties and events defined by a composite component developer, and is simple and easy to use but slightly less flexible for use by a component consumer. If the composite component compares the business needs of matching component consumers, the consumer of the composite component can build an application through the packaged composite component. If the composite component cannot meet the service requirements of component consumers, the consumers of the composite component can edit the composite component in a source code mode, and the consumers of the composite component are developers of the composite component, can customize functions, configurable attributes and events of the composite component, and can be matched with the service requirements of the component consumers through adjustment.

In an example, the referencing and/or snapshot functions of the composite component may be designed such that the composite component is used in a referencing and/or snapshot manner.

In this embodiment, the composite component may have both a reference and/or snapshot modality. When referring to a composite component with a version, a composite component consumer can manage the version number of the composite component and upgrade or roll back according to requirements. In the reference mode, any changes or version changes to the composite component will be synchronized in real time to all pages that reference the composite component; in the snapshot mode, the new version of the composite component can be formed by changing the new version, and the new version can not influence the composite component of the old version.

In an example, the implementation of a composite component may be detected through online previewing and debugging.

Preview debugging may provide the ability to quickly preview and debug a build page. The user can view the page effect and operate the page. When the page is abnormal, accurate error information can be provided for the user, so that the user can conveniently and quickly locate the place causing the page abnormality. The reduction degree is more than 90% relative to the real product.

In an example, the composite component may be synchronized to a real machine device on which the composite component is debugged.

In the embodiment, the real machine debugging is mainly suitable for android application, solves the problem of low preview debugging reduction degree of the android application, and provides preview and debugging capability of a page built by a user on real equipment. When the page is abnormal, accurate error information can be provided, so that the user can conveniently position the page. Illustratively, a composite set developer can switch to the perspective of the composite set consumer during the process of visually building the composite set, previewing the actual implementation of the composite set in real time. In the preview state, the composite component dynamically loads the schema without building. If the composite component integrates hardware capabilities, it can be run on the actual device to view implementation effects.

In an example, interaction logic may be designed and bound to events of the composite component.

Interaction logic encoding capability is also provided in the IDE, and a user implements interaction logic by writing Javascript code and binds the logic to component events to implement interaction of the composite component.

In one example, in invoking and importing a composite component process, meta data includes: component name, component description, component icon, and component attribute.

In this embodiment, the component renderer is used to convert the schema into a common component through the component schema when the composite component assembly code is applied. The common component is the same as other source code development components, and can be directly loaded into a page for rendering.

For example, composite components are used in an engineering setting, and it is necessary to introduce the composite components into the engineering setting before use. The import composite component mainly comprises meta information (including component name, component description, component icon, component attribute), component bundlePath, component deps (bundlePath of dependent component). After importing, firstly, loading the bundle.js according to the bundle path, and loading the bundle.js of the dependent component according to the deps. Component deps, component dependencies, among other things, represent other components or libraries that a component depends on, which dependencies need to be parsed and loaded before the component loads or executes.

The above process may be briefly described with reference to fig. 4, and fig. 4 is a schematic view of an introduction process of a composite component according to an embodiment of the present invention. In one example, after the composite component is invoked and imported, the defined composite component is initialized before the invoked composite component is rendered using the rendering engine. The composite component is initialized and loaded into the page, and when the composite component is dragged into the canvas, the rendering process can be performed.

In an example, configuring and publishing the composite component is also included. FIG. 5 is a schematic diagram of a publishing process of a composite component according to an embodiment of the present invention, and referring to FIG. 5, when publishing a composite component, it is necessary to store the dependent composite component information as data when publishing the composite component because other composite components may be used inside the composite component. The dependent composite component information includes: component name, component package name, component version number.

When the composite assembly is released, the method can provide the capability of constructing and releasing the page built by the user. For web applications, the user can access the page after release over the internet. For android applications, the android application can be accessed in the android application market after release. The user builds the page in the IDE, and generates the JSON Schema of the composite page Schema protocol, which can not be directly operated in the browser or the android system, so that the JSON Schema is provided in operation, the API called in the logic is injected, the page operation capability is provided, and the page interaction capability is provided.

Other composite components may be used within the composite component where there are dependencies of the composite component. If the dependency relationship of the composite component is not managed, the composite component of which the internal dependency is not loaded or the composite component of which the error version is loaded cannot be loaded when the composite component is loaded. In the embodiment, the version of the internal component of the composite component can be really solidified through the following scheme, so that the stability and the safety in the subsequent component upgrading process are ensured. The specific scheme is as follows: 1. composite components will rely on published composite components (with versions) and unpublished composite components (same engineering, without versions); 2. extracting component source information (component name, component package name, component version) for the published component; 3. for unreleased components, component original information (component names, component package names) is also extracted, and new component source information with version is constructed and released first. Merging the component source information with the version and the published component source information in the 2 nd piece after successful publishing, and taking the component source information with the version and the published component source information as the dependent information deps of the composite component; 4. the dependency information deps is issued together on the composite component issuing time; 5. when the composite component is imported, the dependency information deps is also imported together.

By adopting the development method of the embodiment, the composite component is dragged into the canvas on the visual interface, and the attribute and the event which are transmitted outwards by the composite component are configured, so that a new composite component is formed. The user can also perform personalized configuration on the composite component in a source code mode, and the developed composite component supports configuration life cycle, business logic, variables, end cloud service and the like so as to meet personalized requirements of the user.

When the canvas uses the composite component, a user can use a quotation mode or a snapshot mode according to own service requirements. A user can put 1 or more official components, components self-developed by a three-party tool and composite components developed based on a platform into a canvas through a dragging mode at a web end to form a new composite component UI layout, and the composite components support multi-layer nesting. And the attribute and the event which are externally revealed out by the composite component as a whole are customized in a configuration mode, and the service logic of the component can be arranged through a low code, so that the end capacity and the cloud service can be imported and bound in the logic arrangement process, and the service capacity integration can be realized.

In the component development method provided by the embodiment, firstly, in an integrated development environment, a schema protocol of a composite component is defined, a parent component and attributes, events and business logic thereof are defined, a child component is defined and bound with the attributes of the parent component, wherein the composite component supports source code editing; secondly, packaging and storing the defined composite assembly; calling and importing the composite component, wherein the composite component comprises meta data and schema data imported into the composite component; and finally, rendering the called composite component by adopting a rendering engine, wherein the composite component comprises composite component source codes, thereby realizing the development of the visual composite component and supporting the low-code configuration and the source code composite component development.

Specifically, from the perspective of a component developer, for a software developer deeply ploughing a certain industry, the development mode can lead the developer to abstract and refine the field universality adapting to a certain specific industry and a specific scene based on the knowledge of the developer to the industry, and the business component with business logic is universal, so that the composite component has universality under a certain specific industry and scene. From the view of consumers of composite components, the composite component can benefit from the composite components with industry characteristics developed by component developers, can rapidly develop applications based on a large number of field composite components, reduces development workload, improves development efficiency, and can achieve personalized business targets.

Example two

Fig. 6 is a schematic structural diagram of a component development apparatus according to an embodiment of the present invention, and referring to fig. 6, an apparatus 600 mainly includes: a definition module 601, configured to define a schema protocol of a composite component, define a parent component and its attributes, events and business logic, define a child component and bind the parent component attributes in an integrated development environment; wherein the composite component supports source code editing; a saving module 602, configured to package and save the defined composite component; an importing module 603, configured to invoke and import the composite component, including importing meta data and schema data of the composite component; a rendering module 604, configured to render the invoked composite component with a rendering engine, where the composite component includes composite component source code.

In an example, the illustrated apparatus 600 may further include a first design module for designing a switching function of the composite component to enable the composite component to switch between a source code editing mode and a non-source code editing mode.

In an example, the illustrated apparatus 600 may further include a second design module to design referencing and/or snapshot functions of the composite component such that the composite component is used in a referencing and/or snapshot manner.

In an example, the illustrated apparatus 600 may further include a first debugging module for detecting an implementation of the composite component through online previewing and debugging.

In an example, the illustrated apparatus 600 may further include a second debugging module for synchronizing the composite component onto a real machine device, debugging the composite component on the real machine device, and detecting an implementation of the composite component.

In an example, the illustrated apparatus 600 may further include a third design module to design the interaction logic and bind the interaction logic to events of the composite component.

In one example, in invoking and importing a composite component process, meta data includes: component name, component description, component icon, and component attribute.

In an example, the illustrated apparatus 600 may further include an initialization module to initialize the defined composite component after invoking and importing the composite component before rendering the invoked composite component with the rendering engine.

In an example, the illustrated apparatus 600 may further include a publishing module to configure the composite component and publish.

Reference may be made to the foregoing embodiments for details of other operations performed by the modules in this embodiment, which are not further described herein.

In the component development device provided by the embodiment, firstly, in an integrated development environment, a schema protocol of a composite component is defined, a parent component and attributes, events and business logic thereof are defined, a child component is defined and bound with the attributes of the parent component, wherein the composite component supports source code editing; secondly, packaging and storing the defined composite assembly; calling and importing the composite component, wherein the composite component comprises meta data and schema data imported into the composite component; and finally, rendering the called composite component by adopting a rendering engine, wherein the composite component comprises composite component source codes, thereby realizing the development of the visual composite component and supporting the low-code configuration and the source code composite component development.

A composite component development device in the embodiments of the present application may be a device, or may be a component, an integrated circuit, or a chip in a terminal. A composite component development device in an embodiment of the present application may be a device having an operating system. The operating system may be an android operating system, an iOS operating system, or other possible operating systems, which is not specifically limited in the embodiments of the present application.

The application also provides an electronic device, comprising: a memory for storing programs or instructions executable by the processor; and a processor, configured to execute the program or the instruction to implement each process of the composite component development method embodiment, and achieve the same technical effect, so that repetition is avoided, and no further description is given here.

Fig. 7 is a schematic diagram of an electronic device according to an embodiment of the invention. The electronic device 700 may include an internal communication bus 701, a Processor (Processor) 702, a Read Only Memory (ROM) 703, a Random Access Memory (RAM) 704, and a communication port 705. When applied to a personal computer, the electronic device 700 may also include a hard disk 706. Internal communication bus 701 may enable data communication between components of electronic device 700. The processor 702 may make the determination and issue a prompt. In some implementations, the processor 702 may be comprised of one or more processors. The communication port 705 may enable the electronic device 700 to communicate data with the outside. In some implementations, the electronic device 700 may send and receive information and data from a network through the communication port 705. The electronic device 700 may also include various forms of program storage elements and data storage elements such as hard disk 706, read Only Memory (ROM) 703 and Random Access Memory (RAM) 704 capable of storing various data files for computer processing and/or communication, as well as possible programs or instructions for execution by the processor 702. The results processed by the processor 702 are communicated to the user device via the communication port 705 for display on a user interface.

The embodiment of the application further provides a readable storage medium, on which a program or an instruction is stored, where the program or the instruction realizes each process of the above embodiment of the composite component development method when executed by a processor, and the same technical effects can be achieved, so that repetition is avoided, and no further description is given here.

The above disclosure is intended to be illustrative only and not limiting to the present application to those skilled in the art. Although not explicitly described herein, various modifications, improvements, and adaptations of the present application may occur to one skilled in the art. Such modifications, improvements, and modifications are intended to be suggested within this application, and are therefore within the spirit and scope of the exemplary embodiments of this application.

Meanwhile, the present application uses specific words to describe embodiments of the present application. Reference to "one embodiment," "an embodiment," and/or "some embodiments" means that a particular feature, structure, or characteristic is associated with at least one embodiment of the present application. Thus, it should be emphasized and should be appreciated that two or more references to "an embodiment" or "one embodiment" or "an alternative embodiment" in various positions in this specification are not necessarily referring to the same embodiment. Furthermore, certain features, structures, or characteristics of one or more embodiments of the present application may be combined as suitable.

Likewise, it should be noted that in order to simplify the presentation disclosed herein and thereby aid in understanding one or more inventive embodiments, various features are sometimes grouped together in a single embodiment, figure, or description thereof. This method of disclosure, however, is not intended to imply that more features than are presented in the claims are required for the subject application. Indeed, less than all of the features of a single embodiment disclosed above.

While the present application has been described with reference to the present specific embodiments, those of ordinary skill in the art will recognize that the above embodiments are for illustrative purposes only, and that various equivalent changes or substitutions can be made without departing from the spirit of the present application, and therefore, all changes and modifications to the embodiments described above are intended to be within the scope of the claims of the present application.

Claims (12)

1. A method of developing a composite component, comprising:

in an integrated development environment, defining a schema protocol of a composite component, defining a parent component and attributes, events and business logic thereof, defining a child component and binding the child component to the attributes of the parent component; wherein the composite component supports source code editing;

packaging and storing the defined composite assembly;

calling and importing the composite component, wherein the method comprises importing meta data and schema data of the composite component;

rendering the invoked composite component with a rendering engine, wherein the composite component includes composite component source code.

2. The composite component development method of claim 1, further comprising: and designing the switching function of the composite component so that the composite component can be switched between a source code editing mode and a non-source code editing mode.

3. The composite component development method of claim 1, further comprising: the referencing and/or snapshot functions of the composite component are designed such that the composite component is used in a referencing and/or snapshot manner.

4. The composite component development method of claim 1, further comprising: and detecting the realization effect of the composite component through online previewing and debugging.

5. The composite component development method of claim 4, further comprising: synchronizing the composite component to a piece of real machine equipment, debugging the composite component on the real machine equipment, and detecting the realization effect of the composite component.

6. The composite component development method of claim 1, further comprising: designing interaction logic and binding the interaction logic to events of the composite component.

7. The composite component development method of claim 1, wherein invoking and importing the composite component step, wherein the meta data comprises: component name, component description, component icon, and component attribute.

8. The composite component development method of claim 1, wherein after invoking and importing the composite component, the defined composite component is initialized before rendering the invoked composite component with a rendering engine.

9. The composite component development method of claim 1, further comprising: the composite component is configured and published.

10. A component development apparatus, comprising:

the definition module is used for defining a schema protocol of the composite component, defining a parent component and attributes, events and business logic thereof, defining a child component and binding the child component to the attributes of the parent component in the integrated development environment; wherein the composite component supports source code editing;

the storage module is used for packaging and storing the defined composite assembly;

the importing module is used for calling and importing the composite component and comprises meta data and schema data for importing the composite component;

and the rendering module is used for rendering the called composite component by adopting a rendering engine, wherein the composite component comprises composite component source codes.

11. An electronic device, comprising: a processor and a memory storing a program or instructions executable on the processor, which when executed by the processor, implement the steps of the composite component development method of any one of claims 1-9.

12. A readable storage medium, wherein a program or instructions is stored on the readable storage medium, which when executed by a processor, implements the steps of the composite component development method of any one of claims 1-9.