学习笔记-Android webview和JS交互

来源：互联网发布：ss网络加速编辑：程序博客网时间：2024/05/22 20:19

本文主要介绍一下Android 原生控件webview和JavaScript 的交互方式，原生App 不够灵活，而通过webview 载入js 这种混合式开发可以弥补原生app 不够灵活的缺陷；现在采用混合式开发的app也越来越多，因此掌握这项技术能为你个人技术加分不少。这里我会通过 Android 调用JS代码和 JS代码调用Android代码来实现 Android 与JS的交互；

一.准备工作

在main 文件夹下建一个assets 文件夹，里面放你要加载的html 文件，这里咱们就不联网获取 html 文件啥的了，直接在本地放html 文件；

temp.html

<script type="text/javascript">        var result = JavaScriptInterface.jsontohtml();          var obj = eval("("+result+")");//解析json字符串          function showAndroidToast(toast)           {            JavaScriptInterface.showToast(toast);           }         function call() {            obj.showToast("我来自js");//对象名 为 obj          }         function getsum(){//Android调用js代码            return("here is the data i send to you");         }        function getjsonData(){              var result = JavaScriptInterface.jsontohtml();              var obj = eval("("+result+")");//解析json字符串              for(i=0;i<obj.length;i++){                  var user=obj[i];                  document.write("<p>姓名:"+user.name+"</p>");                  document.write("<p>年龄:"+user.age+"</p>");                  document.write("<p>地址:"+user.address+"</p>");                  if(user.phone!=null){                      document.write("<p>手机号码:"+user.address+"</p>");                  }              }          }             function list(){              document.write("<div data-role='header'><p>another</p></div>");          }          </script></head><body><button type="button" onclick="call()" id=button1 >message</button><div data-role="page" >    <div data-role="header" data-theme="c">        <h1>Android via Interface</h1>    </div><!-- /header -->    <div data-role="content">        <button value="say hello" onclick="showAndroidToast('Hello,Android!')" data-theme="e"></button>        <button value="get json data" onclick="getjsonData()" data-theme="e"></button>    </div><!-- /content -->    <div data-role="collapsible" data-theme="c" data-content-theme="f">        <h3>I'm <script>document.write(obj[0].name);</script>,click to see my info</h3>        <p><script>document.write("<p>姓名："+obj[0].name+"</p>");</script></p>        <p><script>document.write("<p>年龄："+obj[0].age+"</p>");</script></p>        <p><script>document.write("<p>地址："+obj[0].address+"</p>");</script></p>    </div>    <div data-role="footer" data-theme="c">        <h4>Page Footer</h4>    </div><!-- /footer --></div><!-- /page --></body>

二.JS调用Android代码

先初始化webview

private void init() {        webview = (WebView) findViewById(R.id.wv);        WebSettings settings = webview.getSettings();        settings.setJavaScriptEnabled(true);        settings.setDefaultTextEncodingName("UTF-8");    }

先加载 html 文件，然后通过addJavascriptInterface 方法传递一个当前对象（可以调用这个方法的对象）和一个“昵称”，该“昵称”对应 js 方法里面的对象名，上面js里面对象名是obj,所以，这里需要穿“obj”;

webview.loadUrl("file:///android_asset/temp.html");        webview.addJavascriptInterface(this,"obj");

JS里面，咱们写了一个按钮，点击这个按钮，会调用Android里面这句代码；

 @JavascriptInterface    public void showToast(String s) {        Toast.makeText(this, s, Toast.LENGTH_SHORT).show();    }

这里需要注意一点就是在Android 4.4以后，需要加上@JavascriptInterface注解

三.Android调用JS代码

Android调用JS代码有两种方式，一种是loadUrl();

webview.loadUrl("javascript:getsum()");这种方法直接调用JS的方法，但是没办法获取返回值，而且会刷新页面

所以我推荐使用第二种方法

@TargetApi(Build.VERSION_CODES.KITKAT)    public void atj(View view) {       webview.evaluateJavascript("javascript:getsum()", new ValueCallback<String>() {           @Override           public void onReceiveValue(String value) {               Log.d(TAG, "onReceiveValue=  "+value);           }       });    }

这种方法不会刷新页面，效率会更高，可以通过回调获取到js给我们的返回值，也是在Android4.4以后支持

四.获取JS代码返回值给Android的其他几种方式

主要是通过js页面弹窗来传递数据，通过setWebViewClient 方法，里面回调 onJsAlert(),onJSconfirm();onJSprompt();对应JS 的 alert(); confirm(); promrt();方法，通过这几个方法传值；具体大家可以参考这篇文章：

http://blog.csdn.net/carson_ho/article/details/64904691

感谢博主！好了，就分享到这里。

阅读全文

0 0