Android与JS的交互之jsbridge使用

最新推荐文章于 2024-04-29 07:30:00 发布

柠檬j

最新推荐文章于 2024-04-29 07:30:00 发布

阅读量419

点赞数 1

本文链接：https://blog.csdn.net/CrysSun/article/details/80250403

版权

jsbridge

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

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

app/src/main/新建assets/自己命名jsbridge.html

内容

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <button onClick="jsToJavaDefault()">js发送给java默认接收</button>
</div>
<br/>
<div>
    <button onClick="jsToJavaSpec()">js发送给java指定接收</button>
</div>
<br/>
<div id="show">打印信息</div>
</body>

<script>

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

       //回调函数，接收java发送来的数据
       setupWebViewJavascriptBridge(function(bridge) {
           //默认接收
           bridge.init(function(message, responseCallback) {
               document.getElementById("show").innerHTML = '默认接收到Java的数据： ' + message;

               var responseData = 'js默认接收完毕，并回传数据给java';
               responseCallback(responseData); //回传数据给java
           });

           //指定接收，参数functionInJs 与java保持一致
           bridge.registerHandler("functionInJs", function(data, responseCallback) {
               document.getElementById("show").innerHTML = '指定接收到Java的数据： ' + data;

               var responseData = 'js指定接收完毕，并回传数据给java';
               responseCallback(responseData); //回传数据给java
           });
       })
 //js传递数据给java
    function jsToJavaDefault() {
       var data = '发送数据给java默认接收';
       window.WebViewJavascriptBridge.send(
           data
           , function(responseData) { //处理java回传的数据
              document.getElementById("show").innerHTML = responseData;
           }
       );
   }

   function jsToJavaSpec() {
       var data='发送数据给java指定接收';
       window.WebViewJavascriptBridge.callHandler(
           'submitFromWeb' //指定接收参数 submitFromWeb与java一致
           ,data
           , function(responseData) { //处理java回传的数据
              document.getElementById("show").innerHTML = responseData;
           }
       );
   }

</script>
</html>

布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.bwie.sfw.myjsbridge2.MainActivity">

    <Button
        android:id="@+id/ja_send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="java发送js默认接收" />

    <Button
        android:id="@+id/ja_send_it"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="java发送js指定接收" />

    <com.github.lzyzsd.jsbridge.BridgeWebView
        android:id="@+id/bridge_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></com.github.lzyzsd.jsbridge.BridgeWebView>

</LinearLayout>

主要代码:

 bridge_view.loadUrl("file:///android_asset/jsbridge.html");

        //支持App内部javascript交互
        bridge_view.getSettings().setJavaScriptEnabled(true);

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button ja_send;
    private Button ja_send_it;
    private BridgeWebView bridge_view;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();


        bridge_view.loadUrl("file:///android_asset/jsbridge.html");

        //支持App内部javascript交互
        bridge_view.getSettings().setJavaScriptEnabled(true);
//        //自适应屏幕
//        bridge_view.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
//        bridge_view.getSettings().setLoadWithOverviewMode(true);
//        //设置可以支持缩放
//        bridge_view.getSettings().setSupportZoom(true);
//        //扩大比例的缩放
//        bridge_view.getSettings().setUseWideViewPort(true);
//        //设置是否出现缩放工具
//        bridge_view.getSettings().setBuiltInZoomControls(true);

        //默认接收
        bridge_view.setDefaultHandler(new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                String msg = "默认接收到js的数据：" + data;
                Toast.makeText(MainActivity.this, msg, Toast.LENGTH_LONG).show();

                function.onCallBack("java默认接收完毕，并回传数据给js"); //回传数据给js
            }
        });
        //指定接收 submitFromWeb 与js保持一致
        bridge_view.registerHandler("submitFromWeb", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                String msg = "指定接收到js的数据：" + data;
                Toast.makeText(MainActivity.this, msg, Toast.LENGTH_LONG).show();

                function.onCallBack("java指定接收完毕，并回传数据给js"); //回传数据给js
            }
        });
    }

    private void initView() {
        ja_send = (Button) findViewById(R.id.ja_send);
        ja_send_it = (Button) findViewById(R.id.ja_send_it);
        bridge_view = (BridgeWebView) findViewById(R.id.bridge_view);

        ja_send.setOnClickListener(this);
        ja_send_it.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.ja_send:
                bridge_view.send("发送数据默认接收", new CallBackFunction() {
                    @Override
                    public void onCallBack(String data) {
                        Toast.makeText(MainActivity.this, "ss"+data, Toast.LENGTH_SHORT).show();
                    }
                });
                break;
            case R.id.ja_send_it:

                bridge_view.callHandler("functionInJs", "指定接收", new CallBackFunction() {
                    @Override
                    public void onCallBack(String data) {
                        Toast.makeText(MainActivity.this, "ss"+data, Toast.LENGTH_SHORT).show();
                    }
                });
                break;
        }
    }
}

柠檬j

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Android与JS的交互之jsbridge使用

jsbridgerepositories { // ... maven { url "https://jitpack.io" }}dependencies { compile 'com.github.lzyzsd:jsbridge:1.0.4'}app/src/main/新建assets/自己命名jsbridge.html内容&lt;html lang="en"&gt;...
复制链接

扫一扫