Cross-platform mobile application development system based on cross-platform development framework

Abstract

The invention provides a cross-platform mobile application development system based on a cross-platform development framework. Comprising a cross-platform application development module which is used for carrying out mobile application development by utilizing a cross-platform development framework and compiling application codes into native codes for operation; the native function packaging module is used for packaging a native function into an interface by utilizing a platform channel of the cross-platform development framework, compiling a corresponding native code and realizing communication between an interface code and the native code; the JS bridging SDK module is used for developing a unified JS bridging SDK, providing a native function packaged by the cross-platform development framework for a webpage application through an interface, and defining a standard interface and a communication protocol; and the message processing module is used for pushing messages in real time, and receiving and processing the messages in a high-concurrency environment by processing database operation, message queues and an asynchronous processing mechanism. The performance of an application development system is improved, the user interface consistency is improved, the integration and configuration complexity is reduced, and the development and maintenance cost is reduced.

Description

Technical Field

[0001] The present application relates to the field of software development technology, and in particular to a cross-platform mobile application development system based on a cross-platform development framework. Background Art

[0002] With the rapid development of Industry 4.0 and Internet of Things (IoT) technologies, industrial enterprises are increasingly relying on intelligent software systems to improve production efficiency, ensure production safety, and optimize production processes. The popularity of mobile devices and the need for efficient data integration have further promoted the development of cross-platform development frameworks and efficient data integration technologies. Traditional industrial automation software development usually faces multiple challenges, such as cross-platform compatibility, high development and maintenance costs, and poor system scalability. To solve these problems, cross-platform development frameworks (such as Flutter) and Web technologies (such as HTML5, CSS3, and JavaScript) provide new solutions.

[0003] There are currently a variety of cross-platform development frameworks and technical solutions on the market, which attempt to solve the efficiency and performance issues of cross-platform development, but still have certain limitations. For example, the following existing technical solutions include:

[0004] (I) React Native and WebView integration

[0005] React Native is a popular cross-platform development framework that integrates small H5-based applications through WebView, but there are some problems in terms of performance and consistency. For example, there are performance bottlenecks caused by high-frequency interactions and complex animation processing, inconsistent performance of components on different platforms, poor hot reload and development experience, insufficient ecosystem and plug-in support, and high integration and configuration complexity.

[0006] (II) Xamarin and WebView integration

[0007] Xamarin is a solution for building cross-platform applications using C# and the .NET framework, integrating small H5-based applications through WebView, but it also has some limitations. For example, there are performance issues, a significant increase in application size, fewer third-party libraries and plug-ins, inconsistent control performance on different platforms, poor hot reload and development experience, low learning curve and development efficiency, and increased development and maintenance costs.

[0008] From the above comparison, we can see that although React Native and Xamarin are mature cross-platform development frameworks, they have some obvious shortcomings in terms of performance, user interface consistency, development tools, document support, development experience, plug-in quality and integration complexity. Summary of the invention

[0009] In view of this, an embodiment of the present application provides a cross-platform mobile application development system based on a cross-platform development framework to solve the problems of poor performance, poor user interface consistency, high integration and configuration complexity, and increased development and maintenance costs existing in the prior art.

[0010] The embodiment of the present application provides a cross-platform mobile application development system based on a cross-platform development framework, including: a cross-platform application development module, a native function encapsulation module, a JS bridge SDK module and a message processing module; the cross-platform application development module is used to use the cross-platform development framework to develop mobile applications, and compile the application code into native code for execution; the native function encapsulation module is used to use the platform channel of the cross-platform development framework to encapsulate the native function into an interface, write the corresponding native code, and realize the communication between the interface code and the native code; the JS bridge SDK module is used to develop a unified JS bridge SDK, provide the native function encapsulated by the cross-platform development framework to the web application through the interface, and define the standard interface and communication protocol so that the web application can call the native function provided by the cross-platform development framework; the message processing module is used to push real-time messages, and receive and process messages in a high concurrency environment by processing database operations, message queues and asynchronous processing mechanisms.

[0011] At least one of the above technical solutions adopted in the embodiments of the present application can achieve the following beneficial effects:

[0012] Through the cross-platform application development module, native function encapsulation module, JS bridge SDK module and message processing module; the cross-platform application development module is used to develop mobile applications using the cross-platform development framework, and compile the application code into native code for operation; the native function encapsulation module is used to use the platform channel of the cross-platform development framework to encapsulate the native function into an interface, write the corresponding native code, and realize the communication between the interface code and the native code; the JS bridge SDK module is used to develop a unified JS bridge SDK, provide the native functions encapsulated by the cross-platform development framework to the web application through the interface, and define the standard interface and communication protocol so that the web application can call the native functions provided by the cross-platform development framework; the message processing module is used for real-time message push, and receives and processes messages in a high-concurrency environment by processing database operations, message queues and asynchronous processing mechanisms. This application improves the performance of the application development system, improves the consistency of the user interface, reduces the complexity of integration and configuration, and reduces development and maintenance costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0013] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0014] Figure 1 It is a schematic diagram of the overall structure of a cross-platform mobile application development system based on a cross-platform development framework provided in an embodiment of the present application. DETAILED DESCRIPTION

[0015] In the following description, specific details such as specific system structures, technologies, etc. are provided for the purpose of illustration rather than limitation, so as to provide a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may also be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to prevent unnecessary details from obstructing the description of the present application.

[0016] This application belongs to the field of mobile Internet and software development, specifically focusing on the fields of industrial automation, intelligent manufacturing and data integration. With the rapid development of Industry 4.0 and Internet of Things (IoT) technologies, industrial enterprises are increasingly relying on intelligent software systems to improve production efficiency, ensure production safety and optimize production processes. The popularity of mobile devices and the demand for efficient data integration have further promoted the development of cross-platform development frameworks and efficient data integration technologies.

[0017] Traditional industrial automation software development usually faces multiple challenges, such as cross-platform compatibility, high development and maintenance costs, poor system scalability, etc. To address these challenges, cross-platform development frameworks (such as Flutter) and Web technologies (such as HTML5, CSS3, JavaScript) provide new solutions.

[0018] Flutter: An open source cross-platform UI framework developed by Google that can build iOS and Android applications using the same code. Its high-performance rendering engine and rich component library can achieve a native user experience.

[0019] H5 technology: allows rapid development and deployment of Web-based applications, improving development efficiency and flexibility.

[0020] The trend of mobile application development is moving towards more efficient, flexible and unified directions:

[0021] Cross-platform development: With the advancement of technology, the performance and functionality of cross-platform development frameworks (such as Flutter) have been continuously improved, becoming the mainstream development choice. Developers can achieve multi-platform deployment through one-time coding, saving time and cost.

[0022] Modularity and scalability: The functional requirements of mobile applications are becoming increasingly diverse and complex. Modular and plug-in design ideas enable applications to be flexibly expanded and quickly iterated to meet the needs of different users and markets.

[0023] Encapsulation and calling of native capabilities: In order to provide richer and more powerful functions, developers need to efficiently call the native capabilities of the device. By encapsulating native functions and providing a unified calling interface, the development process can be greatly simplified and the application functions and user experience can be improved.

[0024] Integration of Web technologies: The rapid development of Web technologies (such as HTML5, CSS3, and JavaScript) has enabled H5-based applications to provide a user experience similar to that of native applications, while also having the advantages of rapid development and iteration. Combining Web technologies with native development technologies can create more flexible and powerful applications.

[0025] The current mobile application market has an increasing demand for efficient development, rapid iteration, cross-platform compatibility, and rich functions. The scalable mobile software configuration integration system based on Flutter proposed in this application is designed to meet these technical requirements. Through innovative architecture design and efficient development mode, it provides developers with an efficient, flexible, and powerful development platform to improve the development efficiency and user experience of mobile applications.

[0026] There are many cross-platform development frameworks and technical solutions on the market, which attempt to solve the efficiency and performance problems of cross-platform development, but still have certain limitations. The existing technical solutions closest to this application include the following:

[0027] (I) React Native and WebView integration

[0028] Technical Overview: Use React Native to build cross-platform applications and integrate H5-based small applications through WebView.

[0029] step:

[0030] 1. Use React Native to write the core logic of cross-platform applications.

[0031] 2. Embed the WebView component in the application.

[0032] 3. Use JavaScript to communicate with the H5 application inside the WebView.

[0033] 4. Access native platform features through React Native’s Native Modules.

[0034] Structure composition:

[0035] React Native core logic: responsible for the main business logic and interface rendering of the application.

[0036] WebView component: used to load and display small applications based on H5.

[0037] JavaScript code: used for data communication between H5 applications and React Native.

[0038] Native Modules: Call the native functions of the platform through the interface provided by React Native.

[0039] (II) Xamarin and WebView integration

[0040] Technical Overview: Use Xamarin to build cross-platform applications and integrate H5-based applets through WebView.

[0041] step:

[0042] 1. Use C# and Xamarin to write the core logic of cross-platform applications.

[0043] 2. Embed the WebView component in the application.

[0044] 3. Use JavaScript to communicate with the H5 application inside the WebView.

[0045] 4. Access native platform functionality through Xamarin's Dependency Services.

[0046] Structure composition:

[0047] Xamarin core logic: responsible for the main business logic and interface rendering of the application.

[0048] WebView component: used to load and display small applications based on H5.

[0049] JavaScript code: used for data communication between H5 applications and Xamarin.

[0050] Dependent services: Call the native functions of the platform through the interfaces provided by Xamarin.

[0051] 2. Disadvantages of Existing Technologies

[0052] (I) React Native and WebView integration

[0053] shortcoming

[0054] (1) Performance issues

[0055] Reason: React Native uses JavaScriptCore as its runtime and communicates between JavaScript and native code through a bridge mechanism. This bridge mechanism may cause performance bottlenecks in high-frequency interactions and complex animation processing.

[0056] Comparison: Flutter uses the Dart language, which is compiled into native code and runs directly without a bridging mechanism. Therefore, it has better performance, especially in complex animations and high-frequency interactions.

[0057] (2) User interface consistency

[0058] Reason: React Native relies on native components for rendering. The performance of components on different platforms (iOS and Android) may be inconsistent, requiring additional adjustments and optimizations to ensure a consistent user experience.

[0059] Comparison: Flutter uses its own drawing engine (Skia) to render unified UI components on all platforms, ensuring the consistency of cross-platform applications on different devices.

[0060] (3) Development and debugging tools

[0061] Reason: React Native's debugging tools are relatively few and scattered, relying mainly on Chrome DevTools and some community tools. When developing and debugging complex problems, you may need to switch between multiple tools.

[0062] Comparison: Flutter is maintained by Google, has comprehensive official documentation and rich sample codes, which are updated in a timely and detailed manner, providing developers with better reference and learning resources.

[0063] (4) Documentation and community support

[0064] Reason: Although React Native has a huge community support, its official documentation is sometimes not updated in a timely manner and some of the content is not detailed enough.

[0065] Comparison: Flutter is maintained by Google, has comprehensive official documentation and rich sample codes, is updated in a timely and detailed manner, and has a highly active community, providing developers with better reference and learning resources.

[0066] (5) Hot reload and development experience

[0067] Cause: React Native's hot reload feature can be unstable in complex apps, sometimes requiring a full reload of the app to see the changes.

[0068] Comparison: Flutter's hot reload function is more stable and faster. Developers can immediately see the effects of code changes without reloading the application, which improves development efficiency.

[0069] (6) Ecosystem and plugin support

[0070] Reason: React Native has a rich plugin ecosystem, but due to its reliance on community development and maintenance, the quality and maintenance frequency of some plugins vary.

[0071] Comparison: Flutter's plug-in ecosystem is equally rich, but due to Google's active maintenance and review, the official plug-ins are of higher quality and updated more promptly, giving developers more assurance when choosing and using plug-ins.

[0072] (7) Integration and configuration complexity

[0073] Reason: React Native projects require frequent configuration and integration of third-party libraries, especially when dealing with platform-specific features, which may require writing a lot of native code.

[0074] Comparison: Flutter simplifies the integration with platform-specific functions through the plug-in mechanism. Usually, you only need to call the corresponding plug-in interface in the Dart code, without the need for a lot of native code configuration.

[0075] From the above comparison, we can see that although React Native is a mature cross-platform framework, it has some obvious disadvantages compared to Flutter in terms of performance, user interface consistency, development tools, document support, development experience, plug-in quality and integration complexity. Flutter provides developers with a better development experience and higher performance through its efficient rendering engine, unified UI components, integrated development tools and a good ecosystem.

[0076] (I) Xamarin and WebView integration

[0077] shortcoming

[0078] (1) Performance issues

[0079] Reason: Xamarin uses the Mono framework as its runtime. Although its performance is good, it still does not perform as well as Flutter, which is directly compiled into native code, because it needs to be called across multiple levels. Xamarin.Forms' performance is not as good as Flutter, especially in complex animations and high-frequency interactions.

[0080] Comparison: Flutter uses the Dart language to compile into native code and uses the high-performance rendering engine Skia to ensure excellent performance on various platforms, especially in complex animations and high-frequency interaction scenarios.

[0081] (2) Application volume

[0082] Reason: Xamarin applications need to include the .NET runtime and other related dependent libraries, which will significantly increase the size of the application, especially when packaging for the first time.

[0083] Comparison: Flutter applications are compiled into native code through Dart, do not require an additional runtime environment, and are relatively small in size, reducing the need for storage space.

[0084] (3) Development Tools and Ecosystem

[0085] Reason: Although Xamarin relies on Visual Studio, a powerful IDE, its development tools have a high threshold for use. Xamarin's ecosystem is relatively small, with fewer third-party libraries and plug-ins, and the quality and maintenance frequency of some libraries vary.

[0086] Comparison: Flutter has integrated development tools (such as Flutter DevTools), and its ecosystem continues to grow and develop, with a wealth of high-quality third-party libraries and plug-ins, and is actively maintained by Google and updated in a timely manner.

[0087] (4) User interface consistency

[0088] Reason: Xamarin.Forms relies on native controls for rendering. Controls on different platforms may behave inconsistently. Developers need to perform additional optimizations and adjustments for different platforms to ensure a consistent user experience.

[0089] Comparison: Flutter uses its own drawing engine Skia to render unified UI components on all platforms, ensuring the consistency of cross-platform applications on different devices without the need for additional optimization.

[0090] (5) Hot reload and development experience

[0091] Reason: Xamarin's hot reload feature may be unstable in complex applications, and sometimes you need to completely reload the application to see the effect of the changes, which affects development efficiency.

[0092] Comparison: Flutter's hot reload function is more stable and faster. Developers can immediately see the effects of code changes, which improves development efficiency.

[0093] (6) Learning curve and development efficiency

[0094] Reason: Xamarin uses C# and .NET framework, which is powerful but has a steep learning curve for developers without .NET experience. In addition, Xamarin.Forms' XAML syntax and layout system require time to adapt.

[0095] Comparison: Flutter uses the Dart language, which is relatively simple and easy to learn, and its declarative UI building method (similar to React) is easier to use and understand, and has higher development efficiency.

[0096] (7) Integration of plug-ins and native functions

[0097] Reason: Although Xamarin has a dependency service mechanism to access native functions, a large amount of native code needs to be written for configuration and calling. The codes of different platforms vary greatly, which increases development and maintenance costs.

[0098] Comparison: Flutter simplifies the integration with platform-specific functions through the plug-in mechanism. Developers usually only need to call the corresponding plug-in interface in the Dart code, which greatly reduces the amount of native code that needs to be written.

[0099] (8) Documentation and community support

[0100] Reason: Xamarin has abundant official documentation and sample codes, but due to its relatively small community size, developers have fewer resources to refer to when they encounter problems, and their efficiency in solving problems is low.

[0101] Comparison: Flutter is maintained by Google, has comprehensive official documentation and rich sample codes, and a large community, so developers can quickly get help and solutions.

[0102] From the above comparison, we can see that although Xamarin is a powerful cross-platform development framework, it has some obvious disadvantages compared to Flutter in terms of performance, application size, development tools, user interface consistency, development efficiency, plug-in and native function integration, documentation and community support, etc. Flutter provides developers with a better development experience and higher performance through its efficient rendering engine, unified UI components, integrated development tools and powerful ecosystem.

[0103] Therefore, this application needs to solve the following technical problems:

[0104] 1. Performance issues:

[0105] As rendering engines continue to evolve, Flutter’s performance and functionality continue to improve, making it a mainstream development choice.

[0106] (ii) Modularity and scalability:

[0107] The functional requirements of mobile applications are becoming increasingly diverse and complex. Modular and plug-in design concepts allow applications to be flexibly expanded and quickly iterated to meet the needs of different users and markets.

[0108] (III) Encapsulation and calling of native capabilities:

[0109] In order to provide richer and more powerful functions, developers need to efficiently call the native capabilities of the device. By encapsulating native functions and providing a unified calling interface, the development process can be greatly simplified and the application functions and user experience can be improved.

[0110] (IV) Reduce the learning curve for H5 applications to call Flutter native capabilities:

[0111] Through the encapsulated JS Bridge SDK, these H5 applications can directly call the platform native capabilities encapsulated by Flutter to achieve diversified functions.

[0112] (V) Improve the access speed of H5 applications under different network environments.

[0113] In view of the problems existing in the above-mentioned prior art, this application proposes a scalable mobile terminal software configuration integration system based on Flutter. This application adopts the following technical routes to achieve efficient and flexible mobile application development and integration:

[0114] Flutter framework: Through Flutter's cross-platform capabilities, you can develop once and run on multiple platforms, significantly reducing development and maintenance costs. Flutter's platform channels allow Dart code to communicate with platform native code, allowing applications to take advantage of the native capabilities of each platform.

[0115] H5 technology: Embed H5-based small applications in Flutter applications to further expand the functionality and flexibility of applications. H5 applications can be quickly developed and deployed through web technologies (HTML5, CSS3, JavaScript), and are easy to update and maintain.

[0116] JS Bridge SDK: Design and implement a JS Bridge SDK to enable H5-based applets to call native functions encapsulated by Flutter, communicate with Flutter through platform channels, and implement complex business logic.

[0117] The structure of a cross-platform mobile application development system based on a cross-platform development framework provided in an embodiment of the present application is introduced below in conjunction with the accompanying drawings and specific embodiments. Figure 1 is a schematic diagram of the overall structure of a cross-platform mobile application development system based on a cross-platform development framework provided in an embodiment of the present application, such as Figure 1 As shown, the cross-platform mobile application development system based on the cross-platform development framework may specifically include the following contents:

[0118] The cross-platform application development module 101 is used to develop mobile applications using a cross-platform development framework and compile application codes into native codes for execution;

[0119] The native function encapsulation module 102 is used to encapsulate the native function into an interface, write the corresponding native code, and realize the communication between the interface code and the native code by using the platform channel of the cross-platform development framework;

[0120] The JS bridge SDK module 103 is used to develop a unified JS bridge SDK, provide the native functions encapsulated by the cross-platform development framework to the web application through an interface, and define a standard interface and communication protocol so that the web application can call the native functions provided by the cross-platform development framework;

[0121] The message processing module 104 is used for real-time message push, and receives and processes messages in a high-concurrency environment by processing database operations, message queues and asynchronous processing mechanisms.

[0122] In some embodiments, a cross-platform development framework is used to develop a mobile application, and the application code is compiled into a native code for execution, including:

[0123] Use the widget system and declarative interface building method of the cross-platform development framework to write core business logic, use pre-compilation technology to compile application code into native code, and use the animation library and drawing interface of the cross-platform development framework to optimize animation and graphics rendering.

[0124] Specifically, in this embodiment, the cross-platform development framework Flutter is used to develop mobile applications. The core business logic is written through its widget system and declarative interface construction method, and the application code is compiled into native code using pre-compilation technology, thereby optimizing the application's performance and user experience.

[0125] 1. Implementation of interface and interaction logic

[0126] First, the implementation of the interface and interaction logic is simplified through Flutter's widget system and declarative UI construction method. Flutter's widget system allows developers to build UI in a declarative way, and each UI component is a widget. Developers can build complex interfaces by combining and reusing widgets, thereby improving development efficiency and code maintainability.

[0127] Specific implementation methods include:

[0128] Define the interface layout: Use Flutter's MaterialApp, Scaffold, Container and other widgets to define the overall layout and structure of the application.

[0129] Combining and nesting widgets: By combining and nesting different widgets, such as Row, Column, Text, Button, etc., complex interface layout and interaction logic can be achieved.

[0130] Declarative UI: Using Flutter's declarative UI construction method, by defining the final state of the interface, the Flutter framework automatically handles UI updates and changes, making the code more intuitive and easy to maintain.

[0131] 2. Writing core business logic

[0132] Use Dart language to write the core business logic of the application. Dart language is the main programming language of Flutter. Its syntax is concise, easy to learn and powerful, suitable for writing efficient business logic code.

[0133] Specific implementation methods include:

[0134] Define data model: Use Dart language to define the application's data model, such as classes and objects, to manage the application's data and status.

[0135] Write business logic: Implement business logic functions in Dart code, such as data processing, network requests, state management, etc.

[0136] Asynchronous programming: Take advantage of Dart's asynchronous programming features and use the async and await keywords to handle time-consuming operations, such as network requests and file reading and writing, to ensure the responsiveness and smoothness of the application.

[0137] 3. Application of pre-compilation technology

[0138] AOT (Ahead Of Time) compilation technology is used to compile Dart code into efficient native code. AOT compilation directly compiles Dart code into the platform's native code during the compilation phase, thus avoiding runtime performance overhead and ensuring high performance of the application on various platforms.

[0139] Specific implementation methods include:

[0140] Configure AOT compilation: Enable the AOT compilation option in the build configuration file of the Flutter project to ensure that the Dart code is converted to native code during compilation.

[0141] Compile: Use Flutter's build tool to perform AOT compilation to compile the application code into native executable files for the target platform (such as iOS and Android).

[0142] 4. Optimization of animation and graphics rendering

[0143] Optimize animation and graphics rendering through Flutter's animation library and drawing API, realize complex animation and high-frequency interaction effects, and improve user experience.

[0144] Specific implementation methods include:

[0145] Use animation libraries: Use Flutter's animation libraries, such as AnimationController, Tween, AnimatedBuilder, etc., to define and control animation effects and create smooth animation transitions.

[0146] Drawing API: Use Flutter's drawing API, such as CustomPainter, to implement customized graphics rendering and drawing effects.

[0147] Optimize performance: Improve the performance of animation and graphics rendering by reducing the number of redraws, using efficient drawing algorithms, and optimizing rendering logic to ensure smooth user interaction.

[0148] Through the above-mentioned method of this embodiment, using the powerful functions and efficient tools of the Flutter framework, this embodiment successfully developed a high-performance, cross-platform mobile application, achieving the goals of simplifying interface construction, optimizing business logic and improving user experience.

[0149] In some embodiments, the platform channel of the cross-platform development framework is used to encapsulate the native function into an interface, write the corresponding native code, and implement the communication between the interface code and the native code, including:

[0150] Define platform channels in the cross-platform development framework and define corresponding interface functions for each encapsulated native function so as to encapsulate the native function into an interface;

[0151] Write native code corresponding to the platform on the corresponding platform and implement the corresponding native methods, and realize the communication between the interface code and the native code through the plug-in mechanism provided by the cross-platform development framework;

[0152] Encapsulate the interface of the native function in a class so that the web application can call the encapsulated interface through the JS bridge SDK module to access the native function.

[0153] Specifically, through Flutter's platform channel, commonly used native functions are encapsulated to simplify the call of native capabilities by H5 applications.

[0154] Specific implementation: In this embodiment, commonly used native functions are encapsulated as interfaces through the platform channel of the Flutter framework, corresponding native codes are written, and communication between the interface code and the native code is implemented, thereby simplifying the call of H5 applications to native capabilities.

[0155] 1. Define platform channels and encapsulate native functions

[0156] First, define the platform channel in the Flutter framework and define the corresponding interface function for each native function that needs to be encapsulated. The platform channel (MethodChannel) is a mechanism provided by Flutter for communication between Dart code and platform native code.

[0157] Specific implementation methods include:

[0158] Define a platform channel: In a Flutter app, create a platform channel and specify the channel name so that Dart code can communicate with native code through the channel.

[0159] Encapsulate native functions into interfaces: Define corresponding interface functions for each native function that needs to be encapsulated (such as camera, positioning, Bluetooth, etc.). When these interface functions are called in Dart, they interact with the native code through the platform channel.

[0160] 2. Write native code corresponding to the platform

[0161] Write the corresponding native code on the iOS and Android platforms respectively, implement the corresponding native methods, and realize the communication between the interface code and the native code through the plug-in mechanism of the Flutter framework.

[0162] Specific implementation methods include:

[0163] Writing native code on iOS:

[0164] In an iOS project, write native code in Objective-C or Swift. First, register the platform channel in AppDelegate or other appropriate locations to listen for messages sent from Dart code.

[0165] Based on the message content, call the native iOS API to implement the corresponding function, such as accessing the camera, obtaining location information, or operating Bluetooth devices. Return the result to the Flutter framework so that the Dart code can continue processing.

[0166] Writing native code on the Android platform:

[0167] In an Android project, write native code in Java or Kotlin. First, register the platform channel in MainActivity or other appropriate locations to listen for messages sent from Dart code.

[0168] Based on the message content, call Android's native API to implement corresponding functions, such as calling the camera, obtaining location information, or operating Bluetooth devices. Return the result to the Flutter framework so that the Dart code can continue processing.

[0169] 3. Provide a unified Dart interface

[0170] All encapsulated native function interfaces are encapsulated in one class for H5 applications to call. Through the JS bridge SDK module, H5 applications can call these encapsulated interfaces to access native functions.

[0171] Specific implementation methods include:

[0172] Encapsulate Dart interface: In Flutter applications, all encapsulated native function interfaces are encapsulated in one class, making the code for calling these functions more concise and centralized. This class is responsible for managing the initialization of platform channels and the implementation of interface functions.

[0173] Simplify the development process: By providing a unified Dart interface, the differences in the underlying native code are shielded, simplifying the development process. When using these functions, developers do not need to understand the implementation details of the underlying platform, they only need to call the unified Dart interface.

[0174] 4. Realize interaction with H5 applications

[0175] Through the JS bridge SDK module, H5 applications can call the encapsulated Dart interface to access native functions.

[0176] Specific implementation methods include:

[0177] Load JS Bridge SDK: Load the JS Bridge SDK module in the H5 application so that it can access all interfaces encapsulated in the Flutter application.

[0178] Calling native function interface: H5 application calls the interface in JS bridge SDK through JavaScript and sends a request to Flutter. After receiving the request, JS bridge SDK passes the request to Flutter through the platform channel, and Flutter calls the corresponding native function and returns the result.

[0179] Processing return results: After receiving the results returned by Flutter, the JS bridge SDK passes them to the H5 application. The H5 application processes and displays the returned results accordingly to achieve interaction with native functions.

[0180] Through the above method of this embodiment, this embodiment successfully uses the platform channel of the Flutter framework to encapsulate commonly used native functions into interfaces, write corresponding native codes, and realize the communication between the interface code and the native code. This not only simplifies the call of native capabilities by H5 applications, but also shields the differences in the underlying native code through a unified Dart interface, improving development efficiency and code maintainability.

[0181] In some embodiments, a unified JS bridge SDK is developed to provide native functions encapsulated by a cross-platform development framework to web applications through interfaces, and standard interfaces and communication protocols are defined to enable web applications to call native functions provided by the cross-platform development framework, including:

[0182] Use JS bridge SDK to encapsulate the native function interface into a JS callable form;

[0183] Define standard JS interfaces, correspond JS interfaces to native functions encapsulated in the cross-platform development framework, and define the input parameters and return value format of each JS interface;

[0184] Design a communication protocol for data exchange between the JS interface and the cross-platform development framework, and determine the specific content of the communication protocol.

[0185] Specifically, in this embodiment, by developing a unified JS bridging SDK, the native functions encapsulated by Flutter are exposed to H5-based web applications, and standard interfaces and communication protocols are defined to simplify the call of web applications to native capabilities.

[0186] 1. Encapsulate native functions into a form that can be called by JS

[0187] First, the native function interface encapsulated by Flutter is encapsulated into a JavaScript callable form through the JS bridge SDK. As an intermediate layer, the JS bridge SDK forwards JavaScript calls to the Flutter framework for processing and returns the results to JavaScript.

[0188] Specific implementation methods include:

[0189] Develop JS bridge SDK: Create a JS bridge SDK to encapsulate the native function interfaces provided by Flutter. The JS bridge SDK converts these interfaces into a JavaScript callable form and provides them to web applications.

[0190] Encapsulate native functions: Encapsulate native functions in the Flutter framework as Dart interfaces through MethodChannel, and define corresponding JavaScript interfaces in the JS bridge SDK so that these functions can be called through JavaScript.

[0191] 2. Define standard JS interface

[0192] In the JS bridge SDK, standard JavaScript interfaces are defined and ensured to correspond to the native functions encapsulated in Flutter. Each JavaScript interface needs to specify its input parameters and return value format to ensure the consistency and reliability of the call.

[0193] Specific implementation methods include:

[0194] Define standard interfaces: Define standard JavaScript interfaces for each native function that needs to be called. Each interface corresponds to a native function in Flutter and specifies the format of input parameters and return values.

[0195] Interface documentation: Write detailed interface documentation that describes the purpose, parameter format, and return value format of each JavaScript interface, and provide it to developers for reference to facilitate correct calling.

[0196] 3. Design communication protocol for data exchange

[0197] A communication protocol designed for data exchange between the JavaScript interface and the Flutter framework. The communication protocol usually uses the JSON format to facilitate data parsing and processing, and to ensure the correctness and integrity of data transmission.

[0198] Specific implementation methods include:

[0199] Define the communication protocol: Design the specific content of the communication protocol, including method name, parameter format, return value format, etc. Use JSON format for data exchange to ensure the structure and parsability of the data.

[0200] Protocol specifications: Develop protocol specifications to ensure that data transmission between JavaScript and Flutter complies with protocol requirements and avoid data format errors or transmission failures.

[0201] 4. Introduce JS bridge SDK in H5 application

[0202] Introduce JS bridging SDK into web applications so that they can call encapsulated native function interfaces and interact with native functions provided by Flutter.

[0203] Specific implementation methods include:

[0204] Load JS Bridge SDK: Load JS Bridge SDK in the H5 application to ensure that the web application can access all interfaces defined in the SDK.

[0205] Calling native function interface: The web application calls the interface in the JS bridge SDK through JavaScript and sends a request to Flutter. After receiving the request, the JS bridge SDK forwards the request to the Flutter framework through MethodChannel. Flutter calls the corresponding native function and returns the result to the JS bridge SDK.

[0206] Processing return results: After receiving the results returned by Flutter, the JS bridge SDK passes them to the web application. The web application processes and displays the returned results accordingly to achieve interaction with native functions.

[0207] Through the above method of this embodiment, this embodiment successfully develops a unified JS bridge SDK and provides the native functions encapsulated by Flutter to web applications through interfaces. By defining standard interfaces and communication protocols, it is ensured that web applications can conveniently and reliably call the native functions provided by Flutter, thereby simplifying the development process and improving the interactivity and functional richness of the application.

[0208] In some embodiments, the JS bridge SDK module is also used to:

[0209] Load the JS bridge SDK into the web application so that the web application can access the JS interface defined in the JS bridge SDK;

[0210] Use the web application to call the JS interface in the JS bridge SDK and request the corresponding native functions from the cross-platform development framework;

[0211] After the JS bridge SDK receives the call request, it passes the call request to the cross-platform development framework through the platform channel, so that the cross-platform development framework calls the corresponding native function.

[0212] Specifically, by loading the JS Bridge SDK into the H5 application, it can access all interfaces defined in the SDK, ensuring that the JS Bridge SDK is seamlessly integrated with other parts of the H5 application.

[0213] Furthermore, the encapsulated native function interface is called: the H5 application calls the interface in the JS BridgeSDK through JavaScript to request the corresponding native function from Flutter. After receiving the call request, the JS Bridge SDK passes the request to Flutter through the platform channel, and Flutter calls the corresponding native function.

[0214] Furthermore, the interaction with the native function is realized, including the following steps:

[0215] Data transfer: JavaScript passes the call request and parameters to Flutter through the JS Bridge SDK. Flutter receives the request, calls the corresponding native function through the platform channel, and returns the result to the JS Bridge SDK.

[0216] Result processing: After receiving the result returned by Flutter, JS Bridge SDK passes it to the H5 application. The H5 application processes and displays the returned result accordingly.

[0217] This embodiment designs a unified JS Bridge SDK, encapsulates Flutter's native functions and exposes standardized JavaScript interfaces, so that H5 applications can call these functions easily and efficiently. By defining standard interfaces and communication protocols to ensure the consistency and reliability of calls, after introducing the SDK in the H5 application, interaction with native functions can be achieved, which greatly simplifies the development process and improves development efficiency.

[0218] In some embodiments, real-time message push and receiving and processing of messages in a high-concurrency environment by processing database operations, message queues, and asynchronous processing mechanisms include:

[0219] A connection is established between the server and the client through WebSocket technology, and the database read and write operations are executed in independent threads;

[0220] Put the received messages into the message queue and process them one by one according to the order or priority. When processing the messages, execute the preset business logic operations and database read and write operations. After the message processing is completed, remove the message from the message queue;

[0221] When processing each message, necessary business logic operations and database reading and writing are performed. After processing is completed, the message is removed from the queue.

[0222] Specifically, in this embodiment, real-time message push is achieved by integrating WebSocket technology, and efficient reception and processing of messages are ensured by processing database operations, message queues and asynchronous processing mechanisms in a high-concurrency environment.

[0223] 1. Integration of WebSocket Technology

[0224] First, a WebSocket connection is established between the server and the client to implement real-time message push. WebSocket provides a persistent connection, allowing the server to actively push data to the client, avoiding the client's frequent requests to the server and improving the timeliness and efficiency of message delivery.

[0225] Specific implementation methods include:

[0226] Establish a WebSocket connection: Establish a persistent WebSocket connection between the server and the client to ensure the stability and continuity of the connection.

[0227] Real-time message push: When the server has a new message, it is immediately pushed to the client through the WebSocket connection. The client processes the message accordingly after receiving it.

[0228] 2. Independent processing of database operations

[0229] To avoid page freezes in a high-concurrency environment, database read and write operations are executed in independent threads (such as Isolate). Isolate is an independent execution thread in Flutter, separated from the main thread, suitable for processing intensive calculations or IO operations.

[0230] Specific implementation methods include:

[0231] Start an independent thread: When the application starts, create an independent thread to handle database operations to ensure that these operations do not block the main thread.

[0232] Database read and write operations: All message-related database read and write operations are executed in independent threads. Independent threads communicate with the main thread through the message passing mechanism to ensure the correct transmission and synchronization of data.

[0233] 3. Use of message queues

[0234] The received messages are placed in the message queue and processed one by one according to the order or priority to ensure the order and consistency of message processing. The message queue is a first-in-first-out (FIFO) data structure used to manage and schedule the processing order of messages.

[0235] Specific implementation methods include:

[0236] Message queue management: After receiving a message, it is placed in the message queue and the message processing order is managed and scheduled according to the FIFO principle.

[0237] Queue scheduling: Schedule message processing according to preset priorities or other rules to optimize resource utilization and processing efficiency.

[0238] 4. Asynchronous processing mechanism

[0239] In the process of receiving and processing messages, an asynchronous processing mechanism is used to improve response speed and processing efficiency. Asynchronous processing allows the program to continue to execute other tasks without blocking the main thread while waiting for time-consuming operations (such as IO operations and network requests).

[0240] Specific implementation methods include:

[0241] Asynchronous message processing: When processing messages one by one in the message queue, use the asynchronous programming model for message processing to avoid blocking the main thread.

[0242] Business logic operations and database reading and writing: When processing each message, necessary business logic operations and database reading and writing operations are performed. After processing is completed, the message is removed from the message queue.

[0243] 5. UI updates and feedback

[0244] In order to ensure that the page does not freeze and the user experience is smooth, when the message processing is completed and the UI needs to be updated, the main thread is notified through an asynchronous mechanism to update the UI. This ensures the decoupling of the UI update operation and the message processing operation to avoid mutual blocking.

[0245] Specific implementation methods include:

[0246] Notify the main thread: When the message processing is completed and the UI needs to be updated, the main thread is notified through the message passing mechanism to update the UI.

[0247] UI update operation: After receiving the update notification, the main thread performs the corresponding UI update operation to ensure page smoothness and improve user experience.

[0248] Through the above method of this embodiment, this embodiment successfully implements real-time message push through WebSocket technology, and ensures efficient message reception and processing by processing database operations, message queues and asynchronous processing mechanisms in a high-concurrency environment. This not only improves the timeliness and efficiency of message delivery, but also avoids page freezes, improving the overall performance of the system and user experience.

[0249] In some embodiments, it is characterized in that the system further comprises:

[0250] The offline access module 105 is used to implement an offline cache function and an offline data synchronization mechanism to enable the web application to run normally when there is no network connection, and to use the locally established server technology to start and run the web application on the local server.

[0251] Specifically, in this embodiment, the system includes an offline access module for implementing an offline cache function and an offline data synchronization mechanism, so that the web application can still run normally when there is no network connection, and uses locally established server technology to start and run the web application on the local server.

[0252] 1. Implement offline caching function

[0253] First, by implementing the offline cache function, we can ensure that the H5 application can still run normally when there is no network connection. The core of the offline cache function lies in the pre-caching strategy of resources.

[0254] Specific implementation methods include:

[0255] Resource pre-caching strategy: When the application is run for the first time or the network connection is normal, the static resources required by the application (such as HTML, CSS, JavaScript files, images, etc.) are downloaded in advance and stored in the local cache. Use the browser's cache API (such as Service Worker and Cache API) to manage the cache of these resources.

[0256] Cache manifest: Create a cache manifest that lists the resources that need to be pre-cached. When the application loads, check the cache status and update the resources to ensure that the latest version of the resources is in the local cache.

[0257] 2. Offline data synchronization mechanism

[0258] In order to ensure that the user's operating data in offline state can be synchronized to the server after the network connection is restored, the system has designed a set of offline data synchronization mechanism.

[0259] The specific implementation steps include:

[0260] Local storage: When the user performs an operation offline, the system temporarily stores the operation data locally (such as IndexedDB or LocalStorage).

[0261] Data synchronization strategy: When the network connection is restored, the system will automatically read the locally stored data and synchronize it to the server to avoid data loss. Design a synchronization strategy to ensure the correctness and consistency of the data synchronization process.

[0262] 3. Optimize user experience in offline state

[0263] In order to improve the user experience in offline state, the system is designed with offline user experience optimization in mind.

[0264] Specific implementation methods include:

[0265] Offline prompt: When the user is offline, the system will display an offline prompt to inform the user that the user is currently offline. For example, a pop-up notification or an offline icon is displayed on the interface.

[0266] Functional degradation: In offline state, some functions are downgraded according to specific application scenarios to ensure that core functions are still available. For example, for functions that rely on the network, access to cached data is provided, or the execution of the function is delayed until the network is restored.

[0267] 4. Use local HTTP Server technology

[0268] By establishing an HTTP Server locally, the H5 application can be started and run on the local server, thus achieving offline access when there is no network connection.

[0269] Specific implementation methods include:

[0270] Local HTTP Server deployment: Deploy the static resources and business logic of the H5 application to the local HTTP Server. Ensure that the H5 application can be started and run on the local server and access these resources normally when there is no network connection.

[0271] Resource loading: When the application starts, check the network connection status. If the network is unavailable, start the local HTTP Server and load the resources of the H5 application to the local server to ensure that the application can run normally.

[0272] Through the above method of this embodiment, this embodiment successfully implements the offline access module, so that the H5 application can still run normally when there is no network connection. The system improves the user experience in the offline state through resource pre-caching strategy, offline data synchronization mechanism and user experience optimization. At the same time, by establishing HTTP Server technology locally, the H5 application can be started and run on the local server, ensuring the availability of the application and the integrity of its functions.

[0273] In some embodiments, the offline access module is further configured to:

[0274] When the web application is run for the first time or the network connection is normal, the static resources of the web application are downloaded in advance and stored in the local cache;

[0275] Create a cache manifest and list the resources that need to be pre-cached, use the browser's cache interface to manage pre-cached resources, and check the cache status and update resources when the web application is loaded.

[0276] Specifically, in this embodiment, the offline access module ensures that the web application can still run normally when there is no network connection through a pre-caching strategy. When the web application is run for the first time or the network connection is normal, the module downloads the static resources of the web application in advance and stores them in the local cache, and checks the cache status and updates the resources when the web application is loaded.

[0277] 1. Pre-caching concept

[0278] Precaching means downloading and storing the static resources (such as HTML, CSS, JavaScript files, images, etc.) required by the application in advance in the local cache when the application is run for the first time or the network connection is normal. In this way, the application can load and run normally even without a network connection.

[0279] Specific implementation methods include:

[0280] Resource pre-caching strategy: When the application is run for the first time or the network connection is normal, pre-download and store the static resources required by the application. This ensures that the application can still access these resources when it is offline, ensuring the normal operation of basic functions.

[0281] Create a cache manifest: List all resources that need to be pre-cached and generate a cache manifest. These resources include the core files of the application and other necessary static resources.

[0282] 2. Cache Management

[0283] Use the browser's cache API (such as Service Worker, Cache API) to manage pre-cached resources. Service Worker is a script that runs in the background and can intercept network requests and provide cached responses as needed.

[0284] Specific implementation methods include:

[0285] Register Service Worker: When the app is first loaded, register the Service Worker and store the resources in the cache manifest to the local cache through the Cache API.

[0286] Manage cached resources: Service Worker intercepts all network requests at runtime and checks whether the requested resources are already cached. If they are already cached, the resources are directly obtained from the local cache; if they are not cached, the resources are obtained from the network and stored in the cache.

[0287] 3. Cache status check and update

[0288] Each time the app starts, the integrity and validity of the cached resources are checked and the cache is updated if necessary. This ensures that the app always uses the latest resource version, improving user experience and app stability.

[0289] Specific implementation methods include:

[0290] Check cache status: When the app starts, Service Worker checks the integrity and validity of cached resources. If a resource is missing or expired, Service Worker obtains the latest version of the resource from the network and updates the cache.

[0291] Update cached resources: When the network connection is normal, periodically check the version of cached resources and update the cache as needed to ensure that the application always uses the latest resources.

[0292] Through the above method of this embodiment, this embodiment successfully implements the pre-caching strategy of the offline access module, so that the web application can still run normally when there is no network connection. By pre-caching static resources, using Service Worker and Cache API to manage cache resources, and checking and updating the cache status when the application starts, the stability of the application and the consistency of the user experience are ensured. In this way, users can use the web application smoothly regardless of whether there is a network or not, which improves the availability and reliability of the application.

[0293] In some embodiments, the offline access module is further configured to:

[0294] Each time the web application is started, the integrity and validity of the cached resources are checked, and the network connection status is checked. If the network is unavailable, the local server is started;

[0295] Direct the static resources and data requests of the web application to the local server so that the web application can run locally.

[0296] Specifically, in this embodiment, the offline access module checks the integrity and validity of cache resources each time the web application is started, and starts the local server when the network is unavailable, so that the web application runs on the local server, thereby achieving offline access when there is no network connection.

[0297] 1. Check the integrity and validity of cached resources

[0298] Each time a web application is started, the offline access module checks the integrity and validity of cached resources to ensure that the static resources required by the application are in the local cache and are the latest versions.

[0299] Specific implementation methods include:

[0300] Check cached resources: When the application starts, the offline access module verifies the integrity of cached resources. If any resources are missing or out of date, the module attempts to update them.

[0301] Check network connection status: At the same time, the offline access module will check the current network connection status to determine whether the latest resources can be obtained from the network.

[0302] 2. Start the local HTTP server

[0303] When it is detected that the network is unavailable, the offline access module will start the local HTTP server so that the web application can run on the local server.

[0304] Specific implementation methods include:

[0305] Start local HTTP server: Run a lightweight HTTP server locally on the device. When the offline access module detects that the network is unavailable, it will automatically start the server.

[0306] The concept of local HTTP server: A local HTTP server is a lightweight server that runs locally on a device and can provide static resources and process data requests, allowing H5 applications to run normally even when there is no network connection.

[0307] 3. Deploy static resources and business logic

[0308] Deploy the static resources and business logic of the H5 application to the local HTTP server to ensure that the application can access these resources normally when running locally.

[0309] Specific implementation methods include:

[0310] Deploy static resources: Deploy the static resources required by the H5 application (such as HTML, CSS, JavaScript files, images, etc.) to the local HTTP server in advance to ensure that these resources are available when the local server is started.

[0311] Processing data requests: Direct the data requests of the H5 application to the local HTTP server to ensure that the application can process data requests normally when there is no network connection.

[0312] 4. Application startup and resource pointing

[0313] When the application starts, the resource loading method is determined based on the network connection status. If the network is unavailable, resource and data requests will be directed to the local HTTP server.

[0314] Specific implementation methods include:

[0315] Check network status: When the application starts, the offline access module will check the network connection status. If the network is not available, start the local HTTP server.

[0316] Resources point to the local server: Point the static resources and data requests of the H5 application to the local HTTP server to ensure that the application can run locally and provide offline access.

[0317] Through the above method of this embodiment, this embodiment successfully implements the offline access module and local HTTP server technology, so that the H5 application can still run normally when there is no network connection. By checking the integrity and validity of cache resources, starting the local HTTP server, and pointing static resources and data requests to the local server, the stability of the application and the consistency of the user experience are ensured. In this way, users can use the web application smoothly regardless of whether there is a network or not, which improves the availability and reliability of the application.

[0318] In some embodiments, the offline access module is further configured to:

[0319] In response to user operations in offline state, the operation data is stored in the local database, and changes in network status are detected. When the network connection is restored, the data in the local database is automatically read and sent to the server for synchronization; the user's network connection status is monitored, prompt information is displayed when offline, and functions that rely on the network are downgraded.

[0320] Specifically, in this embodiment, the offline access module is not only used to cache static resources and start the local server in the offline state, but also includes responding to the user's operation in the offline state, storing the operation data in the local database, and automatically synchronizing the data after the network is restored. At the same time, it provides prompt information when the user is offline and downgrades the functions that rely on the network to optimize the user experience.

[0321] 1. Offline data synchronization mechanism

[0322] The offline data synchronization mechanism ensures that the user's offline operation data can be synchronized to the server after the network connection is restored to avoid data loss. This mechanism includes two parts: local storage and synchronization strategy.

[0323] Specific implementation methods include:

[0324] Local storage: When the user performs an operation, the data is temporarily stored in a local database (such as IndexedDB or LocalStorage). This data includes user input information, operation logs, etc., to ensure that user operations can be recorded even in offline state.

[0325] When users perform offline operations, the offline access module will store the operation data in the local database in real time. For example, when users fill out a form or edit a document, the data will be immediately saved to IndexedDB to ensure data persistence and security.

[0326] Detect network status changes: The offline access module continuously monitors the network connection status. When the network connection is restored, the data in the local database is automatically read and sent to the server for synchronization.

[0327] When the network is restored, the offline access module will immediately read all unsynchronized data from the local database and send it to the server through the network for synchronization. In this way, all the user's operation data in the offline state can be synchronized to the server in time to avoid data loss.

[0328] Data synchronization strategy: Design a data synchronization strategy to ensure that locally stored data is automatically synchronized to the server after the network connection is restored, and handle possible conflicts and data merge issues.

[0329] When synchronizing data, the offline access module will operate according to the predetermined synchronization strategy. For example, it will prioritize synchronizing the latest data and choose to retain the user's most recent modification when dealing with data conflicts to ensure data consistency and integrity.

[0330] 2. Optimize user experience in offline state

[0331] In offline state, by providing appropriate user feedback and function degradation processing, the user experience is improved so that users can perceive the offline capabilities of the application.

[0332] Specific implementation methods include:

[0333] Offline prompt: When the user is offline, an offline prompt message is displayed to inform the user that he is currently offline.

[0334] When the user device detects that there is no network connection, the offline access module will display an offline prompt message on the application interface, for example, by popping up a notification or displaying an offline icon at the top of the application interface to inform the user that the network cannot be connected at present.

[0335] Function downgrade: In offline state, some functions are downgraded according to specific application scenarios to ensure that core functions are still available.

[0336] The offline access module will downgrade functions that rely on the network. For example, for functions that need to update data in real time, they can use locally cached data instead; for functions that require online verification, the verification operation can be delayed until the network is restored.

[0337] User experience optimization: Through offline prompts and function degradation processing, ensure that users can still use the main functions of the application smoothly and experience a good user experience when offline.

[0338] The offline access module not only optimizes functions, but also improves the user interaction experience. For example, in the offline state, the application will optimize the interface interaction process, reduce user waiting time, and provide clear operation feedback so that users can perceive the offline capability and stability of the application.

[0339] Through the above method of this embodiment, this embodiment successfully implements the offline data synchronization mechanism and user experience optimization of the offline access module. By responding to the user's operation in the offline state, the data is stored in the local database, and the data is automatically synchronized after the network is restored. At the same time, prompt information and function degradation processing are provided in the offline state to ensure the stability of the application when there is no network connection and the consistency of user experience. In this way, users can use the web application smoothly regardless of whether there is a network or not, which improves the availability and reliability of the application.

[0340] According to the technical solution provided in the embodiment of the present application, the technical solution of the present application has the following advantages:

[0341] 1) Smooth high-concurrency message processing

[0342] This application uses an efficient rendering engine and performance optimization technology to ensure that the application interface remains smooth even in the case of high concurrent message processing, ensuring that the user experience is not affected.

[0343] 2) Unified UI interface display

[0344] This application uses unified UI components and design specifications to enable different H5 applications to display a consistent user interface when calling native functions, thereby improving the consistency and visual effects of the user experience.

[0345] 3) Offline access capability

[0346] This application uses cache technology and local storage mechanism as well as HTTP Server technology to establish the H5 application in the local area, so that the H5 application can still be accessed and run in the offline state, ensuring the availability and stability of the application without relying on network connection.

[0347] 4) Simple and easy-to-use native function calls

[0348] This application has designed a simple and easy-to-use JS Bridge SDK, which enables H5 applications to call native functions through simple JavaScript interfaces, reducing development difficulty and improving development efficiency.

[0349] 5) Quickly add H5 application extensions

[0350] This application adopts modular design and dynamic loading mechanism, allowing developers to easily and quickly add new H5 application extensions, improving the scalability and maintainability of the system.

[0351] The above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application, and should all be included in the protection scope of the present application.

Claims

1. A cross-platform mobile application development system based on a cross-platform development framework, characterized in that: include: Cross-platform application development module, native function encapsulation module, JS bridge SDK module and message processing module; The cross-platform application development module is used to develop mobile applications using a cross-platform development framework and compile application codes into native codes for execution; The native function encapsulation module is used to utilize the platform channel of the cross-platform development framework to encapsulate the native function into an interface, write the corresponding native code, and realize the communication between the interface code and the native code; The JS bridging SDK module is used to develop a unified JS bridging SDK, provide the native functions encapsulated by the cross-platform development framework to the web application through an interface, and define a standard interface and communication protocol so that the web application can call the native functions provided by the cross-platform development framework; The message processing module is used for real-time message push, and receives and processes messages in a high-concurrency environment by processing database operations, message queues and asynchronous processing mechanisms.

2. The system according to claim 1, characterized in that The method of using a cross-platform development framework to develop mobile applications and compiling application codes into native codes for execution includes: The core business logic is written by using the widget system and declarative interface construction method of the cross-platform development framework, the application code is compiled into native code using pre-compilation technology, and the animation library and drawing interface of the cross-platform development framework are used to optimize animation and graphics rendering.

3. The system according to claim 1, characterized in that The platform channel of the cross-platform development framework is used to encapsulate the native function into an interface, write the corresponding native code, and realize the communication between the interface code and the native code, including: Defining the platform channel in the cross-platform development framework, and defining a corresponding interface function for each encapsulated native function, so as to encapsulate the native function into an interface; Writing native code corresponding to the platform on the corresponding platform and implementing corresponding native methods, and realizing communication between the interface code and the native code through the plug-in mechanism provided by the cross-platform development framework; The interface of the native function is encapsulated in a class, so that the web application calls the encapsulated interface through the JS bridge SDK module to access the native function.

4. The system according to claim 1, characterized in that The unified JS bridging SDK is developed to provide the native functions encapsulated by the cross-platform development framework to the web application through an interface, and a standard interface and communication protocol are defined so that the web application can call the native functions provided by the cross-platform development framework, including: Using the JS bridging SDK to encapsulate the interface of the native function into a form that can be called by JS; Define standard JS interfaces, correspond the JS interfaces to native functions encapsulated in the cross-platform development framework, and define the input parameters and return value formats of each JS interface; Design a communication protocol for data exchange between the JS interface and the cross-platform development framework, and determine the specific content of the communication protocol.

5. The system according to claim 4, characterized in that The JS bridging SDK module is also used to: Loading the JS bridging SDK into a web application so that the web application can access the JS interface defined in the JS bridging SDK; Using the web application to call the JS interface in the JS bridge SDK, and requesting the corresponding native function from the cross-platform development framework; After the JS bridge SDK receives the call request, it transmits the call request to the cross-platform development framework through the platform channel, so that the cross-platform development framework calls the corresponding native function.

6. The system according to claim 1, characterized in that The real-time message push and receiving and processing of messages in a high-concurrency environment by processing database operations, message queues and asynchronous processing mechanisms include: A connection is established between the server and the client through the WebSocket technology, and the read and write operations of the database are executed in an independent thread; Put the received messages into the message queue and process them one by one according to the order or priority. When processing the messages, perform preset business logic operations and database read and write operations. After the message processing is completed, remove the messages from the message queue; When processing each message, necessary business logic operations and database reading and writing are performed. After processing is completed, the message is removed from the queue.

7. The system according to claim 1, characterized in that The system further comprises: The offline access module is used to implement an offline cache function and an offline data synchronization mechanism, so that the web application can run normally when there is no network connection, and use the locally established server technology to start the web application on the local server.

8. The system according to claim 7, characterized in that The offline access module is also used for: When the web application is run for the first time or the network connection is normal, the static resources of the web application are downloaded in advance and stored in the local cache; Create a cache manifest and list the resources that need to be pre-cached, use the browser's cache interface to manage pre-cached resources, and check the cache status and update resources when the web application is loaded.

9. The system according to claim 8, characterized in that The offline access module is also used for: Each time the web application is started, the integrity and validity of the cached resources are checked, and the network connection status is checked. If the network is unavailable, the local server is started; The static resources and data requests of the web application are directed to the local server so that the web application can run locally.

10. The system according to claim 8, characterized in that The offline access module is also used for: In response to user operations in offline state, the operation data is stored in the local database, and changes in network status are detected. When the network connection is restored, the data in the local database is automatically read and sent to the server for synchronization; the user's network connection status is monitored, prompt information is displayed when offline, and functions that rely on the network are downgraded.

Images