2020-11-10

最新推荐文章于 2023-07-05 10:41:25 发布

程序邦

最新推荐文章于 2023-07-05 10:41:25 发布

阅读量403

点赞数

分类专栏： Android 项目实战

本文链接：https://blog.csdn.net/jiankeufo/article/details/109599260

版权

Android 项目实战专栏收录该内容

143 篇文章 0 订阅

订阅专栏

Android 与 JS 交互 com.github.lzyzsd:jsbridge

记录心得：

准备工作

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

程序邦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2020-11-10

Android 与 JS 交互com.github.lzyzsd:jsbridge记录心得：准备工作1.首先，需要在根目录下的build.gradle文件中加上：repositories {// ...maven { url "https://jitpack.io" }}2.然后，需要在app目录下的build.gradle文件中加上依赖：implementation 'com.github.lzyzsd:jsbridge:1.0.4'开始...
复制链接

扫一扫