前言
WebView就不向大家介紹了，如果WebView都沒了解的小夥伴可以先去看看其他類似關於WebView的使用。這次我們主要是講一講Android中當你的App中使用WebView的時候怎麼和它去交互，因爲往往很多時候App的很多頁面都是由WebView加載的。比如我現在的公司，就是商城類的App（易果生鮮，打個小廣告哈~），在首頁的banner和很多廣告位點進去後都是WebView。因爲往往像這類App，比如天貓，淘寶，京東等等都是由很多優惠活動或促銷的，用WebView就會變得更加靈活，那麼問題也就來了，比如我簡單舉一個例子，當你在WebView加載的網頁中，點擊商品後，那必定是要跳轉到App的商品詳情頁，那麼網頁是如何和我們的App進行交互的呢？對吧，比如談一個Toast，談一個對話框什麼的，都會調用到本地App的方法。廢話不多說，直接上乾貨！
乾貨
先看效果圖：
那麼現在分爲兩種情況,一種就是你WebView去調用我客戶端本地的方法，還有一種就是我客戶端去調用網頁中的JavaScript方法，我們分別來說一下：
（一）Android調用JavaScript
首先廢話不多說，看最簡單的XML和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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.mic.blin.javascriptdemo.MainActivity">
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:padding="20dp"
android:gravity="center"
android:text="調用js方法"/>
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</WebView>
</LinearLayout>然後就是WebView的初始化：
mWebView = (WebView) findViewById(R.id.webview);
WebSettings mWebSettings = mWebView.getSettings();
//啓用JavaScript
mWebSettings.setJavaScriptEnabled(true);
//設置編碼格式
mWebSettings.setDefaultTextEncodingName("utf-8");
//調用本地html文件
mWebView.loadUrl("file:///android_asset/demo.html");接下就是怎麼讓Android調用網頁中JS的代碼：
1.既然我們要調用JS，那麼JS那邊肯定要做好準備吧，看如下代碼
<html>
<body>
<a >彈出Android的Toast</a>
<script>
//這邊定義一個名稱爲callJavaScript（info）並且帶一參的方法，等待Android調用
function callJavaScript(info){
document.getElementById("web").innerHTML=info;
}
</script>
<p></p>
<div id="web">
</div>
</body>
</html>對Html代碼不熟的也沒關係，一般只要和公司的Html一起溝通好，你們只要保證方法名和參數一樣，比如上面的，然後在Android中直接通過以下代碼調用即可：
mWebView.loadUrl("javascript:callJavaScript('這是點擊安卓端的Button後傳過來的')");就這樣，把這個寫在Button點擊事件中，然後點擊Button，就會運行JS中的對應方法，相有木有很簡單呢~
（二）JavaScript調用Android
那麼這個也一樣的，JS要調用Android中的方法，相比Android這邊也好做好準備，提供接口讓人家來調用是吧。我們可以看到WebView有一個方法：
addJavascriptInterface(Object object, String name)沒錯的，這個就是JS調用安卓的關鍵了，我們看到有2個參數，第一個是Object的，第二個是String類型的，所以只要這麼做，看如下代碼：
1.我們先定義一個Object類，名字什麼的隨意，反正只要是O就可以了
public class JavaScriptObject {
@JavascriptInterface
public void CallAndroid(String name) {
Toast.makeText(MainActivity.this, name, Toast.LENGTH_LONG).show();
}
}注意上面的代碼，Android4.2中(android:targetSdkVersion大於17)JS只能訪問帶有 @JavascriptInterface註解的Java函數。之前，任何Public的函數都可以在JS代碼中訪問，而Java對象繼承關係會導致很多Public的函數都可以在JS中訪問，其中一個重要的函數就是 getClass()。然後JS可以通過反射來訪問其他一些內容。通過引入 @JavascriptInterface註解，則在JS中只能訪問 @JavascriptInterface註解的函數。這樣就可以增強安全性。
2.定義好O了，那麼直接調用：
//設置本地調用對象及其接口
mWebView.addJavascriptInterface(new JavaScriptObject(), "blin");參數而隨意啦，反正最好呢是和功能方法有關，不然呢你隨便寫，這都無所謂，自己記得住就好了。
3.在Html中調用我們的Java代碼：
var aTag = document.getElementsByTagName('a')[0];
aTag.addEventListener('click', function(){
//調用android本地方法
blin.CallAndroid("這是點擊Web頁面後調用Android本地方法");
return false;
}, false);然後就是點擊WebView中對應控件，調用Java了。是不是真的很簡單？當然這只是最基本的一些調用啦，至少我們現在可以做到了WebView中的網頁內容和我們的App實現了交互。
總結
好了，看了上面的內容，是不是覺得真的很簡單呢，這東西其實吧，多用一下就肯定熟了。當然，如果是大項目，尤其是商城類的項目，那JS和java之間的交互那是相當的頻繁以及複雜的，可能這樣的寫法會很麻煩，當然肯定還會有更好的交互方法，比如有興趣的可以去看看微信朋友圈點進去後的WebView的那套方案，畢竟人家大公司的東西肯定是有很多學習的地方。好啦，又是一個週末，Blin最後祝大家週末愉快哈！