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.在布局文件中添加
<com.github.lzyzsd.jsbridge.BridgeWebView
android:id="@+id/wv_web_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
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) {
}
});
