Android中与js进行交互

2016-07-01 本文已影响4708人 iszhenyu

背景

我们在开发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

这样学机器学习

Android中与js进行交互

背景

WebView的使用

WebViewJavascriptBridge设计思路

WebViewJavascriptBridge具体实现

猜你喜欢

热点阅读