Android與JS互調

weixin_33670713發表於2017-09-04
AndroidJS

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之間的互動就完成了，點選檢視原始碼

相關文章