Android中與js進行交互

背景

我們在開發Android應用的時候，很多的時候需要跟網頁打交道，假如我們現在在做一個外賣app，在app首頁會有一個輪詢的廣告位，我們點擊其中一項會跳轉至一個wap網頁，在這個網頁里可能會有幾個餐廳的推廣信息，在用戶點擊某個餐廳后，我們希望跳出wap頁面展示餐廳的詳情，這個時候就需要用到js調用java代碼來實現了。再或者，如果我們需要在wap頁中進行分享可能也需要用js調用java代碼來執行分享的操作。類似這樣的場景很多，如果我們需要實現這種功能，就要了解java和js之間的交互的方法。

WebView的使用

我們在Android中如果希望展示一個網頁，基本上都會使用WebView這個組件，它的基本使用也很簡單，假如我們希望加載一下百度首頁，可以像下面這樣寫： 首先在layout文件中進行聲明

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <WebView android:id="@+id/web_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout> 

然后在java文件中進行使用

WebView webView = (WebView) findViewById(R.id.web_view);
webView.loadUrl("http://www.baidu.com"); 

同時，WebView還允許我們對一些默認設置進行修改，例如，我們希望啟動對javascript的支持並且可以進行縮放，就需要做如下設置：

// 啟用javascript webView.getSettings().setJavaScriptEnabled(true); webView.getSettings().setUseWideViewPort(true); //是否可以縮放 webView.getSettings().setSupportZoom(true); webView.getSettings().setBuiltInZoomControls(true); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) { getSettings().setDisplayZoomControls(false); } 

但是，如果我們想要在頁面加載的時候處理各種通知、請求事件，或者監聽頁面的加載進度等，就需要用到另外兩個類：WebViewClient 和 WebChromeClient。其中，WebViewClient 主要用來監聽通知或請求事件，我們在開發中可能會用到的方法主要是下面幾個：

• onPageStarted
• onPageFinished
• onReceivedError
• shouldOverrideUrlLoading

而 WebChromeClient 則用來處理javascript、網站圖標、網站title和加載進度等，我們在使用微信時，如果打開一個網頁，會看到它的上面有一條綠色的進度條，這個功能就是通過重寫 WebChromeClient 的 onProgressChanged方法來實現的：

public class CustomWebClient extends WebChromeClient { @Override public void onProgressChanged(WebView view, int newProgress) { if (newProgress == 100) { mProgressBar.setVisibility(GONE); } else { if (mProgressBar.getVisibility() == GONE) { mProgressBar.setVisibility(VISIBLE); } mProgressBar.setProgress(newProgress); } super.onProgressChanged(view, newProgress); } } 

除此之外，WebView還提供了直接運行javascript的功能，例如，我們可以簡單的彈出一個對話框：

webView.loadUrl("javascript:alert(\"提示信息！\");"); 

當然，如果我們想要執行js，那么必須滿足兩個條件，第一個是在設置中開啟javascript支持，即需要調用setJavascriptEnabled(true)，第二個是需要設置WebChromeClient，兩者缺一不可。

在一些比較復雜的場景下，我們要做的不再是簡單的顯示一個頁面而已，大多時候，我們更希望通過javascript來訪問app內的一些數據，或者與app進行交互。我們嘗試定義這樣一個組件，希望可以通過它來達到我們的目的，我們暫且對這樣的組件起名為WebViewJavascriptBridge。

WebViewJavascriptBridge設計思路

根據第二節的介紹，對於第一種情況，也就是通過java來調用javascript代碼，系統已經幫我們實現好了，但是第二種情況系統卻沒有直接提供實現。 盡管如此，我們可以考慮是否能在 WebViewClient 或 WebChromeClient 中尋得突破口。在 WebViewClient 中存在這樣一個方法: shouldOverrideUrlLoading(WebView view, String url)，在這個方法的注釋中是這樣說的：

Give the host application a chance to take over the control when a new url is about to be loaded in the current WebView.

也就是說，對於在WebView中的每個請求，我們都是有機會對其進行攔截的，並且接管本次請求。 我們比較熟悉的是通過一個url來訪問頁面，比如我們在訪問美團網的時候，它的一個團購單的url可能是這個樣子 http://bj.meituan.com/deal/25709595.html，而url本身是可以攜帶一些信息的，上面這個url還不是很明顯，如果我們換種寫法，你就會看的更清楚些 http://bj.meituan.com/?deal=25709595當然這個鏈接並不能正常訪問到團購頁，這里只是做個示意，也就是說我們是可以通過這種param的形式來傳遞一些數據的。 而我們又可以在 WebViewClient 中對這個請求進行攔截，在攔截方法中我們是能夠拿到本次請求的url中所傳遞過來的數據的，根據這些請求過來的數據，就可以執行本地java代碼來處理了，處理完畢后，通過WebView又可以通過回調javascript的方式來返回結果。 以上就是我們實現 WebViewJavascriptBridge 的主要思路了，當然在具體實現的時候會有一些細節，這個我們在下一節具體實現的時候再繼續探討。
總結一下，1、java調用javascript可以直接調用。2、javascript調用java需要用到 WebViewClient。我們用下圖更直觀的表示下：

 

java與javascript交互示意.jpg

WebViewJavascriptBridge具體實現

我們知道，一個標准的URL的格式應該是下面這個樣子：

protocol://hostname[:port]/path/[;parameters][?query]#fragment

我們在訪問頁面的時候，用到的最多的協議就是http和https了，除了這兩個協議外，還有file、ftp等等。這里我們自己來定義一個協議名稱，所有javascript調用java的代碼都走這個協議。

public class WebViewJsBridgeBase { private static final String CUSTOM_PROTOCOL_SCHEME = "wvjbscheme"; ... public boolean isCorrectProtocolScheme(String url) { if (TextUtils.isEmpty(url)) { return false; } return url.startsWith(CUSTOM_PROTOCOL_SCHEME + "://"); } ... } 

這樣做的好處就是，我們在對請求進行攔截后，可以更方便的分辯出哪些是需要自己處理的，而對哪些正常的網絡請求放行。因此，我們可以定義一個WebViewClient的子類，並重寫它的shouldOverrideUrlLoading方法：

public class WebViewJsBridgeClient extends WebViewClient { private WebViewJsBridgeBase base; private WebViewClient mWebViewClient; ... @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { try { url = URLDecoder.decode(url, "UTF-8"); } catch (UnsupportedEncodingException e) { // do nothing } if (base.isCorrectProtocolScheme(url)) { ... return true; } else if (mWebViewClient != null) { return mWebViewClient.shouldOverrideUrlLoading(view, url); } else { return super.shouldOverrideUrlLoading(view, url); } } } 

首先，我們會去判斷是否是我們自定義的協議，如果不是還會判斷mWebViewClient是否為空，這里為什么還要定義一個WebViewClient呢？原因也很簡單，WebView只能設置一個WebViewClient，我們這里已經定義了WebViewClient如果用戶還需要自己定義怎么辦呢？所以這里持有了一個用戶自定義的WebViewClient，通過這個client就可以將一些事件轉發出去：

public class WebViewJsBridgeClient extends WebViewClient { ... @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { if (mWebViewClient != null) { mWebViewClient.onPageStarted(view, url, favicon); } else { super.onPageStarted(view, url, favicon); } } ... } 

OK，我們回到Bridge的實現問題上來。在一個頁面加載完畢后，如果我們想使用javascript來調用java，那么前期的一些准備工作是必不可少的，因為我們這里說的javascript調用java並不是將javascript代碼轉化為java執行，而更像是一種曲線救國的方式，因此，至少我們要約定一下，javascript的哪個方法可以調用java對應的哪個方法，也就是我們對其進行一些初始化操作。

我們將java可以處理的每個問題抽象為一個Handler：

public interface WVJBHandler { void handle(String data, WVJBResponseCallback callback); } 

其中，WVJBResponseCallback也是一個接口，當Handler處理完畢后就是通過這個callback來進行回調給javascript端的：

public interface WVJBResponseCallback { void callback(String responseData); } 

在我們定義的這兩個接口里面，數據是按照String的格式進行傳輸的，因為javascript天生支持json，因此，對於一些復雜的數據類型，都可以轉化為json字符串。

我們的初始化操作就包括注冊這些Handler，也就是聲明java端可以處理哪些問題，因為會有多個Handler，也就會有多個Callback：

public class WebViewJsBridgeBase { ... Map<String, WVJBResponseCallback> responseCallbacks; Map<String, WVJBHandler> messageHandlers; ... } public class WebViewJsBridge { ... public void registerHandler(String handlerName, WVJBHandler handler) { base.messageHandlers.put(handlerName, handler); } ... } 

到目前為止，我們一直都是在講java端的一些實現，那在js端到底要怎么樣才能調用我們定義好的Handler呢？

通過上面的介紹，如果希望調用java代碼，那么必須發起一個請求，在頁面中我們發起請求的方式有幾種，最常規的是點擊一個鏈接進行跳轉，還可以通過javascript來發起一個ajax請求，除此之外，我們還可以借助iframe，就像下面這樣：

var WVJBIframe = document.createElement('iframe'); WVJBIframe.style.display = 'none'; WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'; document.documentElement.appendChild(WVJBIframe); 

我們在原頁面里面添加了一個隱藏的iframe元素，所有需要跟java交互的請求都是通過改變這個iframe的src屬性來實現的。

假設說我們現在需要實現一個功能，是在頁面里有一個分享按鈕，點擊這個分享按鈕后，打開app自己的分享功能。

第一步，我們需要實現這樣一個Handler ，並且將其注冊到Bridge中：

bridge.registerHandler("share_handler", new WVJBHandler() { @Override public void handle(String data, WVJBResponseCallback callback) { Log.d("share info from js : ", data); callback.callback("share success"); } }); 

第二步，在js中，我們通過一個callHandler方法來請求java代碼的執行：

function callHandler(handlerName, data, responseCallback) { if (arguments.length == 2 && typeof data == 'function') { responseCallback = data; data = null; } _doSend({ handlerName:handlerName, data:data }, responseCallback); } function _doSend(message, responseCallback) { if (responseCallback) { var callbackId = 'cb_'+(uniqueId++)+'_'+new Date().getTime(); responseCallbacks[callbackId] = responseCallback; message['callbackId'] = callbackId; } sendMessageQueue.push(message); messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE; } 

可以看到，我們在這里構造了一個Message對象，這個對象包含三個屬性，一個是需要java處理的Handler名稱，一個是data數據本身，還有是一個回調方法的id，這個回調方法就是java在執行完畢后的回調方法。此外，我們提供了一個Queue來保存這些請求的Message對象，之后通知java有Message進入到隊列里面。
第三步，WebViewClient對這個請求進行攔截，並到javascript的queue中去取Message：

@Override public boolean shouldOverrideUrlLoading(WebView view, String url) { ... if (base.isCorrectProtocolScheme(url)) { ... if (base.isQueueMessageUrl(url)) { String javascriptCommand = base.javascriptFetchQueryCommand(); bridge.evaluateJavascript(javascriptCommand); } ... return true; } ... } 

由於在Android中執行javascript后不會反回結果，所以為了拿到Message對象，我們需要將這個Message對象像參數一樣附在請求的后面傳遞給java：

function _fetchQueue() { var messageQueueString = JSON.stringify(sendMessageQueue); sendMessageQueue = []; // android 不能直接返回結果,做在放在url中返回 messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + RETURN_WITH_MESSAGE + '/' + messageQueueString; } 

這樣，這個請求會再次被WebViewClient攔截，並解析Message：

@Override public boolean shouldOverrideUrlLoading(WebView view, String url) { ... if (base.isCorrectProtocolScheme(url)) { ... if (base.isReturnMessageUrl(url)) { String messageQueueString = base.messageQueueStringFromReturnUrl(url); base.flushMessageQueue(messageQueueString); } ... return true; } ... } 

在flushMessageQueue方法中，主要執行的就是解析Message，並調用對應的Handler來進行處理，在處理完畢后，回調javascript的callback方法返回結果。到此，java與javascript的一個完整的交互流程就完成了。更完整的代碼可以參考：WebViewJavascriptBridgeForAndroid

作者：iszhenyu
鏈接：https://www.jianshu.com/p/f18d04dee19e
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。