WebView調(diào)用Android代碼
做好戰(zhàn)斗準備,其實也不復(fù)雜
情景再現(xiàn)：
運營的H5頁面上有個按鈕，叫“立即參加”悄雅，當用戶點擊按鈕的時候芹助，App上要彈一個吐司出來。
一囤踩、通過WebView的addJavascriptInterface ()方式進行映射
1.準備工作
定義我們將來要響應(yīng)js代碼的類
/**
* 與h5交互的共同類
*/
public class ForJs {
//添加注解，不添加注解方法不能夠被js調(diào)用
//注意方法名稱彤守，提供給js的時候也一定要匹配
@JavascriptInterface
public void fromAndroid(){
//我們具體要執(zhí)行的邏輯历极，本例只是彈一個吐司
ToastUtil.showToast("這個是android里的方法");
}
// 同上，只是一個有參米死，一個無參而已
@JavascriptInterface
public void fromAndroid(String msg){
//我們具體要執(zhí)行的邏輯锌历，本例只是彈一個吐司
ToastUtil.showToast("msg");
}
}
至此，準備工作就已經(jīng)結(jié)束峦筒。
2.使用
- android端代碼
//如果只需要讓js調(diào)用android代碼究西，這幾行就夠了
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new ForJs(), "testMall");
參數(shù)說明：
1、我們定義的與H5交互的java類
2物喷、java類在H5中映射的對象名稱
H5中的js在調(diào)用我們的方法的時候卤材，必須知道的是：
映射對象的名稱遮斥，即示例中的testMall
映射對象提供的方法名稱，即示例中的ForJs類中的fromAndroid（）
H5中的關(guān)鍵代碼
注意這部分代碼并不需要我們Android端人員編寫商膊，但是卻需要我們Android端人員的配合
//js中的點擊方法調(diào)用伏伐，調(diào)用的是Android端的無參方法
<div onclick="test()" ></div>
<script>
//js中方法的定義
function test(){
testMall.fromAndroid()//注意 testMall 對象,以及fromAndroid（）方法名稱
}
</script>
重復(fù)一下注意事項：
Androdi端提供給js調(diào)用的方法名稱要準確無誤的告訴前端人員
Js中映射的Java對象名稱，要準確無誤的告訴Android端人員
一定要看
這種使用方式看起來很簡單晕拆，但是卻有一個致命漏洞：
http://www.reibang.com/p/3a345d27cd42
二藐翎、通過WebViewClinet的shouldOverrideUrlLoading（）方法攔截url
- 攔截該Url
- 解析Url協(xié)議()//新的API可以直接獲取到uri
- 按照約定調(diào)用Android端的方法
1.Android端代碼
mWebView.loadUrl("file:///android_asset/test.html");
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
//請求方式
String method = request.getMethod();
//請求頭
Map<String, String> requestHeaders = request.getRequestHeaders();
//uri,給里面有各種我們需要的東西，只需要get即可
Uri uri = request.getUrl();
String host = uri.getHost();
String authority = uri.getAuthority();
// TODO: 2018/12/15 判斷实幕，如果符合約定吝镣，即執(zhí)行Android提供好的方法,最后記得return true
//模擬微信封殺抖音鏈接
if (authority.contains("douyin")){
ToastUtil.showToast("不要看抖音，微信不夠豐富嗎");
return true;
}
return super.shouldOverrideUrlLoading(view, request);
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//如果使用這個方法昆庇，那么需要自己手動獲取uri末贾，其實與上面并無本質(zhì)區(qū)別
Uri uri = Uri.parse(url);
return super.shouldOverrideUrlLoading(view, url);
}
});
至此，Android端代碼完成
2.H5端代碼
注意這部分代碼并不需要我們Android端人員編寫整吆，但是卻需要我們Android端人員與H5端人員協(xié)商好協(xié)議約定
//js中的點擊方法調(diào)用
<div onclick="test()" ></div>
<script>
//js中方法的定義
function test(){
document.location="https://www.douyin.com/"
}
</script>
與第一種方法比起來拱撵，這種寫法雙方寫起來都比較隨意。除了Url的協(xié)議約定外表蝙，別的沒有需要注意事項拴测。尤其H5端，其實只是重定向了一個網(wǎng)頁而已府蛇。
換句話說集索，在本示例中，如果我們直接在webView中加載https://www.douyin.com/汇跨，也會觸發(fā)我們的Android中的方法务荆，即攔截邏輯。
更重要的是穷遂，第二種方式?jīng)]有第一種方式那種致命漏洞函匕。即利用shouldOverrideUrlLoading方法不存在漏洞
缺點：難以獲得返回值，如果想要獲得返回值蚪黑，那么就利用Android端調(diào)用Js的方法webView的loadUrl（restul）浦箱，將Android端的返回值result當做參數(shù)傳遞給js。
Android端示例代碼:
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
Uri uri = request.getUrl();
String authority = uri.getAuthority();
//模擬代碼
if (authority.contains("douyin")) {
String result = "這是Android端執(zhí)行完成之后的結(jié)果";
//獲取android端的結(jié)果后調(diào)用js中的方法祠锣，把result當參數(shù)傳遞給js
mWebView.loadUrl("javascript:callJsFromAndroid("+result+")");
return true;
}
return super.shouldOverrideUrlLoading(view, request);
}
});
//注意酷窥，本示例之所以加此行代碼，是為了能彈出js框伴网，具體要看實際需求
mWebView.setWebChromeClient(new WebChromeClient());
mWebView.loadUrl("file:///android_asset/test.html");
H5端示例代碼
<script>
//result是android端的處理結(jié)果
function callJsFromAndroid(result){
alert(result)
}
</script>
三蓬推、通過WebChromeClient的alert()、prompt()澡腾、confirm()方法回調(diào)js對應(yīng)的對話框
我在http://www.reibang.com/p/22265f5c5d78中詳細介紹了Android端響應(yīng)這三種js彈框的方式沸伏，如果不熟悉的請先了解一下糕珊。一般來將，我們使用的最多的是prompt()方法毅糟，因為這個有任意類型的返回值,請看示例代碼
Android端代碼
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
//本行代碼添加只是為了讓網(wǎng)頁在app內(nèi)打開
mWebView.setWebViewClient(new WebViewClient());
mWebView.setWebChromeClient(new WebChromeClient(){
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
//message即是js彈框中的內(nèi)容
//解析message红选，按照約定處理邏輯
if (TextUtils.equals(message,"douyin")) {
// android端的處理邏輯
ToastUtil.showToast("你們怎么都那么好看又有錢");
return true;
}
return super.onJsPrompt(view, url, message, defaultValue, result);
}
});
mWebView.loadUrl("file:///android_asset/test.html");
H5端示例代碼
//js中的點擊方法調(diào)用
<div onclick="test()" ></div>
<script>
function test(){
prompt("douyin")
}
</script>
三種使用方式的對比
1.比較簡單，但存在致命漏洞
2.需要雙方約定協(xié)議姆另，但不存在漏洞
3.與方式2很相似喇肋，只是攔截對象不同，也不存在漏洞
寫在最后
這些交互方式各有特點迹辐，而且并不難以理解蝶防，個人認為都應(yīng)該掌握。
