在Android开发中，WebView是一个常用的组件，它允许开发者在应用中嵌入网页内容。在某些情况下，我们可能需要拦截H5页面中的接口请求，以便于进行数据处理、修改等操作。本文将介绍如何在Android WebView中拦截H5的接口请求，并返回处理好的数据。
需求背景
现代Web应用通常通过AJAX请求与后端进行数据交互。如果我们想在Android应用中对这些请求进行拦截，可能是出于清洗数据、修改请求参数、或是在不触及服务器的情况下提供模拟数据的需求。
实现步骤
- 使用WebViewClient：通过重写
shouldOverrideUrlLoading方法，我们可以拦截URL请求。 - 使用JavaScript接口：通过JavaScriptInterface，我们可以与H5页面进行交互。
- 修改请求的返回数据：可以通过使用
WebView的loadDataWithBaseURL方法来实现。
示例代码
下面的代码示例展示了如何实现以上功能。
1. 创建一个WebView并设置WebViewClient
首先，在你的Activity中创建一个WebView，并设置一个自定义的WebViewClient。
import android.os.Bundle;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true); // 启用JavaScript
webView.addJavascriptInterface(new WebAppInterface(this), "Android"); // 添加JavaScript接口
webView.setWebViewClient(new CustomWebViewClient());
webView.loadUrl("http://example.com"); // 加载H5页面
}
private class CustomWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
String url = request.getUrl().toString();
if (url.contains("api")) { // 判断接口请求
// 处理接口请求
String responseData = processApiRequest(url);
// 用处理好的数据返回给H5页面
view.loadUrl("javascript:handleResponse(" + responseData + ")");
return true; // 表示我们拦截了该请求
}
return false; // 继续加载其他URL
}
}
private String processApiRequest(String url) {
// 在这里处理请求，返回处理好的数据
// 例如，可以做一些网络请求，或者返回一些模拟数据
return "{\"success\": true, \"data\": {\"key\": \"value\"}}"; // 返回JSON字符串
}
}
2. 创建JavaScript接口
创建一个JavaScript接口，用于与H5页面交互。
import android.content.Context;
import android.webkit.JavascriptInterface;
import android.widget.Toast;
public class WebAppInterface {
Context mContext;
WebAppInterface(Context c) {
mContext = c;
}
@JavascriptInterface
public void showToast(String toast) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}
}
3. 在H5页面中处理返回的数据
在你的H5页面中，你需要定义一个JavaScript函数来处理来自Android的返回数据。
<!DOCTYPE html>
<html>
<head>
<title>WebView Example</title>
<script type="text/javascript">
function handleResponse(response) {
console.log("Received response from Android:", response);
// 在这里处理返回的数据
const data = JSON.parse(response);
if (data.success) {
alert("Data received: " + JSON.stringify(data.data));
} else {
alert("Failed to get data");
}
}
</script>
</head>
<body>
<h1>Hello WebView</h1>
<button onclick="fetch('http://api.example.com/data')">Fetch Data</button>
</body>
</html>
小结
通过以上步骤，我们可以成功拦截H5页面的接口请求，并利用自定义的处理逻辑返回数据。此技术在许多场景中都有用，比如调试、仿真实验或是缓存机制等。
请注意，使用WebView拦截请求和修改数据时，要考虑到安全性和性能因素，尤其是在处理敏感数据时需要小心谨慎。
