首页手记 JsBridge使用和原理

JsBridge使用和原理

标签：

Android Html5

What is JsBridge

近期在做一个项目，使用的是Native+H5的方式实现的。众所周知的是在Android中，Webview所实现的java与js的交互存在一些安全问题，并且这样的使用方式，没法让一套H5同时适配Android和iOS两个平台，因此，就需要有一个中间组件来实现js与本地的代码的交互，也就是JsBridge。

在Android平台我们选用了开源项目。整个库的结构也比较简单：一个用来注入的js文件，一个自定义的Webview（包括webViewClient），以及作为载体的BridgeHandler。

JsBridge的使用

在介绍JsBridge的原理之前，先简单介绍下JsBridge的使用，也可以看github上的表述。

JsBridge库集成

集成的方式有很多种:

使用作者推荐方式：

    repositories {  
        maven {url "https://jitpack.io"}  
    }  
    dependencies {  
        compile 'com.github.lzyzsd:jsbridge:1.0.4'
    }

使用源码集成
下载源码，将源码拷贝至自己的工程内，作为工程的文件。
自定义Module
下载源码，新建Module，将源码导入Module，并将项目依赖自定义的Module

使用JsBridge库

提供操作给Js调用

  webView.registerHandler("submitFromWeb", new BridgeHandler(){
      @Override
      public void handler(String data, CallBackFunction function){          function.onCallBack("submitFrom web exe, response data from java");
      }
  }

Js如果需要调用Java提供的方法时候，则需要调用这个Handler，而在注册时参数submitFromWeb将作为Js调用时使用的Key值。调用方式如下：

    WebViewJavascriptBridge.callHandler(        'submitFromWeb',
        {'param':str1},        function(responseData){            //这里打印的应该是上面Handler实现方法中的callback的入参：submitFrom web exe, response data from java
            document.getElementById("show").innerHTML = "response data from java, data = "+responseData
        }
    )

另外，库也提供了一个简单的没有回调的调用方式：

    webView.setDefaultHandler(new DefaultHandler());

Js调用的方式也可以简化为：

    WebViewJavascriptBridge.send(
        data,        function(responseData){            //java中DefaultHandler所实现的方法中callback所定义的入参
        }
    )

提供操作给Java调用
注册方法与Java雷同：

  WebViewJavascriptBridge.registerHandler("functionInJs", function(data, responseCallback) {      document.getElementById("show").innerHTML = ("data from Java: = " + data);      var responseData = "Javascript Says Right back aka!";
      responseCallback(responseData);
  });

Java调用Handler时，也跟Js一样：

    webView.callHandler("functionInJs", new Gson().toJson(user),        new CallBackFunction(){            @Override
            public void onCallBack(String data){
            }
        }
    );

同样的，在JS中也可以注册默认的Handler，以方便Java调用时，通过send方法发送数据

    bridge.init(function(message, responseCallback) {        console.log('JS got a message', message);        var data = {            'Javascript Responds': 'Wee!'
        };        console.log('JS responding with', data);
        responseCallback(data);
    });

java调用send方法：

    webView.send("hello");

JsBridge使用原理

在讲JsBridge的实现之前，首先要讲下各个文件的作用：

WebViewJavascriptBridge.js　　　　　被注入到各个页面的js文件；提供初始化，注册Handler，调用Handler等方法。
WebViewJavascriptBridge.java　　　　bridge接口文件,定义了发送信息的方法，由BridgeWebView来实现。
BridgeWebView.java　　　　　　　　　WebView的子类，提供了注册Handler，调用Handler等方法。
BridgeWebViewClient.java　　　　　　WebViewClient的子类，重写了ShouldOverrideUrlLoading，onPageFinish，onPageStart等方法。
BridgeHandler.java　　　　　　　　　作为Java与Js交互的载体。Java&Js通过Handler的名称来找到响应的Handler来操作。
DefaultBridgeHandler.java　　　　　　BridgeHandler的子类，不做任何操作。仅为Java提供默认的接收数据的Handler。
CallBackFunction.java　　　　　　　　回调函数，Handler处理完成后，用来给Js发送消息。
Message.java　　　　　　　　　　　　消息对象，用来封装与js交互时的json数据，callid，responseid等。
BridgeUtil.java　　　　　　　　　　　　工具类，提供从Url中提取数据，获取回调方法，注入js等方法。

JsBridge调用过程

Native初始化webview，注册Handler；加载页面完成后，将WebViewJavascriptBridge.js文件注入页面。查询消息队列是否有信息需要被接收。
H5页面初始化，注册Handler，查询消息队列是否有信息需要别接收。
用户操作，H5调用本地功能：Js将消息内容放在sendMessageQueue中，并设置iframe的src为yy://__QUEUE_MESSAGE__/
Webview设置的WebViewClient拦截到约定url，调用Webview的刷新消息队列的方法flushMessageQueue，此方法就是加载了一个url：javascript:WebViewJavascriptBridge._fetchQueue();,这也是Js中定义的方法，另外定义了一个回调；回调方法主要做了两件事：①判断Native是否为此返回数据保有响应回调操作，若有，则执行，若没有，则为判断callId，不为空时为这个callId初始化一个回调。②通过handlername判断是否为默认的Handler还是自定义的Handler，调用相应Handler的handler方法，入参为消息数据内容和第一步中定义的回调。【这段较为难消化，需要阅读代码来理解】
Js中_fetchQueue设置了iframe的src，内容为：yy://return/_fetchQueue/+第二步中放入sendMessageQueue中的消息内容。
WebViewClient拦截到url为yy://return/，调用WebView的handlerReturnData方法；通过url中定义的方法名，找到第四个步骤中定义的回调，并调用。回调方法走完后，删除此回调方法。
如果Js在调用Handler的时候设置了回调方法，也就是在第四步骤中的含有callId，就会调用queueMessage的方法，然后往下就是走Native给Js发送消息的步骤。
Ps: Native给Js发送消息的步骤跟上述从第三步骤到第七步骤完全相同，只不过Native和Js对象调换位置即可。

JsBridge的核心

JsBridge之所以能实现Native与Js相互调用的功能，其核心实现其实就是：

拦截Url
load url("javascript:js_method()");

先说第二点，Native调用Js，通过加载以javascript:开头的url即可实现调用Js的方法。这个很好理解，在web中也是通过这种方式调用Js的方法的。
然后细说下第一点的实现：

向body中添加一个不可见的iframe元素。通过拦截url的方法来执行相应的操作，但是页面本身不能跳转，所以改变一个不可见的iframe的src就可以让webview拦截到url，而用户是无感知的。
拦截url。通过shouldOverrideUrlLoading来拦截约定规则的Url，再做具体操作。
Ps： 添加iframe是H5自身可实现的，但是如果H5来实现的话，需要每个页面实现，且耦合较高；因此放在库里，通过加载完成注入的方式，则会降低耦合

先就这么多~~
留个思考的问题：无论是js发送消息给Native，还是Native发送消息给Js，首先都会发送一个_fetchQueue，然后再发送return;那这两步是否可以合并成一步呢？

作者：seph_von
链接：https://www.jianshu.com/p/910e058a1d63

点击查看更多内容