Method for compatible Cordova cross-platform development in swan gap system

Abstract

The invention relates to a method for compatible Cordova cross-platform development in a swan gap system, which comprises the following steps of: 1, adding an intermediate conversion layer between an HTML (Hypertext Markup Language) page and a communication channel to realize adaptation among different platforms; step 2, creating a user-defined communication channel; and step 3, packaging an original HTML (Hypertext Markup Language) page developed on the basis of Cordova, the intermediate conversion layer in the step 1 and the self-defined communication channel in the step 2 together, and completing Cordova cross-platform development compatible in the swan-gap system. According to the method, the problem that the Cordov a framework cannot reuse the existing codes in the swan-gap system can be solved.

Description

Technical Field

[0001] The present invention belongs to the technical field of Cordova framework development, and relates to a method for Cordova cross-platform development, and in particular to a method for Cordova cross-platform development compatible with Hongmeng system. Background Art

[0002] Cordova is an open source mobile application development framework that allows developers to use HTML, CSS, and JavaScript to build cross-platform mobile applications. Cordova calls the native interface of the mobile platform through the communication channel defined by its framework, so that HTML pages have the ability to call native interfaces and can develop pages with a near-native experience. With Cordova, developers can write code once and then package it into iOS and Android applications.

[0003] Defects and shortcomings of the existing technology:

[0004] 1. The Cordova framework does not support Hongmeng OS, which makes it impossible to directly package the developed application into Hongmeng OS application. Existing pages developed on other platforms cannot be directly reused on Hongmeng OS, which not only wastes resources but also increases the development manpower cost.

[0005] 2. The communication channel defined by the Cordova framework cannot be used in the Hongmeng system, which results in the inability of HTML pages to call native interfaces through the communication channel. This limits the creativity of developers and they can only develop some simple static pages, thus affecting the page effect and scope of application.

[0006] Therefore, a method is needed to develop cross-platform applications compatible with Cordova in Hongmeng system, which can use a set of code to package iOS, Android and Hongmeng system applications. It can also customize the communication channel in Hongmeng system, enable HTML pages to call native interfaces, and develop pages close to native experience.

[0007] After searching, no public documents of the prior art identical or similar to the present invention were found. Summary of the invention

[0008] The purpose of the present invention is to overcome the shortcomings of the prior art and propose a method for cross-platform development in the Hongmeng system that is compatible with Cordova. The method can use a set of codes to package applications for iOS, Android, and Hongmeng systems, and can customize the communication channels under the Hongmeng system, so that HTML pages have the ability to call native interfaces and develop pages that are close to the native experience.

[0009] The present invention solves the practical problem by adopting the following technical solutions:

[0010] A method for cross-platform development compatible with Cordova in Hongmeng system, comprising the following steps:

[0011] Step 1: Add an intermediate conversion layer between the HTML page and the communication channel to achieve adaptation between different platforms;

[0012] Step 2: Create a custom communication channel;

[0013] Step 3: Package the original HTML page developed based on Cordova together with the intermediate conversion layer of step 1 and the custom communication channel of step 2 to complete the cross-platform development compatible with Cordova in the Hongmeng system.

[0014] Moreover, the specific steps of step 1 include:

[0015] (1) Add a layer of code calls between the HTML page and the communication channel. Originally, HTML directly called the communication channel, but now the HTML page first calls the middle layer, and the middle layer then calls the communication channel. This newly added layer of code calls is called the middle conversion layer.

[0016] (2) Before calling the communication channel, the intermediate conversion layer first determines the type of the currently running operating system platform and calls the communication channel that matches the platform type;

[0017] Moreover, the specific method of step (2) of step 1 is:

[0018] Call the Cordova communication channel in iOS and Android systems, and call the custom communication channel in step 2 in Hongmeng system.

[0019] Furthermore, the custom communication channel of step 2 includes:

[0020] (1) Utilize the communication mechanism between Hongmeng system WebView and JavaScript to encapsulate a set of common interfaces in the communication method. The interface naming method and parameter format are consistent with the Cordova communication channel.

[0021] (2) The custom communication channel uses a separate thread, so that an asynchronous call can be formed when the HTML call is made. Even if there is a problem in the calling process, it will only affect the current calling thread and will not block the main thread.

[0022] (3) Define unified error codes for different types of errors, and make sure they are consistent with the common error codes in the Cordova framework;

[0023] When step 1 determines that the system type is Hongmeng system, this custom communication channel will be called.

[0024] Moreover, the specific method of step 3 is:

[0025] Package the HTML page originally developed based on Cordova together with the intermediate conversion layer of step 1 and the custom communication channel of step 2. The HTML page can call the native functions of the HarmonyOS by calling the intermediate conversion layer and the custom communication channel, thereby completing the cross-platform development compatible with Cordova on the HarmonyOS.

[0026] Advantages and beneficial effects of the present invention:

[0027] 1. The present invention solves the problem that the Cordova framework cannot reuse existing codes in the Hongmeng system by adding an intermediate conversion layer to the existing code architecture. The intermediate conversion layer can use a set of codes to package applications for iOS, Android, and Hongmeng systems, saving labor costs and reducing resource waste.

[0028] 2. The present invention solves the problem in the prior art that Cordova does not support calling the native interface of the Hongmeng system by adding a custom communication channel. The advantage of the custom communication channel is that it enables HTML pages to have the ability to call the native interface of the Hongmeng system, and pages close to the native experience can be developed in the Hongmeng system, which significantly improves the user experience, and the custom communication channel can be optimized for the Hongmeng system to ensure the security of data transmission.

[0029] 3. The present invention combines the intermediate conversion layer and the custom communication channel to build a new cross-platform architecture, which solves the problem of poor scalability of Cordova in terms of system compatibility and can be compatible with various new operating systems in future technological development. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] Figure 1 This is a schematic diagram of the architecture of the present invention being compatible with Cordova in the Hongmeng system;

[0031] Figure 2 This is the overall flow chart of the present invention being compatible with Cordova in the Hongmeng system. DETAILED DESCRIPTION

[0032] The embodiments of the present invention are further described in detail below with reference to the accompanying drawings:

[0033] A method for cross-platform development compatible with Cordova in Hongmeng system, such as Figure 1 and Figure 2 As shown, the following steps are included:

[0034] Step 1: Add an intermediate conversion layer between the HTML page and the communication channel to achieve adaptation between different platforms;

[0035] The present invention adds an intermediate conversion layer between the HTML page and the communication channel. The design goal of the intermediate conversion layer is to achieve adaptation between different platforms.

[0036] The specific steps of step 1 include:

[0037] (1) Add a layer of code calls between the HTML page and the communication channel. Originally, HTML directly called the communication channel, but now the HTML page first calls the middle layer, and the middle layer then calls the communication channel. This newly added layer of code calls is called the middle conversion layer.

[0038] (2) Before calling the communication channel, the intermediate conversion layer first determines the type of the currently running operating system platform and calls the communication channel that matches the platform type;

[0039] The specific method of step (2) of step 1 is:

[0040] Call the Cordova communication channel in iOS and Android systems, and call the custom communication channel in step 2 in Hongmeng system.

[0041] Step 2: Create a custom communication channel;

[0042] Since the Cordova framework does not support the Hongmeng system, there is a lack of effective communication channels under the Hongmeng system. To this end, the present invention defines a set of custom communication channels that can achieve the same effect as the Cordova communication channel in the Hongmeng system.

[0043] When step 1 determines that the system type is Hongmeng system, this custom communication channel will be called.

[0044] The custom communication channel of step 2 includes:

[0045] (1) Utilize the communication mechanism between Hongmeng system WebView and JavaScript to encapsulate a set of common interfaces in the communication method. The interface naming method and parameter format are consistent with the Cordova communication channel.

[0046] (2) The custom communication channel uses a separate thread, so that an asynchronous call can be formed when the HTML call is made. Even if there is a problem in the calling process, it will only affect the current calling thread and will not block the main thread.

[0047] (3) Define unified error codes for different types of errors, and make sure they are consistent with the common error codes in the Cordova framework.

[0048] Step 3: Package the original HTML page developed based on Cordova together with the intermediate conversion layer of step 1 and the custom communication channel of step 2 to complete the cross-platform development compatible with Cordova in the Hongmeng system.

[0049] The specific method of step 3 is:

[0050] Package the HTML page originally developed based on Cordova together with the intermediate conversion layer of step 1 and the custom communication channel of step 2. The HTML page can call the native functions of the HarmonyOS by calling the intermediate conversion layer and the custom communication channel, thereby completing the cross-platform development compatible with Cordova on the HarmonyOS.

[0051] like Figure 1 As shown, this embodiment shows an architecture compatible with Cordova in the Hongmeng system, which specifically includes a web program, an intermediate conversion layer, a communication layer and an operating system;

[0052] The architecture loads web programs through the WebView container and selects the appropriate communication method based on the type of the current operating system.

[0053] Structure Description:

[0054] 1. Web program

[0055] Web applications are front-end applications developed using HTML, CSS, and JavaScript, responsible for user interface display and user interaction. Web applications initiate requests for native functions by calling the interface of the intermediate conversion layer.

[0056] 2. Intermediate conversion layer

[0057] The intermediate conversion layer is an adaptation layer that is responsible for identifying the current operating system (Hongmeng, iOS or Android) and selecting the corresponding communication channel. When a web application calls the interface of the intermediate conversion layer, the intermediate conversion layer first determines the operating system type:

[0058] 1) Hongmeng system: calling custom communication channels

[0059] 2) iOS system: calling the Cordova communication channel

[0060] 3) Android system: calling the Cordova communication channel

[0061] 3. Communication layer

[0062] 1) Custom communication channel: This channel implements functions similar to Cordova, allowing web applications to call the native interface of the Hongmeng system. The custom communication channel is responsible for converting requests from the intermediate conversion layer into a format that the Hongmeng system can understand and processing them.

[0063] 2) Cordova communication channel: The Cordova communication channel allows web applications to call native interfaces of iOS and Android through JavaScript. The channel forwards the request to the corresponding native function and returns the result to the intermediate conversion layer.

[0064] 4. Operating System

[0065] Operating systems provide native support for running web applications, including Hongmeng, iOS, and Android. Each operating system has its own unique native interface for web applications to call through the corresponding communication channel.

[0066] Example 2

[0067] like Figure 2 As shown, this embodiment describes a specific implementation method, including the following steps:

[0068] Step 1: Load the HTML page

[0069] Implementation method: Use Hongmeng system's WebviewController to load HTML web pages

[0070] Step 2: Initialize intermediate conversion layers and custom channels

[0071] Interface definition: initCallChannel()

[0072] Implementation method: Call the initCallChannel() function of CallChannel to initialize the intermediate conversion layer and the custom channel. In the function, execute JavaScript code to register the callNative(method,params) function to the window object.

[0073] Step 3: Initialize the native interface:

[0074] Implementation method:

[0075] 1) Encapsulate all native interfaces into the NativeApi.ets file and create a call = (func: string, params: string): void function

[0076] 2) Through the javaScriptProxy interface of the Hongmeng system Web control, create a JSBridgeHandle object in the JavaScript engine, and execute the javaScriptProxy interface to bind the JSBridgeHandle to the current Web control.

[0077] 3) Call the callNative(method,params) function in step 2, receive it through the javaScriptProxy interface of the Hongmeng native system Web control, and map the method to the corresponding native function, so that the initialization of the native interface can be completed.

[0078] Step 4: Call the intermediate conversion layer

[0079] Implementation method: The HTML page encapsulates all business interfaces into the api.js file. When the HTML page calls the business interface, the business interface in api.js internally distinguishes different operating systems and executes different logics.

[0080] Step 5: Determine whether it is Hongmeng system

[0081] Interface definition: isHarmonyOS()

[0082] Implementation method: Inside the business interface, call isHarmonyOS() to distinguish whether it is the HarmonyOS system by judging the user ID of the current Webview. The HarmonyOS system calls the custom communication channel, and other systems call the Cordova communication channel.

[0083] Step 6: Call the custom communication channel

[0084] Interface definition: callNative(method,params)

[0085] Implementation method: After determining the Hongmeng system in step 4, call the custom channel function window.callNative(method,params) and wait for the return result.

[0086] Step 7: Call the Hongmeng system native interface

[0087] Implementation method:

[0088] 1) The window.callNative(method,params) function finds the corresponding native interface in NativeApi.ets through the mapping of the javaScriptProxy interface

[0089] 2) Execute the native interface in NativeApi.ets. Through different methods and params, you can execute various business logics in the native Hongmeng system.

[0090] 3) After the native interface is executed, the result or error code is returned to the intermediate conversion layer through callbackContext, and the intermediate conversion layer returns it to the HTML page, thus completing the call of the native interface.

[0091] It should be emphasized that the embodiments of the present invention are illustrative rather than restrictive. Therefore, the present invention includes but is not limited to the embodiments described in the specific implementation modes. Any other implementation modes derived by those skilled in the art based on the technical solutions of the present invention also fall within the scope of protection of the present invention.

Claims

1. A method for cross-platform development in Hongmeng system compatible with Cordova, characterized by: The following steps are involved: Step 1: Add an intermediate conversion layer between the HTML page and the communication channel to achieve adaptation between different platforms; Step 2: Create a custom communication channel; Step 3: Package the original HTML page developed based on Cordova together with the intermediate conversion layer of step 1 and the custom communication channel of step 2 to complete the cross-platform development compatible with Cordova in the Hongmeng system.

2. According to claim 1, a method for cross-platform development in Hongmeng system compatible with Cordova is characterized in that: The specific steps of step 1 include: (1) Add a layer of code calls between the HTML page and the communication channel. Originally, HTML directly called the communication channel, but now the HTML page first calls the middle layer, and the middle layer then calls the communication channel. This newly added layer of code calls is called the middle conversion layer. (2) Before calling the communication channel, the intermediate conversion layer first determines the type of the currently running operating system platform and calls the communication channel that matches the platform type.

3. According to claim 2, a method for cross-platform development in Hongmeng system compatible with Cordova is characterized in that: The specific method of step (2) of step 1 is: Call the Cordova communication channel in iOS and Android systems, and call the custom communication channel in step 2 in Hongmeng system.

4. According to claim 1, a method for cross-platform development in Hongmeng system compatible with Cordova is characterized in that: The custom communication channel of step 2 includes: (1) Utilize the communication mechanism between Hongmeng system WebView and JavaScript to encapsulate a set of common interfaces in the communication method. The interface naming method and parameter format are consistent with the Cordova communication channel. (2) The custom communication channel uses a separate thread, which can form an asynchronous call when HTML calls; (3) Define unified error codes for different types of errors, and make sure they are consistent with the common error codes in the Cordova framework; When step 1 determines that the system type is Hongmeng system, this custom communication channel will be called.

5. According to claim 1, a method for cross-platform development in Hongmeng system compatible with Cordova is characterized in that: The specific method of step 3 is: Package the HTML page originally developed based on Cordova together with the intermediate conversion layer of step 1 and the custom communication channel of step 2. The HTML page can call the native functions of the HarmonyOS by calling the intermediate conversion layer and the custom communication channel, thereby completing the cross-platform development compatible with Cordova on the HarmonyOS.

Images