H5和Android的交互

188 阅读1分钟

如何调试Http的网页

1、写一个http的网页

<html>
<head>
    <title>调用方法</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
    <script type="text/javascript">
        function test(){
            alert("调用了方法!")   
        }

    </script>

</head>
<body>
    <li><a onClick="test()">调用方法</a></li>
</body>
</html>

2、然后将这个页面部署到tomcat的webapps目录下(D:\Programs\ProgramsWork\apache-tomcat-10.0.0-M6\webapps\test),然后启动tomat(点击tomcat的bin目录下的startup.bat)

tomcat:就是一个本地的服务器

3、然后在浏览器中写上http://172.25.11.176:8081/test/访问,注意ip是自己电脑的ip

Vue页面如何调用Android中的方法

created方法中

 window.setupWebViewJavascriptBridge = function setupWebViewJavascriptBridge (callback) {
      if (window.WebViewJavascriptBridge) {
        callback(window.WebViewJavascriptBridge)
      } else {
        document.addEventListener('WebViewJavascriptBridgeReady', function () { callback(window.WebViewJavascriptBridge) }, false)
      }
    }

然后在mounted方法中

window.setupWebViewJavascriptBridge(bridge => {
      bridge.callHandler('getUserInfo', '', response => {
        modal.toast({ message: response })
      })
    })
webLog (msg) {
      window.setupWebViewJavascriptBridge(bridge => {
        bridge.callHandler('webLog', msg, response => {
        })
      })
    }

html页面调用WebView的桥方法