Android中WebView的基本配置与填坑记录大全

本文将详细介绍Android中WebView的基本配置和一些坑点记录。WebView是Android中经常用到的控件，它能够方便地显示Web页面或者本地HTML页面，同时也支持JavaScript交互。

1. 添加依赖

在build.gradle的dependencies中添加如下依赖：

implementation 'androidx.webkit:webkit:1.4.0'

2. 添加网络权限

在AndroidManifest.xml中添加如下权限：

<uses-permission android:name="android.permission.INTERNET" />

3. 布局文件中添加WebView

在布局文件中添加WebView：

<WebView
    android:id="@+id/web_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

4. 初始化WebView

在Activity的onCreate方法中，获取WebView实例并进行一些基本配置：

WebView webView = findViewById(R.id.web_view);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true); // 开启JavaScript支持
settings.setCacheMode(WebSettings.LOAD_NO_CACHE); // 不使用缓存

5. 加载Web页面

可以通过loadUrl方法加载Web页面：

webView.loadUrl("https://www.example.com");

也可以通过loadData方法加载HTML页面：

String html = "<html><h1>Hello world</h1></html>";
webView.loadData(html, "text/html", "UTF-8");

6. WebView与JavaScript交互

6.1 WebView调用JavaScript方法

通过evaluateJavascript方法调用JavaScript方法：

webView.evaluateJavascript("javascript:alert('hello')", null);

6.2 JavaScript调用WebView方法

在WebView中添加JavaScript接口：

public class WebViewJavaScriptInterface {
    @JavascriptInterface
    public void showMessage(String message) {
        Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
    }
}

webView.addJavascriptInterface(new WebViewJavaScriptInterface(), "android");

在JavaScript代码中调用：

android.showMessage("hello");

填坑记录

1. WebView加载页面时如何统一携带请求头

在WebView加载页面时，可以通过WebViewClient的onPageStarted方法来统一携带请求头：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        Map<String, String> headers = new HashMap<>();
        headers.put("User-Agent", "Mozilla/5.0");
        view.loadUrl(url, headers);
    }
});

2. WebView页面缓存问题

在WebSettings中设置CacheMode为LOAD_NO_CACHE可以禁用WebView缓存。如果需要缓存，则需要设置缓存路径和缓存模式：

String cacheDirPath = getFilesDir().getAbsolutePath() + "/webcache";
settings.setAppCachePath(cacheDirPath);
settings.setAllowFileAccess(true);
settings.setAppCacheEnabled(true);
settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);

同时，在WebViewClient中处理缓存：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            return super.shouldInterceptRequest(view, request);
        }
        String url = request.getUrl().toString();
        WebResourceResponse response = null;
        try {
            URLConnection connection = new URL(url).openConnection();
            InputStream inputStream = connection.getInputStream();
            Map<String, List<String>> headers = connection.getHeaderFields();
            String mimeType = connection.getContentType();
            String encoding = connection.getContentEncoding();
            response = new WebResourceResponse(mimeType, encoding, inputStream);
            response.setResponseHeaders(headers);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return response;
    }
});

示例说明

示例1：WebView加载百度页面

在Activity中添加如下代码：

WebView webView = findViewById(R.id.web_view);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        Map<String, String> headers = new HashMap<>();
        headers.put("User-Agent", "Mozilla/5.0");
        view.loadUrl(url, headers);
    }
});
webView.loadUrl("https://www.baidu.com");

示例2：WebView加载本地HTML页面

在Activity中添加如下代码：

WebView webView = findViewById(R.id.web_view);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
String html = "<html><h1>Hello world</h1></html>";
webView.loadData(html, "text/html", "UTF-8");