A mobile app cross-platform development method and device

Abstract

The present invention provides a mobile App cross-platform development method and device, the method comprising the following steps: sending a request that complies with the JSBridge interface specification; forwarding the request to the corresponding Native interface according to the request type and parameters of the JSBridge interface specification; receiving and processing the request, returning the processing result to the Native interface adapter, encapsulating the processing result into a standard format and returning it to the JSBridge middle layer; the JSBridge middle layer passes the response to the Web end. Through this method and device, the non-standard and non-uniform problem of calling the Native interface in the hybrid development mode in mobile application development is solved; the technical route and interface specifications are unified, and developers are strictly required to follow the relevant specifications to ensure consistency and standardization when the Web end calls the Native end interface function during the development process.

Description

Technical Field

[0001] The present invention belongs to the technical field of cross-platform development, and specifically relates to a mobile App cross-platform development method and device. Background Art

[0002] Although the JSBridge technology currently on the market has effectively solved the calling problem between the Native side and the Web side, it has failed to unify the cross-platform interface specifications. The current JSBridge technology is only a simple encapsulation of the native to the Web interface, and the specific implementation still relies on the Native code of each platform. There is a lack of a unified calling layer to eliminate the differences in interface calls on different platforms and standardize method calls.

[0003] The Native side and the Web side are connected through WebViewJavascriptBridge. The Web side's call to the Native side only relies on simple string reflection and maps to the method name of the Native side. Because it is impossible to ensure that the method signature of the Native side of each platform is consistent, the uniformity of the Web side method name depends on the specific implementation of the Native side of different platforms.

[0004] The current JSBridge technology specifies the method signature of the Web-side JS API on the Native side, which makes the native methods that implement the same function lack a unified calling specification on the Web side. This situation has led to the current JSBridge technology not being truly cross-platform. If the native implementation is not consistent, Web developers need to call different JS APIs for different platforms. Summary of the invention

[0005] The purpose of the present invention is to overcome the above problems and provide a mobile App cross-platform development method and device.

[0006] In order to achieve the above purpose, the technical solution adopted by the present invention is:

[0007] A mobile App cross-platform development method includes the following steps:

[0008] When the Web side calls the Native side, a request that complies with the JSBridge interface specification is sent through the Web side interface wrapper;

[0009] The JSBridge middle layer receives the request of the JSBridge interface specification, and forwards the request to the corresponding Native end interface through the Native end interface adapter according to the request type and parameters of the JSBridge interface specification;

[0010] The Native interface receives and processes the request, and returns the processing result to the Native interface adapter, and the Native interface adapter encapsulates the processing result into a standard format and returns it to the JSBridge middle layer;

[0011] The JSBridge middle layer passes the response to the Web end.

[0012] As a further improvement, the JSBridge middle layer defines the JSBridge interface specification; the JSBridge middle layer elements include at least method naming, parameter format and return value type.

[0013] As a further improvement, the Native-side interface adapter is used to convert the standard call of JSBridge into the Native-side call of the specific platform.

[0014] As a further improvement, the Web-side interface encapsulator is used to encapsulate the API called by the Web-side so that the API complies with the JSBridge interface specification.

[0015] As a further improvement, the Web-side interface encapsulator and the Native-side interface adapter have the same interface specification.

[0016] On the other hand, a mobile App cross-platform development device is provided, comprising:

[0017] The sending module is used to send a request that complies with the JSBridge interface specification through the Web interface encapsulator when the Web side calls the Native side;

[0018] A forwarding module, used for the JSBridge middle layer to receive the request of the JSBridge interface specification, and forward the request to the corresponding Native end interface through the Native end interface adapter according to the request type and parameters of the JSBridge interface specification;

[0019] A first return module, used for the Native interface to receive and process the request, and return the processing result to the Native interface adapter, and the Native interface adapter encapsulates the processing result into a standard format and returns it to the JSBridge middle layer;

[0020] The second return module is used by the JSBridge middle layer to pass the response to the Web end.

[0021] As a further improvement, the JSBridge middle layer defines the JSBridge interface specification; the JSBridge middle layer elements include at least method naming, parameter format and return value type.

[0022] As a further improvement, the Native-side interface adapter is used to convert the standard call of JSBridge into the Native-side call of the specific platform.

[0023] As a further improvement, the Web-side interface encapsulator is used to encapsulate the API called by the Web-side so that the API complies with the JSBridge interface specification.

[0024] As a further improvement, the Web-side interface encapsulator and the Native-side interface adapter have the same interface specification.

[0025] The beneficial effects of the present invention are:

[0026] Through this method and device, the problem of non-standardization and non-uniformity of calling Native interface in hybrid development mode in mobile application development is solved; by implementing cross-platform JSBridge technology, the technical route and interface specifications are unified, and developers are strictly required to follow relevant specifications to ensure consistency and standardization when the Web end calls the Native end interface function during the development process; cross-platform method calls are realized, which significantly improves the flexibility and adaptability of the technology. The middle layer not only supports synchronous and asynchronous method calls, but also unifies the method names, standardizes the processing of input and output data, ensures the consistency of calls and the reliability of data interaction between different platforms, and solves the white screen problem caused by the slow native loading of JSBridge files. Through these improvements, the greatest advantages of the present invention are reflected in several aspects: first, the cross-platform nature makes it unnecessary for developers to implement Native interfaces separately for different mobile platforms, thereby reducing development and maintenance costs; second, the unified calling specifications significantly reduce the risk of errors caused by inconsistent method names and improve development efficiency; finally, the standardization of data processing ensures the accuracy of data interaction and enhances the stability and maintainability of the system. These features jointly promote the development of hybrid development technology to a higher level. BRIEF DESCRIPTION OF THE DRAWINGS

[0027] The present invention has the following accompanying drawings:

[0028] Figure 1 It is a flowchart of a mobile App cross-platform development method according to some specific embodiments of the present invention;

[0029] Figure 2 It is a structural schematic diagram of a mobile App cross-platform development device according to some specific embodiments of the present invention. DETAILED DESCRIPTION

[0030] The following examples further illustrate the content of the present invention, but should not be construed as limiting the present invention. Without departing from the spirit and substance of the present invention, modifications or substitutions made to the methods, steps or conditions of the present invention all fall within the scope of the present invention.

[0031] like Figure 1 As shown, the present invention provides a mobile App cross-platform development method, comprising the following steps:

[0032] Step S10: When the Web end calls the Native end, a request that complies with the JSBridge interface specification is sent through the Web end interface encapsulator;

[0033] Step S11: the JSBridge middle layer receives the request of the JSBridge interface specification, and forwards the request to the corresponding Native end interface through the Native end interface adapter according to the request type and parameters of the JSBridge interface specification;

[0034] Step S12: the Native interface receives and processes the request, and returns the processing result to the Native interface adapter, and the Native interface adapter encapsulates the processing result into a standard format and returns it to the JSBridge middle layer;

[0035] Step S13: The JSBridge middle layer passes the response to the Web end.

[0036] In some embodiments of the present invention, the JSBridge middle layer defines the JSBridge interface specification; the JSBridge middle layer elements include at least method naming, parameter format and return value type.

[0037] In some embodiments of the present invention, the Native-side interface adapter is used to convert the standard call of JSBridge into the Native-side call of the specific platform.

[0038] In some embodiments of the present invention, the Web-side interface encapsulator is used to encapsulate the API called by the Web-side so that the API complies with the JSBridge interface specification.

[0039] In some embodiments of the present invention, the Web-side interface encapsulator and the Native-side interface adapter have the same interface specification.

[0040] like Figure 2 As shown, on the other hand, a mobile App cross-platform development device is provided, comprising:

[0041] The sending module is used to send a request that complies with the JSBridge interface specification through the Web interface encapsulator when the Web side calls the Native side;

[0042] A forwarding module, used for the JSBridge middle layer to receive the request of the JSBridge interface specification, and forward the request to the corresponding Native end interface through the Native end interface adapter according to the request type and parameters of the JSBridge interface specification;

[0043] A first return module, used for the Native interface to receive and process the request, and return the processing result to the Native interface adapter, and the Native interface adapter encapsulates the processing result into a standard format and returns it to the JSBridge middle layer;

[0044] The second return module is used by the JSBridge middle layer to pass the response to the Web end.

[0045] In some embodiments of the present invention, the JSBridge middle layer defines the JSBridge interface specification; the JSBridge middle layer elements include at least method naming, parameter format and return value type.

[0046] In some embodiments of the present invention, the Native-side interface adapter is used to convert the standard call of JSBridge into the Native-side call of the specific platform.

[0047] In some embodiments of the present invention, the Web-side interface encapsulator is used to encapsulate the API called by the Web-side so that the API complies with the JSBridge interface specification.

[0048] In some embodiments of the present invention, the Web-side interface encapsulator and the Native-side interface adapter have the same interface specification.

[0049] 1. The components of this product include:

[0050] The product mainly consists of three parts: Web-side interface encapsulator module, JSBridge middle-layer module and Native-side interface adapter module.

[0051] The implementation steps for using this product are as follows:

[0052] First, define the Web interface in the Web interface encapsulation module to provide standard calls for the Web code in the application layer.

[0053] Then implement the Native logic required by the Web interface in the Native interface adapter module.

[0054] (3) Finally, the JSBridge middle-layer module is used as a bridge to provide a bridge for the Web-side interface to interact with the native implementation.

[0055] 2. The connection relationship between the various parts of the product is as follows:

[0056] (1)JSBridge middle layer module

[0057] The JSBridge middle layer defines a set of standard JSBridge interface specifications, covering key elements such as method naming, parameter format, and return value type, and implements the JSBridge middle layer code to enable it to pass messages between the Web end and the Native end. The JSBridge middle layer serves as a bridge for interaction between the Web end and the Native end, and is used to uniformly handle interface calls and event responses.

[0058] (2) Native interface adapter module

[0059] The main function of the Native interface adapter is to adapt the specific implementation of the Native side to the JSBridge middle layer. For different mobile platforms (such as Android and iOS), the adapter is responsible for encapsulating the corresponding Native interface. The core function of the adapter is to convert the standard call of JSBridge into the Native call of the specific platform, thereby ensuring the consistency and compatibility of the interface between different platforms.

[0060] (3) Web interface encapsulator module

[0061] The main function of the Web interface wrapper is to encapsulate the API called by the Web side to make it conform to the JSBridge interface specification. Through JavaScript code, the wrapper realizes effective communication with the JSBridge middle layer and provides a unified interface calling method for the Web side. This standardized interface design not only simplifies the development process, but also enhances the readability and maintainability of the code, allowing developers to more easily manage and expand Web side functions.

[0062] The JSBridge.call component uses javascript technology to wrap the Native interface called by the Web side, standardizes the calling method signature, and implements cross-platform calls in a standardized and unified manner.

[0063] The JSBridge.js component uses JavaScript technology and is a bridge for interaction between Native and Web, realizing two-way calls between the Native and Web ends.

[0064] The JSBridge NativeClass component uses the Native technology of each platform and is the Native calling code that truly provides Native functions for Web business codes. It encapsulates the call interaction logic and methods for Native calls.

[0065] 3. Process steps

[0066] (1) Define the JSBridge interface specification.

[0067] (2) Implement the JSBridge middle-layer code.

[0068] (3) Develop a native interface adapter.

[0069] (4) Develop a web-based interface wrapper.

[0070] (5) Native injection into JSBridge logic layer.

[0071] 4.Structure Description

[0072] (1) The JSBridge middle layer is the core component that connects the Web side and the Native side.

[0073] (2) The adapter and wrapper are responsible for the interface conversion between the Native side and the Web side respectively.

[0074] (3) The communication protocol module ensures the correct delivery of messages.

[0075] 5. Principle Description

[0076] Through the JSBridge middle layer, the Web side and the Native side are decoupled to improve the efficiency of cross-platform development. The adapters and wrappers follow the unified interface specifications to simplify the development process. The cross-platform communication protocol ensures consistent processing of messages on different platforms.

[0077] 6. Action relationship description

[0078] The Web side normalizes method calls through the middle layer to achieve hybrid development. When the Web side needs to call the Native function, it first sends a request that complies with the JSBridge interface specification through the encapsulator. After the JSBridge middle layer receives the request, it forwards the request to the corresponding Native side interface through the adapter according to the request type and parameters. After the Native side interface completes the processing, it returns the result to the adapter, and the adapter encapsulates the result into a standard format and returns it to the JSBridge middle layer. Finally, the JSBridge middle layer passes the response to the Web side, thus completing a complete interaction process. This process ensures efficient communication and data consistency between the Web and Native.

[0079] Through this method and device, the problem of non-standardization and non-uniformity of calling Native interface in hybrid development mode in mobile application development is solved; by implementing cross-platform JSBridge technology, the technical route and interface specifications are unified, and developers are strictly required to follow relevant specifications to ensure consistency and standardization when the Web end calls the Native end interface function during the development process; cross-platform method calls are realized, which significantly improves the flexibility and adaptability of the technology. The middle layer not only supports synchronous and asynchronous method calls, but also unifies the method names, standardizes the processing of input and output data, ensures the consistency of calls and the reliability of data interaction between different platforms, and solves the white screen problem caused by the slow native loading of JSBridge files. Through these improvements, the greatest advantages of the present invention are reflected in several aspects: first, the cross-platform nature makes it unnecessary for developers to implement Native interfaces separately for different mobile platforms, thereby reducing development and maintenance costs; second, the unified calling specifications significantly reduce the risk of errors caused by inconsistent method names and improve development efficiency; finally, the standardization of data processing ensures the accuracy of data interaction and enhances the stability and maintainability of the system. These features jointly promote the development of hybrid development technology to a higher level.

[0080] The contents not described in detail in this specification belong to the prior art known to professional and technical personnel in this field.

[0081] Although the present invention has been described in detail above by general description, specific implementation methods and experiments, it is obvious to those skilled in the art that some modifications or improvements can be made to the present invention. Therefore, these modifications or improvements made without departing from the spirit of the present invention all belong to the scope of protection claimed by the present invention.

Claims

1. A mobile App cross-platform development method, characterized in that: The following steps are involved: When the Web side calls the Native side, a request that complies with the JSBridge interface specification is sent through the Web side interface wrapper; The JSBridge middle layer receives the request of the JSBridge interface specification, and forwards the request to the corresponding Native end interface through the Native end interface adapter according to the request type and parameters of the JSBridge interface specification; The Native interface receives and processes the request, and returns the processing result to the Native interface adapter, and the Native interface adapter encapsulates the processing result into a standard format and returns it to the JSBridge middle layer; The JSBridge middle layer passes the response to the Web end.

2. A mobile App cross-platform development method according to claim 1, characterized in that: The JSBridge middle layer defines the JSBridge interface specification; the JSBridge middle layer elements include at least method naming, parameter format and return value type.

3. A mobile App cross-platform development method according to claim 1, characterized in that: The Native-side interface adapter is used to convert the standard call of JSBridge into the Native-side call of the specific platform.

4. A mobile App cross-platform development method according to claim 1, characterized in that: The Web-side interface encapsulator is used to encapsulate the API called by the Web-side so that the API complies with the JSBridge interface specification.

5. A mobile App cross-platform development method according to claim 1, characterized in that: The interface specification of the Web-side interface encapsulator and the Native-side interface adapter is the same.

6. A mobile App cross-platform development device, characterized in that: include: The sending module is used to send a request that complies with the JSBridge interface specification through the Web interface encapsulator when the Web side calls the Native side; A forwarding module, used for the JSBridge middle layer to receive the request of the JSBridge interface specification, and forward the request to the corresponding Native end interface through the Native end interface adapter according to the request type and parameters of the JSBridge interface specification; A first return module, used for the Native interface to receive and process the request, and return the processing result to the Native interface adapter, and the Native interface adapter encapsulates the processing result into a standard format and returns it to the JSBridge middle layer; The second return module is used by the JSBridge middle layer to pass the response to the Web end.

7. A mobile App cross-platform development device according to claim 6, characterized in that: The JSBridge middle layer defines the JSBridge interface specification; the JSBridge middle layer elements include at least method naming, parameter format and return value type.

8. A mobile App cross-platform development device according to claim 6, characterized in that: The Native-side interface adapter is used to convert the standard call of JSBridge into the Native-side call of the specific platform.

9. A mobile App cross-platform development device according to claim 6, characterized in that: The Web-side interface encapsulator is used to encapsulate the API called by the Web-side so that the API complies with the JSBridge interface specification.

10. A mobile App cross-platform development method according to claim 6, characterized in that: The interface specification of the Web-side interface encapsulator and the Native-side interface adapter is the same.

Images