Android 与H5交互的小Demo

来源：互联网发布：辐射4捏脸数据美女编辑：程序博客网时间：2024/06/05 09:23

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 onclick="s()">调本地方法</button><a href="www.baidu.com">点击</a><p id="p"></p></body></html>

0 0