美文网首页
Android WebViewJavaScriptBridge

Android WebViewJavaScriptBridge

作者: Ghost小新 | 来源:发表于2018-02-01 17:05 被阅读0次

    将jsbridge引入我们的工程

    Eclispe

    导入jar包, 或者直接copyjar源码, jar可以到gitHub上下载。

    Android Studio

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

    JS调用原生并传递数据

    注:有两种注册方法
    android代码
    1:

     mWebView.registerHandler("test", new BridgeHandler() {
                @Override
                public void handler(String data, CallBackFunction function) {
               function.onCallBack("指定Handler收到Web发来的数据,回传数据给你");
    }
    

    2:

     mWebView.setDefaultHandler(new BridgeHandler() {
                @Override
                public void handler(String data, CallBackFunction function) {
                    function.onCallBack("指定Handler收到Web发来的数据,回传数据给你");
                }
            });
    

    js代码
    1:

    function test() {
               //调用本地java方法
               //第一个参数是 调用java的函数名字 第二个参数是要传递的数据 第三个参数js在被回调后具体执行方法,responseData为java层回传数据
               var data='发送消息给java代码指定接收';
               window.WebViewJavascriptBridge.callHandler(
                   'test'
                   ,data
                   , function(responseData) {
                       bridgeLog('来自Java的回传数据: ' + responseData);
                   }
               );
           }
    

    2:

    function test() {
               //发送消息给java代码
               var data = '发送消息给java代码全局接收';
    
               window.WebViewJavascriptBridge.send(
                   data
                   , function(responseData) {
                      bridgeLog('来自Java的回传数据: ' +responseData);
                   }
               );
           }
    

    原生调用JS

    js代码

     //注册事件监听
           function test(callback) {
               if (window.WebViewJavascriptBridge) {
                   callback(WebViewJavascriptBridge)
               } else {
                   document.addEventListener(
                       'WebViewJavascriptBridgeReady'
                       , function() {
                           callback(WebViewJavascriptBridge)
                       },
                       false
                   );
               }
           }
    

    在使用WebViewJavaScriptBridge的时候需要首先判断一下WebViewJavaScriptBridge是否存在,如果不存在需要通过添加监听'WebViewJavascriptBridgeReady'来监听

    //注册回调函数,第一次连接时调用 初始化函数
           connectWebViewJavascriptBridge(function(bridge) {
               bridge.init(function(message, responseCallback) {
                   bridgeLog('默认接收收到来自Java数据: ' + message);
                   var responseData = '默认接收收到来自Java的数据,回传数据给你';
                   responseCallback(responseData);
               });
    
               bridge.registerHandler("test", function(data, responseCallback) {
                   bridgeLog('指定接收收到来自Java数据: ' + data);
                   var responseData = '指定接收收到来自Java的数据,回传数据给你';
                   responseCallback(responseData);
               });
           })
    

    android代码
    发送数据默认接收

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

    注:回调函数CallBackFunction()可为空

    发送数据给指定方法

    mWebView.callHandler("test","发送数据给web指定接收",new CallBackFunction(){
                        @Override
                        public void onCallBack(String data) {
                            Log.e(TAG, "来自web的回传数据:" + data);
                        }
                    });
    

    相关文章

      网友评论

          本文标题:Android WebViewJavaScriptBridge

          本文链接:https://www.haomeiwen.com/subject/vpkxixtx.html