H5与App使用WebViewJavascriptBridge进行交互

WebViewJavascriptBridge源码：https://github.com/marcuswestin/WebViewJavascriptBridge

JS端操作：
1.引入bridgejs，将和原生交互的方法挂载到全局

// main.js
 
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入bridgejs
import Bridge from './util/bridge.js'

// 将和native交互的方法挂载到全局
Vue.prototype.$bridge = Bridge
 
Vue.config.productionTip = false
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2.复制并粘贴setupWebViewJavascriptBridge到您的 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)
}

3.调用setupWebViewJavascriptBridge然后使用桥来注册处理程序并调用方法：

setupWebViewJavascriptBridge(function(bridge) {

    //注册桥(App调用JS的方法给JS传递数据用这个方法)
    //第一个参数是App调用JS的函数名字，data为接收到来自App的数据，responseCallback是回传数据给App的方法
    bridge.registerHandler('JS Echo', function(data, responseCallback) {
        responseCallback(data)
    })

    //调用app内的方法(JS调用App的方法给App传递数据用这个方法)
    //第一个参数是JS调用App的函数名字，第二个参数是JS传递给App的数据，responseData是App回传给JS的数据
    bridge.callHandler('App Echo', {'key':'value'}, function responseCallback(responseData) {

    })
})

iOS端操作：

1.导入头文件并声明一个变量：

#import "WebViewJavascriptBridge.h"

@property WebViewJavascriptBridge* bridge;

2.使用 WKWebView、UIWebView (iOS) 或 WebView (OSX) 实例化 WebViewJavascriptBridge：

self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

3.在 ObjC 中注册一个 handler:(JS调用ObjC的方法给ObjC传递数据用这个方法)

//第一个参数是JS调用App的函数名字，data为JS传递给App的数据，responseCallback为App回传数据给JS的方法
[self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {
    responseCallback(data);
}];

4.调用一个 JS handler：(ObjC调用JS的方法给JS传递数据用这个方法)

//第一个参数是App调用JS的函数名字，data为App传递给JS的数据，responseData为JS回传给App的数据
[self.bridge callHandler:@"JS Echo" data:nil responseCallback:^(id responseData) {

}];

安卓端操作：
1.Android Studio 导包

repositories {
    // ...
    maven { url "https://jitpack.io" }
}

dependencies {
    compile 'com.github.lzyzsd:jsbridge:1.0.4'
}

2.在布局文件中添加

3.在 Java 中注册一个 handler:(JS调用Java的方法给Java传递数据用这个方法)

//第一个参数是JS调用App的函数名字，data为JS传递给App的数据，onCallBack为App回传数据给JS的方法
mBridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
    @Override
     public void handler(String data, CallBackFunction function) {
     function.onCallBack("指定Handler收到Web发来的数据，回传数据给你");
     }
});

4.调用一个 JS handler：(Java调用JS的方法给JS传递数据用这个方法)

//第一个参数是App调用JS的函数名字，第二个参数是App传递给JS的数据，data为JS回传给App的数据
mBridgeWebView.callHandler("functionInJs","发送数据给web指定接收",new CallBackFunction(){
     @Override
     public void onCallBack(String data) {

     }
});