Android与JS数据互调

来源：互联网发布：淘宝助理无法一键适配编辑：程序博客网时间：2024/06/14 04:55

Android传输据给JS
在Android中将数据传给js，首先在AndroidStudio中创建一个项目，在认识目录下创建一个文件夹为：assets ，之后将写好的html界面放在这个目录下，为了界面好看点，我在该目录下放了一个图片，这里我为了方便就没有将该html放在Tomcat上。下面是我的html代码：

<!DOCTYPE html><html><head>    <title>Android调用js代码</title></head><body>      用户：<div id="name">游客</div>      <img src = "girl_14.jpg" width="350px"/>    <button id="but_click" onclick="show()" >点击传数据给Android</button>    <!-- JS调用Android原生方法 Android中的方法为showToast-->       <!--Android调用js方法  webView.loaduri("javascript:showUser('"+user+"','"+pswword+"'')") -->   <script type="text/javascript">      function showUser(user,psw) {            document.getElementById("name").innerHTML = user+"密码："+psw;            alert(user+psw);      }     </script></body></html>

下面我在Android布局文件里添加WebView，以及两个输入框，为了将账户数据传递给WebView中的h5界面:

<?xml version="1.0" encoding="utf-8"?><LinearLayout    android:orientation="vertical"    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">   <EditText       android:layout_width="match_parent"       android:layout_height="50dp"       android:id="@+id/et_name"       />    <EditText        android:layout_width="match_parent"        android:layout_height="50dp"        android:id="@+id/et_psw"        />    <Button        android:text="登录"        android:layout_width="match_parent"        android:id="@+id/but_login"        android:layout_height="50dp"        />    <WebView        android:id="@+id/wb"        android:layout_width="match_parent"        android:layout_height="match_parent">    </WebView></LinearLayout>

下面就是布局控件初始化，这里最重要的是对WebView的设置，并且将assets下的html文件加载进来：

 webView = (WebView) findViewById(R.id.wb);        webView.loadUrl("file:///android_asset/demo01.html");        webView.setWebChromeClient(new WebChromeClient());        //设置浏览器为Android自带的浏览器        webView.addJavascriptInterface(new AndroidInterface(), "android");        WebSettings settings = webView.getSettings();        settings.setJavaScriptEnabled(true);//必须设置表示支持js        settings.setBuiltInZoomControls(true);        settings.setDefaultFontSize(20);

好了，下面就是当点击登录按钮时在Android中传数据给h5：

user = name.getText().toString().trim();        password = psw.getText().toString().trim();        String login = "javascript:showUser('"+user+"','"+password+"')";        Log.e("q", "onClick: "+login );        webView.loadUrl(login);

好了，这样h5中通过执行js而使h5界面发生改变。

h5中数据通过js传数据给Android

给h5中的按钮添加点击事件（js执行）：

 <button id="but_click" onclick="show()" >点击传数据给Android</button><script type="text/javascript">      function show(){       var msg = document.getElementById("name").innerText;       //alert(msg);         window.android.show(msg);         /**          *这里window是固定的 android是在你Android代码中给WebView添加js接口的第二个数据 show（msg）是Android中的调用的方法          *          */      }   </script>

js中的代码就是这样，下面如何在h5中点击后Android如何响应，Android首先就是创建一个js需要调用的方法，根据webView.addJavascriptInterface(new AndroidInterface(), “android”);这个设置知道创建的类为AndroidInterface类，所以创建一个非静态内部类，在该类中编写一个在js中需要调用的方法：

  class AndroidInterface{         public AndroidInterface(){         }          //由于在api17以后需要用注解申明，所以该方法必须添加下面的注解，api17以前不用申明          @JavascriptInterface         public void show(String msg){             Toast.makeText(MainActivity.this, "Html传过来数据了"+msg, Toast.LENGTH_SHORT).show();         }     }

好了，基本的js和android之间的交互就完成了，点击查看源码

阅读全文

1 0