There seem to be plenty of examples of OC/JS interaction on the web, but none of them are finished. Today I’m going to put out my OC code and my Html code. The examples on the Internet are all the same without a bit of difference, in fact, you pay attention to chau Chau elder brother’s Jane book is enough. Github address: github.com/7General/We…

Today we will use the latest version of WebViewJavascriptBridge 5.0.5 as a demonstration.

Follow my code

1. Use CocoaPods to import WebViewJavascriptBridge

Here we use the latest version

pod 'WebViewJavascriptBridge'.'~ > 5.0.5'
Copy the code

Shell commands to import projects that I won’t go into here.

2. Write OC code (either WRITE OC code or Js code first)

Importing header files

#import "WebViewJavascriptBridge.h"
Copy the code

Create two properties

@property (nonatomic.strong) UIWebView * webView;

@property WebViewJavascriptBridge* bridge;
Copy the code

Initialize the WebView and WebView javascriptBridge

  self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
  [self.view addSubview:self.webView];
  /** Enable log */
  [WebViewJavascriptBridge enableLogging];
  /** Initialize -WebViewJavascriptBridge*/
  self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
  [self.bridge setWebViewDelegate:self];
Copy the code

3. JS invokes OC code

NOTICE: Before we write the calling code here, we must know the name of the front-end JS function. This is important. So we’re going to assume that there’s a function on the front called callViewLoad that’s going to call OC code to do list-processing of the data that’s coming back.

How does OC code handle requests from Js

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

So let’s talk about the parameters here

The responseCallback handler callback contains the data and responseCallback parameters

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 will be passed to the back end and processed by the back end. So the data here is the responseCallback that holds two pieces of data that we’re going to return to the front-end js function, so the front-end gives us the username and password, and then we call the interface and we return the login result to the front-end and we’re going to use it. But it is returned as a dictionary. Here we JS call OC, OC side of the code is done.

Front-end JS code writing

HTML code writing

< HTML > <head> <title>OC and JS interactive Web</title> <script>/* This code is fixed and must be placed in 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('iframe');
                WVJBIframe.style.display = 'none';
                WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
                document.documentElement.appendChild(WVJBIframe);
                setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)}/** All JS methods that interact with OC must be registered here to call OC through JS or to have OC call JS*/ here
        setupWebViewJavascriptBridge(function(bridge) {
             /**OC calls JS code without arguments */
             bridge.registerHandler('UserLogin', function() {
                                    alert('UserLogin')})/**OC calls JS code with arguments */
             bridge.registerHandler('UserLoginInfo', function(data, responseCallback) {
                    responseCallback({'userId': '123456'.'Names': 'ZHOUZHOUGEDEBOKE'})})// **********************************JS to call OC
             bridge.callHandler('callViewLoad', {'blogURL': 'http://www.henishuo.com'}, function(responseCallback){
                                            alert(responseCallback.UName)
             })
        })
    </script>
    </head>
    <body>
        <button style = "background: yellow; height: 50px; width: 100px;"</button> </body> </ HTML >Copy the code

We’re going to focus on the callViewLoad function in the HTML code. This is the proof that he called oc. You can see the parameters in the callHandler here

CallViewLoad: function name {‘blogURL’: ‘www.henishuo.com’}: function(responseCallback) : The JS function that receives a successful return can be heard here after a successful return at the back end. Similar to OC Block. JS provides ObjC with a public API, ObjC side through registration, can call this API in JS side, get a callback. The ObjC side can feed back to JS when the processing is complete, so that writing is called first when the page is loaded.

NOTICE: this only says the declaration that JS calls OC code. Only one method is described. But we also see that when we write front-end JS functions, there is a huge pile of code that must be written. Otherwise it won’t work.