Android 与H5交互的小Demo

最新推荐文章于 2024-06-13 18:13:11 发布

weixin_37950736

最新推荐文章于 2024-06-13 18:13:11 发布

阅读量586

点赞数

本文链接：https://blog.csdn.net/weixin_37950736/article/details/71480170

版权

Android与H5交互

最近H5与Android交互，混合型开发看样子很火啊，平时也只是听说，都没有实际的去玩过，正好今天玩了玩，并不是很难啊，今天就记录下来步骤，方便以后直接查看

Web View确实是Android提供的一个很强大的控件啊，以前用的不多，现在才发现它的功能确实不可小觑

WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);

想要与H5交互，这步还真的必不可少

//加载assets文件夹下的test.heml页面
webView.loadUrl("file:///android_asset/test.html");

这步就是加载assets文件夹下的HTML文件

当让就这样的话，也是用你手机里的浏览器去打开的，想要用本App去加载的话还要设置WebViewClient

webView.setWebViewClient(new WebViewClient(){
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        webView.loadUrl(url);
        return true;
    }
});

这样我们写的App就能去加载网页了

说到交互，就是H5里面的代码和本地Java代码互相调用嘛，那就先定义个让H5 去调用的方法

private class JsInteration {
    @JavascriptInterface
    public String back(){
        return "hello world";
    }
}

记得加上注解，这个注解的功能语义上就已经很明显了

接着，Java代码中调用WebView的一个方法

webView.addJavascriptInterface(new JsInteration(),"android");

这样在H5里面我们就可以调用Java本地方法了，第二个参数嘛，随便起，只要和H5里面的代码想对应就行，代码在后面会展示滴

接着就来看Java是怎么调用JS的吧

调用JS的基本格式为 webView.loadUrl("javascript:methodName(parameterValues)");

比方说我们调用没有返回值的方法

webView.loadUrl("javascript:do()");

webView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String s) {
        Toast.makeText(MainActivity.this,s,Toast.LENGTH_SHORT).show();
    }
});

如果说JS里面的方法是带返回值的，也可直接调用evaluateJavascript（）就行了，个人比较喜欢用这个

MainActivity.class

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    webView= (WebView) findViewById(R.id.webview);
    WebSettings settings = webView.getSettings();
    settings.setJavaScriptEnabled(true);
    //加载assets文件夹下的test.heml页面
    webView.loadUrl("file:///android_asset/test.html");


    webView.setWebViewClient(new WebViewClient(){
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            webView.loadUrl(url);
            return true;
        }
    });

    webView.addJavascriptInterface(new JsInteration(),"android");

}
@TargetApi(Build.VERSION_CODES.KITKAT)
public void onClick(View view){
    webView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String s) {
            Toast.makeText(MainActivity.this,s,Toast.LENGTH_SHORT).show();
        }
    });
}

private class JsInteration {
    @JavascriptInterface
    public String back(){
        return "hello world";
    }
}

test.html

<html>
<head>

    <title></title>
    <script type="text/javascript">
        function sum(a,b){
        return a+b;
        }

        function s(){
        var result=window.android.back();
        document.getElementById("p").innerHTML=result;
        }
    </script>
</head>
<body>
<button οnclick="s()">调本地方法</button>
<a href="www.baidu.com">点击</a>
<p id="p"></p>
</body>
</html>

weixin_37950736

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android 与H5交互的小Demo

Android与H5交互最近H5与Android交互，混合型开发看样子很火啊，平时也只是听说，都没有实际的去玩过，正好今天玩了玩，并不是很难啊，今天就记录下来步骤，方便以后直接查看Web View确实是Android提供的一个很强大的控件啊，以前用的不多，现在才发现它的功能确实不可小觑WebSettings settings = webView.getSettings(
复制链接

扫一扫