安卓与H5的通讯之jsbridge

背景

由于H5具有跨平台,热更新等优势,所以在app开发当中,我们经常会遇到js与java进行交互的情况。JsBridge中提供了WebViewJavascriptBridge来实现在安卓中js与java的相互调用。

依赖集成

在项目build.gradle加入

1
2
3
4
repositories {
// ...
maven { url "https://jitpack.io" }
}

在app的build.gradle加入

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

js调用java示例

Js:发送数据给Java同时监听回调函数

1
2
3
4
5
6
7
8
9
window.WebViewJavascriptBridge.callHandler(
'one',//需要调用安卓那边的方法名
'test-from-H5-one',//需要传的参数
function(responseData) {//回调方法
//TODO 回调处理
alert(responseData)

}
);

注意:callHandler()的第一个参数要与下面java里的registerHandler()里的第一个参数一致,要不然js无法确认要调用java的哪个Handler

Java:在WebViewJavascriptBridge监听接收数据

1
2
3
4
5
6
7
8
web_view.registerHandler("one", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
//TODO 业务逻辑处理代码
LogUtils.e("从H5传过来的数据" + data);
function.onCallBack("这是从Java返回的数据");
}
});

说明:registerHandler()需要两个参数,第一个参数为Handler的唯一标识,第二个参数为Handler的业务处理逻辑类。
开开心心写完代码进行测试却发现上面的代码没有发挥任何作用(并不是上面代码有问题,而是还有其它配置没设置好)

排错前的准备工作

由于在as中不知道如何调试js,所以只想到了打alert()的方式来调试

WebView中js里的alert()失效

在webView中加下这段代码

1
2
3
4
5
6
7
8
//让 h5页面中的 alert生效
web_view.setWebChromeClient(new WebChromeClient(){
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result)
{
return super.onJsAlert(view,url,message,result);
}
});

开启排错之路

registerHandler()不执行

经过各种反查资料,终于在JsBridge里的issue找到了问题所在。
解决方法:
1.删除setWebViewClient()
2.setWebViewClient()的参数使用BridgeWebViewClient类或者继承类
由于我的setWebViewClient()不能去掉,所以选择了第二种方法

1
2
3
4
5
6
7
8
 web_view.setWebViewClient(new BridgeWebViewClient(web_view) {
//覆盖shouldOverrideUrlLoading 方法
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {

return super.shouldOverrideUrlLoading(view, url);
}
});

js的callback()函数不执行

由于有了第一个问题的启发,我便直接去issue查找是否已经有解决办法,果不其然被我找到了
需要把WebViewJavascriptBridge.js放到assets文件夹下

-------------本文结束您的阅读与肯定是我持续装*的最大动力-------------