安卓与js互调

安卓与js互调

标签（空格分隔）： 安卓js互调

---

当下越来越多的app使用native代码调用js代码，或者js代码调用native代码，写一份代码，多个端都可以调用，虽然没有原生的流畅，但是不得不说这是其中一个趋势
下面就说说怎么实现，
首先安卓端需要依赖下面的库

强烈建议这个引用.

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

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

在java中使用

在layout中用此库中的jsbridge.BridgeWebView代替原生的webview

注册一个handler让js调用

java中普通注册

//第一个参数为名称
    webView.registerHandler("submitFromWeb", new BridgeHandler() {
        @Override
        public void handler(String data, CallBackFunction function) {
            Log.i(TAG, "handler = submitFromWeb, data from web = " + data);
            //同时,通过这个回调中的function对象,可以在此处调用到js中的方法,如下
            function.onCallBack("submitFromWeb exe, response data from Java");
        }
    });

js中只需要用这个方法就可以调用到java中注册的handler

    WebViewJavascriptBridge.callHandler(
        'submitFromWeb'//注意这个名称,必须跟java中的名称相同,否则不能调用
        , {'param': str1}
        , function(responseData) {
            document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
        }
    );

java中可以设置一个默认的handler,这样js发送消息给java时就不用指定handler的名字了,如下

java默认注册

    webView.setDefaultHandler(new DefaultHandler(){
            @Override
            public void handler(String data, CallBackFunction function) {
                Toast.makeText(getApplication(), data, LENGTH_SHORT).show();
                function.onCallBack("我来自安卓,回复js的默认消息");
            }
        });
    //这里最好有实现的方法,才好处理js中调用时发送过来的信息

js默认调用

    //不用指定handler名字,直接send方法就可以调用到默认的handler了,就是说send就是callHandler方法的一个简化版,只是省略掉了名称而已
    window.WebViewJavascriptBridge.send(
        data
        , function(responseData) {
            document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
        }
    );

上面是java中注册,让js调用,现在我们js中注册一个handler让java调用

js注册方法

//还是同样的方法,同样的套路,学习安卓的童鞋们看看就行了,不用关心
    WebViewJavascriptBridge.registerHandler("functionInJs", function(data, responseCallback) {
        document.getElementById("show").innerHTML = ("data from Java: = " + data);
        var responseData = "Javascript Says Right back aka!";
        //当然这个responseCallback就是我们java中的CallBackFunction,这里也同样的,虽然是js中注册让java调用,但是通过这个东西,可以再次调用到java中的东西
        responseCallback(responseData);
    });

java中通过callHandler方法调用js中注册的handler

java调用js,要指定名称,而且第二个参数为json类型

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

        }
    });

js中可以用init方法,这样java调用send方法时,就不用指定名称,这个init方法中提供了处理方式.同样的道理

js默认注册

    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默认调用js

    webView.send("hello");

注意

这个库将注入一个WebViewJavascriptBridge对象到window对象中,因此在js中,在使用WebViewJavascriptBridge之前,你需要检查一下WebViewJavascriptBridge是否存在,如果不存在,你可以添加一个监听,如下

    if (window.WebViewJavascriptBridge) {
        //do your work here
    } else {
        document.addEventListener(
            'WebViewJavascriptBridgeReady'
            , function() {
                //do your work here
            },
            false
        );
    }

从另一个角度来看：

安卓端调用js需要：
    js端注册,安卓端调用
    js端默认注册,安卓端默认调用
js调用工安卓端:
    安卓端注册,js端调用
    安卓端默认注册,js端默认调用

霸气的WebChromeClient

这里只是让安卓响应js的打开文件选择器,另外还有其他的功能,http://www.jianshu.com/p/2857d55e2f6e 这里有更多的用法

webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
                pickFile();
                mUploadMessage =  filePathCallback;
                return true;
            }
        });