Android與JS互調(diào)

Android傳輸據(jù)給JS,首先在AndroidStudio中創(chuàng)建一個(gè)項(xiàng)目稚茅,在認(rèn)識(shí)目錄下創(chuàng)建一個(gè)文件夾為:assets 纸淮,之后將寫好的html界面放在這個(gè)目錄下,為了界面好看點(diǎn)亚享,我在該目錄下放了一個(gè)h5的代碼文件咽块,這里我為了方便就沒有將該html放在Tomcat上。下面是我的html代碼:

<!DOCTYPE html>
<html>
<head>
    <title>Android調(diào)用js代碼</title>
</head>
<body>
      用戶:<div id="name">游客</div>
      <img src = "girl_14.jpg" width="350px"/>

    <button id="but_click" onclick="show()" >點(diǎn)擊傳數(shù)據(jù)給Android</button>
    <!-- JS調(diào)用Android原生方法 Android中的方法為showToast-->

       <!--Android調(diào)用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欺税,以及兩個(gè)輸入框侈沪,為了將賬戶數(shù)據(jù)傳遞給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的設(shè)置晚凿,并且將assets下的html文件加載進(jìn)來:

 webView = (WebView) findViewById(R.id.wb);
        webView.loadUrl("file:///android_asset/demo01.html");
        webView.setWebChromeClient(new WebChromeClient());
        //設(shè)置瀏覽器為Android自帶的瀏覽器
        webView.addJavascriptInterface(new AndroidInterface(), "android");
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);//必須設(shè)置表示支持js
        settings.setBuiltInZoomControls(true);
        settings.setDefaultFontSize(20);

好了亭罪,下面就是當(dāng)點(diǎn)擊登錄按鈕時(shí)在Android中傳數(shù)據(jù)給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中通過執(zhí)行js而使h5界面發(fā)生改變歼秽。

h5中數(shù)據(jù)通過js傳數(shù)據(jù)給Android

  1. 給h5中的按鈕添加點(diǎn)擊事件(js執(zhí)行):
 <button id="but_click" onclick="show()" >點(diǎn)擊傳數(shù)據(jù)給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接口的第二個(gè)數(shù)據(jù) show(msg)是Android中的調(diào)用的方法
          *
          */
      }


   </script>
 

js中的代碼就是這樣应役,下面如何在h5中點(diǎn)擊后Android如何響應(yīng),Android首先就是創(chuàng)建一個(gè)js需要調(diào)用的方法燥筷,根據(jù)webView.addJavascriptInterface(new AndroidInterface(), "android");這個(gè)設(shè)置知道創(chuàng)建的類為AndroidInterface類箩祥,所以創(chuàng)建一個(gè)非靜態(tài)內(nèi)部類,在該類中編寫一個(gè)在js中需要調(diào)用的方法:

  class AndroidInterface{
         public AndroidInterface(){

         } 
         //由于在api17以后需要用注解申明肆氓,所以該方法必須添加下面的注解滥比,api17以前不用申明
          @JavascriptInterface
         public void show(String msg){
             Toast.makeText(MainActivity.this, "Html傳過來數(shù)據(jù)了"+msg, Toast.LENGTH_SHORT).show();
         }
     }

好了,基本的js和android之間的交互就完成了做院,點(diǎn)擊查看源碼

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末盲泛,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子键耕,更是在濱河造成了極大的恐慌寺滚,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件屈雄,死亡現(xiàn)場離奇詭異村视,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)酒奶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進(jìn)店門蚁孔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人惋嚎,你說我怎么就攤上這事杠氢。” “怎么了另伍?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵鼻百,是天一觀的道長。 經(jīng)常有香客問我,道長温艇,這世上最難降的妖魔是什么因悲? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮勺爱,結(jié)果婚禮上晃琳,老公的妹妹穿的比我還像新娘。我一直安慰自己琐鲁,他們只是感情好蝎土,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著绣否,像睡著了一般誊涯。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蒜撮,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天暴构,我揣著相機(jī)與錄音,去河邊找鬼段磨。 笑死取逾,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的苹支。 我是一名探鬼主播砾隅,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼债蜜!你這毒婦竟也來了晴埂?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤寻定,失蹤者是張志新(化名)和其女友劉穎儒洛,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體狼速,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡琅锻,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了向胡。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片恼蓬。...
    茶點(diǎn)故事閱讀 40,872評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖僵芹,靈堂內(nèi)的尸體忽然破棺而出处硬,到底是詐尸還是另有隱情,我是刑警寧澤淮捆,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布郁油,位于F島的核電站,受9級特大地震影響攀痊,放射性物質(zhì)發(fā)生泄漏桐腌。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一苟径、第九天 我趴在偏房一處隱蔽的房頂上張望案站。 院中可真熱鬧,春花似錦棘街、人聲如沸蟆盐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽石挂。三九已至,卻和暖如春险污,著一層夾襖步出監(jiān)牢的瞬間痹愚,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工蛔糯, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留拯腮,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓蚁飒,卻偏偏與公主長得像动壤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子淮逻,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容