Android WebView与H5交互

只写了html

完整代码demo

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Android WebView 与 H5 交互 Demo</title>
</head>

<body>
    <div>
        <button onclick="useClick()">
            点击获取 Android 回传的数据
        </button>
        <p>uname: <span id="uname">June</span></p>
        <p>pwd: <span id="pwd">123</span></p>
        <p>show responseData:</p>
        <p id="show"></p>
    </div>
    <script type="text/javascript">
    var hasBridge = false

    //声明
    //注册事件监听
    function connectWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady',
                function() {
                    callback(WebViewJavascriptBridge)
                },
                false
            );
        }
    }

    //初始化
    //注册回调函数，第一次连接时调用 初始化函数
    //接收默认Java方法传过来的参数
    connectWebViewJavascriptBridge(function(bridge) {
        bridge.init(function(message, responseCallback) {
            hasBridge = true;
            var responseData = '默认接收收到来自 Java的数据，回传数据给你';
            responseCallback(responseData);
        });
    });

    function useClick() {
        //拿网页上的数据
        var name = document.getElementById('uname').innerHTML;
        var pwd = document.getElementById('pwd').innerHTML;
        var data = "name = " + name + ", password = " + pwd;

        if (window.WebViewJavascriptBridge) {
            document.getElementById("show").innerHTML = 'Have WebViewJavascriptBridge';
        } else {
            document.getElementById("show").innerHTML = 'No WebViewJavascriptBridge';
        }

        //调用本地java方法
        //第一个参数是 调用java的函数名字 第二个参数是要传递的数据 第三个参数js在被回调后具体执行方法，responseData为java层回传数据
        //接收数据responseData
        //接收数据responseData
        window.WebViewJavascriptBridge.callHandler(
            'submitFromWeb', { 'info': data },
            function(responseData) {
                document.getElementById("show").innerHTML = responseData;
            }
        );
    }
    </script>
</body>

</html>

参考链接：