Android JS与原生交互，JS交互 ，JSBridge的使用方法

像我们在开发App的过程中难免会遇到App与前端H5的交互，那么我们就会碰到webView这样的控件，但是与前端JS交互起来会感觉到很繁琐，那么，我今天在这里发表一篇文章就是给你们解决原生的webView交互繁琐的问题。话不多说，直接开始吧：

简单介绍一下JSBridge:

它在Java和JavaScript之间架起了一座桥梁。
它提供了从js调用Java代码并从java调用js代码的安全方便的方法。
它是继承系统的webView所开发的一个库，使用起来其实跟系统的webView是一样的。

使用方法：

1.依赖

repositories {
    maven { url "https://jitpack.io" }
}
dependencies {
    implementation 'com.github.lzyzsd:jsbridge:1.0.4'
}

2.在你的res/layout/xxx.xml 里面构建你的BridgeWeb控件

3.在Activity.java文件里创建代码

public class BridgeWebActivity extends AppCompatActivity {
     private BridgeWebView webView;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           initView();
    }

    private void initView() {
          webView = findViewById(R.id.bridge_webView);
          
         //这里是关于web的一些配置
          configWebViewSettings();
         
          //***************************特别注意***********************
          //webView.setWebViewClient(...)这个方法一定不能写成new WebViewClient 
          //详细的问题请看步骤 4
          webView.setWebViewClient(new MyWebViewClient(webView){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return super.shouldOverrideUrlLoading(view, url);
            }

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
               //do you work
                super.onPageStarted(view, url, favicon);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                //do you work
                super.onPageFinished(view, url);
            }
        });
         webView.loadUrl("你的网址");
    }

    private void configWebViewSettings()  {
           //关于bridgeWeb的一些设置，我这里是根据一般的配置写的（可以根据你们的项目需求去修改）
           //上面介绍的时候已经说到bridgeWeb是继承自WebView的，所以webSetting可以自由的发挥了
          WebSettings webSettings = webView.getSettings();
          webSettings.setJavaScriptEnabled(true);//允许执行JS
          webSettings.setUseWideViewPort(true);
          webSettings.setLoadWithOverviewMode(true);
          webSettings.setAllowFileAccess(true); // 允许访问文件
          webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
          webSettings.setJavaScriptCanOpenWindowsAutomatically(true);//设置JS可以打开新的窗口
          webSettings.setLoadsImagesAutomatically(true);//支持自动加载图片
          webSettings.setTextZoom(100);
          webSettings.setSupportZoom(true);//支持缩放
          webSettings.setBuiltInZoomControls(true);//设置内置的缩放控件
          webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);//高性能渲染JS
          webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式
          webSettings.setDomStorageEnabled(true);// 开启 DOM storage API 功能
          webSettings.setDatabaseEnabled(true);//开启 database storage API 功能
    }
    
}

4.我们自己创建一个MyWebViewClient类 继承自 BridgeWebViewClient ,然后在我们的Activity里面去调用它。
*如果我们直接使用WebView的WebViewClient，会导致java调用JS或者，JS调用java方法失效；
因此我们这样去做：

 public class MyWebViewClient extends BridgeWebViewClient {
    public MyWebViewClient(BridgeWebView webView) {
        super(webView);
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        return super.shouldOverrideUrlLoading(view, url);
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
    }
}

5.JS调用java
在Java代码里注册一个方法：

        webView.registerHandler("showAndroidToast", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                  //do you work 
                  /**
                     data :  JS端传递过来的参数
                      function： 这个方法可以是告诉js ，方法已经被调用了
                  */
                 Toast.makeText(BridgeWebActivity.this, "被JS函数调用啦" + data, Toast.LENGTH_SHORT).show();
            }
        });

在JS里面写入代码：

WebViewJavascriptBridge.callHandler(
        'showAndroidToast'
        , {'param':'调用java代码块！'}
        , function(responseData) {
            //这里是调用成功的回调方法
            //responseData 是java端返回的参数
        }
    );

6.Java调用JS
在JS里面注册一个方法供Java调用

 WebViewJavascriptBridge.registerHandler("functionInJs", function(data, responseCallback) {
        //do you work
        
       //responseCallback 这个方法可以告诉java 自己被调用了
        responseCallback('我被调用啦');
    });

在java里面写入调用js的代码

 webView.callHandler("functionInJs", "传到js的参数", new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
            
                  //data : 是JS那边告诉java ,JS被调用成功啦
          
                Log.i(TAG, "onCallBack: " + data);
            }
        });

好啦！以上就是JSBridge的基本使用方法了，如果有什么问题或者错误的地方请在下方留言。谢谢！
JSBridge:https://github.com/lzyzsd/JsBridge