轉(zhuǎn)載請(qǐng)注明原創(chuàng)出處，謝謝阔加！
- GitHub: @Ricco
1.導(dǎo)入
項(xiàng)目地址 https://github.com/lzyzsd/JsBridge
雖然4,5年沒有維護(hù)了数冬，但是老牌的慧域，就是好用棠涮，8.6k的贊谦炬，值得信賴
repositories {
// ...
maven { url "https://jitpack.io" }
}
dependencies {
compile 'com.github.lzyzsd:jsbridge:1.0.4'
}
2.H5頁面代碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>JSBridge</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<button onclick="myClick(1)">獲取內(nèi)容</button>
<button onclick="myClick(2)">返回首頁</button>
<a href="tel:12345">打電話</a>
</body>
<script>
function myClick(actionType) {
window.WebViewJavascriptBridge.callHandler(
'jsCallNative', {
'actionType': actionType
}, function(responseData) {
alert(responseData);
}
);
}
//JS注冊(cè)事件監(jiān)聽
function connectWebViewJavascriptBridge(callback) {
var u = navigator.userAgent;
var isApp = u.indexOf('myApp') > -1; // app打開
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios終端
if (isApp && isAndroid) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady', function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}
if (isApp && isiOS) {
if (window.WebViewJavascriptBridge) {
return callback(WebViewJavascriptBridge);
}
if (window.WVJBCallbacks) {
return window.WVJBCallbacks.push(callback);
}
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() {
document.documentElement.removeChild(WVJBIframe)
}, 0)
}
}
connectWebViewJavascriptBridge(function(bridge) {
bridge.init(function(message, responseCallback) {});
})
</script>
</html>
3.Android頁面代碼
3.1 布局頁面
使用BridgeWebView盟蚣，(BridgeWebView extends WebView)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.github.lzyzsd.jsbridge.BridgeWebView
android:id="@+id/wv"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
3.2Activity代碼
wv.registerHandler("jsCallNative", (data, function) -> {
try {
JSONObject dataJsonObject = JSON.parseObject(data);
if (dataJsonObject != null) {
String key = dataJsonObject.getString("actionType");
if ("1".equals(key)) { // 獲取
JSONObject jsonObject = new JSONObject();
jsonObject.put("content", "hello js");
function.onCallBack(jsonObject.toJSONString());
} else if ("2".equals(key)) { // 返回
finish();
}
}
} catch (Exception e) {
e.printStackTrace();
}
});
// 配置 WebView
WebSettings webSettings = wv.getSettings();
webSettings.setDomStorageEnabled(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);
webSettings.setBlockNetworkImage(false);
webSettings.setJavaScriptEnabled(true);
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
webSettings.setUserAgentString(webSettings.getUserAgentString() + " myApp" + " version" + BuildConfig.VERSION_NAME);
BridgeWebViewClient bridgeWebViewClient = new BridgeWebViewClient(wv) {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.contains("tel:")) {
// 撥打電話
return true;
}
return super.shouldOverrideUrlLoading(view, url);
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
String title = view.getTitle();
if (!TextUtils.isEmpty(title)) {
tvTitle.setText(title);
}
}
};
wv.setWebViewClient(bridgeWebViewClient);
wv.loadUrl("http://www.aaaaa.com/b.html");
4.注意點(diǎn)
1.因?yàn)镠5的按鈕黍析，本來就有自己的邏輯，建議修改UserAgent來實(shí)現(xiàn)判斷
我這里是在UserAgent后面拼接一個(gè)特定的字符串屎开，讓H5用來區(qū)分阐枣。
webSettings.setUserAgentString(webSettings.getUserAgentString() + " myApp" + " version" + BuildConfig.VERSION_NAME);
2.WebViewClient要用BridgeWebViewClient
BridgeWebViewClient bridgeWebViewClient = new BridgeWebViewClient(wv){
......
};
wv.setWebViewClient(bridgeWebViewClient);
3.傳遞數(shù)據(jù)問題
一般我們交互數(shù)據(jù)的時(shí)候，都是傳一個(gè)Json奄抽。
但是App給H5返回內(nèi)容是function.onCallBack(String data)只有傳字符串的方法蔼两，但是iOS是可以傳對(duì)象的，所以需要讓iOS將對(duì)象轉(zhuǎn)成字符串傳過去逞度。然后讓H5用Json解析额划。
