A system, device and storage medium for realizing cross-platform of applets

Abstract

The application provides a system, a device and a storage medium for realizing cross-platform of applets, comprising: an RN application scaffold, which is used for packing an application data packet after a code program is written, uploading the application data packet to a server or starting a local Metro service; an APP base, which is used as a carrier for running the application data packet; and the application data packet is obtained through the server or the Metro service, and the application data packet is developed and run through a native APP. The application also relates to a device and a storage medium comprising the cross-platform realization system of the applets. The code is compiled into different platform native codes, so that the application has the same experience as the native application, and the problems caused by the performance defects of WebView are solved while the cross-platform is realized.

Description

Technical Field

[0001] This application relates to the field of information technology, specifically to a system, device, and storage medium for enabling cross-platform operation of mini-programs. Background Technology

[0002] With the development of smartphones, various industries have begun to develop corresponding apps to suit their needs. This has led to users downloading more and more apps on their phones, resulting in insufficient memory and causing phone lag. To solve this problem, various platforms have launched mini-programs and quick apps, which are lightweight applications embedded in apps. They are small in size, have low memory usage, are easy to manage, and are cross-platform. The current mini-program technology solution mainly utilizes the native WebView method.

[0003] Developing mini-programs using the native WebView component primarily involves running the mini-program as a webpage within the WebView container. This is equivalent to opening a set of webpages in a browser, offering significant improvements in cross-platform compatibility and file size compared to native apps. However, precisely because it's displayed in webpage format, it suffers from a series of common webpage issues, such as slow page loading and lack of permissions to access the device's own sensors for data acquisition. This results in a very unfriendly experience for both users and developers. Summary of the Invention

[0004] To address the aforementioned issues, embodiments of this application provide a system, device, and storage medium for enabling cross-platform mini-programs. The code is compiled into native code for different platforms, thereby providing an application with an experience indistinguishable from native applications. This achieves cross-platform compatibility while resolving the performance defects of WebView.

[0005] Therefore, one aspect of this application provides a system for enabling cross-platform operation of mini-programs, comprising:

[0006] The RN application scaffolding package, after the code is written, packages it into an application data package, which is then uploaded to the server or started as a local Metro service.

[0007] The APP base serves as the carrier for running the application data package; the application data package is obtained through a server or Metro service, and the application data package is run through native APP development.

[0008] Optionally, in combination with any of the above aspects, in another implementation of this aspect, the APP base includes an RN application module, an APP SDK module, and a debugging module; the RN application module displays the application data package and loads and parses the RN application; the APP SDK module provides a native SDK to the RN application based on the native base; and the debugging module is used for developing and debugging the RN application.

[0009] Optionally, in combination with any of the above aspects, in another implementation of this aspect, the APP SDK module includes a communication interface, native controls, and native APIs. The communication interface is used to communicate with the RN application; the native controls are additional native component libraries; and the native APIs provide APIs or tools that are not available to the RN application.

[0010] Optionally, in conjunction with any of the above aspects, in another implementation of this aspect, the debugging module develops and debugs the RN application, starts a local Metro service through the RN application scaffolding, obtains allowed access permissions from the mobile terminal and the PC, enters debug mode in the APP base and inputs the PC IP and Metro port number; opens the corresponding RN application module through the mobile terminal, loads and renders the application data package modified by the PC, in order to debug the code program.

[0011] Optionally, in conjunction with any of the above aspects, in another implementation of this aspect, the RN application scaffolding includes a main code module, an application UI framework module, a local Metro service module, and an RN application packaging module; the main code module is used for interface writing, data processing, and interface navigation operations of the RN application; the application UI framework module contains a basic component library and interface templates, and when writing the RN application, the corresponding components in the basic component library and interface templates are selected according to different needs; the local Metro service module is built into the RN application scaffolding and is used to cooperate with the debugging needs of the debugging module and configure Metro service options; the RN application packaging module is used to generate the application data package from the RN application for uploading to the server.

[0012] Optionally, in conjunction with any of the above aspects, in another implementation of this aspect, the main code module is provided with a routing unit, a state management unit, and a interface unit. The routing unit is used to uniformly register and configure all interfaces of the RN application; the state management unit stores the common data within the interfaces of the RN application; and the interface unit is used to store the interface code.

[0013] Optionally, in conjunction with any of the above aspects, in another implementation of this aspect, the Metro service can be started by running the Metro service command in the root directory of the RN application scaffold; the communication interface uses the mobile terminal APP's own hardware infrastructure and communication API to communicate with the RN application, and the application's communication methods include, but are not limited to, MQTT, Bluetooth, NFC, and Socket.

[0014] Alternatively, in conjunction with any of the above aspects, in another implementation of this aspect, the Metro service options include the service port number or packet filtering used in the debug module.

[0015] In another aspect of this application, an apparatus is provided, comprising a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement a system for enabling cross-platform mini-programs as described above.

[0016] Another aspect of this application provides a storage medium having a computer program stored thereon, which, when executed, implements a system for enabling cross-platform mini-programs as described above.

[0017] As described above, the system, device, and storage medium provided in this application for realizing cross-platform mini-programs, through the above method, allows the code written by developers using the React Native framework to be compiled into native code for different platforms, thereby enabling the application to have an experience indistinguishable from native applications. While achieving cross-platform compatibility, it also solves the problems caused by the performance defects of WebView. By configuring its own scaffolding method, it removes the official React Native base and some modules, allowing developers to select the required modules, develop and package them, and run them on the common base, reducing the application size and solving the problem of the React Native framework being too cumbersome.

[0018] The above summary provides a simplified overview of some concepts, which will be further described in detail in the following specific embodiments. The above summary is not intended to identify key or essential features of the claimed subject matter, nor is it intended to help determine the scope of the claimed subject matter. The claimed subject matter is not limited to embodiments that address any or all the shortcomings pointed out in the background art. Attached Figure Description

[0019] The accompanying drawings, incorporated in and forming part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application. To more clearly illustrate the technical solutions of the embodiments of this application, the drawings used in the description of the embodiments will be briefly introduced below. Obviously, those skilled in the art can obtain other drawings based on these drawings without any creative effort. These drawings and textual descriptions are not intended to limit the scope of the concept of this application in any way, but rather to illustrate the concepts of this application to those skilled in the art by referring to specific embodiments.

[0020] Figure 1 This is a schematic diagram of the modules in the embodiments provided in this application;

[0021] Figure 2 This is a schematic diagram of the debugging process of the debugging module in the embodiments provided in this application. Detailed Implementation

[0022] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0023] It should be noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element. Furthermore, components, features, and elements with the same names in different embodiments of this application may have the same meaning or different meanings, the specific meaning of which must be determined by its interpretation in that specific embodiment or further in conjunction with the context of that specific embodiment.

[0024] It should be understood that although the terms first, second, third, etc., may be used herein to describe various information, such information should not be limited to these terms. These terms are used only to distinguish information of the same type from one another. For example, without departing from the scope of this document, first information may also be referred to as second information, and similarly, second information may also be referred to as first information. Depending on the context, the word "if," as used herein, may be interpreted as "when," "when," or "in response to determination." Furthermore, as used herein, the singular forms "a," "an," and "the" are intended to also include the plural forms unless the context indicates otherwise. It should be further understood that the terms "comprising," "including," indicate the presence of the stated feature, step, operation, element, component, item, kind, and / or group, but do not exclude the presence, occurrence, or addition of one or more other features, steps, operations, elements, components, items, kinds, and / or groups. The terms "or," "and / or," "including at least one of the following," etc., as used in this application, may be interpreted as inclusive, or mean any one or any combination thereof. An exception to this definition will only occur if the combination of elements, functions, steps, or operations is inherently mutually exclusive in some way.

[0025] It should be understood that although the steps in the flowcharts of this application's embodiments are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some of the steps in the figures may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be performed alternately or in turn with other steps or at least a portion of the sub-steps or stages of other steps.

[0026] Depending on the context, the words “if” or “suppose” as used here can be interpreted as “when” or “in response to determination” or “in response to detection.” Similarly, depending on the context, the phrases “if determination” or “if detection (of the stated condition or event)” can be interpreted as “when determination” or “in response to determination” or “when detection (of the stated condition or event)” or “in response to detection (of the stated condition or event).”

[0027] It should be understood that the specific embodiments described herein are merely illustrative of this application and are not intended to limit this application.

[0028] Please see Figure 1 This application provides a system for achieving cross-platform mini-programs. Based on the React Native (RN) framework, the code is compiled into native code for different platforms, thereby enabling the application to have an experience indistinguishable from native applications. While achieving cross-platform compatibility, it solves the problems caused by the performance defects of WebView.

[0029] Specifically, this system includes an RN application scaffold and an APP base. After the RN application scaffold is completed, it packages the application into a data package and uploads it to the server or starts a local Metro service; while the APP base obtains the application data package through the server or Metro service and runs the application data package through native APP development.

[0030] The RN application scaffolding is a code toolkit that provides developers with the ability to run RN applications within a corresponding app framework during the development process. Developers can use this RN application scaffolding to minimize development difficulty and shorten the development cycle.

[0031] Specifically, the RN application scaffolding includes a main code module, an application UI framework module, a local Metro service module, and an application packaging module. The main code module is the core module of the RN application scaffolding, responsible for UI development, data processing, and UI navigation. This module includes a routing unit, a state management unit, and a UI unit. The routing unit is used for unified registration and configuration of all RN application interfaces, facilitating centralized management of these interfaces. The state management unit serves as the data processing center for the RN application; all common data within the application's interfaces is stored here, enabling data interaction and communication between different interfaces. The UI unit primarily stores the UI code; after the RN application is registered with the routing unit, the corresponding UI code can be written and stored in the UI unit.

[0032] The application UI framework module includes a basic component library and interface templates. Developers can choose the appropriate components and templates based on their needs when writing React Native (RN) applications, reducing the difficulty of UI development and quickly unifying the overall interface style of the RN application. The local Metro service module is built into the RN application scaffolding to facilitate debugging during development. A `metro.config.js` file is located in the root directory of the RN application scaffolding, where Metro service options can be configured, such as the service port number used in the debugging module or packaging filtering. Developers only need to run the Metro service command in the root directory of the RN application scaffolding to start the Metro service.

[0033] To facilitate application data package recognition within the APP base, an RN application packaging module is built into the RN application scaffolding. Developers only need to configure an `lg.config.js` file in the root directory of the RN application scaffolding, run the packaging command `yarn build`, and configure the version number, version description, etc. of the currently developed RN application. Then, executing the packaging command from the root directory will start the packaging program, generating an application data package. This application data package is uploaded to the server, which generates a QR code based on the application data package for the APP base to scan and obtain.

[0034] The APP base is the application data package, i.e., the carrier on which the RN application runs, and is developed using a native APP approach. The APP base includes three parts: the RN application module, the APP SDK module, and the debugging module. The RN application module is the interface container for the RN application running within the APP base; after the RN application runs, it is displayed, loaded, and parsed within the RN application module. The APP SDK module provides various near-native functionalities to the RN application based on the native base, including communication interfaces, native controls, and native APIs. The communication interface is used to communicate with the RN application, utilizing the mobile terminal APP's own hardware infrastructure and communication APIs. Communication methods include, but are not limited to, MQTT, Bluetooth, NFC, and Socket. Native controls are pre-edited additional native component libraries, used when the components in the RN application scaffolding are insufficient for editing high-performance or complex pages. Users can call additional native components through native controls. These high-performance or complex pages include room maps, complex animation styles, etc. By adding additional native components, the display effect of these scenarios in the RN application is improved. During the development of React Native (RN) applications, there may be APIs or tools that cannot be called in the RN application scaffolding, such as page back, getting the current mode of the app, and jumping to native pages. In such cases, native APIs can provide APIs or tools for RN applications.

[0035] The debugging module is used to debug RN applications during the development phase. The APP base connects to the RN application scaffolding Metro via Wi-Fi for RN application debugging. The debugging steps are as follows: Figure 2 As shown, first, start the local Metro service through the RN application scaffolding. Simultaneously, the mobile terminal and PC need to maintain a connection within the same local area network. Then, obtain permission from both the mobile terminal and PC. Enter debug mode in the debug module of the APP base and input the PC's IP address and Metro port number (the default Metro port number is 8081). Open the corresponding RN application on the mobile terminal and load and render the application data package modified by the PC to debug the code program.

[0036] This application provides a system, device, and storage medium for enabling cross-platform mini-programs. Through the aforementioned method, code written by developers using the React Native framework is compiled into native code for different platforms, thereby providing an application experience indistinguishable from native applications. This achieves cross-platform compatibility while resolving the performance defects caused by WebView. By configuring its own scaffolding method, the official React Native base and some modules are removed. Developers can choose the required modules, develop and package the application, and run it on the common base, reducing the application size and solving the problem of the React Native framework being too cumbersome.

[0037] The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0038] In this application, the same or similar terms, concepts, technical solutions and / or application scenario descriptions are generally described in detail only when they appear for the first time. When they appear again, they are generally not repeated for the sake of brevity. When understanding the technical solutions and other contents of this application, the same or similar terms, concepts, technical solutions and / or application scenario descriptions that are not described in detail later can be referred to their previous relevant detailed descriptions.

[0039] In this application, the descriptions of the various embodiments have different focuses. For parts that are not described in detail or recorded in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0040] The technical features of the present application can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of the present application.

[0041] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) as described above, and includes several instructions to cause a terminal device (which may be an electrical device or a network device, etc.) to execute the methods of each embodiment of this application.

[0042] The above are merely preferred embodiments of this application and do not limit the patent scope of this application. Any equivalent structural or procedural transformations made using the content of this application's specification and drawings, or direct or indirect applications in other related technical fields, are similarly included within the patent protection scope of this application.

Claims

1. A system for enabling cross-platform operation of WeChat mini-programs, characterized in that, include: The RN application scaffolding package, after the code is written, packages it into an application data package, which is then uploaded to the server or started as a local Metro service. The APP base is the carrier for the application data package to run; Obtain application data packages from servers or Metro services, and run application data packages through native APP development; The APP base includes an RN application module, an APP SDK module, and a debugging module; The RN application module displays the application data package and loads and parses the RN application; the APP SDK module provides a native SDK to the RN application based on the native base; the debugging module is used for development and debugging of the RN application. The APP SDK module includes a communication interface, native controls, and native APIs. The communication interface is used to communicate with RN applications. The native controls are additional native component libraries used to provide extended native components when the components in the RN application scaffolding cannot meet the requirements of high-performance or complex pages. The native APIs provide APIs or tools that are not available in RN applications. The RN application scaffolding includes a main code module, an application UI framework module, a local Metro service module, and an RN application packaging module. The main code module is used for interface writing, data processing, and interface navigation operations in the RN application. The application UI framework module contains a basic component library and interface templates. When writing the RN application, the corresponding components in the basic component library and interface templates are selected according to different needs. The local Metro service module is built into the RN application scaffolding and is used to support the debugging needs of the debugging module and configure Metro service options. The RN application packaging module is used to generate the application data package from the RN application for uploading to the server.

2. The system for implementing cross-platform mini-programs as described in claim 1, characterized in that: The debugging module develops and debugs the RN application. It starts a local Metro service through the RN application scaffolding, obtains permission access from the mobile terminal and the PC, enters debug mode in the APP base and enters the PC IP and Metro port number; it opens the corresponding RN application module through the mobile terminal, loads and renders the application data package modified by the PC, and debugs the code program.

3. The system for implementing cross-platform mini-programs as described in claim 1, characterized in that: The main code module includes a routing unit, a state management unit, and a user interface unit. The routing unit is used to uniformly register and configure all interfaces of the RN application; the state management unit stores common data within the interfaces of the RN application; and the user interface unit stores the interface code.

4. The system for implementing cross-platform mini-programs as described in claim 1, characterized in that: The Metro service can be started by running the Metro service command in the root directory of the RN application scaffold. The communication interface uses the mobile terminal APP's own hardware infrastructure and communication API to communicate with the RN application. The communication methods of the application include, but are not limited to, MQTT, Bluetooth, NFC, and Socket.

5. The system for implementing cross-platform mini-programs as described in claim 1, characterized in that: The Metro service options include the service port number used in the debug module or package filtering.

6. A device, characterized in that, It includes a processor, a memory, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements a system for cross-platform implementation of mini-programs as described in any one of claims 1 to 5.

7. A storage medium, characterized in that, It stores a computer program, which, when executed, implements a system for cross-platform implementation of mini-programs as described in any one of claims 1 to 5.

Images