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交互。