Android 和 IOS 使用 WebViewJavascriptBridge 进行交互

转发原文地址：https://www.jianshu.com/p/e37ccf32cb5b，https://www.jianshu.com/p/d12ec047ce52，http://www.imooc.com/article/23258

原生和H5的交互主要是通过第三方插件 WebViewJavascriptBridge，本文主要是介绍 JS 部分，原生的Android或者IOS写法请另行搜索。

一，首先写入JS代码

/*这段代码是固定的，必须要放到js中*/
function setupWebViewJavascriptBridge(callback) {

    //Android使用
    if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge);
    } else {
        document.addEventListener(
            'WebViewJavascriptBridgeReady',
            function () {
                callback(WebViewJavascriptBridge)
            },
            false
        );
    }

    //iOS使用
    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);
}

二，开始调用时的方法

setupWebViewJavascriptBridge(function (bridge) {

    //原生调用js，在js里注册一个方法供原生调用
    bridge.registerHanlder('callJavaScriptFunction', function (data, responseCallback) {
	    // data 是 原生 传递过来的数据
	    // responseCallback 是 JS 调用完毕之后传递给 原生 的数据
	    alert('从原生传过来的数据：' + data);
	    responseCallback('js已经调用完毕');
	})

    //js调用原生里面的方法，首先要在原生中注册一个方法名称
	document.getElementById('button').onclick = function (e) {
	    var data = "dataToApp";
	    //callHandler参数1： 原生中已注册的方法名称
	    //callHandler参数2： 是调用原生时，向原生传递的参数
	    //callHandler参数3： 原生响应后，返回给js的数据
	    bridge.callHandler('callAppFunction', data, function (response) {
	        alert('从原生返回过来的数据：' + response);
	    });
	}
});

三，在原生应用里写入调用方法

1. 在Android里的方法使用

package com.cfox.jsbridge;
import android.webkit.WebView;
import android.widget.Toast;
import com.github.lzyzsd.jsbridge.BridgeHandler;
import com.github.lzyzsd.jsbridge.BridgeWebView;
import com.github.lzyzsd.jsbridge.BridgeWebViewClient;
import com.github.lzyzsd.jsbridge.CallBackFunction;
import com.github.lzyzsd.jsbridge.DefaultHandler;

public class MainActivity extends AppCompatActivity {
	private BridgeWebView mWebView;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	    super.onCreate(savedInstanceState);
	    setContentView(R.layout.activity_main);
	    mWebView = (BridgeWebView) findViewById(R.id.webView);
	    initWebView();
	}
	
	private void initWebView() {
		// 加载html页面地址
	    mWebView.loadUrl("file:///android_asset/demo.html");
	    // 让js调native注册的方法
	    mWebView.registerHandler("callAppFunction", new BridgeHandler() {
	        @Override
	        public void handler(String data, CallBackFunction function) {
	            Toast.makeText(MainActivity.this, "fromJS--->，" + data, Toast.LENGTH_SHORT).show();
	            function.onCallBack("原生里的数据");
	        }
	    });
	}
	
	// native调用js （native按钮）
	public void sendNative(View view) {
	    mWebView.callHandler("callJavaScriptFunction", "原生里的数据", new CallBackFunction() {
	        @Override
	        public void onCallBack(String data) {
	            Toast.makeText(MainActivity.this, "fromJS--->，" + data, Toast.LENGTH_SHORT).show();
	        }
	    });
	
	}
}

2. 在iOS里的方法使用

#import "JsBridgeViewController.h"
#import "WKWebViewJavascriptBridge.h"
#import "WebViewJavascriptBridge.h"

@interface JsBridgeViewController ()<WKNavigationDelegate>
@property(nonatomic,strong) WKWebViewJavascriptBridge* bridge;
@property (nonatomic, strong)WKWebView * wkWebView;

@end

@implementation JsBridgeViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view addSubview:self.wkWebView];

    [WKWebViewJavascriptBridge enableLogging];
    self.bridge = [WKWebViewJavascriptBridge bridgeForWebView:self.wkWebView];
    [self.bridge setWebViewDelegate:self];
    //OC端的注册
	//注册jscalloc方法，js调用oc,data为oc回调给js的参数
    [self.bridge registerHandler:@"callAppFunction" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"js call getBlogNameFromObjC, data from js is %@", data);
        if (responseCallback) {
            // 反馈给JS
            responseCallback(@{@"blogName": @"测试blog"});
        }
    }];
------------------------------------------------------------------
//OC端的调用
//调用js中注册的showapiinner方法，不传入数据，没有回调
//[_bridge callHandler:@"showapiinner"];
//调用js中注册的showapiinner方法，传入数据str，没有回调
//[_bridge callHandler:@"showapiinner" data:str];
//调用js中注册的showapiinner方法，传入数据str，且有回调（可以获取到回调参数responData）
// [_bridge callHandler:@"showapiinner" data:str responseCallback:^(id //responseData) {
 // NSLog(@"%@",responseData);
   // }];
    [self renderButtons:self.wkWebView];
    [self loadExamplePage:self.wkWebView];
}
//native调js  （native按钮）
- (void)callHandler:(id)sender {
    
    [self.bridge callHandler:@"callJavaScriptFunction" data:@{@"name": @"测试"} responseCallback:^(id responseData) {
        NSLog(@"from js: %@", responseData);
    }];
}

- (void)renderButtons:(WKWebView*)webView {
    UIFont* font = [UIFont fontWithName:@"HelveticaNeue" size:12.0];
    
    UIButton *callbackButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [callbackButton setTitle:@"Call handler" forState:UIControlStateNormal];
    [callbackButton addTarget:self action:@selector(callHandler:) forControlEvents:UIControlEventTouchUpInside];
    [self.view insertSubview:callbackButton aboveSubview:webView];
    callbackButton.frame = CGRectMake(10, 400, 100, 35);
    callbackButton.titleLabel.font = font;
    
    UIButton* reloadButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [reloadButton setTitle:@"Reload webview" forState:UIControlStateNormal];
    [reloadButton addTarget:webView action:@selector(reload) forControlEvents:UIControlEventTouchUpInside];
    [self.view insertSubview:reloadButton aboveSubview:webView];
    reloadButton.frame = CGRectMake(110, 400, 100, 35);
    reloadButton.titleLabel.font = font;
}

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

- (WKWebView *)wkWebView
{
    if (!_wkWebView) {
        _wkWebView = [[WKWebView alloc] initWithFrame:self.view.bounds];
        [self.view addSubview:_wkWebView];
        
        _wkWebView.navigationDelegate = self;
        _wkWebView.scrollView.bounces = 0;
        _wkWebView.scrollView.showsVerticalScrollIndicator = 0;
        _wkWebView.scrollView.showsHorizontalScrollIndicator = 0;
    }
    return _wkWebView;
}