1. 程式人生 > >Android Java和js互調案例演示(HTML5混合開發)

Android Java和js互調案例演示(HTML5混合開發)

WebView相關知識-案例1

1.載入網頁要用WebView控制元件

2.要想支援js就要設定 webview.getSettings().setJavaScriptEnabled(true);

3.webview.loadUrl可以載入本地的html頁面也可以載入網路html頁面,還可以呼叫js的方法 webview.loadUrl("file:///android_asset/JavaCallJS1.html");

放html頁面的時候是放在assets目錄下,程式碼載入的時候: file:///android_asset/vido/xxxxx.html

4.在Android中要從html頁面中彈出對話方塊需要

//支援從html中彈出對話方塊 //webview.setWebChromeClient(new WebChromeClient());

WebView相關知識-案例2 --js呼叫java

// 新增一個物件, 讓JS可以訪問該java物件的方法, 該java物件中可以呼叫JS中的方法 //注意Java呼叫JS的時候addJavascriptInterface是不必須的 mWebView.addJavascriptInterface(getHtmlObject(), "yangguangfu");

html中點選事件

呼叫yangguangfu(對應的是一個介面) 對應的JavacallHtml方法

WebView相關知識-案例3-js-呼叫Java的運用場景

1.從網頁撥打電話 2.從網頁中呼叫系統播放器並且播放 3.網頁中吊起系統的郵件客戶端

1.webView.loadUrl("file:///android_asset/JsCallJava.html");

2.webView.addJavascriptInterface(new Atguigu(), "Android");

3.載入資料

4.呼叫了Java程式碼中的方法showcontacts(),程式碼如下:

  // Html呼叫此方法傳遞資料
    public void showcontacts() {

        handler.post(new Runnable() {

            @Override
            public void run() {
                Log.e(TAG, "java --showcontacts---");
                // 下面的程式碼建議在子執行緒中呼叫
                String json = "[{\"name\":\"阿福\", \"amount\":\"100000\", \"phone\":\"18600012345\"}]";
                // 呼叫JS中的方法
                webView.loadUrl("javascript:show('" + json + "')");//載入電話

                //視訊資訊
                String jsonVideo = "[{\"name\":\"我是視訊點選播放\", \"amount\":\"9999\", \"phone\":\"http://10.0.2.2:8080/oppo.mp4\"}]";
                webView.loadUrl("javascript:showvideo('" + jsonVideo + "')");//視訊

            }
        });

5.java呼叫js程式碼中的show()方法,作用是在html頁面中顯示資料

  function show(jsondata){            
                var jsonobjs = eval(jsondata);
                var table = document.getElementById("personTable");
                for(var y=0; y<jsonobjs.length; y++){
                    var tr = table.insertRow(table.rows.length); 
                    var td1 = tr.insertCell(0);
                    var td2 = tr.insertCell(1);
                    td2.align = "center";
                    var td3 = tr.insertCell(2);
                    td3.align = "center";
                    td1.innerHTML = jsonobjs[y].name; 
                    td2.innerHTML = jsonobjs[y].amount; 
                    td3.innerHTML = "<a href='javascript:Android.call(\""+ jsonobjs[y].phone+ "\")'>"+ jsonobjs[y].phone+ "</a>";
                }
        }

6.點選的時候呼叫了java的call方法,並且傳遞引數給java程式碼 javascript:Android.call(\""+ jsonobjs[y].phone+ "\")//電話 javascript:Android.playVideo(\""+ jsonobjs[y].phone+ "\")//視訊

7.Java中的call方法就去撥打電話了

  public void call(String phone) {
        Log.e(TAG, "java --call(String phone)---==" + phone);
        startActivity(new Intent(Intent.ACTION_CALL, Uri.parse("tel:"
                + phone)));
    }

8.如果是視訊,就呼叫Java中的playVideo方法

 public void playVideo(String videoUrl) {
        Log.e(TAG, "java --playVideo(String videoUrl)---==" + videoUrl);
        Intent intent = new Intent(Intent.ACTION_VIEW);
        intent.setDataAndType(Uri.parse(videoUrl), "video/*");
        startActivity(intent);
    }

WebView相關知識-案例4-js-呼叫Java的真實場景