像我们在开发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控件

android:id="@+id/bridge_webView"
android:layout_width="match_parent"
android:layout_height="match_parent">
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