一、利用JsBridge实现Native与H5的双向通信
Android中的JSBridge是H5与Native通信的桥梁，其作用是实现H5与Native间的双向通信。在Android中展现H5也就用到了Webview，之前写了一篇文章Android WebView简单使用以及实现native与h5交互,主要就是介绍一个webview的用法介绍及WebViewClient和WebChromeClient一些常用的方法。在结尾的时候简单介绍了下Native与H5的相互调用，也没怎么讲具体怎么用，今天就在这里做一下笔记。
既然这里讲述了JsBridge，所以可以移步这里看看lzyzsd/JsBridge，里面有介绍使用方法。我这下面也接着啰嗦一下：
1、引入资源文件
repositories {
// ...
maven { url "https://jitpack.io" }
}
dependencies {
compile 'com.github.lzyzsd:jsbridge:1.0.4'
}
2、布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.github.lzyzsd.jsbridge.BridgeWebView
android:id="@+id/JsBridgeWebView"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.github.lzyzsd.jsbridge.BridgeWebView>
<Button
android:id="@+id/android_call_js"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Android调用js"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
3、在项目assets目录下存放的以下文件
- jsbridge.js文件
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener('WebViewJavascriptBridgeReady', function () {
callback(WebViewJavascriptBridge)
}, false)
}
}
connectWebViewJavascriptBridge(function (bridge) {
bridge.init(function (message, responseCallback) {
var data = {'Javascript Responds': 'Wee!'}
responseCallback(data)
})
})
//H5调用Native方法
function JsCallAndroid(data) {
window.WebViewJavascriptBridge.callHandler(
'JsCallAndroid'
,data
, function(responseData) {
alert(responseData)
}
);
}
function JsCallAndroid2() {
window.WebViewJavascriptBridge.callHandler(
'JsCallAndroid2'
,''
, function(responseData) {
alert(responseData)
}
);
}
//Native调用H5方法
bridge.registerHandler("functionInJs", function(data, responseCallback) {
alert(data);
var responseData = "我接受到了安卓的调用";
responseCallback(responseData);
});
- index.html文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>JsBridgeDemo</title>
</head>
<body>
<div class="container-fluid">
<input type="button" value="H5调用Native方法" style="margin-top: 64px" onclick="JsCallAndroid('hello，Android')"/>
</div>
<p>
<input type="button" id="enter" value="H5调用Native方法2" onclick="JsCallAndroid2();"/>
<p>
<script type="text/javascript" src='jsbridge.js'></script>
</body>
</html>
4、在对应activity中调用
button = (Button) findViewById(R.id.android_call_js);
bridgeWebView = (BridgeWebView) findViewById(R.id.JsBridgeWebView);
bridgeWebView.setDefaultHandler(new DefaultHandler());
bridgeWebView.setWebChromeClient(new WebChromeClient());
bridgeWebView.setWebViewClient( new BridgeWebViewClient(bridgeWebView));
bridgeWebView.loadUrl("file:///android_asset/index.html");
/**
* js发送给按住消息 JsCallAndroid是js调用的方法名 安卓\返回给js
*/
bridgeWebView.registerHandler("JsCallAndroid", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
//显示接收的消息
showToast(data);
//返回给html的消息
function.onCallBack( "返回给Toast的alert");
}
});
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
/**
* 给Html发消息 js接收并返回data
*/
bridgeWebView.callHandler("functionInJs", "调用js的方法", new CallBackFunction() {
@Override
public void onCallBack(String data) {
showToast("===" + data);
}
});
}
});
下面这里的代码段目的就是在Android端注册H5调用native方法的回调，这里的JsCallAndroid要和jsbridge.js文件中的window.WebViewJavascriptBridge.callHandler中的key保持一致也为JsCallAndroid：
/**
* js发送给按住消息 JsCallAndroid是js调用的方法名 安卓\返回给js
*/
bridgeWebView.registerHandler("JsCallAndroid", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
//显示接收的消息
showToast(data);
//返回给html的消息
function.onCallBack( "返回给Toast的alert");
}
});
5、上述的bridgeWebView.registerHandler实现的是单个回调事件的注册，下面我们实现批量注册本地java方法，以供js端调用
先写一个回调接口：
import com.github.lzyzsd.jsbridge.CallBackFunction;
public interface JsHandler {
public void OnHandler(String handlerName, String responseData, CallBackFunction function);
}
在对应使用的activity中添加以下方法：
/**
* 批量注册本地java方法，以供js端调用
*
* @param handlerNames 方法名称数组
* @param handler 回调接口
*/
public void registerHandlers(final ArrayList<String> handlerNames, final JsHandler handler) {
if (handler != null) {
for (final String handlerName : handlerNames) {
bridgeWebView.registerHandler(handlerName, new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
handler.OnHandler(handlerName, data, function);
}
});
}
}
}
那么如何使用呢？将第4模块中的bridgeWebView.registerHandler方法替换如下：
ArrayList<String> mHandlers = new ArrayList<>();
mHandlers.add("JsCallAndroid");
mHandlers.add("JsCallAndroid2");
registerHandlers(mHandlers, new JsHandler() {
@Override
public void OnHandler(String handlerName, String responseData, CallBackFunction function) {
LogUtil.d(responseData);
if (handlerName.equals("JsCallAndroid")){
Log.d("TAG","JsCallAndroid");
}else if (handlerName.equals("JsCallAndroid2")){
Log.d("TAG","JsCallAndroid2");
}
}
});
二、Android系统H5调用原生的方式
- 对WebView进行初始化
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true); //允许在WebView中使用js
- 创建一个类JsMethod，提供给js调用的方法工具类（注意：在Android4.2之后，为了提高代码安全性，方法必须使用注解@JavascriptInterface，否则无法调用）
@JavascriptInterface
//andorid4.2（包括android4.2）以上，如果不写该注解，js无法调用android方法
public static void showToast(String json){
Toast.makeText(context, json, Toast.LENGTH_SHORT).show();
}
- 在WebView初始化代码中执行如下代码
//创建上面创建类的对象
JsMethod m = new JsMethod(this, webview);
//其实就是告诉js，我提供给哪个对象给你调用，这样js就可以调用对象里面的方法
//第二个参数就是该类中的字符串常量
webview.addJavascriptInterface(m,"javaInterface");
- js中调用native方法
function showToast(data) {
var json = {"data":data};
console.log("js调用Android Native方法："+json);
//javaInterface是上面所说的字符串映射对象
window.javaInterface.showToast(JSON.stringify(json));
}
- natvie中调用H5方法
- 在js中添加如下方法
//有参有返回值的方法
function sum(a,b) {
return a+b;
}
//有参无返回值的方法
function alertMessage(message) {
alert(message);
}
- 在Native中调用对应的js方法
findViewById(R.id.native_call_js).setOnClickListener(new View.OnClickListener() {
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
@Override
public void onClick(View v) {
//当出入变量名时，需要用转义符隔开
String content="hello js";
mWebView.loadUrl("javascript:alertMessage(\"" +content+ "\")" );
//Android调用有返回值js方法，安卓4.4以上才能用这个方法
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.d(TAG, "js返回的结果为=" + value);
Toast.makeText(JsCallNativeActivity.this,"js返回的结果为=" + value,Toast.LENGTH_LONG).show();
}
});
}
});
上面这种方式，但是这种方式是Android原生提供的并不适用于ios，也就是说，window.javaInterface.showToast(JSON.stringify(json))这样的js代码并不适用于ios，如果用以上的方法，就得分别为android和ios各写一套js代码。这样很显然是不太合理的，所以在实际开发中，如果涉及多终端使用，这种方式就不行了。
第二种H5调用Native方法
这种方法就是基于H5对应的点击事件发送一个url请求，并将所需的参数添加到该url中。android端通过webView.setWebViewClient()拦截url，解析url中携带的参数，并根据参数信息进行相应的操作。
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
/**
* 通过判断拦截到的url是否含有pre，来辨别是http请求还是调用android方法的请求
*/
String pre = "protocol://android";
if (!url.contains(pre)) {
//该url是http请求，用webview加载url
return false;
}else {
//该url是调用android方法的请求，解析对应需要的参数然后调用对应的Native方法
return true;
}
}
});
注意：
特别说明一下shouldOverrideUrlLoading()方法的返回值问题，该方法的返回值有三种：
- 返回true，即根据代码逻辑执行相应操作，webview不加载该url；
- 返回false，除执行相应代码外，webview加载该url；
- 返回super.shouldOverrideUrlLoading()，点进父类中，我们可以看到，返回的还是false。
