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'// 引入bridgejsimport 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 中注册一个 handlerJS调用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) { }}); |
