美文网首页
Android与JS互调

Android与JS互调

作者: luweicheng24 | 来源:发表于2017-09-04 18:03 被阅读0次

Android传输据给JS,首先在AndroidStudio中创建一个项目,在认识目录下创建一个文件夹为:assets ,之后将写好的html界面放在这个目录下,为了界面好看点,我在该目录下放了一个h5的代码文件,这里我为了方便就没有将该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

  1. 给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之间的交互就完成了,点击查看源码

相关文章

网友评论

      本文标题:Android与JS互调

      本文链接:https://www.haomeiwen.com/subject/vugejxtx.html