OC与JS交互

2016-09-06 本文已影响0人 JC_Mobile

前言

目前,很多APP里面都会有HTML5网页,我们除了简单的用WebView加载显示外，很多情况下，我们需要OC端与WebView进行交互,比如点击WebView上面的按钮调用OC端的函数实现具体操作。

这次主要是使用第三方的开源项目WebViewJavascriptBridge来帮助实现。

使用步骤

方法1
去GitHub下载WebViewJavascriptBridge
解压缩包，将WebViewJavascriptBridge文件拖入到工程中
在需要使用的类中引入头文件"WebViewJavascriptBridge.h"
方法2
安装cocoaPods后，直接在Podfile中输入pod 'WebViewJavascriptBridge', '~> 5.0'，将WebViewJavascriptBridge引入工程后，下面步骤参考方法1。

具体使用

创建并初始化WebViewJavascriptBridge的实例

#import "BaseWebViewController.h"
#import "WebViewJavascriptBridge.h"

@interface BaseWebViewController ()<UIWebViewDelegate>
{
    UIWebView *_webView;
    WebViewJavascriptBridge *_bridge;
}
@end

具体代码实现

OC端

//第一步开启日志
    //开启日志，方便调试
    [WebViewJavascriptBridge enableLogging];
    
    //第二步，建立桥梁
    //给webView建立起js与OC的沟通桥梁
    _bridge = [WebViewJavascriptBridge bridgeForWebView:_webView];
    
    //设置代理，如果不需要可以不设置
    [_bridge setWebViewDelegate:self];
    
    //第三步，注册HandleName，用于给JS端调用iOS端
    // JS主动调用OjbC的方法
    // 这是JS会调用getUserIdFromObjC方法，这是OC注册给JS调用的
    // JS需要回调，当然JS也可以传参数过来。data就是JS所传的参数，不一定需要传
    // OC端通过responseCallback回调JS端，JS就可以得到所需要的数据
    [_bridge registerHandler:@"getUserIdFromObjC"handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"js call getUserIdFromObjC, data from js is %@", data);
        if (responseCallback) {
            // 反馈给JS
            responseCallback(@{@"userId": @"123456"});
        }
    }];

   /*js按钮点击后，OC收到即可执行需要的操作*/
    [_bridge registerHandler:@"getBlogNameFromObjC"handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"js call getBlogNameFromObjC, data from js is %@", data);
        if (responseCallback) {
            // 反馈给JS
            responseCallback(@{@"from": @"Yapi"});
            
            //点击js界面按钮控制OC界面跳转
            PlayViewController *playVC = [[PlayViewController alloc] init];
            [self.navigationController pushViewController:playVC animated:YES];
        }
    }];
    
    [_bridge callHandler:@"getUserInfos" data:@{@"name": @"jinBank"} responseCallback:^(id responseData) {
        NSLog(@"from js: %@", responseData);
    }];

JS端

 /*这段代码是固定的，必须要放到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) 
        ｝
  /*与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
      setupWebViewJavascriptBridge(function(bridge) {
       var uniqueId = 1
       function log(message, data) {
         var log = document.getElementById('log')
         var el = document.createElement('div')
         el.className = 'logLine'
         el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
         if (log.children.length) {
            log.insertBefore(el, log.children[0])
         } else {
           log.appendChild(el)
         }
       }
       /* Initialize your app here */
       
       /*我们在这注册一个js调用OC的方法，不带参数，且不用ObjC端反馈结果给JS：打开本demo对应的blog*/
       bridge.registerHandler('openWebviewBridgeArticle', function() {
          log("openWebviewBridgeArticle was called with by ObjC（打开blog）")
       })
       /*JS给ObjC提供公开的API，在ObjC端可以手动调用JS的这个API。接收ObjC传过来的参数，且可以回调ObjC*/
       bridge.registerHandler('getUserInfos', function(data, responseCallback) {
         log("Get user information from ObjC: ", data)
         responseCallback({'userId': '123456', 'blog': '博客'})
       })
                                   
       /*JS给ObjC提供公开的API，ObjC端通过注册，就可以在JS端调用此API时，得到回调。ObjC端可以在处理完成后，反馈给JS，这样写就是在载入页面完成时就先调用*/
       bridge.callHandler('getUserIdFromObjC', function(responseData) {
         log("JS call ObjC's getUserIdFromObjC function, and js received response:", responseData)
       })

       document.getElementById('blogId').onclick = function (e) {
         log('js call objc: getBlogNameFromObjC')
         bridge.callHandler('getBlogNameFromObjC', {'blogURL': 'http://www.baidu.com'}, function(response) {
                          log('JS got response', response)
                          })
       }
     })

JS调OC
- 什么是JS调OC

举个例子，在网页上有个登录按钮，点击此登录按钮后，具体的登录操作在OC端实现，即登录功能需要OC端有个Login方法实现。

具体流程

实际开发中，实现上述功能，我们需要跟负责网页开发的同事商定一个方法名称，假设叫loginCallBack，我们在OC端就要注册这个事件并负责具体实现。当用户点击网页上的登录按钮时，它就会通知OC端的注册者去执行这个方法，有点类似block执行顺序。

具体代码实现

1.OC端

/js按钮点击后，OC收到即可执行需要的操作/
[_bridge registerHandler:@"loginCallBack"handler:^(id data, WVJBResponseCallback responseCallback) {

    if (responseCallback) {
        // 反馈给JS
        responseCallback(@{@"from": @"Yapi"});
        
        //点击js界面按钮控制OC界面跳转
        PlayViewController *playVC = [[PlayViewController alloc] init];
        [self.navigationController pushViewController:playVC animated:YES];
    }
}];
 ```

  2.JS端
  
  ```
 //js端执行了callHandler后，oc端就会执行block中的内容 
   document.getElementById('blogId').onclick = function (e) {
     
     bridge.callHandler('loginCallBack', function(response) {
                      log('JS got response', response)
                      })
   }

  ```

OC调JS
- 什么是OC调JS
理解了JS调用OC，OC调JS就好理解了，例如，现在我们在OC端有个输入框，输入了用户名后让它显示到网页上的用户名处，这样OC端要实现的事件让网页去真正实现了，就是OC调JS。
- 具体流程
和JS调OC一样，两端需要商量一个相同的名字(getUserInfos)，在JS端注册这个事件并负责具体实现，OC端触发事件后去网页找具体事件的实现体并执行。
- 具体代码实现
1.JS端
```
//js端注册Handler后，如果oc端执行了OC端代码，｛｝中的内容就会瘪执行
 bridge.registerHandler('getUserInfos', function(data, responseCallback) {
       log("Get user information from ObjC: ", data)
       responseCallback({'userId': '123456', 'blog': '博客'})
     })
```
2.OC端
```
[_bridge callHandler:@"getUserInfos" data:@{@"name": @"京金所"} responseCallback:^(id responseData) {
      NSLog(@"from js: %@", responseData);
  }];
```

注意点

一定要注意和网页端商定的方法名必须要保证OC代码里和网页编码里统一。在调用之前,必须要先注册事件,写好实现体。

总结

本篇文章只是简单的介绍了 WebViewJavascriptBridge的一些基本用法，还有一些方法没有详讲,希望大家在掌握了这几个方法的使用后也去研究一下里面的其他方法。另外,本文重点是让iOS工程师能快速使用,一些原理的东西还有JS方面的编码都省略了,可能文中有些地方理解不当或者不够深入,后期会再完善修改.最后,希望大家多提宝贵意见。

参考文档

简书

OC与JS交互

前言

使用步骤

具体使用

注意点

总结

参考文档

猜你喜欢

热点阅读