Application component development method, system, device and storage medium

Abstract

The present invention discloses a componentized development method, system, device and storage medium for an application. Through the technical solution provided by the present invention, the componentized technology for an application, especially a mini-program, is realized through a page library module, a component library module, a state management module and a request management module. It can be understood that since all business logics can be processed by both the state management module and the request management module, the decoupling between components and pages is realized, so that components can be freely assembled between pages. Especially in the scenario of facing some new mini-program development needs, through the technical solution provided by the present invention, only some simple mini-program configurations need to be completed, and the required pages and components can be selected from the page library and the component library for combination to realize the required mini-program, which can greatly improve the development efficiency of mini-programs with the same business logic and has a promotable value.

Description

Technical Field

[0001] The present invention relates to the technical field of application development, and in particular to a componentized development method, system, device and storage medium for an application. Background Art

[0002] At present, the development of mini programs has become a trend. With the popularity of mini programs, major manufacturers have launched their own mini program platforms. For front-end developers, it is very costly to write multiple sets of code for different platforms. JD's front-end team has open-sourced the Taro framework to solve the problem of cross-platform development of mini programs, and has realized a set of code that can be compiled into mini programs for multiple platforms.

[0003] However, in the actual development process, a team or a company may have multiple mini-program development requirements due to business needs. The business logic corresponding to these mini-programs is basically the same, but there are some differences in the human-computer interaction function level. This is especially common in the e-commerce industry. The back-end interfaces corresponding to mini-programs of different brands are the same, and the business logic is basically the same, but the appearance theme of the corresponding brand is replaced. Taro eliminates the limitations and differences of various mini-program platforms through target code compilation, and developers can use various modular technologies freely like developing web front-ends. However, Taro only provides a basic framework, and the logic and specific implementation between each module still need to be implemented by the developer himself. At the same time, it also fails to provide a solution for multiple mini-programs to share a set of business logic. Summary of the invention

[0004] The present invention provides a component-based development system, method, device and storage medium for an application. Specifically, a first aspect of the present invention provides a component-based development system for an application, comprising:

[0005] Page library module, used to configure all the required pages needed by the application;

[0006] The component library module is used to configure all the components required by the application, and the required pages and components can be freely matched and assembled;

[0007] The state management module is used to synchronize the state information between different required components;

[0008] The request management module is used to realize the communication between the application and the background server.

[0009] In a possible implementation of the first aspect above, the page library module includes a page library directory, and the component library module includes a component library directory;

[0010] The component library directory corresponds to the page library directory, and the component library directory is mapped according to the page library directory.

[0011] In a possible implementation of the first aspect above, the component library module includes a number of general components and a number of functional components;

[0012] Common components are applicable to multiple pages in the page library and are located under the common location of the component library directory;

[0013] Functional components are applicable to specific pages in the page library and are located under the location of the component library directory corresponding to the specific page.

[0014] In a possible implementation of the first aspect, the state management module includes a page state submodule and a function state submodule, wherein:

[0015] The page status submodule is used to obtain, store and process the private status information of each page;

[0016] The function status submodule is used to obtain, store and share the status information of each corresponding function.

[0017] In a possible implementation of the first aspect above, the state management module acquires and stores real-time state information of each component;

[0018] When any component needs to obtain real-time status information, directly obtain the real-time status information of the storage status from the status management module; and / or

[0019] Request the status management module to update and obtain real-time status information.

[0020] In a possible implementation of the first aspect above, when the request management module receives a request from the background server, the request is intercepted and uniformly sent to corresponding components and / or pages.

[0021] The second aspect of the present application provides a component-based development method for an application program, using the component-based development system for an application program provided in the first aspect, including the following steps:

[0022] Generate configuration files and environment variables corresponding to the application;

[0023] Select corresponding pages and components from the page library module and component library module according to the configuration files and environment variables;

[0024] By connecting the state management module and the request management module, the state control of the application and the communication with the background server can be realized.

[0025] In a possible implementation of the second aspect, the environment variables include:

[0026] Name variables are used to identify the corresponding pages and components of the application during the compilation process;

[0027] Interface environment variables are used to determine the interface environment used by the request management module during the compilation process;

[0028] Built-in environment variables that are used to determine the target platform for an application during compilation.

[0029] A third aspect of the present application provides a component-based development device for an application, comprising:

[0030] Memory for storing computer programs;

[0031] A processor is used to implement the component-based development method of the application provided in the second aspect when executing a computer program.

[0032] The fourth aspect of the present application provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the componentized development method of the application provided in the second aspect is implemented.

[0033] Compared with the prior art, the present invention has the following beneficial effects:

[0034] Through the technical solution provided by the present invention, the componentization technology for applications, especially the mini-programs involved in the background technology of this application, is realized through the page library module, the component library module, the state management module and the request management module. It can be understood that since all business logics can be processed by both the state management module and the request management module, the decoupling between components and pages is achieved, so that components can be freely assembled between pages. Especially in the scenario faced with some new mini-program development needs, through the technical solution provided by the present invention, only some simple mini-program configurations need to be completed, and the required pages and components can be selected from the page library and the component library for combination to realize the required mini-program, which can greatly improve the development efficiency of mini-programs with the same business logic and has promotional value. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] Other features, objects and advantages of the present invention will become more apparent from the detailed description of non-limiting embodiments made with reference to the following drawings:

[0036] Figure 1 According to an embodiment of the present invention, a structural schematic diagram of a component-based development method for an application is shown;

[0037] Figure 2 According to an embodiment of the present invention, a schematic diagram of the directory structure of a component library module is shown;

[0038] Figure 3 According to an embodiment of the present invention, a schematic diagram of the structure of a state management module is shown;

[0039] Figure 4 According to an embodiment of the present invention, a schematic diagram of a process of component-based development of an application is shown;

[0040] Figure 5 According to an embodiment of the present invention, a project structure of componentization technology is shown;

[0041] Figure 6 According to an embodiment of the present invention, a schematic diagram of the structure of an electronic device is shown;

[0042] Figure 7 According to an embodiment of the present invention, a schematic diagram of the structure of a computer-readable storage medium is shown. DETAILED DESCRIPTION

[0043] The present invention is described in detail below in conjunction with specific embodiments. The following embodiments will help those skilled in the art to further understand the present invention, but are not intended to limit the present invention in any form. It should be noted that, for those of ordinary skill in the art, several changes and improvements can also be made without departing from the concept of the present invention. These all belong to the protection scope of the present invention.

[0044] As used herein, the term "including" and its variations mean open inclusion, i.e., "including but not limited to". Unless otherwise stated, the term "or" means "and / or". The term "based on" means "based at least in part". The terms "an example embodiment" and "an embodiment" mean "at least one example embodiment". The term "another embodiment" means "at least one additional embodiment". The terms "first", "second", etc. may refer to different or the same objects. Other explicit and implicit definitions may also be included below.

[0045] In view of the above problems existing in the prior art. In some embodiments provided by the present invention, Figure 1 FIG. 1 shows a schematic diagram of the structure of a component-based development system for an application. Figure 1 As shown, the componentized development system of the above application may include:

[0046] The page library module 001 is used to configure all the required pages required by the application.

[0047] The component library module 002 is used to configure all the components required for the application, and the required pages and components are freely matched and assembled.

[0048] The state management module 003 is used to synchronize the state information between different required components.

[0049] The request management module 004 is used to implement the communication between the application and the background server.

[0050] In the above embodiment, further, the page library module 001 may include a page library directory, and the component library module 002 may include a component library directory, wherein the component library directory corresponds to the page library directory, and the component library directory is mapped according to the page library directory. It can be understood that, since some components can only be used on corresponding pages, mapping the component library directory according to the directory of the page library is equivalent to classifying all components in the component library. When it is necessary to introduce components in the page, only the components in the corresponding directory of the component library need to be introduced.

[0051] In the above embodiment, further, the component library module 002 may include several general components and several functional components, wherein the general components are applicable to multiple pages in the page library and are located in the general location of the component library directory; the functional components are applicable to specific pages in the page library and are located in the location of the component library directory corresponding to the specific page.

[0052] Specifically, Figure 2 FIG. 1 shows a schematic diagram of a directory structure of a component library module 002. Figure 2 As shown, it can be seen that the lib folder under the component library directory stores components that will be used by multiple pages. As the main body of the component library, the components in it are universal, so they are generally highly decoupled components; and some page-specific components can be stored in the corresponding page directory. Such components are generally function implementation modules for specific pages, such as a product list, a form, etc. Most of these components are assembled from components in lib.

[0053] It is understandable that the component library module 002 is responsible for the implementation of specific human-computer interaction functions in all pages. In order to improve the reusability of components as much as possible, multiple sets of styles can be provided for the same component according to environment variables, which is more effective for the reuse of components with basically similar page structures. In terms of setting, the components are required to be as internally closed as possible and not dependent on the page state. This is because the reused components are not only required to be reused between different applets, but also required to be reused between different pages. This requires that there should be no coupling between the components and the pages, and the components themselves are only coupled with the corresponding logic modules in the state management module 003.

[0054] In the above embodiment, the status management module 003 may include a page status submodule and a function status submodule, wherein: the page status submodule is used to acquire, store and process the private status information of each page; the function status submodule is used to acquire, store and share the status information of each corresponding function.

[0055] It can be understood that the state management module 003 is essentially a redux state manager. Specifically, Figure 3 A schematic diagram of the structure of a state management module 003 is shown. It can be seen that the state management module 003 is divided into two parts: pages and modules. Pages correspond to each page, and this part mainly stores and processes some private states of the corresponding page; and modules are divided according to actual business needs. Taking e-commerce business as an example, modules generally include product modules, order modules, shopping cart modules, and user modules. The states in these modules are generally used in multiple components or pages.

[0056] In the above embodiment, further, the status management module 003 acquires and stores the real-time status information of each component; when any component needs to acquire the real-time status information, the real-time status information of the storage status is directly acquired from the status management module; and / or the status management module is requested to update and acquire the real-time status information.

[0057] For example, in some specific application scenarios of the present application, in the user identity authentication detection function component, it is possible to detect whether the identity of the accessing user is a member. After the detection is completed, the user identity authentication detection function component can feed back the status information that the user is a member to the status management module 003 for storage, so that the other functional components can directly obtain it from the status module 003 when they need to verify whether the user identity is a member. In other specific application scenarios of the present application, in the process of limiting the need to authenticate the legitimacy of the user access operation once every preset time interval, in the prior art, different functional components often initiate authentication requests autonomously according to their own needs, while in the technical solution provided by the present application, the above authentication requests can be uniformly initiated by the status management module 003, and other functional components only need to read the authentication status.

[0058] In the above embodiment, when the request management module 004 receives a request from the background server, the request is intercepted and uniformly sent to the corresponding components and / or pages. It can be understood that the mini program needs to communicate with the background server, and the request management module 004 is equivalent to adding a layer of encapsulation to the mini program. During the upgrade or update of the background server, all http requests need to be implemented through the request management module 004. For example, during the update of the privacy protection terms, there is no need to update the logic in each page, but to implement the global status update through the request management module 004.

[0059] Figure 4According to an embodiment of the present application, a flowchart of a component-based development method for an application is disclosed. This development method applies the component-based development system for an application provided by the above embodiment. Specifically, Figure 4 As shown, the following steps may be included:

[0060] Step 401: Generate a configuration file and environment variables corresponding to the application program. The configuration file and environment variables will be described in detail later.

[0061] Step 402: Select corresponding pages and components from the page library module and component library module according to the configuration file and environment variables.

[0062] Step 403: The state control of the application program and the communication with the background server are realized by connecting the state management module and the request management module.

[0063] In a specific implementation of the above embodiment, Figure 5 Figure 1 shows a project structure of component technology, from which it can be seen that the configuration items of the configuration file are exactly the same as those of the standard native application configuration file, which is equivalent to the app.config.json file in the native application. Figure 5 As shown, the pages configuration item in the configuration file selects the pages required by the mini-program, and the app.config.ts file corresponds to the app.config.json file. Since the configuration files corresponding to each mini-program can be stored in the app folder, the corresponding mini-program configuration file can be found in the app folder in the app.config.ts file according to the environment variables during packaging. It can be understood that the main function of the configuration file in the aforementioned step 401 is to specify which pages the mini-program has, and these pages must be included in the page library module, thereby enabling each mini-program to select pages from the page library during the development process.

[0064] In a specific implementation of the above embodiment, the environment variables may further include: name variables, interface environment variables, and built-in environment variables. The name variables are used to determine the pages and components corresponding to the application during the compilation process; the interface environment variables are used to determine the interface environment used by the request management module during the compilation process; and the built-in environment variables are used to distinguish and determine the target platform corresponding to the application during the compilation process.

[0065] It is understood that various aspects of the technical solution of the present invention can be implemented as a system, method or program product. Therefore, various aspects of the technical solution of the present invention can be specifically implemented in the following forms, namely, a complete hardware implementation method, a complete software implementation method (including firmware, microcode, etc.), or a combination of hardware and software implementation methods, which can be collectively referred to as "circuit", "module" or "platform" here.

[0066] Those skilled in the art should understand that the above-mentioned units, modules or steps of the present invention can be implemented by a general-purpose computing device, they can be concentrated on a single computing device, or distributed on a network composed of multiple computing devices. Optionally, they can be implemented by program codes executable by the computing device, so that they can be stored in a storage medium and executed by a computing device, and in some cases, the steps shown or described can be executed in an order different from that shown here, or they can be made into individual integrated circuit modules separately, or multiple modules or steps therein can be made into a single integrated circuit module for implementation.

[0067] Figure 6 According to some embodiments of the present invention, a schematic diagram of the structure of an electronic device is shown, and the electronic device is used to implement the component development method of the application program in the above embodiments. Figure 6 The electronic device 600 implemented according to the implementation method in this embodiment is described in detail. Figure 6 The electronic device 600 shown is only an example and should not bring any limitation to the functions and scope of use of any embodiment of the technical solution of the present invention.

[0068] like Figure 6 As shown, the electronic device 600 is in the form of a general computing device. The components of the electronic device 600 may include but are not limited to: at least one processing unit 610, at least one storage unit 620, a bus 630 connecting different platform components (including the storage unit 620 and the processing unit 610), a display unit 640, etc.

[0069] The storage unit stores program codes, which can be executed by the processing unit 610, so that the processing unit 610 implements the various functional modules in the component development system of the above-mentioned application in this embodiment.

[0070] The storage unit 620 may include a readable medium in the form of a volatile storage unit, such as a random access unit (RAM) 6201 and / or a cache storage unit 6202 , and may further include a read-only storage unit (ROM) 6203 .

[0071] The storage unit 620 may also include a program / utility 6204 having a set (at least one) of program modules 6205, such program modules 6205 including but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment.

[0072] Bus 630 may represent one or more of several types of bus structures, including a memory unit bus or memory unit controller, a peripheral bus, an accelerated graphics port, a processing unit, or a local bus using any of a variety of bus architectures.

[0073] The audio and video signal synchronization processing device 600 can also communicate with one or more external devices 700 (such as a keyboard, a pointing device, a Bluetooth device, etc.), and can also communicate with one or more devices that enable a user to interact with the electronic device 600, and / or communicate with any device that enables the electronic device to communicate with one or more other computing devices (such as a router, a modem, etc.). Such communication can be performed through an input / output (I / O) interface 650. In addition, the electronic device 600 can also communicate with one or more networks (such as a local area network (LAN), a wide area network (WAN) and / or a public network, such as the Internet) through a network adapter 660. The network adapter 660 can communicate with other modules of the electronic device 600 through the bus 630. It should be understood that although Figure 6 Not shown, other hardware and / or software modules may be used in conjunction with electronic device 600, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage platforms.

[0074] In some embodiments of the present invention, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the various functional modules in the componentized development system disclosed above can be realized.

[0075] Although this embodiment does not list other specific implementation methods in detail, in some possible implementation methods, various aspects of the technical solution of the present invention can also be implemented in the form of a program product, which includes program code. When the program product is run on a terminal device, the program code is used to enable the terminal device to execute the steps of the implementation methods in various embodiments of the technical solution of the present invention described in the componentized development method of the application in the technical solution of the present invention.

[0076] Figure 7 According to some embodiments of the present invention, a schematic diagram of the structure of a computer-readable storage medium is shown. Figure 7As shown, a program product 800 for implementing the above method in an embodiment of the technical solution of the present invention is described, which can adopt a portable compact disk read-only memory (CD-ROM) and include program code, and can be run on a terminal device, such as a personal computer. Of course, the program product generated according to this embodiment is not limited to this. In the technical solution of the present invention, the readable storage medium can be any tangible medium containing or storing a program, and the program can be used by or in combination with an instruction execution system, an apparatus or a device.

[0077] The program product may use any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of readable storage media (a non-exhaustive list) include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0078] Computer readable storage media may include data signals propagated in baseband or as a carrier-area, wherein readable program codes are carried. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. The readable storage medium may also be any readable medium other than a readable storage medium, which may send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, device, or device. The program code contained on the readable storage medium may be transmitted using any suitable medium, including but not limited to wireless, wired, optical cable, RF, etc., or any suitable combination thereof.

[0079] The program code for performing the operation of the technical solution of the present invention can be written in any combination of one or more programming languages, including object-oriented programming languages ​​such as Java, C++, etc., and also conventional procedural programming languages ​​such as C language or similar programming languages. The program code can be executed entirely on the user computing device, locally on the user device, as an independent software package, locally on the user computing device, locally on the remote computing device, or entirely on the remote computing device or server. In the case of a remote computing device, the remote computing device can be connected to the user computing device through any type of network, including a local area network (LAN) or a wide area network (WAN), or can be connected to an external computing device (for example, using an Internet service provider to connect through the Internet).

[0080] In summary, through the technical solution provided by the present invention, the componentization technology for applications, especially the mini-programs involved in the background technology of this application, is realized through the page library module, the component library module, the state management module and the request management module. It can be understood that since all business logics can be processed by both the state management module and the request management module, the decoupling between components and pages is achieved, so that components can be freely assembled between pages. Especially in the scenario of facing some new mini-program development needs, the technical solution provided by the present invention only needs to complete some simple mini-program configurations, and the required pages and components can be selected from the page library and the component library to combine to realize the required mini-programs, which can greatly improve the development efficiency of mini-programs with the same business logic and has promotional value.

[0081] The above description is only a description of the preferred embodiment of the technical solution of the present invention, and is not any limitation on the scope of the technical solution of the present invention. Any changes and modifications made by ordinary technicians in the field of the technical solution of the present invention based on the above disclosure shall fall within the scope of protection of the claims.

Claims

1. A componentized development system for an application, characterized in that: include: A page library module, used to configure all required pages required by the application; The page library module includes a page library directory, and the component library module includes a component library directory; The component library directory corresponds to the page library directory, and the component library directory is mapped according to the page library directory; A component library module is used to configure all the required components required by the application, and the required pages and required components are freely matched and assembled; the component library module includes several general components and several functional components; the general components are applicable to multiple pages in the page library and are located in the general position of the component library directory; the functional components are applicable to specific pages in the page library and are located in the position of the component library directory corresponding to the specific page; A state management module, used to synchronize state information between different required components; The state management module includes a page state submodule and a function state submodule, wherein: the page state submodule is used to acquire, store and process the private state information of each page; the function state submodule is used to acquire, store and share the state information of each corresponding function; the state management module acquires and stores the real-time state information of each component; In the case where any of the components needs to obtain the real-time status information, directly obtain the real-time status information of the storage status from the status management module; and / or request the status management module to update and obtain the real-time status information; The request management module is used to realize the communication between the application and the background server. When the request management module receives a request from the background server, the request is intercepted and uniformly sent to the corresponding component and / or page.

2. A component-based development method for an application, characterized in that: A componentized development system for an application program according to claim 1, comprising the following steps: Generate configuration files and environment variables corresponding to the application; According to the configuration file and the environment variables, select corresponding pages and components from the page library module and the component library module; The state control of the application and the communication with the background server are realized by connecting the state management module and the request management module.

3. The component-based development method for an application according to claim 2, characterized in that: The environment variables include: A name variable, used to determine the page and the component corresponding to the application during the compilation process; An interface environment variable, used to determine the interface environment used by the request management module during the compilation process; Built-in environment variables used to determine the target platform for the application during compilation.

4. A component-based development device for an application, characterized in that: include: Memory for storing computer programs; A processor, configured to implement the component-based development method for an application as claimed in any one of claims 2 to 3 when executing the computer program.

5. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the component-based development method of the application program as claimed in any one of claims 2 to 3 is implemented.

Images