×

JsBridge使用和原理

96
seph_von
2017.03.16 17:19* 字数 1624

What is JsBridge

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

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

JsBridge的使用

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

JsBridge库集成

集成的方式有很多种:

  1. 使用作者推荐方式:
    repositories {  
        maven {url "https://jitpack.io"}  
    }  
    dependencies {  
        compile 'com.github.lzyzsd:jsbridge:1.0.4'
    }
  1. 使用源码集成
    下载源码,将源码拷贝至自己的工程内,作为工程的文件。
  2. 自定义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调用过程

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

JsBridge的核心

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

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

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

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

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

Android随笔
Web note ad 1