一、利用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。
