前言

因为里的内容很多，自己第一次看这个东西，一下子还是一头雾水的，关于与的交互，之前都是直接使用来实现的，可是后来并没有深入去研究这个东西，原先项目使用到的，也因为仅仅只是展示页面，为了优化，也换成了，之后再也没接触到Android与JS交互相关的知识，就趁这个机会，把这方面的一点心得记录一下。

准备工作

1.首先，需要在根目录下的文件中加上：

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

2.然后，需要在目录下的文件中加上依赖：

implementation 'com.github.lzyzsd:jsbridge:1.0.4'

开始使用

一、实现通过JavaScript调用Android方法

1.在文件夹下新建一个文件夹，然后在里面新建一个文件，内容如下所示：

    




HTML

    


    Show Contents:

2.需要在文件中，加上布局：

3.在中注册一个方法，用于调用，并且使用加载文件，代码如下所示：

        bridgeWebview.registerHandler("jsCallAndroid", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                tvContent.setText("params from JavaScript: " + data);
                JSONObject jsonObject = new JSONObject();
                try {
                    jsonObject.put("nickname", "braveheart");
                    jsonObject.put("age", "18");
                    jsonObject.put("address", "China");
                } catch (JSONException e) {
                    e.printStackTrace();
                }
                function.onCallBack("return data from Android: "+jsonObject.toString());
            }
        });
        bridgeWebview.loadUrl("file:///android_asset/demo.html");

上面主要是为了使与的交互更为形象，所以就模拟成一个网络请求获取用户信息的方式来说明，其意思是，当从调用这个方法时，需要传入参数，也就是，然后会从返回用户信息，也就是：

{"nickname":"braveheart","age":"18","address":"China"}

4.运行效果，如下图所示：

上部分是文件页面，下部分是原生页面，其中可以看到，当点击按钮时，调用方法，页面的控件获取到了传过来的参数，并且在页面确实从返回了用户信息：

{"nickname":"braveheart","age":"18","address":"China"}

二、实现在Android里调用JavaScript方法

1.在文件中，加上一个控件，代码如下所示：

2.需要在文件里的方法里加上一个让调用的方法，代码如下所示：

      bridge.registerHandler("androidCallJS", function(data, responseCallback) {
        document.getElementById("show").innerHTML =
          "params from Android：" + data;
        if (responseCallback) {
          var responseData = `{"nickname":"braveheart","age":"18","address":"China"}`;
          responseCallback(responseData);
        }
      });

3.在中加上如下代码，用于调用里的方法，代码如下所示：

        btCallJS.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                bridgeWebview.callHandler("androidCallJS","{ name: \"weihao\" }", new CallBackFunction() {
                    @Override
                    public void onCallBack(String data) {
                        tvContent.setText("return data from JavaScript: "+data);
                    }
                });
            }
        });

以上也是通过模拟网络请求获取用户信息的方式，来形象说明与的交互，只不过改成了从传入用户名，从返回用户信息而已。 

4.运行效果，如下图所示：

 示例代码：