Android Webview 和Javascript交互,實現Android和JavaScript相互調用


在Android的開發過程中、遇到一個新需求、那就是讓Java代碼和Javascript代碼進行交互、在IOS中實現起來很麻煩、而在Android中相對來說容易多了、Android對這種交互進行了很好的封裝、我們可以很簡單的用Java代碼調用WebView中的js函數、也可以用WebView中的js來調用Android應用中的Java代碼。

案例主要包含了:

  1.  Html中調用Android方法
  2. Android調用JS方法無參數
  3. Android調用JS方法有參數
  4. Android調用JS方法有參數且有返回值處理方式1
  5. Android調用JS方法有參數且有返回值處理方式2(Android4.4以上)

1:創建JS對象

webView.addJavascriptInterface(new JsInterface(), "obj");
public class JsInterface {
    //JS中調用Android中的方法 和返回值處理的一種方法
        
    /****
          * Html中的點擊事件 onclick
      *  <input type="button" value="結算" onclick="showToast('12')">
      * @param toast
      */
    @JavascriptInterface
    public void showToast(String toast) {
      Toast.makeText(MainActivity.this, "你的商品價格是:¥"+toast, Toast.LENGTH_SHORT).show();
    }
}
function showToast(toast) { 
    var money=toast*3;
    javascript:obj.showToast(money);
}

2:

webView.loadUrl("javascript:funFromjs()");
function funFromjs(){
    document.getElementById("helloweb").innerHTML="div顯示數據,無參數";
}

3:

webView.loadUrl("javascript:funJs('Android端傳入的信息,div標簽中顯示,含參數')");

 

function funJs(msg){
   document.getElementById("hello2").innerHTML=msg;
}

 

4:

webView.loadUrl("javascript:sum(6,6)");
/***
 * Android代碼調用獲取J是中的返回值
 * 
 * @param result
*/
   @JavascriptInterface
   public void onSum(int result) { 
    Toast.makeText(MainActivity.this, "Android調用JS方法且有返回值+計算結果=="+result, Toast.LENGTH_SHORT).show();
   } 

 

function sum(i,m){ 
    var result = i*m; 
    document.getElementById("h").innerHTML= "Android調用JS方法且有返回值--計算結果="+result; 
    javascript:obj.onSum(result) 
} 

 

5:

 webView.evaluateJavascript("sumn(6,11)", new ValueCallback<String>() {
         @Override
     public void onReceiveValue(String value) {
         Toast.makeText(MainActivity.this, "返回值"+value, Toast.LENGTH_SHORT).show();
           }
});

 

function sumn(i,m){ 
     var result = i*m; 
     document.getElementById("hh").innerHTML= "Android調用JS方法且有返回值--計算結果="+result; 
     return result;
} 

 注意:

1、Java 調用 js 里面的函數、效率並不是很高、估計要200ms左右吧、做交互性很強的事情、這種速度很難讓人接受、而js去調Java的方法、速度很快、50ms左右、所以盡量用js調用Java方法

2、Java 調用 js 的函數、沒有返回值、調用了就控制不到了

3、Js 調用 Java 的方法、返回值如果是字符串、你會發現這個字符串是 native 的、轉成 locale 的才能正常使用、使用 toLocaleString() 函數就可以了、不過這個函數的速度並不快、轉化的字符串如果很多、將會很耗費時間

4、網頁中盡量不要使用jQuery、執行起來需要5-6秒、最好使用原生的js寫業務腳本、以提升加載速度、改善用戶體驗。

 

注:使用的是本地的Html文件,不過在網絡鏈接的Html文件也是可以實現的。   

源碼點擊下載


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM