Native与H5交互-WebViewJavascriptBridge

native与H5的交互

1、JS与native的交互

JS与native的交互需要用到WebViewJavascriptBridge来交互，其实底层就是WebView。

//JS端

<script>
Var utilBridge = “”;
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge);
} else {
document.addEventListener('WebViewJavascriptBridgeReady', function() {
callback(WebViewJavascriptBridge);
}, false);
}
}
connectWebViewJavascriptBridge(function(bridge) {
utilBridge= bridge;
bridge.init(function(message, responseCallback) {
//这里放的是native创建Bridge初始化的时候进入的方法
});
});

//js通过bridge发送参数给native
Var param = {
//js传递给native的参数
}
utilBridge.send(param , function(responseData) {
//responseData为native的回调
}
//JS回调给native可通过responseCallback来执行
responseCallback(dataStr);
</script>

PS：native跟H5交互，需要确定一些协议，在native调用H5的时候，native会通过WebViewJavascriptBridge组件 来创建好bridge，此时，你会发现H5页面中存在一个iframe。此时你就可以使用bridge来跟native交互。