devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android JS 通过JSBridge(BridgeWebView)相互调用详解_com.github.lzyzsd.jsbridge.bridgewebview

作者：不正经 | 2024-05-13 05:00:21

赞

踩

com.github.lzyzsd.jsbridge.bridgewebview

一.JSBridge GitHub链接

 

https://github.com/lzyzsd/JsBridge

 

 

 

 

 

 

 

二.AndroidStudio配置JsBridge

 

1.根目录Gradle配置

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

 

 

 

2.主目录Gradle配置

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

 

 

 

 

 

 

三.代码说明 Android JS 通过JSBridge交互

 

1.将需要调用的JS代码以.html格式放到src/main/assets文件夹里

 

 

 

2.lll.html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Test</title>
  8. </head>
  9. <body>
  10. <div class="input-field col s6">
  11.     <input placeholder="请输入数据" id="text1" type="text" class="validate">
  12. </div>
  13.  
  14. <button type="button" id="button1" onclick="testClick()">JS调用Android 协议好的方法</button>
  15.  
  16. <button type="button" id="button2" onclick="testClick2()">JS调用Android 默认</button>
  17. </body>
  18. <script>
  19.  
  20.          //JS调用Android方法：接收Android传递过来的数据，并做处理
  21.          function testClick() {
  22.  
  23.           //参数一：调用java中的方法   submitFromWeb是方法名，必须和Android中注册时候的方法名称保持一致
  24.           //参数二：返回给Android端的数据，可以为字符串，json等信息
  25.           //参数三：js接收到Android传递过来的数据之后的相应处理逻辑
  26.  
  27.             window.WebViewJavascriptBridge.callHandler(
  28.                'submitFromWeb'
  29.                , {'param': "Android你好，这是我JS传递给你的数据呀！！！"}
  30.                , function(responseData) {
  31.                     alert("JS接收到Android数据弹JS对话框："+responseData)
  32.                }
  33.            );
  34.        }
  35.  
  36.        //JS调用Android方法：接收Android传递过来的数据，并做处理 默认
  37.          function testClick2() {
  38.            var data2 = 'JS调用Android方法：接收Android传递过来的数据，并做处理 默认';
  39.           //参数一：调用java中的方法   submitFromWeb是方法名，必须和Android中注册时候的方法名称保持一致
  40.           //参数二：返回给Android端的数据，可以为字符串，json等信息
  41.           //参数三：js接收到Android传递过来的数据之后的相应处理逻辑
  42.  
  43.             window.WebViewJavascriptBridge.send(
  44.             data2,
  45.             function(responseData){
  46.             //java中DefaultHandler所实现的方法中callback所定义的入参
  47.             alert(responseData);
  48.             });
  49.        }
  50.  
  51.  
  52.  
  53.  
  54.        //自定义JS注册事件监听 connectWebViewJavascriptBridge 方法名可改
  55.        function connectWebViewJavascriptBridge(callback) {
  56.            if (window.WebViewJavascriptBridge) {
  57.                callback(WebViewJavascriptBridge)
  58.            } else {
  59.                document.addEventListener(
  60.                    'WebViewJavascriptBridgeReady'
  61.                    , function() {
  62.                        callback(WebViewJavascriptBridge)
  63.                    },
  64.                    false
  65.                );
  66.            }
  67.        }
  68.  
  69.  
  70.  
  71.         //注册回调函数，第一次连接时调用 初始化函数 connectWebViewJavascriptBridge和上面一致
  72.        connectWebViewJavascriptBridge(function(bridge) {
  73.  
  74.             //初始化 必须有 Android 通过 JSBridge 调用 默认JS bridge.init bridgeWebView.send调用
  75.            bridge.init(function(message, responseCallback) {
  76.                var data = {
  77.                    'Javascript Responds': 'Android调用JS初始化方法!'
  78.                };
  79.                responseCallback(data);
  80.            });
  81.  
  82.  
  83.            //Android调用js方法：functionInJs方法名称需要保持一致 ，并返回给Android通知
  84.            bridge.registerHandler("functionInJs", function(data, responseCallback) {
  85.                alert("JS接收到Android数据弹JS对话框："+data);
  86.                var data2 = document.getElementById("text1").value;
  87.                var responseData =data2;
  88.                responseCallback(responseData);
  89.            });
  90.  
  91.  
  92. 		   //Android调用js方法：functionInJs方法名称需要保持一致 ，并返回给Android通知
  93.            bridge.registerHandler("functionInJs111", function(data, responseCallback) {
  94.                alert("JS接收到Android数据弹JS对话框111："+data);
  95.                var data2 = "dddddddddddddddddddddddddddddddddd";
  96.                var responseData =data2;
  97.                responseCallback(responseData);
  98.            });
  99.        })
  100.  
  101.  
  102.  
  103. </script>
  104. </html>

 

 

 

3.Android代码

  1. package com.wjn.customwebviewjs;
  2.  
  3. import android.content.DialogInterface;
  4. import android.os.Bundle;
  5. import android.support.v7.app.AlertDialog;
  6. import android.support.v7.app.AppCompatActivity;
  7. import android.view.View;
  8. import android.webkit.JsResult;
  9. import android.webkit.WebChromeClient;
  10. import android.webkit.WebView;
  11. import android.widget.TextView;
  12. import android.widget.Toast;
  13.  
  14. import com.github.lzyzsd.jsbridge.BridgeHandler;
  15. import com.github.lzyzsd.jsbridge.BridgeWebView;
  16. import com.github.lzyzsd.jsbridge.CallBackFunction;
  17. import com.github.lzyzsd.jsbridge.DefaultHandler;
  18.  
  19. public class JsBridgeActivity extends AppCompatActivity {
  20.  
  21.     private TextView textView;
  22.     private TextView textView111;
  23.     private TextView textView2;
  24.     private BridgeWebView bridgeWebView;
  25.  
  26.     @Override
  27.     protected void onCreate(Bundle savedInstanceState) {
  28.         super.onCreate(savedInstanceState);
  29.         setContentView(R.layout.activity_jsbridge);
  30.         initView();
  31.     }
  32.  
  33.     /**
  34.      * 初始化各种View
  35.      */
  36.  
  37.     private void initView() {
  38.         textView=findViewById(R.id.activity_jsbridge_textview1);
  39.         textView111=findViewById(R.id.activity_jsbridge_textview111);
  40.         textView2=findViewById(R.id.activity_jsbridge_textview2);
  41.         bridgeWebView=findViewById(R.id.activity_jsbridge_bridgewebview);
  42.         bridgeWebView.setWebChromeClient(new myWebChromeClient());
  43.         bridgeWebView.loadUrl("file:///android_asset/lll.html");
  44.  
  45.         //Android 通过 JSBridge 调用 JS
  46.         textView.setOnClickListener(new View.OnClickListener() {
  47.             @Override
  48.             public void onClick(View v) {
  49.  
  50.                 /**
  51.                  * callHandler方法 Android 调用JS
  52.                  * 参数1 handlerName：JS中规定的方法 Android JS 关于该方法名要一致
  53.                  * 参数2 data：Android传递给JS的参数
  54.                  * 参数3 callBack：回调 JS返回给Android的返回值
  55.                  * */
  56.  
  57.                 bridgeWebView.callHandler("functionInJs", "JS你好，这是我Android传递给你的数据呀！！！", new CallBackFunction() {
  58.                     @Override
  59.                     public void onCallBack(String data) {
  60.                         Toast.makeText(JsBridgeActivity.this, data, Toast.LENGTH_LONG).show();
  61.                     }
  62.                 });
  63.             }
  64.         });
  65.  
  66.         //Android 通过 JSBridge 调用 JS 111
  67.         textView111.setOnClickListener(new View.OnClickListener() {
  68.             @Override
  69.             public void onClick(View v) {
  70.                 bridgeWebView.callHandler("functionInJs111", "JS你好，这是我Android传递给你的数据呀！！！111", new CallBackFunction() {
  71.                     @Override
  72.                     public void onCallBack(String data) {
  73.                         Toast.makeText(JsBridgeActivity.this, data, Toast.LENGTH_LONG).show();
  74.                     }
  75.                 });
  76.             }
  77.         });
  78.  
  79.         //JS 通过 JSBridge 调用 Android
  80.         bridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
  81.             @Override
  82.             public void handler(String data, CallBackFunction function) {
  83.                 //JS传递给Android
  84.                 Toast.makeText(JsBridgeActivity.this,  data, Toast.LENGTH_LONG).show();
  85.                 //Android返回给JS的消息
  86.                 function.onCallBack("JS你好，这是我Android传递给你的数据呀！！！");
  87.             }
  88.         });
  89.  
  90.         //Android 通过 JSBridge 调用 默认JS bridge.init (不需要配置handlerName)
  91.         textView2.setOnClickListener(new View.OnClickListener() {
  92.             @Override
  93.             public void onClick(View v) {
  94.                 bridgeWebView.send("Android端通过调用JS默认方法,传递给JS的参数", new CallBackFunction() {
  95.                     @Override
  96.                     public void onCallBack(String data) {
  97.                         //JS传递给Android
  98.                         Toast.makeText(JsBridgeActivity.this,  data, Toast.LENGTH_LONG).show();
  99.                     }
  100.                 });
  101.             }
  102.         });
  103.  
  104.         //JS 通过 JSBridge 调用 Android默认
  105.         bridgeWebView.setDefaultHandler(new DefaultHandler(){
  106.  
  107.             @Override
  108.             public void handler(String data, CallBackFunction function) {
  109.                 super.handler(data, function);
  110.                 Toast.makeText(JsBridgeActivity.this, data, Toast.LENGTH_SHORT).show();
  111.                 function.onCallBack("JS 通过 JSBridge 调用 Android默认");
  112.             }
  113.         });
  114.     }
  115.  
  116.     /**
  117.      * WebChromeClient 实现类
  118.      * */
  119.  
  120.     public class myWebChromeClient extends WebChromeClient{
  121.  
  122.         @Override
  123.         public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
  124.             //创建一个Builder来显示网页中的对话框
  125.             new AlertDialog.Builder(JsBridgeActivity.this)
  126.                     .setTitle("Alert对话框")
  127.                     .setMessage(message)
  128.                     .setPositiveButton("确定", new DialogInterface.OnClickListener() {
  129.                         @Override
  130.                         public void onClick(DialogInterface dialog, int which) {
  131.                             result.confirm();
  132.                         }
  133.                     }).setCancelable(false).show();
  134.             return true;
  135.         }
  136.     }
  137.  
  138. }

 

 

4.结果

Android 调用JS

 

 

Android 调用JS 111

 

 

 

 

Android 调用JS默认

 

 

JS调用Android

 

 

JS调用Android默认

 

 

 

 

附：代码下载：https://github.com/wujianning/CustomWebViewJS

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/561981
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号