JsBridge源码分析

一.项目介绍

jsbridege是一个开源的项目。主要实现webview和native之间的交互。是支撑Hybrid模式非常重要的基础组件。

基本上各个大厂都有自己的SDK。比如腾讯，美团，携程等等，一些公司也在向外输出自己的专业能力。但是基本上原理都差不多，不过大厂的SDK在兼容性、功能性、安全性上更好一些。

项目地址：

https://github.com/lzyzsd/JsBridge

二.JsBridge原理

在 Js 和 WebView 交互的过程中，主要实现两个方向可以通信即可。
WebView 向 Js 传递数据是通过 WebView.loadUrl(String url) 实现的
在 WebView 中接收 Js 传递的数据是通过 WebViewClient 中的 shouldOverrideUrlLoading(WebView view, String url) 拦截加载链接 String url 参数实现的。

三.JsBridge简单用法

public class JSBridgeActivity extends AppCompatActivity {

    private BridgeWebView mBridgeWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_jsbridge);
        initView();
    }

    private void initView() {
        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });
        //写一个最简单的双向的调用
        //jsbridge目的就是为了实现webview和native的通信。
        mBridgeWebView = (BridgeWebView) findViewById(R.id.webView);
        mBridgeWebView.loadUrl("file:///android_asset/demo.html");
        jsSendToNative();

        //java传递给前端js

    }

    private void jsSendToNative() {

        //前端传递给java：
        //点击前端对应的按钮：DefaultHandler方式，调用的代码如下：
        //前端对应的代码
///*用来展示默认方式*/
//        function testClick() {
//            var str1 = document.getElementById("text1").value;
//            var str2 = document.getElementById("text2").value;
//            //send message to native
//            var data = {id: 1, content: "我是内容哦"};
//            window.WebViewJavascriptBridge.send(
//                    data
//                    , function(responseData) {
//                document.getElementById("show").innerHTML = "data = " + responseData
//            }
//            );
//        }

        mBridgeWebView.setDefaultHandler(new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                //data是js返回的数据
                Toast.makeText(JSBridgeActivity.this, data, Toast.LENGTH_LONG).show();
            }
        });
    }

}

查看更多demo可移步下面的博客链接。
Android之利用JSBridge库实现Html，JavaScript与Android的所有交互
http://www.cnblogs.com/zhangqie/p/6724252.html

四.JsBridge总体设计

客户端调用JavaSript

web前端调用native

五.demo流程源码分析

运行环境设计java和js两个部分，调用流程在2部分之间交互。需要移动端同学了解一些js语法。
这里具体看一下demo中点击html中的DefaultHandler方式按钮后，js里的数据怎么传递给Android native的。

///*用来展示默认方式*/
//        function testClick() {
//            var str1 = document.getElementById("text1").value;
//            var str2 = document.getElementById("text2").value;
//            //send message to native
//            var data = {id: 1, content: "我是内容哦"};
//            window.WebViewJavascriptBridge.send(
//                    data
//                    , function(responseData) {
//                document.getElementById("show").innerHTML = "data = " + responseData
//            }
//            );
//        }

1.js：中的testClick调用到WebViewJavascriptBridge.js中的send方法

function send(data, responseCallback) {
        _doSend({
            data: data
        }, responseCallback);
    }

//sendMessage add message, 触发native处理 sendMessage
    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;
    }

这里调用到doSend，将消息存放在sendMessageQueue中，将responseCallback放在responseCallbacks数组中。
这里着重关注几点：
1.message的callbackId.callbackId由uniqueId配合时间生成，用于后续查找responseCallback回调。callbackId用于html页面中send方法的回调。
2.更换iFrame的src，触发BridgeWebViewClient的shouldOverrideUrlLoading方法。
3.更换src，前缀为yy://QUEUE_MESSAGE/。

2.webview：匹配到shouldOverrideUrlLoading，进入到BridgeWebView的flushMessageQueue方法

void flushMessageQueue() {
        if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
            loadUrl(BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA, new CallBackFunction() {

                @Override
                public void onCallBack(String data) {
                    // deserializeMessage
                    List<Message> list = null;
                    try {
                        list = Message.toArrayList(data);
                    } catch (Exception e) {
                        e.printStackTrace();
                        return;
                    }
                    if (list == null || list.size() == 0) {
                        return;
                    }
                    for (int i = 0; i < list.size(); i++) {
                        Message m = list.get(i);
                        String responseId = m.getResponseId();
                        // 是否是response
                        if (!TextUtils.isEmpty(responseId)) {
                            CallBackFunction function = responseCallbacks.get(responseId);
                            String responseData = m.getResponseData();
                            function.onCallBack(responseData);
                            responseCallbacks.remove(responseId);
                        } else {
                            CallBackFunction responseFunction = null;
                            // if had callbackId
                            final String callbackId = m.getCallbackId();
                            if (!TextUtils.isEmpty(callbackId)) {
                                responseFunction = new CallBackFunction() {
                                    @Override
                                    public void onCallBack(String data) {
                                        Message responseMsg = new Message();
                                        responseMsg.setResponseId(callbackId);
                                        responseMsg.setResponseData(data);
                                        queueMessage(responseMsg);
                                    }
                                };
                            } else {
                                responseFunction = new CallBackFunction() {
                                    @Override
                                    public void onCallBack(String data) {
                                        // do nothing
                                    }
                                };
                            }
                            BridgeHandler handler;
                            if (!TextUtils.isEmpty(m.getHandlerName())) {
                                handler = messageHandlers.get(m.getHandlerName());
                            } else {
                                handler = defaultHandler;
                            }
                            if (handler != null){
                                handler.handler(m.getData(), responseFunction);
                            }
                        }
                    }
                }
            });
        }
    }

flushMessageQueue通过主要调用到了loadUrl方法:

public void loadUrl(String jsUrl, CallBackFunction returnCallback) {
        this.loadUrl(jsUrl);
        responseCallbacks.put(BridgeUtil.parseFunctionName(jsUrl), returnCallback);
    }

loadUrl方法：
1.首先会去调用BridgeWebView的loadUrl方法。去执行javascript:WebViewJavascriptBridge._fetchQueue()js语句调用。
2.注册了一个回调函数。还将对应的回调函数放在responseCallbacks中， key是_fetchQueue。

3.js:_fetchQueue方法

// 提供给native调用,该函数作用:获取sendMessageQueue返回给native,由于android不能直接获取返回的内容,所以使用url shouldOverrideUrlLoading 的方式返回内容
    function _fetchQueue() {
        var messageQueueString = JSON.stringify(sendMessageQueue);
        sendMessageQueue = [];
        //add by hq
        if (isIphone()) {
            return messageQueueString;
            //android can't read directly the return data, so we can reload iframe src to communicate with java
        } else if (isAndroid()) {
            messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);
        }
    }

这里讲sendMessageQueue数组中的所有消息，序列化为json字符串，通过更改iFrame的src，触发shouldOverrideUrlLoading方法。

4.webview:handlerReturnData方法

将关注点放到shouldOverrideUrlLoading里去调用到的是handlerReturnData方法。

void handlerReturnData(String url) {
        String functionName = BridgeUtil.getFunctionFromReturnUrl(url);
        CallBackFunction f = responseCallbacks.get(functionName);
        String data = BridgeUtil.getDataFromReturnUrl(url);
        if (f != null) {
            f.onCallBack(data);
            responseCallbacks.remove(functionName);
            return;
        }
    }

这里就和步骤2对应上了。即webview loadjs的_fetchQueue后，fetchqueue的返回结果会被传递到 onCallback的参数data中：

new CallBackFunction() {

                @Override
                public void onCallBack(String data) {
                    // deserializeMessage
                    List<Message> list = null;
                    try {
                        list = Message.toArrayList(data);
                    } catch (Exception e) {
                        e.printStackTrace();
                        return;
                    }
                    if (list == null || list.size() == 0) {
                        return;
                    }
                    for (int i = 0; i < list.size(); i++) {
                        Message m = list.get(i);
                        String responseId = m.getResponseId();
                        // 是否是response。即java发消息给web时，传入的回调函数
                        if (!TextUtils.isEmpty(responseId)) {
                            CallBackFunction function = responseCallbacks.get(responseId);
                            String responseData = m.getResponseData();
                            function.onCallBack(responseData);
                            responseCallbacks.remove(responseId);
                        } else {
                            CallBackFunction responseFunction = null;
                            // if had callbackId
                            final String callbackId = m.getCallbackId();
                            //即web端发消息给native时，注册的回调函数。需要通过native->js触发
                            if (!TextUtils.isEmpty(callbackId)) {
                                responseFunction = new CallBackFunction() {
                                    @Override
                                    public void onCallBack(String data) {
                                    //构造回调消息
                                        Message responseMsg = new Message();
                                        responseMsg.setResponseId(callbackId);
                                        responseMsg.setResponseData(data);
                                        queueMessage(responseMsg);
                                    }
                                };
                            } else {
                                responseFunction = new CallBackFunction() {
                                    @Override
                                    public void onCallBack(String data) {
                                        // do nothing
                                    }
                                };
                            }
                            BridgeHandler handler;
                            if (!TextUtils.isEmpty(m.getHandlerName())) {
                                handler = messageHandlers.get(m.getHandlerName());
                            } else {
                               //默认Handler
                                handler = defaultHandler;
                            }
                            if (handler != null){
                                handler.handler(m.getData(), responseFunction);
                            }
                        }
                    }
                }
            }

这里算是比较核心的部分了。
这里会调用到handler的handle方法。
即调用到了handler的handle方法中。
这里只是分析了在web上点击一个按钮传递数据给native的情况。

六.模块分析

1.BridgeWebViewClient

是在BridgeWebView构造方法调用了init，init主要设置了
webviewclient = new BridgeWebViewClient().

public class BridgeWebViewClient extends WebViewClient {
    private BridgeWebView webView;

    public BridgeWebViewClient(BridgeWebView webView) {
        this.webView = webView;
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        try {
            url = URLDecoder.decode(url, "UTF-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }

        if (url.startsWith(BridgeUtil.YY_RETURN_DATA)) { // 如果是返回数据
            webView.handlerReturnData(url);
            return true;
        } else if (url.startsWith(BridgeUtil.YY_OVERRIDE_SCHEMA)) { //
            webView.flushMessageQueue();
            return true;
        } else {
            return super.shouldOverrideUrlLoading(view, url);
        }
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);

        if (BridgeWebView.toLoadJs != null) {
            BridgeUtil.webViewLoadLocalJs(view, BridgeWebView.toLoadJs);
        }

        //
        if (webView.getStartupMessage() != null) {
            for (Message m : webView.getStartupMessage()) {
                webView.dispatchMessage(m);
            }
            webView.setStartupMessage(null);
        }
    }

    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
        super.onReceivedError(view, errorCode, description, failingUrl);
    }
}

代码中有几个要点需要关注：
1.onPageFinished方法中会去调用webview的loadUrl方法加载一段js代码:WebViewJavascriptBridge.js.
2.shouldOverrideUrlLoading方法中，会去匹配url的起始，分别调用不同的方法。

七.阅读体会&优缺点&改进意见

iframe的问题
http://blog.csdn.net/u014099894/article/details/72673438

js简单学习
iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。iframe用于设置文本或图形的浮动图文框或容器。
修改iframe的src会调用webview的shouldOverrideUrlLoading方法。

参考资料

JSbridge系列解析（四）:Web端发消息给Native代码流程具体分析
http://cdn2.jianshu.io/p/730eaba1a617
JsBridge源码解析
http://lijiankun24.com/JsBridge%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/