A JavaScript interactive calling method
By encapsulating JSSDK in the JavaScript layer and defining a private protocol, efficient interaction between JavaScript and Native is achieved, solving the problem that JavaScript cannot directly call Native, improving the reusability and scalability of the interaction, and reducing development complexity.
Patent Information
- Application Number
- CN202210824073.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-07-14
- Publication Date
- 2025-09-30
- Estimated Expiration
- 2042-07-14
AI Technical Summary
JavaScript cannot directly call Native, and existing interaction methods have problems such as URL length limitations, scattered interactive functions, difficulty in reuse, and poor application platform scalability.
Encapsulate JSSDK in the JavaScript layer, define the global object wondersH5 and the global function executeJS, pass parameters through a private protocol, and the Native layer parses and calls back JavaScript methods to support unified interactive calls in multi-platform environments.
It realizes the simple and efficient interaction between JavaScript and Native, supports multiple systems and application platforms, reduces development complexity and R&D costs, and improves the reusability and scalability of interaction.
Smart Images
Figure BDA0003745666560000041 
Figure BDA0003745666560000051 
Figure BDA0003745666560000061
Abstract
Description
Technical Field
[0001] The present invention relates to a method for realizing interactive calling between JavaScript and Native. Background Art
[0002] When mobile web application development requires the use of Native capabilities, it is necessary to interact with Native, but JavaScript cannot directly call Native. Moreover, current mobile web pages not only need to cross system platforms, but sometimes also need to cross application platforms.
[0003] To address this issue, existing solutions involve JavaScript loading a specific URL through an iframe control or the current page, with Native listening to intercept and parse any URL changes. The main drawbacks of this approach include: 1) URL loading has a maximum length limit, preventing interaction; 2) interactive features are fragmented and lack a comprehensive private protocol, making them difficult to reuse; and 3) they lack support for application platform expansion. Summary of the Invention
[0004] The purpose of the present invention is to provide a method for realizing interactive calling between JavaScript and Native.
[0005] In order to achieve the above object, the technical solution of the present invention is to provide a JavaScript interactive calling method, which is characterized by comprising the following steps:
[0006] Step 1. Encapsulate a JSSDK in the JavaScript layer. Define a global object, wondersH5, and a global function, executeJS, within the JSSDK. Mount the global object, wondersH5, and executeJS on the browser object's Window to make them globally accessible. The global object, wondersH5, is called by the JavaScript layer outside the JSSDK, and the global function, executeJS, is called by the Native layer.
[0007] The global object wondersH5 defines a method dictionary to store JavaScript methods that can be called by the Native layer and a method called callNative for actively calling the Native layer. JavaScript methods include active call methods and callback methods. Active call methods define JavaScript methods that are actively called by the Native layer, while callback methods define JavaScript methods that are called by the Native layer in response to the JavaScript layer's call when the JavaScript layer calls a Native method.
[0008] If you define a dedicated field for JSSDK to identify the current running environment, all JavaScript methods callable by the Native layer will be pre-declared and implemented within JSSDK based on the different values of the dedicated field for the external JavaScript layer to call.
[0009] If no dedicated fields are defined, the dedicated application platform methods for the target application platform are declared and implemented within the JSSDK.
[0010] Step 2: Before loading the webview, the Native layer adds a dedicated field after UserAgent. The Native layer has already injected an object uniquely corresponding to the dedicated field into the JavaScript engine through addJavascriptInterface or addScriptMessageHandler and passed in the object name for active JSSDK calls. If the JavaScript layer calls the Native method, proceed to Step 3. If the Native layer actively calls the JavaScript method, proceed to Step 4.
[0011] Alternatively, the Native layer does not append a dedicated field to the UserAgent field. When the JavaScript layer calls a Native method or when the Native layer actively calls a JavaScript method, the dedicated application platform method is used directly.
[0012] Step 3: The JavaScript layer calls the Native method, including the following steps:
[0013] Step 301: When the JavaScript layer calls the Native method, it uses the global object wondersH5 to call the corresponding JavaScript method and pass in detailed parameters and callback methods.
[0014] Step 302: Assemble the detailed parameters and the name of the callback method passed in step 301 into the format defined by the private protocol to obtain the final parameters, and implement the transfer of the final parameters through the callNative method, where:
[0015] The format defined by the private protocol includes the following fields:
[0016] The method name field is used to record the method name of the JavaScript method;
[0017] The calling category field is used to record the category corresponding to the JavaScript method;
[0018] Parameter field: used to record the detailed parameters corresponding to different method names;
[0019] Callback method name field: used to record the name of the callback method; the callback method passed in step 301 is stored in the method dictionary defined in step 1, with the key being a randomly generated string and the value being the callback method; the key is spliced into the callback method name field of the final parameter when calling the Native layer;
[0020] In the callNative method, the current running environment is first determined through the dedicated field, and then the object of the corresponding JavaScript engine pre-injected in step 2 is called. The final concatenated parameters are then passed to the Native layer through the object.
[0021] Step 303: After receiving the final parameters, the Native layer parses the specific Native method to be called according to the format of the private protocol. When calling back the JavaScript method, it executes the global function executeJS pre-mounted on the window in step 3 through evaluateJavascript, and passes in the name of the callback method and the callback result.
[0022] Step 304: JSSDK finds the corresponding JavaScript method in the method dictionary using the key passed in by the Native layer and executes it. After execution, the callback method is deleted from the method dictionary to avoid memory leaks.
[0023] In step 4, when the native layer actively calls a JavaScript method, it pre-adds the JavaScript method to the method dictionary defined in step 1 and prefixes the method name with the pre-agreed protocol rules. After executing such a JavaScript method, the JSSDK determines that the method name prefix conforms to the pre-agreed protocol rules and does not delete the JavaScript method.
[0024] Preferably, JavaScript methods are divided into four categories: native permissions nativePermission, page jump toPage, setting top and bottom navigation setNavgation, and page lifecycle lifeCycle.
[0025] This invention encapsulates a JSSDK in the JavaScript layer, uses the UserAgent to determine the current environment to call different methods, and establishes a private protocol. The Native layer parses the call content according to the protocol and calls back the corresponding method. After integrating the JSSDK, mobile web application developers can use a unified interface to call Native capabilities without worrying about the current system or application environment. The method provided by this invention can reduce the calling process, has high reusability, can be expanded to multiple systems and application platforms, and reduces R&D time and costs.
[0026] Specifically, compared with the prior art, the present invention has the following advantages:
[0027] 1) JavaScript calls are concise and clear, allowing mobile web developers to focus more on the business itself without having to pay too much attention to differences in system platforms;
[0028] 2) The differences between application platforms can be judged and adapted within the internal implementation of JSSDK, which is highly reusable and can be expanded to multiple application platforms, reducing R&D time and costs;
[0029] 3) There is no parameter length limit for interaction with the JavaScript engine, which also solves the problem of existing solutions failing to interact when the URL is too long;
[0030] 4) The development of a private protocol ensures that JavaScript and Native interaction calls always use the same method, making it easier to maintain and expand. DETAILED DESCRIPTION
[0031] Below in conjunction with specific embodiment, further set forth the present invention.Should be understood that these embodiments are only used to illustrate the present invention and are not used in limiting the scope of the present invention.In addition, should be understood that after reading the content taught by the present invention, those skilled in the art can make various changes or modifications to the present invention, and these equivalent forms fall equally within the scope limited by the appended claims of the application.
[0032] The JavaScript interactive calling method disclosed in this embodiment specifically includes the following steps:
[0033] Step 1. Encapsulate a JSSDK in the JavaScript layer. Define a global object wondersH5 and a global function executeJS within the JSSDK. Mount the global object wondersH5 and the global function executeJS on the browser object's Window to make them globally accessible. The global object wondersH5 is called by the JavaScript layer outside the JSSDK, and the global function executeJS is called by the Native layer.
[0034] The global wondersH5 object defines a method dictionary for storing JavaScript methods callable by the native layer and a method called callNative for actively calling the native layer. JavaScript methods include active call methods and callback methods. Active call methods are defined as JavaScript methods actively called by the native layer, while callback methods are defined as JavaScript methods called by the native layer in response to the JavaScript layer's call.
[0035] If a dedicated field is added after UserAgent to allow JSSDK to identify the current runtime environment, all JavaScript methods callable by the Native layer are pre-declared and implemented within JSSDK based on the different values of the dedicated field for invocation by the external JavaScript layer. In the present invention, Native can add the dedicated field after UserAgent before loading the webview. When an app running on a mobile terminal accesses a mobile web application of any functional module, Native loads the webview.
[0036] If no additional dedicated fields are added after UserAgent, the target application platform's dedicated application platform methods are declared and implemented within the JSSDK. The target application platform's dedicated application platform methods refer to the methods provided by the target application platform, not the JavaScript methods defined in this invention.
[0037] In step 2, the native layer appends the dedicated field after UserAgent before loading the webview. The native layer also pre-injects an object uniquely corresponding to the dedicated field into the JavaScript engine using addJavascriptInterface or addScriptMessageHandler, passing in the object name for the JSSDK to proactively call. If the JavaScript layer calls a native method, proceed to step 3. If the native layer proactively calls a JavaScript method, proceed to step 4.
[0038] Alternatively, the Native layer does not append a dedicated field to UserAgent. When the JavaScript layer calls a Native method or when the Native layer actively calls a JavaScript method, the dedicated application platform method is directly used.
[0039] Step 3: The JavaScript layer calls the Native method, including the following steps:
[0040] Step 301: When the JavaScript layer calls the Native method, it uses the global object wondersH5 to call the corresponding JavaScript method and pass in detailed parameters and callback methods.
[0041] In this embodiment, the detailed parameters and callback methods passed in are as follows:
[0042]
[0043]
[0044] "coordinate", "1", res.code, res.msg, res.longitude and res.latitude are all parameters, among which res.code, res.msg, res.longitude and res.latitude are the parameters required by the callback method named res.
[0045] Step 302: Assemble the detailed parameters and the name of the callback method passed in step 301 into the format defined by the private protocol to obtain the final parameters, and implement the transfer of the final parameters through the callNative method.
[0046] In the present invention, the format defined by the private protocol includes the following fields:
[0047] The method name field is used to record the method name of the JavaScript method;
[0048] The calling category field is used to record the category corresponding to the method. In this invention, the methods are divided into four categories: native permission nativePermission, page jump toPage, setting top and bottom navigation setNavgation, and page lifecycle lifeCycle;
[0049] Parameter field: used to record the detailed parameters corresponding to different JavaScript methods, for example:
[0050] The detailed parameters corresponding to the methods belonging to nativePermission include: code scanning qrCodeScan, identity recognition authentication, landscape and portrait screen switching rotate, getting latitude and longitude getLocation, etc.
[0051] The detailed parameters corresponding to the toPage method of page jump include: push forward, pop backward, etc.
[0052] The detailed parameters corresponding to the setNavgation method for setting the top and bottom navigation include: setting the top navigation header, setting the bottom navigation tabbar, etc.
[0053] The detailed parameters corresponding to the methods belonging to the page lifecycle lifeCycle include: onVisible, which means the page is about to appear; onInvisible, which means the page is about to be hidden; onDestory, which means the page is about to be destroyed, and so on.
[0054] Callback method name field: This field is used to record the name or identifier of the callback method. JavaScript typically passes in anonymous functions, so a unique string needs to be generated as the name of the callback method. Specifically, the callback method passed in step 301 is stored in the method dictionary defined in step 1, with the key being a randomly generated string and the value being the callback method. The key is then appended to the callback method name field of the final parameter when the Native layer is called. In this disclosure, "name" refers to a mapping; for example, "callback method name" refers to the mapping of the callback method.
[0055] In this invention, the method name field, call category field, parameter field, and callback method name field together constitute the final private protocol. This set of rules can cover most common interactions and is easy to expand. The detailed parameters and callback method names passed in step 301 are assembled into the format defined by the private protocol as follows:
[0056]
[0057] In the callNative method, the current running environment is first determined through the dedicated field, and then step 2 is called to pre-inject the corresponding JavaScript engine object, and the final spliced parameters are passed to the Native layer through the object.
[0058] In step 303, after receiving the final parameters, the Native layer parses the specific JavaScript method to be called according to the format of the private protocol. When calling back the JavaScript method, it executes the global function executeJS pre-mounted on the window in step 3 through evaluateJavascript, and passes in the callback method name and callback result.
[0059] Step 304: JSSDK finds the corresponding JavaScript method in the method dictionary using the key passed in by the Native layer and executes it. After execution, the callback method is deleted from the method dictionary to avoid memory leaks.
[0060] In step 4, when the native layer actively calls a JavaScript method, it pre-adds the JavaScript method to the method dictionary defined in step 1 and prefixes the method name with the pre-agreed protocol rules. After executing such a JavaScript method, the JSSDK determines that the method name prefix conforms to the pre-agreed protocol rules and does not delete the JavaScript method.
Claims
1. A JavaScript interactive calling method, characterized in that: The following steps are involved: Step 1. Encapsulate a JSSDK in the JavaScript layer. Define a global object, wondersH5, and a global function, executeJS, within the JSSDK. Mount the global object, wondersH5, and executeJS on the browser object's Window to make them globally accessible. The global object, wondersH5, is called by the JavaScript layer outside the JSSDK, and the global function, executeJS, is called by the Native layer. The global object wondersH5 defines a method dictionary to store JavaScript methods that can be called by the Native layer and a method called callNative for actively calling the Native layer. JavaScript methods include active call methods and callback methods. Active call methods define JavaScript methods that are actively called by the Native layer, while callback methods define JavaScript methods that are called by the Native layer in response to the JavaScript layer's call when the JavaScript layer calls a Native method. If you define a dedicated field for JSSDK to identify the current running environment, all JavaScript methods callable by the Native layer will be pre-declared and implemented within JSSDK based on the different values of the dedicated field for the external JavaScript layer to call. If no dedicated fields are defined, the dedicated application platform methods for the target application platform are declared and implemented within the JSSDK. Step 2: Before loading the webview, the Native layer adds a dedicated field after UserAgent. The Native layer has already injected an object uniquely corresponding to the dedicated field into the JavaScript engine through addJavascriptInterface or addScriptMessageHandler and passed in the object name for active JSSDK calls. If the JavaScript layer calls the Native method, proceed to Step 3. If the Native layer actively calls the JavaScript method, proceed to Step 4. Alternatively, the Native layer does not append a dedicated field to the UserAgent field. When the JavaScript layer calls a Native method or when the Native layer actively calls a JavaScript method, the dedicated application platform method is used directly. Step 3: The JavaScript layer calls the Native method, including the following steps: Step 301: When the JavaScript layer calls the Native method, it uses the global object wondersH5 to call the corresponding JavaScript method and pass in detailed parameters and callback methods. Step 302: Assemble the detailed parameters and callback method passed in step 301 into the format defined by the private protocol to obtain the final parameters, and implement the transfer of the final parameters through the callNative method, where: The format defined by the private protocol includes the following fields: The method name field is used to record the method name of the JavaScript method; The calling category field is used to record the category corresponding to the JavaScript method; Parameter field: used to record the detailed parameters corresponding to different method names; Callback method name field: used to record the name of the callback method; the callback method passed in step 301 is stored in the method dictionary defined in step 1, with the key being a randomly generated string and the value being the callback method; the key is spliced into the callback method name field of the final parameter when calling the Native layer; In the callNative method, the current running environment is first determined through the dedicated field, and then the object of the corresponding JavaScript engine pre-injected in step 2 is called, and the final concatenated parameters are passed to the Native layer through the object; Step 303: After receiving the final parameters, the Native layer parses the specific Native method to be called according to the format of the private protocol. When calling back the JavaScript method, it executes the global function executeJS pre-mounted on the window in step 3 through evaluateJavascript, and passes in the name of the callback method and the callback result. Step 304: JSSDK finds the corresponding JavaScript method in the method dictionary using the key passed in by the Native layer and executes it. After execution, the callback method is deleted from the method dictionary to avoid memory leaks. In step 4, when the Native layer actively calls a JavaScript method, it pre-adds the JavaScript method to the method dictionary defined in step 1 and uses the pre-agreed protocol rules as the prefix of the method name. After executing such a JavaScript method, if the JSSDK determines that the method name prefix conforms to the pre-agreed protocol rules, it will not delete the JavaScript method.
2. A JavaScript interactive calling method as claimed in claim 1, characterized in that: In step 302, JavaScript methods are divided into four categories: native permission nativePermission, page jump toPage, setting top and bottom navigation setNavgation, and page lifecycle lifeCycle.