Android Hybird 原生和网页通讯框架实践

Android中显示一个网页需要用到的三大组件：

1、WebView

2、WebViewClient

3、WebChromeClient

上述三个组件均位于android.webkit包下。

一、WebView
WebView是显示一个网页最基础的组件。通过WebView，开发者可以实现自己的一个Web浏览器或者是仅仅在Activity中显示一些在线内容。
WebView可以做什么？
WebView中支持了最基本的网页操作：
a、浏览历史
b、基于浏览历史的前进和回退导航
c、网页放大和缩小
d、网页内文本搜索
e、加载网页链接或本地网页文件
f、响应文件下载
g、Cookie和窗口管理

二、WebViewClient
WebViewClient也属于WebView特设设置的一部分，当影响到网页内容加载的事情发生时会回调到WebViewClient中。
如：访问错误、表单提交、拦截Url加载等。

三、WebViewChromeClient
WebViewChromeClient属于WebView中高级特性的一部分。它可以响应网页加载进度、文件选择和上传、JavaScript产生的Alert警告框、地理位置请求等。

四、Hybird交互基本原理
参考：https://github.com/jesse01/WebViewJavascriptBridge

传递交互数据，并定义回调id。数据回传后，取出该消息对应的回调，来处理回调数据。

下面讲一下WebViewJavascriptBridge for Android的实现：

1、定义两端通用的用来互相通信的消息实体。

/**
 * 一个请求或响应的消息实体
 */
private class WVJBMessage {
    Object data = null;
    String callbackId = null;
    String handlerName = null;
    String responseId = null;
    Object responseData = null;
}

其中，data字段存储发送的数据，responseDat存储响应的数据。callbackId为客户端反馈给H5数据的回调标示。responseId为H5反馈给客户端数据的回调标示。handlerName为客户端处理H5请求的处理器。
上述内容最终传递形式均为Json形式的字符串。

2、开启WebView的时候，注入框架所需的js脚本。
一个存储发送消息的数组 sendMessageQueue
一个存储接收消息的数据 receiveMessageQueue
一个添加消息的函数 _handleMessageFromObjC(massageJson)
一个获取所有消息的函数 _fetchQueue()

3、客户端向H5发送请求：

• 1、新建WVJBMessage（data、处理器handler、requestId）
• 2、调用js函数 WebViewJavascriptBridge._handleMessageFromObjC， 参数为data，无回调

• 3、js处理完后，向sendMessageQueue数组中添加处理完成的消息，向客户端发送特殊的Url
  messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + ‘://’ + QUEUE_HAS_MESSAGE

• 4、客户端在shouldOverrideUrlLoading方法中拦截H5的处理完成的标识

• 5、调用js函数_fetchQueue()，从js的消息队列中取出处理结果，客户端根据回调id取出事先存储的回调方法，并处理回调数据。

4、H5向客户端发送请求

• 1、请求wvjbscheme开头的url
• 2、客户端在shouldOverrideUrlLoading方法中拦截H5请求标示
• 3、调用js函数_fetchQueue()，从js队列取出请求参数。同时新建回调接口，供客户端处理完请求后调用H5
• 4、客户端将处理结果包装成新建WVJBMessage
• 5、再次调用js函数 WebViewJavascriptBridge._handleMessageFromObjC，将处理结果返回给H5

5、消息队列存储在H5端
H5存储需要客户端处理的消息，并通知客户端处理
客户端接到通知，通过js获取需要处理的消息。

6、客户端和H5均需要存储回调函数的id

7、客户端和H5均有一个开发者自定的消息处理器handler，开发者只需实现

void request(Object data, WVJBResponseCallback callback);方法，
并事先在data中定义好通讯规则。