android使用JSBridge机制原理

android使用JSBridge机制原理

一、什么是JSBridge？
JSBridge（JavaScriptBridge）顾名思义就是用JavaScript搭建的桥梁，那连接的是哪两端呢？–一端是web，一端是native。我们搭建这座桥的目的也很简单，让native可以调用web的js代码，让web可以 “调用” 原生的代码。请注意这个我加了 引号的调用，它并不是直接调用，而是可以根据web和native约定好的规则来通知native要做什么，native可以更具这个来执行相应的代码。
JSBridge另一个叫法及大家熟知的Hybrid app技术。

流程：H5->通过某种方式触发一个url->Native捕获到url,进行分析->原生做处理->Native调用H5的JSBridge对象传递回调。

二、JSBridge比传统的WebView/View/UIWeb相比有什么不同？
有以下考虑才使用JSBridge：

• Android4.2以下,addJavascriptInterface方式有安全漏掉。
• iOS7以下,JS无法调用Native。
• url scheme交互方式是一套现有的成熟方案,可以完美兼容各种版本，对以前老版本技术的兼容。

三、什么是URL scheme？
url scheme是一种类似于url的链接,是为了方便app直接互相调用设计的。具体来讲如果是系统的url scheme,则打开系统应用,否则找看是否有app注册这种scheme,打开对应app。
注：这种scheme必须原生app注册后才会生效。

而在我们实际的开发中，app不会注册对应的scheme,而是由前端页面通过某种方式触发scheme(如用iframe.src),然后Native用某种方法捕获对应的url触发事件,然后拿到当前的触发url,根据定义好的协议,分析当前触发了那种方法。

四、JSBridge技术实现
要实现JSBridge,我们需要按以下步骤分析：

• 第一步:设计出一个Native与JS交互的全局桥对象。
• 第二步:JS如何调用Native。
• 第三步:Native如何得知api被调用。
• 第四步:分析url-参数和回调的格式。
• 第五步:Native如何调用JS。
• 第六步:H5中api方法的注册以及格式

JSBridge的完整流程可总结为：

五、android集成JSBridge

5.1 接入有两种方式：

方式1：直接导入JSBridge的library包即可, AndroidStudio导library包请看博客：AndroidStudio怎样导入library项目开源库
方式2：引入库，在bulid.gradle中添加如下代码
在bulid.gradle（Project.XXX）中allprojects添加

repositories {
    maven { url "https://jitpack.io" }
}

同时在bulid.gradle（Module.app）中添加

dependencies {
    compile 'com.github.lzyzsd:jsbridge:1.0.4'
}

5.2 使用方式
5.2.1 默认发送方式
java:

 mBridgeWebView.send("发送数据给web默认接收",new CallBackFunction(){
                    @Override
                    public void onCallBack(String data) {
                        Log.e(TAG, "来自web的回传数据：" + data);
                    }
                });

js:

bridge.init(function(message, responseCallback) {
   
               bridgeLog('默认接收收到来自Java数据： ' + message);
               var responseData = '默认接收收到来自Java的数据，回传数据给你';
               responseCallback(responseData);
           });

5.2.2 默认接收方式
java：

 mBridgeWebView.setDefaultHandler(new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                Log.e(TAG,"DefaultHandler接收全部来自web的数据："+data);
                function.onCallBack("DefaultHandler收到Web发来的数据，回传数据给你");
            }
        });

js: