Home > Article > Web Front-end > Detailed explanation of interaction between iOS and JS

Detailed explanation of interaction between iOS and JS

php中世界最好的语言Original: 2018-03-06 11:23:281910browse

This time I will bring you three points that need to be paid attention to when interacting with iOS and JS. What are the notes when interacting between iOS and JS. Here are three classic cases. Let’s take a look at them. Get up and take a look.

1Use CocoaPods to import WebViewJavascriptBridge

Here we use the latest version

pod 'WebViewJavascriptBridge', '~> 5.0.5'

I won’t go into details about the shell command to import the project here.

2. Write OC code (you can write OC code or JS code first)

Introduce the header file #import "WebViewJavascriptBridge.h"

Create two Attribute

@property (nonatomic, strong) UIWebView * webView;@property WebViewJavascriptBridge* bridge;
初始化WebView和WebViewJavascriptBridge
 self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds];  [self.view addSubview:self.webView];  /**开启日志*/  [WebViewJavascriptBridge enableLogging];  /**初始化-WebViewJavascriptBridge*/  self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];  [self.bridge setWebViewDelegate:self];

3. JS calls OC code

NOTICE: Before we write the calling code here, we must know that the function name must be known in the front-end js function. This is very important.
Here we assume that there is a function named callViewLoad in the front end, which calls the OC code to process the returned data in a list.

Look at how the OC code handles requests from Js

[self.bridge registerHandler:@"callViewLoad" handler:^(id data, WVJBResponseCallback responseCallback) { NSLog(@"front-end Data sent%@", data); if (responseCallback) { // data responsed to the front end
responseCallback(@{@"UName": @"zhouzhouge's technology blog",@"URLS":@ "http://www.jianshu.com/users/1338683b18e0/latest_articles"});
}
}];

Let’s talk about the parameter description here
handler There are two parameters in the callback: data and responseCallback

The data is the data transmitted by the front-end js function to the back-end: for example, when logging in, the account information and user password must be passed into the back-end. For backend processing. The data here is the one that stores two data.

responseCallback is the data content we want to return to the front-end js function. The front-end passes us the user name and password. After we call the interface, we return the login result to the front-end. Use him. But it is returned in dictionary form.

At this point our JS calls OC, and the code on the OC side has been finished.

How to write front-end JS code

How to write html code

<html>
    <head>
        <title>OC和JS互动Web</title>
        <script>
            /*这段代码是固定的，必须要放到js中*/
            function setupWebViewJavascriptBridge(callback) {                if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }                if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }                window.WVJBCallbacks = [callback];                var WVJBIframe = document.createElement(&#39;iframe&#39;);
                WVJBIframe.style.display = &#39;none&#39;;
                WVJBIframe.src = &#39;wvjbscheme://BRIDGE_LOADED&#39;;                document.documentElement.appendChild(WVJBIframe);
                setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
            }        
        /**与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
        setupWebViewJavascriptBridge(function(bridge) {             /**OC调用JS代码不含参数*/
             bridge.registerHandler(&#39;UserLogin&#39;, function() {
                                    alert(&#39;UserLogin&#39;)
             })             /**OC调用JS代码含参数*/
             bridge.registerHandler(&#39;UserLoginInfo&#39;, function(data, responseCallback) {
                    responseCallback({&#39;userId&#39;: &#39;123456&#39;, &#39;Names&#39;: &#39;ZHOUZHOUGEDEBOKE&#39;})
            })                                     
             // **********************************JS调用OC
             bridge.callHandler(&#39;callViewLoad&#39;, {&#39;blogURL&#39;: &#39;http://www.henishuo.com&#39;}, function(responseCallback){
                                            alert(responseCallback.UName)
             })
        })    </script>
    </head>
    <body>
        <button style = "background: yellow; height: 50px; width: 100px;">JS/OC互动</button>
    </body>
</html>

Here we mainly look at the callViewLoad function in the html code. This is the proof that he called the oc function. You can see the parameters in callHandler here

The first parameter callViewLoad: function name

{'blogURL': 'http://www.henishuo.com'}: means to The data passed in by the OC code

function(responseCallback): accepts the JS function that returns successfully. Here we can monitor it after the backend returns successfully. Similar to OC's Block.

Description of this function: JS provides a public API to ObjC. By registering, the ObjC side can get a callback when calling this API on the JS side. The ObjC side can feed back to JS after the processing is completed. In this way, it will be called first when the page loading is completed.

NOTICE: Here we only talk about the statement of JS calling OC code. I briefly introduce the use of one method. But we have also seen that when writing front-end JS functions, there is a lot of code that must be written. Otherwise, there will be no joint effect.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Detailed explanation of interaction between iOS and JS

Related articles