隨着前端的火熱，以前開發的快速，越來越多的native app在其中融合了h5，就拿淘寶就是很多的h5組成的，一旦出現什么節日，他都可以不用通過更新app來實現界面的改變，而且android和ios可以基本上共用一套代碼。這不微信也出了小應用，感覺前端有慢慢吞噬客戶端的趨勢，所以得學下前端的一些知識了，要不然就落后了。對於本文就是學習下js和android的交互了。
Java和Js的通用實現
其實android和js的交互，其實主要就是android的webview和js的交互。android的webview有一個方法：addJavascriptInterface就是和js代碼交互的接口。還是分析代碼來的實際點吧。
1、java端代碼
新建個工程HelloJavaJs，首先便是實現個界面了。比較簡單，就一個webview控件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.jared.hellojavajs.MainActivity">
<WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent"/>
</LinearLayout>接着編寫MainActivity代碼：
private void initWebView() {
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JsInterface(), "control");
webView.setWebChromeClient(new WebChromeClient());
webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
testControl();
}
});
webView.loadUrl("file:///android_asset/test.html");
}
private void testControl() {
String control = "javascript:helloJava()";
control = "javascript:helloJavaWithParam(\""+"param1"+"\")";
control = "javascript:helloToJava()";
webView.loadUrl(control);
}
public class JsInterface {
@JavascriptInterface
public void helloJs(String message) {
Toast.makeText(getApplicationContext(), message, Toast.LENGTH_SHORT).show();
//Log.d("MainActivity", "hellojs");
}
} 這里講一下幾個方法：
1、setJavaScriptEnabled，設置為true，就其名就知道是為了使能js的功能了。
2、addJavascriptInterface，設置一個js調用webview的一個接口。這里實現的接口是JsInterface類，然后名字是control。其中JsInterface類里面有一個helloJs方法，並且標注了@JavascriptInterface。這樣js端代碼調用過來就會被知道了。
3、setWebChromeClient：主要處理解析，渲染網頁等瀏覽器做的事情，這里就用了系統默認的WebChromeClient，WebChromeClient是輔助WebView處理Javascript的對話框，網站圖標，網站title，加載進度等，當然這個可以自定義，由於addJavascriptInterface方法是有漏洞的，很多開發者實現了jsbridge，就是自定義了WebChromeClient，然后封裝了自己的一套協議，這個之后再分析分析。
4、setWebViewClient：就是幫助WebView處理各種通知、請求事件的，這里主要就實現了一個onPageFinished方法，主要是當頁面加載完了之后再調用到js的代碼。
2、js端代碼
既然java端代碼分析好了，那么就分析下js的代碼了，這新建一個test.html文件，放在assets目錄下，以為上面java代碼load的路徑就是這個html文件，這里簡單的實現個：
<html>
<script type="text/javascript"> function helloJava() { alert("I'm come from java"); } function helloJavaWithParam(message) { alert(message); } function helloToJava() { window.control.helloJs("I'm come from js!") } </script>
JavaJs In Android
</html>
代碼比較簡單，主要就是實現了三個function，helloJava沒有傳入參數，就彈出一個對話框，helloJavaWithParam從java端傳過來message，並彈出對話框。helloToJava會調用java端的helloJs方法，並把I’m come from js!傳過去。其中的control我們在addJavascriptInterface的時候已經注冊了。
3、效果展示
基本的代碼也已經講完了，那么就來測試下，看下效果了，這里只實現helloToJava方法，來看下會不會調用java代碼彈出土司了，看下效果：
很明顯，得到了我們需要的結果，如果一個h5的頁面需要實現一個按鈕，然后調用java代碼，啟動另一個activity就可以實現native和h5的混編了，這個就之后才做學習了。
也許會有疑問，為什么在load完頁面后，調用一段代碼”javascript:helloToJava()”，就可以了呢？其實這些都是瀏覽器的工作，調用完了頁面是確保執行了test.html的代碼的方法，要不然直接先調用”javascript:helloToJava()”的話會報錯的。
學習了通用的實現，也就是調用android的原生的代碼，那么接着我們來學習下通過自定義WebChromeClient來實現，也就是jsbridge的簡單實現，這里可以參考文章：Android JSBridge的原理與實現。關於Jsbridge的實現原理，后續在講解，也可以下載代碼先了解一下。