iOS OC与JS交互 WebViewJavascriptBridge

简介

iOS 中经常会出现webview与原生交互的问题，这里给大家分享一个很好用的第三方框架及使用方法。
WebViewJavascriptBridge

初始化Bridge

import "WebViewJavascriptBridge.h"

@property WebViewJavascriptBridge* bridge;

if (_bridge) { return; }
[WebViewJavascriptBridge enableLogging];    
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
[_bridge setWebViewDelegate:self];

JS调用OC OC中实现代码

/*
 含义：JS调用OC
 @param registerHandler 要注册的事件名称(比如这里我们为loginAction)
 @param handel 回调block函数 当后台触发这个事件的时候会执行block里面的代码
 */
[_bridge registerHandler:@"loginAction" handler:^(id data, WVJBResponseCallback responseCallback) {
    // data js页面传过来的参数  假设这里是用户名和姓名，字典格式
    NSLog(@"JS调用OC，并传值过来");
    
    // 利用data参数处理自己的逻辑
    NSDictionary *dict = (NSDictionary *)data;
    NSString *str = [NSString stringWithFormat:@"用户名：%@  姓名：%@",dict[@"userId"],dict[@"name"]];
    
    
    // responseCallback 给后台的回复
    responseCallback(@"报告，oc已收到js的请求");
}];

OC调用JS OC中实现方法

/*
 含义：OC调用JS
 @param callHandler 商定的事件名称,用来调用网页里面相应的事件实现
 @param data id类型,相当于我们函数中的参数,向网页传递函数执行需要的参数
 注意，这里callHandler分3种，根据需不需要传参数和需不需要后台返回执行结果来决定用哪个
 */

//[_bridge callHandler:@"registerAction" data:@"我是oc请求js的参数"];
[_bridge callHandler:@"registerAction" data:@"uid:123 pwd:123" responseCallback:^(id responseData) {
    NSLog(@"oc请求js后接受的回调结果：%@",responseData);
}];

加载本地html

- (void)loadExamplePage:(UIWebView*)webView {
  NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"ExampleApp" ofType:@"html"];
  NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
  NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
  [webView loadHTMLString:appHtml baseURL:baseURL];
}

在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 = 'https://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}




setupWebViewJavascriptBridge(function(bridge) {

    
    bridge.registerHandler('registerAction', function(data, responseCallback) {
        //处理oc给的传参
        alert('oc请求js  传值参数是：'+data)
                           
        var responseData = { 'result':'handle success' }
        //处理完，回调传值给oc
        responseCallback(responseData)
    })


    var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
    callbackButton.innerHTML = '点击我，我会调用oc的方法'
    callbackButton.onclick = function(e) {
        e.preventDefault()
                             
        
        bridge.callHandler('loginAction', {'userId':'zhangsan','name': '章三'}, function(response) {
             //处理oc过来的回调
             alert('收到oc过来的回调:'+response)
        })
}