Android 与 JS 的交互：JsBridge 的简单使用

关注

发布于: 2020 年 05 月 23 日

前言因为JsBridge里的example内容很多，自己第一次看这个东西，一下子还是一头雾水的，关于Android与JavaScript的交互，之前都是直接使用WebView来实现的，可是后来并没有深入去研究这个东西，原先项目使用到的WebView，也因为仅仅只是展示html页面，为了优化，也换成了TBS腾讯浏览服务，之后再也没接触到Android与JS交互相关的知识，就趁这个机会，把这方面的一点心得记录一下。
﻿
准备工作1.首先，需要在根目录下的build.gradle文件中加上：
repositories {
    // ...
    maven { url "https://jitpack.io" }
}
﻿
2.然后，需要在app目录下的build.gradle文件中加上依赖：
implementation 'com.github.lzyzsd:jsbridge:1.0.4'
开始使用一、实现通过JavaScript调用Android方法1.在src/main文件夹下新建一个assets文件夹，然后在里面新建一个demo.html文件，内容如下所示：
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
</head>
<body style="background-color:antiquewhite;">
HTML
<p>
    <input
            type="button"
            value="Call Android Method"
            onclick="testClicked()"
    />
</p>
<p style="width: 100%;">
    <span id="show">Show Contents:</span>
</p>
</body>
<script>
    function testClicked() {
      window.WebViewJavascriptBridge.callHandler(
        "jsCallAndroid",
        { name: "weihao" },
        function(responseData) {
          document.getElementById("show").innerHTML = responseData;
        }
      );
    }
    /**
      这个库将把WebViewJavascriptBridge对象注入到窗口对象。
      所以在您的js中，在使用WebViewJavascriptBridge之前，
      必须检测WebViewJavascriptBridge是否存在。
      如果WebViewJavascriptBridge未退出，
      则可以侦听WebViewJavascriptBridgeReady事件
    */
    connectWebViewJavascriptBridge(function(bridge) {
      bridge.init(function(message, responseCallback) {
        if (responseCallback) {
          responseCallback(data);
        }
      });
    });
    function connectWebViewJavascriptBridge(callback) {
      if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge);
      } else {
        document.addEventListener(
          "WebViewJavascriptBridgeReady",
          function() {
            callback(WebViewJavascriptBridge);
          },
          false
        );
      }
    }
  </script>
</html>
2.需要在activity_main.xml文件中，加上布局：
    <com.github.lzyzsd.jsbridge.BridgeWebView
        android:id="@+id/bridgeWebview"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <TextView
        android:id="@+id/tv_content"
        app:layout_constraintTop_toBottomOf="@+id/bt_calljs"
        app:layout_constraintLeft_toLeftOf="@+id/bt_calljs"
        android:layout_width="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Content"
        android:layout_height="wrap_content"/>
3.在MainActivity.java中注册一个方法jsCallAndroid，用于JS调用，并且使用loadUrl加载demo.html文件，代码如下所示：
        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");
上面主要是为了使Android与JS的交互更为形象，所以就模拟成一个网络请求获取用户信息的方式来说明，其意思是，当从JS调用这个Android方法jsCallAndroid时，需要传入参数data，也就是{ "name" : "weihao" }，然后会从Android返回用户信息，也就是：
{"nickname":"braveheart","age":"18","address":"China"}
4.运行效果，如下图所示：
上部分是demo.html文件页面，下部分是Android原生页面，其中可以看到，当点击Call Android Method按钮时，JS调用Android方法jsCallAndroid，Android页面的TextView控件获取到了传过来的参数{ "name" : "weihao" }，并且在demo.html页面确实从Android返回了用户信息：
{"nickname":"braveheart","age":"18","address":"China"}
﻿
二、实现在Android里调用JavaScript方法﻿
1.在activity_main.xml文件中，加上一个Button控件，代码如下所示：
    <Button
        android:id="@+id/bt_call_js"
        app:layout_constraintTop_toBottomOf="@+id/tv_android"
        app:layout_constraintLeft_toLeftOf="@+id/tv_android"
        android:layout_width="wrap_content"
        android:textAllCaps="false"
        android:text="Call JavaScript Method"
        android:layout_height="wrap_content"/>
2.需要在demo.html文件里的connectWebViewJavascriptBridge方法里加上一个让Android调用的方法androidCallJS，代码如下所示：
      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.在MainActivity.java中加上如下代码，用于调用JS里的androidCallJS方法，代码如下所示：
        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);
                    }
                });
            }
        });
以上也是通过模拟网络请求获取用户信息的方式，来形象说明Android与JS的交互，只不过改成了从Android传入用户名，从JS返回用户信息而已。 
4.运行效果，如下图所示：
﻿
 示例代码：https://github.com/BRAVE2HEART/JsBridge-example
﻿