現在很多app裡面很多功能都用html5實現，也就是用webview加載html顯示一些 圖文信息。這麼做的好處就是減少開發成本 ，一套html在android ，ios及web都可以跑。節省了很多開發成本。但是這個也就帶來相應的一些問題。最大問題就是交互問題。所以下面給大家說一下android和js怎麼實現交互（android調用js中的方法，js裡面調用android的方法）。

一.js調用android

webview設置

//設置編碼
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");
        //支持js
        mWebView.getSettings().setJavaScriptEnabled(true);
        //設置本地調用對象及其接口
        mWebView.addJavascriptInterface(new JavaScriptObject(mContext), "myObj");
        //載入js
        mWebView.loadUrl("file:///android_asset/test.html");

方法聲明：

class JavaScriptObject {
        Context mContxt;
        public JavaScriptObject(Context mContxt) {
            this.mContxt = mContxt;
        }
        @JavascriptInterface
        public void getAndroidMethod(String name) {
            Toast.makeText(mContxt, name, Toast.LENGTH_LONG).show();
        }
    }

html中js調用

<script>
    
    function funFromjs(){
    	document.getElementById("mydiv").innerHTML="android調用了js的方法";
    }
    var aTag = document.getElementsByTagName('a')[0];
    aTag.addEventListener('click', function(){
        //調用android本地方法
    myObj.getAndroidMethod("js調用了android的方法！");
        return false;
    }, false);
    </script>

測試的test.html放到android的assets目錄下面。

二.android調用js

android 調用js 客戶端代碼：

mWebView.loadUrl("javascript：funFromjs()");

funFromjs這個函數 是在html裡面的js 聲明好的。 大家看上面的代碼裡面有這個函數。

三.特別注意的地方

總的來說很簡單，但是有兩點需要特別注意的。

第一點

mWebView.addJavascriptInterface(new JavaScriptObject(mContext), "myObj");

myObj.getAndroidMethod("js調用了android的方法！");

js代碼裡面的 myObj 不用特殊定義一個對象 ，這個對象是在android webview加載html時候注入的對象，可以認為他們倆就是一個對象。

第二點@JavascriptInterface

大家注意在android 聲明出來的方法前面 要加上這個javasriptInterface 注解，否則會報Uncaught TypeError: Object [object Object] has no method... 這個錯誤。

正常需要判斷為targetSdkVersion>=17時，需要加上@JavascriptInterface，所以target=android-17或更高以便引入高版本android.jar。反之，如果僅targetSdkVersion低於17，那麼目標版本不用加@JavascriptInterface，當然加上也行。

所以大家直接加上就可以。