Micro-front-end implementation method and device applied to WeChat applet development

Abstract

The invention relates to the technical field of computers, in particular to a micro-front-end implementation method and device applied to WeChat applet development, and the method comprises the steps: obtaining applet product codes generated by a plurality of frameworks; performing fusion processing on the applet product codes generated by the plurality of frameworks through a compiling platform plug-in; and injecting the fused code into the basic applet to form a fusion product which can be published and online. Therefore, the problems that in the related technology, a micro-front-end cross-frame or cross-version function developed by a WeChat applet is difficult to reuse, project technology upgrading is blocked and the like are solved, the research and development cost and the maintenance cost of an applet project are reduced, and project technology upgrading iteration is smoother.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a micro-frontend implementation method and apparatus for WeChat mini-program development. Background Technology

[0002] Currently, the engineering level of WeChat Mini Program projects continues to improve, driving the emergence of several excellent Mini Program engineering frameworks, such as uni-app and tarojs. These frameworks use compilation platforms (such as Webpack and Vite) to convert code written in popular front-end Vue and React syntax into native WeChat Mini Program code, thereby helping developers quickly complete the development and launch of Mini Programs.

[0003] However, the related technologies have some problems: on the one hand, the code conversion process of the frameworks in these technologies is not a purely static conversion; while generating the necessary code, some logic code that needs to be loaded at the runtime of the WeChat Mini Program is retained. On the other hand, there are compatibility conflicts in the runtime logic of different frameworks (such as uniapp and tarojs). In addition, there are certain limitations to the reuse of functions across frameworks or versions, and project technology upgrades are easily constrained by the old framework, which affects the iteration efficiency.

[0004] Therefore, there is an urgent need for a micro-frontend implementation plan that can achieve the integration of functions across multiple frameworks, improve reusability, and ensure smooth technology upgrades. Summary of the Invention

[0005] This application provides a micro-frontend implementation method and apparatus for WeChat mini-program development, in order to solve the problems of difficulty in reusing functions across frameworks or versions and obstacles to project technology upgrades in related technologies, thereby reducing the R&D and maintenance costs of mini-program projects and making project technology upgrades and iterations smoother.

[0006] The first aspect of this application provides a micro-frontend implementation method for WeChat Mini Program development, including the following steps: Obtain the mini-program artifact code generated by multiple frameworks; The compilation platform plugin is used to merge the mini-program output code generated by the multiple frameworks. The merged code is injected into the basic mini-program to form a merged product that can be published and launched.

[0007] Optionally, in some embodiments, the compilation platform plugin is implemented based on webpack or vite; The compilation platform plugin is used to parse the native artifact code generated by different frameworks and extract the common code modules from each native artifact code.

[0008] Optionally, in some embodiments, the general code module includes: page configuration file, component definition file, and style resource file; The general-purpose code modules avoid conflicts during the integration process through path mapping and namespace isolation.

[0009] Optionally, in some embodiments, the fusion processing of the mini-program output code generated by the multiple frameworks through the compilation platform plugin specifically includes: Identify the runtime logic in the artifact code generated by each framework, and replace the runtime logic in the artifact code generated by each framework with a unified runtime adaptation layer; Merge the page routing tables to ensure that functional modules of different frameworks can be accessed through a unified routing mechanism; Deduplicat and optimize style resources to reduce the introduction of redundant code.

[0010] Optionally, in some embodiments, the runtime adaptation layer is used to shield the runtime differences between different frameworks, enabling the functional modules of each framework to work collaboratively in the same mini-program.

[0011] A second aspect of this application provides a micro-frontend implementation device for WeChat mini-program development, comprising: The code parsing module is used to acquire and parse the mini-program artifact code generated by multiple frameworks; The code fusion module is used to fuse the parsed code. The code injection module is used to inject the merged code into the basic mini-program, forming a merged product that can be released and launched.

[0012] Optionally, in some embodiments, the code parsing module includes: The syntax analysis unit is used to identify common code modules in each native artifact code; The dependency extraction unit is used to extract the dependencies between various general-purpose code modules.

[0013] Optionally, in some embodiments, the code fusion module specifically includes: The adaptation unit is used to identify the runtime logic part in the output code generated by each framework and replace the runtime logic part in the output code generated by each framework with a unified runtime adaptation layer. The merging unit is used to merge page routing tables to ensure that functional modules of different frameworks can be accessed through a unified routing mechanism. The optimization unit is used to deduplicate and optimize style resources, reducing the introduction of redundant code.

[0014] A third aspect of this application provides an electronic device, including: a memory, a processor, and a computer program stored in the memory and executable on the processor. The processor executes the program to implement a micro-frontend implementation method for WeChat mini-program development as described in the above embodiments.

[0015] The fourth aspect of this application provides a computer program product having a computer program stored thereon, which is executed by a processor to implement a micro-frontend implementation method for WeChat mini-program development as described in the above embodiments.

[0016] The beneficial effects of the embodiments of this application are as follows: (1) This application utilizes the characteristic that the output code generated by multiple frameworks is essentially native WeChat Mini Program code by developing a compilation platform plugin, thus achieving a technical solution for merging the code generated by multiple frameworks. Specifically, this application enables functional modules developed by different frameworks to work collaboratively within the same Mini Program through unified adaptation of runtime logic, merging of page routing tables, and optimization of style resources. Furthermore, this application reduces the R&D and maintenance costs of Mini Program projects, while also eliminating the constraints of older framework versions on project technology upgrades, providing smoother technical support for project iteration. Therefore, it solves the problem of difficulty in reusing cross-framework or cross-version functions in related technologies.

[0017] (2) In practical applications, the technical solution of this application is implemented through specific compilation plugins. Developers can integrate the functional modules of multiple mini-programs into a basic mini-program, thereby forming a fusion product that can be released and launched. This improves the efficiency of function reuse, provides technical support for the micro-frontend architecture of WeChat mini-programs, and promotes technological progress in the field of mini-program development.

[0018] Additional aspects and advantages of this application will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of this application. Attached Figure Description

[0019] The above and / or additional aspects and advantages of this application will become apparent and readily understood from the following description of the embodiments taken in conjunction with the accompanying drawings, wherein: Figure 1 This is a flowchart illustrating a micro-frontend implementation method for WeChat Mini Program development according to an embodiment of this application; Figure 2 This is a flowchart illustrating the implementation of a WeChat Mini Program micro-frontend architecture according to a specific embodiment of this application; Figure 3 This is a block diagram illustrating a micro-frontend implementation device for WeChat mini-program development according to an embodiment of this application; Figure 4 This is a block diagram of an electronic device provided according to an embodiment of this application. Detailed Implementation

[0020] The embodiments of this application are described in detail below. Examples of these embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals denote the same or similar elements or elements having the same or similar functions throughout. The embodiments described below with reference to the accompanying drawings are exemplary and intended to explain this application, and should not be construed as limiting this application.

[0021] The following description, with reference to the accompanying drawings, illustrates a micro-frontend implementation method and apparatus for WeChat Mini Program development. Addressing the difficulties in cross-framework or cross-version function reuse and project technical upgrade obstacles in related technologies mentioned in the background section, this application provides a micro-frontend implementation method for WeChat Mini Program development. In this method, Mini Program artifact code generated by multiple frameworks is obtained; the artifact code generated by the multiple frameworks is fused using a compilation platform plugin; and the fused code is injected into the base Mini Program to form a deployable fused artifact. This solves the problems of difficulty in cross-framework or cross-version function reuse and project technical upgrade obstacles in related technologies for WeChat Mini Program development, reducing the R&D and maintenance costs of Mini Program projects and making project technical upgrades and iterations smoother.

[0022] Specifically, Figure 1 This is a flowchart illustrating a micro-frontend implementation method for WeChat mini-program development, provided as an embodiment of this application.

[0023] like Figure 1 As shown, this micro-frontend implementation method for WeChat mini-program development includes the following steps: In step S101, the mini-program output code generated by multiple frameworks is obtained.

[0024] In this context, "multiple frameworks" refers to different development tools or libraries capable of compiling source code into WeChat Mini Program code. In this application's embodiments, these include Taro, uni-app, the native Mini Program framework, and even different major versions of the same framework (such as Taro2 and Taro3). The artifact code generated by these frameworks is essentially the native code of WeChat Mini Programs. However, due to design differences among frameworks, their runtime logic, page routing tables, and style resources may conflict or be redundant. Mini Program artifact code refers to the collection of code files that are ultimately output by the aforementioned frameworks after compilation and construction, and can be directly run in the WeChat Mini Program engine.

[0025] Understandably, although different frameworks differ greatly during development and runtime, they all share a common goal: to generate code that can be recognized and executed by the WeChat Mini Program platform. Therefore, their output (product code) is standardized and unified. Due to the significant differences in source code syntax, project structure, component libraries, and build configurations among different frameworks, directly merging at the Vue / React source code level is technically and engineeringally impractical, leading to endless adaptation and compatibility issues. Therefore, this application's embodiment does not perform source code-level fusion.

[0026] This application's embodiments bypass the incompatible "runtime logic" of various frameworks by targeting the final, static artifacts, moving the integration point from the mini-program's runtime after launch to the build stage. Regardless of the complexity of the upstream technologies used, at the artifact level, they all become "standard components" such as WXML, WXSS, JS, and JSON. This allows this application's embodiments to handle code from all sources using a unified set of tools and methods, greatly simplifying the problem. As long as a framework can output standard WeChat mini-program artifacts, it can be integrated using this application's method, regardless of whether it internally uses Vue, React, or other technologies.

[0027] Optionally, the applet artifact code in this application embodiment can be obtained as an NPM (Node Package Manager) dependency package, or directly obtained through a file system path, or obtained from a continuous integration / deployment system.

[0028] Therefore, after step S101 is completed, the host mini-program's construction context already contains one or more complete mini-program artifact code folders from different frameworks, preparing the raw materials for the next step of "analysis, modification and integration".

[0029] Therefore, step S101 obtains the mini-program code from different technology stacks by unifying it to the "standard product code" level, thus establishing a unified foundation for subsequent integration processing. This achieves the decoupling of the technology stack, lays the foundation for cross-framework function reuse and independent development, and is the cornerstone of building the micro-frontend architecture.

[0030] In step S102, the code output of the mini-program generated by multiple frameworks is merged through the compilation platform plugin.

[0031] Among them, the compilation platform plugin is a custom program written according to the specifications of the build tool (such as Webpack, Vite) during its operation. It acts like a "hook," intervening at a specific stage of code building to process the code. The "fusion processing" in this application embodiment refers to the process of integrating and recombining multiple independent and discrete mini-program artifact code packages into a single, fully functional, and normally functioning mini-program project through a series of technical means.

[0032] Understandably, integrating micro-frontends on the user side (runtime) in related technologies incurs performance overhead and complexity. This application moves the integration work to the developer's build phase, generating a clean and standard final product through one-time, offline processing, thereby avoiding runtime overhead and uncertainty.

[0033] Understandably, although the inputs are "black box" products from different frameworks, the "fusion processing" process itself is standardized and programmable. The plugin will process all inputs uniformly according to preset rules (such as route merging, style isolation, and runtime replacement), thereby transforming "differences" into "unity".

[0034] Specifically, in this embodiment of the application, the compilation plugin of this application is imported and configured in the build configuration file of the host mini-program (such as webpack.config.js or vite.config.js), and a list of sub-application artifact paths to be integrated is passed in; when the developer executes the build command (such as npm run build), the build tool starts and calls the plugin of this application at a specific stage of its life cycle (such as before all module packaging optimization); the plugin starts working, and it contains a processing pipeline that will execute the various tasks mentioned in the subsequent summary in sequence (such as extracting code modules, replacing runtime, merging routes, etc.); after all processing steps are completed, the plugin writes the final merged file to the output directory (such as the dist directory), and the contents of this directory are a brand new mini-program that can be directly uploaded to the WeChat mini-program platform.

[0035] Therefore, in step S102, the multi-framework artifacts are automatically integrated through a compile-time plugin, transforming the complex runtime collaboration problem into a one-time build-time engineering problem. This achieves seamless integration of mini-programs with different technology stacks and ensures that the final application has performance similar to native development.

[0036] Optionally, in some embodiments, the compilation platform plugin is implemented based on Webpack or Vite; the compilation platform plugin is used to parse the native artifact code generated by different frameworks and extract the common code modules in each native artifact code.

[0037] Webpack and Vite are two mainstream front-end build tools. Webpack is based on bundling and has powerful features and a mature ecosystem; Vite is based on native ES (ECMAScript, the European Computer Manufacturers Association scripting language specification) modules, resulting in faster startup and build speeds. Webpack and Vite can be seamlessly integrated into most front-end development environments. General-purpose code modules refer to standardized parts that do not depend on a specific framework runtime and can be directly recognized and executed by the WeChat Mini Program engine.

[0038] Understandably, based on Webpack / Vite plugin development, this application's implementation can immediately reuse its vast plugin ecosystem, stable build process, and excellent performance, eliminating the need to reinvent the wheel and making it easy to promote and implement. Furthermore, among the products of different frameworks, only a portion is "framework-specific" (mainly runtime logic), while the majority is "general" (pages, components, styles). Extracting general code modules is a prerequisite for integration in this application's implementation; it separates the "reusable parts" from the "framework-bound parts," creating conditions for subsequent replacement and integration.

[0039] Specifically, developers create a MicroFrontendPlugin class that implements Webpack's Plugin interface or Vite's plugin format. In the apply or configureServer method, this class is attached to hooks in the build process. The plugin iterates through the artifact directories of each sub-application, reads JSON files, and extracts information such as pages (page paths) and usingComponents (components used). Based on the configuration, the plugin copies the corresponding wxml, wxss, js, and json files to a temporary directory or memory and marks them as "general modules to be merged".

[0040] Therefore, this application ensures the universality and developer-friendliness of the method by implementing plugins based on mainstream build tools; and by parsing and extracting common code modules, it lays a solid foundation for subsequent accurate integration and conflict avoidance, which is the key first step in achieving efficient and lossless integration.

[0041] Optionally, in some embodiments, the generic code module includes: page configuration files, component definition files, and style resource files; the generic code module avoids conflicts during the integration process through path mapping and namespace isolation.

[0042] The page configuration file is a JSON file for the mini-program, declaring the page's window style, components used, etc.; the component definition file contains wxml (template), wxss (style), js (logic), and json (configuration) files, defining a reusable custom component; the style resource file is a wxss file. "Path mapping" refers to modifying the paths referenced in the code so that they can still correctly point to the target resources in the merged new project; "namespace isolation" adds a unique prefix to the names of styles or components from different sub-applications to prevent name duplication and conflicts.

[0043] It is understandable that multiple independently developed applications are highly likely to use the same page paths (such as pages / index / index) and the same component names (such as...). <custom-button>Merging elements with the same style class name (e.g., btn) directly will inevitably lead to overwriting and confusion. Therefore, in the embodiments of this application, during the construction process, the aforementioned potential conflict points are "renamed" or "relocated" through programmatic means, thereby eliminating conflicts in the final product.

[0044] Specifically, in the path mapping stage, this embodiment maps the page path pages / user / index of the sub-application to pages / taro-app-user / index; in the host applet, through a unified routing configuration, the access address / taro-app / user is mapped to the actual physical path pages / taro-app-user / index; in the namespace isolation stage, this embodiment replaces the class name button in all wxss files of sub-application A with app-a-button in batches, and renames the component custom-list defined in sub-application B to app-b-custom-list in its configuration and all WXML that reference it.

[0045] Therefore, this application systematically solves the most common path and style conflict problems after multi-module integration by using two build-time methods: path mapping and namespace isolation. This ensures that each micro-application can maintain its independence and correctness after integration, as if it were running in its own sandbox.

[0046] Optionally, in some embodiments, the output code of the mini-program generated by multiple frameworks is fused through a compilation platform plugin. Specifically, this includes: identifying the runtime logic part in the output code generated by each framework and replacing the runtime logic part in the output code generated by each framework with a unified runtime adaptation layer; merging the page routing table to ensure that the functional modules of different frameworks can be accessed through a unified routing mechanism; and deduplicating and optimizing style resources to reduce the introduction of redundant code.

[0047] Optionally, in some embodiments, the runtime adaptation layer is used to shield the runtime differences between different frameworks, enabling the functional modules of each framework to work collaboratively in the same applet.

[0048] The runtime logic portion refers to the JavaScript code library injected by the framework to simulate the features of frameworks such as Vue / React in the mini-program environment, for example, Taro's @tarojs / runtime. The unified runtime adaptation layer is a lightweight, unified JavaScript bridge layer implemented in this application. It provides a standard API (Application Programming Interface) to handle code translated from different frameworks and to interact uniformly with the mini-program's native API. The page routing table is the `pages` array in the mini-program's `app.json`, defining the paths to all pages.

[0049] It is understandable that incompatibility between different framework runtime logics is the root cause of their inability to coexist. This application's embodiments replace all the disparate runtimes with a unified adaptation layer to eliminate conflicts. The route merging in this application is a "portal" function of the micro-frontend, allowing all scattered functional modules to be accessed and used through a unified, centralized routing system, providing users with a single, consistent application experience. Furthermore, style deduplication and optimization directly reduce the final package size, improving the download and startup speed of the mini-program.

[0050] Specifically, when replacing the runtime adaptation layer, the plugin of this application identifies the runtime libraries of each framework through code analysis (such as finding specific import statements or global variables); during the packaging process, specific runtime library files are excluded or replaced from the dependency graph; the unified adaptation layer library provided by this application is introduced, and the entry JS file of the sub-application is modified to make it interface with the new adaptation layer.

[0051] Then, the page routing tables are merged. Specifically, the plugin in this application collects the page paths of all sub-applications and the host application; after processing according to the path mapping rules, a brand new array containing all page paths is generated and written into the final output app.json.

[0052] Furthermore, style deduplication and optimization are performed. Specifically, the plugin of this application can use tools such as PostCSS to analyze all wxss files; merge identical style rules; and remove "dead code" styles that are not used by any WXML.

[0053] Therefore, this application eliminates the differences in underlying frameworks by replacing the unified runtime adaptation layer, achieving true technology stack independence; and by merging routes and optimizing styles, it creates a unified and efficient product experience at the application level, ultimately optimizing a multi-framework system into a single, native application with a unified technology stack.

[0054] In step S103, the merged code is injected into the basic mini-program to form a merged product that can be published and launched.

[0055] In this application embodiment, the basic mini-program is also called the "host mini-program". It is a fully functional WeChat mini-program that can run independently. It plays the role of "container" and "mother" in the whole architecture. It includes the core functions of the project, the main framework, TabBar, global state management and user login and other basic services.

[0056] The fused code in this application embodiment refers to the code from each sub-application after being processed in step S102. This code has been standardized and transformed, including: the runtime has been replaced, the styles have been added with namespaces, the component and page paths have been remapped, and the routing information has been extracted.

[0057] In this application embodiment, the publishable fusion artifact refers to a complete project directory that conforms to the official specifications of WeChat Mini Programs, which is finally generated after the injection operation is completed. This directory can be opened directly using WeChat Developer Tools and can be submitted for review and published online for end users to use.

[0058] Understandably, the value of a micro-frontend architecture ultimately needs to be realized through a unified user product. Users perceive a complete mini-program, rather than multiple pieced-together fragments. Step S103 is precisely for creating this unified, final user product, completing the closed loop from technical decomposition to product integration.

[0059] Specifically, step S103 is completed automatically under the control of the compilation plugin. The compilation plugin of this application first ensures that the standard WeChat mini program subdirectory structure exists in the build directory (such as the dist directory) of the basic mini program; copies the merged pages of each sub-application to the / pages / taro-app-user / directory of the basic mini program; copies the custom components of the sub-applications to the / components / directory of the basic mini program, and ensures that they use isolated naming; and copies static resources such as images and fonts to the corresponding directories of the basic mini program.

[0060] Furthermore, the plugin reads the paths of all pages to be injected and appends them all to the pages array in the app.json configuration file of the base mini-program; if necessary, it imports some common global styles in app.wxss using the @import statement; and in the usingComponents field of app.json, it registers those components from sub-applications that need to be used globally.

[0061] Thus, this application uses an automated build process to physically merge all standardized and non-conflicting sub-functional modules (sub-applications) with a main project (basic mini-program) as a container, generating a brand-new, single mini-program project package containing all expected functions. This project package is the complete application that can finally be submitted to the WeChat platform for users to use.

[0062] For example, Figure 2 This is a flowchart illustrating the implementation of a WeChat Mini Program micro-frontend architecture according to a specific embodiment of this application, as follows: Figure 2 As shown, mini-program projects with different technology stacks (Project 1, Project 2, Project 3) first generate native code modules (Module 1, Module 3) through their respective compilation platforms (compilers), and then the compilation platform plugins merge these modules to finally form a "fusion product" that can be released and launched, thereby realizing the reuse of mini-program functions across frameworks and versions.

[0063] In practical applications, developers can utilize the micro-frontend implementation method proposed in this application for WeChat Mini Program development to solve the problem of difficulty in reusing functions across frameworks or versions. For example, a company is maintaining a Mini Program project developed based on an older framework, but due to the need for technical upgrades, it needs to introduce functional modules developed using a newer framework. Solutions in related technologies require a complete project refactoring, which is not only time-consuming and labor-intensive but may also lead to instability of existing functions.

[0064] The technical solution of this application allows developers to integrate functional modules generated by the new version framework with those generated by the old version framework into a single basic mini-program, thereby achieving functional reuse while avoiding the risk of project refactoring. Furthermore, the method of this application reduces the development and maintenance costs of mini-program projects. Since functional modules from different frameworks can work collaboratively within the same mini-program, developers do not need to maintain a separate codebase for each framework, thus reducing redundant development work. Simultaneously, this invention eliminates the constraints imposed by older framework versions on project technology upgrades, providing smoother technical support for project iteration.

[0065] In practice, developers need to customize the build platform plugin according to their specific needs. For example, developers can modify the build platform plugin's configuration file to specify path mapping rules and namespace isolation strategies to adapt to the specific requirements of different projects. Furthermore, developers can adjust the implementation details of the runtime adaptation layer based on the complexity of the project, such as adding support for specific frameworks or optimizing compatibility with existing frameworks.

[0066] During the merging of page routing tables, developers need to pay special attention to the uniqueness and consistency of routing paths to avoid functional abnormalities caused by routing conflicts. For style resource optimization, developers can selectively enable or disable certain optimization strategies, such as removing unused style rules or renaming style selectors. These customized configuration options make the technical solution in this application highly flexible and scalable, capable of meeting the needs of different projects.

[0067] To enable those skilled in the art to fully understand and implement this application, the specific implementation principle of this application is further explained below in conjunction with a specific application scenario.

[0068] In actual development, developers need to integrate multiple mini-program functional modules generated by different frameworks into a single basic mini-program to achieve cross-framework or cross-version functional reuse. Starting from the mini-program output code generated by multiple frameworks, the code is processed by the compilation platform plugin to finally form a merged output that can be released and launched.

[0069] First, developers need to prepare mini-program artifact code generated by multiple frameworks. This code may originate from different development frameworks, such as Taro, WePY, or native mini-program development tools. These artifact code outputs are essentially native WeChat mini-program code, but due to design differences between frameworks, their runtime logic, page routing tables, and style resources may conflict or be redundant. Therefore, the role of the compilation platform plugin is to parse these artifact code outputs and extract common code modules, including page configuration files, component definition files, and style resource files. These common code modules avoid conflicts during the integration process through path mapping and namespace isolation. Specifically, path mapping is used to reorganize file paths, ensuring that files generated by different frameworks are not overwritten due to duplicate paths; namespace isolation distinguishes code modules from different frameworks by adding unique identifiers to filenames or class names.

[0070] Next, the compilation platform plugin performs fusion processing on the extracted common code modules. The specific steps of this fusion process include: identifying the runtime logic parts in the artifact code generated by each framework and replacing them with a unified runtime adaptation layer. The role of the runtime adaptation layer is to shield the runtime differences between different frameworks, enabling the functional modules of each framework to work collaboratively within the same mini-program. For example, some frameworks may use specific lifecycle functions or event binding mechanisms, and the runtime adaptation layer will unify these differences into the standard interface of WeChat mini-programs. Subsequently, the compilation platform plugin merges the page routing tables to ensure that functional modules from different frameworks can access each other through a unified routing mechanism. The merging process of the page routing tables involves parsing the routing configuration files generated by each framework and integrating them into a global routing table. During this process, the compilation platform plugin removes duplicate route paths and assigns a unique identifier to each route path to avoid conflicts.

[0071] Finally, the compilation platform plugin deduplicates and optimizes style resources, reducing the introduction of redundant code. The optimization process for style resources includes analyzing the style files generated by each framework, removing duplicate style rules, and renaming style selectors to avoid naming conflicts.

[0072] The micro-frontend implementation method for WeChat Mini Program development proposed in this application involves obtaining Mini Program artifact code generated by multiple frameworks; fusing the artifact code generated by multiple frameworks using a compilation platform plugin; and injecting the fused code into a basic Mini Program to form a deployable fused artifact. This solves the problems of difficulty in reusing cross-framework or cross-version functions and obstacles to project technology upgrades in related technologies for WeChat Mini Program development, reducing the R&D and maintenance costs of Mini Program projects and making project technology upgrades and iterations smoother.

[0073] Next, referring to the accompanying drawings, a micro-frontend implementation device for WeChat mini-program development is described according to an embodiment of this application.

[0074] Figure 3 This is a block diagram illustrating a micro-frontend implementation device for WeChat mini-program development, according to an embodiment of this application.

[0075] like Figure 3 As shown, the micro-frontend implementation device 10 for WeChat mini-program development includes: a code parsing module 100, a code fusion module 200, and a code injection module 300.

[0076] Specifically, the code parsing module 100 is used to acquire and parse the mini-program product code generated by multiple frameworks; the code fusion module 200 is used to fuse the parsed code; and the code injection module 300 is used to inject the fused code into the basic mini-program to form a fused product that can be released and launched.

[0077] Optionally, in some embodiments, the code parsing module 100 includes: a syntax analysis unit for identifying common code modules in each native artifact code; and a dependency extraction unit for extracting the dependencies between the common code modules.

[0078] Optionally, in some embodiments, the code fusion module 200 specifically includes: an adaptation unit, used to identify the runtime logic part in the output code generated by each framework, and replace the runtime logic part in the output code generated by each framework with a unified runtime adaptation layer; a merging unit, used to merge the page routing table to ensure that the functional modules of different frameworks can be accessed through a unified routing mechanism; and an optimization unit, used to deduplicate and optimize style resources to reduce the introduction of redundant code.

[0079] It should be noted that the foregoing explanation of an embodiment of a micro-frontend implementation method for WeChat mini-program development also applies to a micro-frontend implementation device for WeChat mini-program development, and will not be repeated here.

[0080] According to an embodiment of this application, a micro-frontend implementation device for WeChat Mini Program development includes a code parsing module for acquiring and parsing Mini Program product code generated by multiple frameworks; a code fusion module for fusion processing the parsed code; and a code injection module for injecting the fused code into a basic Mini Program to form a deployable fused product. This solves the problems of difficulty in reusing cross-framework or cross-version functions and obstacles to project technology upgrades in related technologies for WeChat Mini Program development, reducing the R&D and maintenance costs of Mini Program projects and making project technology upgrades and iterations smoother.

[0081] Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of this application. The electronic device may include: The memory 401, the processor 402, and the computer program stored on the memory 401 and capable of running on the processor 402.

[0082] When the processor 402 executes the program, it implements a micro-frontend implementation method for WeChat mini-program development provided in the above embodiments.

[0083] Furthermore, electronic devices also include: Communication interface 403 is used for communication between memory 401 and processor 402.

[0084] The memory 401 is used to store computer programs that can run on the processor 402.

[0085] The memory 401 may include high-speed RAM (Random Access Memory) memory, and may also include non-volatile memory, such as at least one disk storage.

[0086] If the memory 401, processor 402, and communication interface 403 are implemented independently, then the communication interface 403, memory 401, and processor 402 can be interconnected via a bus to complete communication between them. The bus can be an ISA (Industry Standard Architecture) bus, a PCI (Peripheral Component Interconnect) bus, or an EISA (Extended Industry Standard Architecture) bus, etc. The bus can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 4 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.

[0087] Optionally, in a specific implementation, if the memory 401, processor 402, and communication interface 403 are integrated on a single chip, then the memory 401, processor 402, and communication interface 403 can communicate with each other through an internal interface.

[0088] Processor 402 may be a CPU (Central Processing Unit), an ASIC (Application Specific Integrated Circuit), or one or more integrated circuits configured to implement the embodiments of this application.

[0089] This application also provides a computer program product on which a computer program is stored, which, when executed by a processor, implements the micro-frontend implementation method for WeChat mini-program development as described above.

[0090] In the description of this specification, the references to "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of this application. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.

[0091] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this application, "N" means at least two, such as two, three, etc., unless otherwise explicitly specified.

[0092] Any process or method described in the flowchart or otherwise herein can be understood as representing a module, segment, or portion of code comprising one or N executable instructions for implementing custom logic functions or processes, and the scope of the preferred embodiments of this application includes additional implementations in which functions may be performed not in the order shown or discussed, including substantially simultaneously or in reverse order depending on the functions involved, as should be understood by those skilled in the art to which embodiments of this application pertain.

[0093] It should be understood that the various parts of this application can be implemented using hardware, software, firmware, or a combination thereof. In the above embodiments, the N steps or methods can be implemented using software or firmware stored in memory and executed by a suitable instruction execution system. For example, if implemented in hardware, as in another embodiment, it can be implemented using any one or more of the following techniques known in the art: discrete logic circuits having logic gates for implementing logical functions on data signals, application-specific integrated circuits (ASICs) having suitable combinational logic gates, programmable gate arrays (FPGAs), field-programmable gate arrays (FPGAs), etc.

[0094] Those skilled in the art will understand that all or part of the steps of the methods in the above embodiments can be implemented by a program instructing related hardware. The program can be stored in a computer-readable storage medium, and when executed, the program includes one or a combination of the steps of the method embodiments.

[0095] Although embodiments of this application have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting this application. Those skilled in the art can make changes, modifications, substitutions and variations to the above embodiments within the scope of this application.

Claims

1. A micro-frontend implementation method for WeChat mini-program development, characterized in that, Includes the following steps: Obtain the mini-program artifact code generated by multiple frameworks; The compilation platform plugin is used to merge the mini-program output code generated by the multiple frameworks. The merged code is injected into the basic mini-program to form a merged product that can be published and launched.

2. The micro-frontend implementation method for WeChat mini-program development according to claim 1, characterized in that, The compilation platform plugin is implemented based on Webpack or Vite; The compilation platform plugin is used to parse the native artifact code generated by different frameworks and extract the common code modules from each native artifact code.

3. The micro-frontend implementation method for WeChat mini-program development according to claim 2, characterized in that, The general-purpose code module includes: page configuration files, component definition files, and style resource files; The general-purpose code modules avoid conflicts during the integration process through path mapping and namespace isolation.

4. The micro-frontend implementation method for WeChat mini-program development according to claim 1, characterized in that, The process of merging the mini-program output code generated by the multiple frameworks through a compilation platform plugin specifically includes: Identify the runtime logic in the artifact code generated by each framework, and replace the runtime logic in the artifact code generated by each framework with a unified runtime adaptation layer; Merge the page routing tables to ensure that functional modules of different frameworks can be accessed through a unified routing mechanism; Deduplicat and optimize style resources to reduce the introduction of redundant code.

5. A micro-frontend implementation method for WeChat mini-program development according to claim 4, characterized in that, The runtime adaptation layer is used to shield the runtime differences between different frameworks, enabling the functional modules of each framework to work collaboratively in the same mini-program.

6. A micro-frontend implementation device for WeChat mini-program development, characterized in that, include: The code parsing module is used to acquire and parse the mini-program artifact code generated by multiple frameworks; The code fusion module is used to fuse the parsed code. The code injection module is used to inject the merged code into the basic mini-program, forming a merged product that can be released and launched.

7. A micro-frontend implementation device for WeChat mini-program development according to claim 6, characterized in that, The code parsing module includes: The syntax analysis unit is used to identify common code modules in each native artifact code; The dependency extraction unit is used to extract the dependencies between various general-purpose code modules.

8. A micro-frontend implementation device for WeChat mini-program development according to claim 6, characterized in that, The code fusion module specifically includes: The adaptation unit is used to identify the runtime logic part in the output code generated by each framework and replace the runtime logic part in the output code generated by each framework with a unified runtime adaptation layer. The merging unit is used to merge page routing tables to ensure that functional modules of different frameworks can be accessed through a unified routing mechanism. The optimization unit is used to deduplicate and optimize style resources, reducing the introduction of redundant code.

9. An electronic device, characterized in that, include: The device includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement a micro-frontend implementation method for WeChat mini-program development as described in any one of claims 1-5.

10. A computer program product, comprising a computer program, characterized in that, The computer program is executed to implement a micro-frontend implementation method for WeChat mini-program development as described in any one of claims 1-5.

Images