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) { } });
