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

---