Methods, systems, terminal devices, and storage media for synchronous interaction between iOS clients and web applications.

Abstract

This invention provides a method, system, terminal device, and storage medium for synchronous interaction between an iOS client and a web application, relating to the field of computer systems. The invention receives web services requested by users through a system platform; a request URL generation module identifies the components, method names, and parameters that the H5 application needs to call, and calls the corresponding components to process and obtain the results; a request URL sending module sends the request URL containing the processing results to the web server through the system platform. This invention provides a synchronous interaction method that enables synchronous interaction between an App client and an H5 application in a hybrid development model. The main effects achieved are: solving the problem of synchronous waiting within the H5 application under asynchronous methods, which complicates H5 logic processing; providing clear and concise code results; and enriching the interaction capabilities between the App client and H5 application to meet different usage scenarios.

Description

Technical Field

[0001] This invention relates to the field of computer systems, and more specifically, to a method, system, terminal device, and storage medium for synchronous interaction between an iOS client and a Web client. Background Technology

[0002] Hybrid application development combines native and HTML5 development technologies. It utilizes a development model where the source code uses a webview plugin or other framework to provide a container for HTML5, the main business logic is implemented, and the interface display is achieved using HTML5-related web technologies.

[0003] Currently, the interaction between the App client developed using the hybrid model and the H5 pages used internally is usually achieved by injecting JS methods into the App client.

[0004] Then, the H5 page calls the methods provided by the App client through webkit.messageHandlers, and the App client uses the evaluateJavaScript:completionHandler method of WKWebView to call back the JS method, thus achieving asynchronous interaction.

[0005] Currently, iOS has completely replaced UIWebView with WKWebView, causing the synchronous interaction methods that originally used the JSExport protocol provided by UIWebView to become invalid.

[0006] However, the webkit.messageHandlers and evaluateJavaScript:completionHandler methods can only achieve asynchronous interaction functions, and cannot solve the scenarios in actual business that require synchronous processing. Summary of the Invention

[0007] In view of the above-mentioned defects caused by the capabilities provided by the system itself, the present invention provides a method for synchronous interaction between iOS App client and H5 in hybrid mode, which makes up for the inherent deficiencies of the system capabilities and solves the differentiated requirements under different business scenarios. Specifically, the embodiments of the present invention provide a method, system, terminal device and storage medium for synchronous interaction between iOS client and Web client.

[0008] A method for synchronous interaction between an iOS client and a web client, comprising the following steps:

[0009] Step S01: The App client optimizes and modifies WKWebView, and registers the interactive components.

[0010] Step S02: Complete the encapsulation of the interaction components between H5 and APP to form the interaction component object JSBridge. Implement the call method for synchronous message sending in the component. In the call method, parse the method parameters and then assemble them into a URL for a synchronous interaction request. Finally, send the synchronous request through XMLHttpRequest.

[0011] Step S03: When the App client initializes WKWebView, it uses the addUserScript method to inject the JSBridge object encapsulated in step S02 into the H5.

[0012] Step S04: The App client uses the setURLSchemeHandler:forURLScheme: method in WKWebViewConfiguration to register a management object for receiving H5 messages for the specified scheme;

[0013] Step S05: The App client listens for messages from the H5 message management object and processes the synchronous request messages from the H5 in the webView:startURLSchemeTask: method;

[0014] Step S06. The JSBridge component's call method retrieves the response to the synchronous request and returns the response to the upper-layer business logic. The H5 then completes the subsequent business process, thus completing the synchronous interaction process in one go.

[0015] Furthermore: In step S05, the specific steps for processing the H5 synchronization request message include:

[0016] Step S051: Start the urlSchemeTask task to parse the URL, identify the components that H5 needs to call, their method names and parameters, and call the corresponding components to process and obtain the results;

[0017] Step S052: After obtaining the result, firstly, the App instantiates an NSHTTPURLResponse object and places the returned result in it, and calls the didReceiveResponse method in the synchronous urlSchemeTask task to set the instantiated object; secondly, it uses the didReceiveData method to return the processing result in step S051 as the data of the response; finally, it calls the didFinish method to end the entire synchronous interaction processing flow.

[0018] Furthermore: the system includes a client and a web server;

[0019] The client includes: a receiving module, used to receive the web service requested by the user through the system platform; a request URL generation module, used to identify the components, method names and parameters that the H5 needs to call, and call the corresponding components to process and obtain the results; and a request URL sending module, used to send the request URL containing the processing results to the web server through the system platform.

[0020] The web server returns the web service result corresponding to the web service to the system platform according to the request URL.

[0021] Furthermore, the terminal device may include a processor, a storage medium, and a bus. The storage medium stores machine-readable instructions that can be executed by the processor. When the terminal device is running, the processor communicates with the storage medium via the bus, and the processor executes the machine-readable instructions to perform the steps of the deep learning model training method as described in the foregoing embodiments.

[0022] Further: a storage medium storing a computer program, which, when executed by a processor, performs the steps of the method described above.

[0023] The beneficial effects of this invention are as follows: This invention provides a synchronous interaction method that enables synchronous interaction between the App client and H5 in a hybrid development mode. In some simple scenarios, such as when H5 obtains the user's registered mobile phone number through a JS method, it only needs to use `var phone = JSBridege.call("getPhone")` to synchronously obtain the return value from the App client. The main effects achieved are: solving the problem of synchronous waiting within H5 under asynchronous mode, which causes complexity in H5 logic processing; clear and concise code results; and enriching the interaction capabilities between the App client and H5 to meet different usage scenarios. Attached Figure Description

[0024] To more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of the present invention and should not be regarded as a limitation on the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0025] Figure 1 A flowchart illustrating the method of the present invention is shown;

[0026] Figure 2 A schematic diagram of the system composition of the present invention is shown;

[0027] Figure 3 A schematic diagram of the composition of the terminal device of the present invention is shown; Detailed Implementation

[0028] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. It should be understood that the accompanying drawings in the present invention are for illustrative and descriptive purposes only and are not intended to limit the scope of protection of the present invention. Furthermore, it should be understood that the schematic drawings are not drawn to scale. The flowcharts used in this invention illustrate operations implemented according to some embodiments of the present invention. It should be understood that the operations in the flowcharts may not be implemented in sequence, and steps without logical contextual relationships may be reversed or implemented simultaneously. In addition, those skilled in the art, guided by the content of this invention, may add one or more other operations to the flowcharts, or remove one or more operations from the flowcharts.

[0029] Furthermore, the embodiments described herein are merely some, not all, of the embodiments of the invention. The components of the embodiments of the invention described and illustrated herein can typically be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the invention provided in the accompanying drawings is not intended to limit the scope of the claimed invention, but merely to illustrate selected embodiments of the invention. All other embodiments obtained by those skilled in the art based on the embodiments of the invention without inventive effort are within the scope of protection of the invention.

[0030] It should be noted that the term "comprising" will be used in the embodiments of the present invention to indicate the presence of a feature subsequently declared, but does not preclude the addition of other features. It should also be noted that similar reference numerals and letters in the following figures indicate similar items; therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures. In the description of the present invention, it should also be noted that the terms "first," "second," "third," etc., are used only for distinguishing descriptions and should not be construed as indicating or implying relative importance.

[0031] Figure 1 A flowchart illustrating the steps of the method of the present invention is shown.

[0032] The specific steps of the method of the present invention include:

[0033] Step S01: The App client optimizes and modifies WKWebView, and registers the interactive components.

[0034] In this step, the client registers a message management object, URLSchemeHandler.

[0035] Step S02: Complete the encapsulation of the interaction components between H5 and APP, forming an interaction component object JSBridge. Implement the call method for synchronous message sending in the component, for example, call(funcName, params). In the call method, parse the method parameters, assemble them into a URL for a synchronous interaction request, and finally send the synchronous request via XMLHttpRequest.

[0036] For example:

[0037] var request = new XMLHttpRequest();

[0038] request.open('GET', '***: / / funcName?A=a&B=b', false);

[0039] request.send();

[0040] if (request.status == 200) {

[0041] return request.responseText;

[0042] };

[0043] Step S03: When the App client initializes WKWebView, it uses the addUserScript method to inject the JSBridge object encapsulated in step S02 into the H5.

[0044] Step S04: The App client uses the setURLSchemeHandler:forURLScheme: method in WKWebViewConfiguration to register a management object for receiving H5 messages for the specified scheme;

[0045] Step S05: The App client listens for messages from the H5 message management object and processes the synchronous request messages from H5 in the webView:startURLSchemeTask: method. The specific steps are as follows:

[0046] Step S051: Start the urlSchemeTask task to parse the URL, identify the components that H5 needs to call, their method names and parameters, and call the corresponding components to process and obtain the results;

[0047] Step S052: After obtaining the result, firstly, the App instantiates an NSHTTPURLResponse object and places the returned result in it, and calls the didReceiveResponse method in the synchronous urlSchemeTask task to set the instantiated object; secondly, it uses the didReceiveData method to return the processing result in step S051 as the data of the response; finally, it calls the didFinish method to end the entire synchronous interaction processing flow.

[0048] Step S06. The JSBridge component's call method retrieves the response to the synchronous request and returns the response to the upper-layer business logic. The H5 then completes the subsequent business process, thus completing the synchronous interaction process in one go.

[0049] This invention uses XMLHttpRequest to send synchronous requests, enabling synchronous interaction between the H5 and App clients in a hybrid mode. Alternatively, an alternative solution exists: using the `prompt` method in the standard H5 DOM. Taking the aforementioned `getPhone` method as an example, the following explanation is provided:

[0050] In HTML5, use `var result = prompt("***: / / getPhone");` The App client overrides the WKUIDelegate function:

[0051] webView:runJavaScriptTextInputPanelWithPrompt:defaultText:initiatedByFrame:completionHandler method.

[0052] First, the message is parsed to identify the component methods; second, the corresponding components and their methods are called to obtain the processing results; finally, the processing results are returned to the H5 through the completionHandler callback, completing a synchronous interaction.

[0053] like Figure 2 As shown, the system described in this embodiment includes a client and a web server;

[0054] The client includes: a receiving module, used to receive the web service requested by the user through the system platform; a request URL generation module, used to identify the components, method names and parameters that the H5 needs to call, and call the corresponding components to process and obtain the results; and a request URL sending module, used to send the request URL containing the processing results to the web server through the system platform.

[0055] The web server returns the web service result corresponding to the web service to the system platform according to the request URL.

[0056] like Figure 3 As shown, the terminal device 6 may include a processor 601, a storage medium 602, and a bus 603. The storage medium 602 stores machine-readable instructions executable by the processor 601. When the terminal device is running, the processor 601 communicates with the storage medium 602 via the bus 603. The processor 601 executes the machine-readable instructions to perform the steps of the deep learning model training method described in the foregoing embodiments. The specific implementation and technical effects are similar and will not be repeated here.

[0057] For ease of explanation, only one processor is described in the terminal device described above. However, it should be noted that in some embodiments, the terminal device of the present invention may also include multiple processors, and therefore the steps performed by one processor described in the present invention may also be performed jointly by multiple processors or individually.

[0058] The above are merely specific embodiments of the present invention, but the scope of protection of the present invention is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in the present invention should be included within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. A method for synchronous interaction between an iOS client and a web client, characterized in that, Includes the following steps: Step S01: The App client optimizes and modifies WKWebView, and registers the interactive components. Step S02: Complete the encapsulation of the interactive components between H5 and APP to form the interactive component object JSBridge, and implement the call method for synchronously sending messages in the component; Step S03: When the App client initializes WKWebView, it uses the addUserScript method to inject the JSBridge object encapsulated in step S02 into the H5. Step S04: The App client uses the setURLSchemeHandler:forURLScheme: method in WKWebViewConfiguration to register a management object for receiving H5 messages for the specified scheme; Step S05: The App client listens for messages from the H5 message management object and processes the synchronous request messages from the H5 in the webView:startURLSchemeTask: method; Step S06. The JSBridge component's call method retrieves the response to the synchronous request and returns the response to the upper-layer business logic. The H5 then completes the subsequent business process, thus completing the synchronous interaction process in one go. In step S05, the specific steps for processing the H5 synchronization request message include: Step S051: Start the urlSchemeTask task to parse the URL, identify the components that H5 needs to call, their method names and parameters, and call the corresponding components to process and obtain the results; Step S052: After obtaining the result, firstly, the App instantiates an NSHTTPURLResponse object and places the processed result into it; In the `call` method, the method parameters are parsed and then assembled into a URL for a synchronous interactive request, which is then sent via XMLHttpRequest.

2. The method according to claim 1, characterized in that, Call the didReceiveResponse method in the synchronous urlSchemeTask task to set up the instantiated object.

3. The method according to claim 1, characterized in that, The didReceiveData method is used to return the processing result from step S051 as the data of the response.

4. The method according to claim 1, characterized in that, Calling the didFinish method terminates the synchronous interactive processing flow of step S052.

5. A synchronous interaction system between an iOS client and a web client, characterized in that, Including client-side and web server-side; The client includes: a receiving module, used to receive the web service requested by the user through the system platform; a request URL generation module, used to identify the components, method names and parameters that the H5 needs to call, and call the corresponding components to process and obtain the results; and a request URL sending module, used to send the request URL containing the processing results to the web server through the system platform. The web server returns the web service result corresponding to the web service to the system platform according to the request URL; The system performs the steps of the method as described in any one of claims 1 to 4 when it is running.

6. A terminal device, characterized in that, include: The device includes a processor, a storage medium, and a bus, wherein the storage medium stores machine-readable instructions executable by the processor, and when the terminal device is running, the processor communicates with the storage medium via the bus, and the processor executes the machine-readable instructions to perform the steps of the method as described in any one of claims 1 to 4.

7. A storage medium, characterized in that, The storage medium stores a computer program, which, when executed by a processor, performs the steps of the method as described in any one of claims 1 to 4.

Images