WebView(网页视图)基本用法

原创 于 2025-09-25 09:27:42 发布 · 907 阅读 · 16 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android

在 Android 开发中，WebView 是一个强大的组件，用于在应用中嵌入网页内容或显示 HTML 文件。它本质上是一个内置的浏览器，可以加载远程网页、本地 HTML 文件或动态生成的 HTML 内容。以下是 Android WebView 的基本用法详细指南，涵盖初始化、配置、加载内容、交互处理、注意事项和实践建议。

一、WebView 概述

  • 定义：WebView 是 Android 提供的视图组件，允许在应用中显示网页或 HTML 内容，基于 WebKit 或 Chromium 引擎。
  • 功能：
    • 加载远程 URL（如 https://www.example.com）。
    • 显示本地 HTML 文件（如 assets 目录中的文件）。
    • 执行 JavaScript 代码。
    • 处理网页交互（如表单提交、链接点击）。
    • 支持 JavaScript 与原生代码的双向通信。
  • 适用场景：
    • 显示在线网页（如帮助页面、新闻页面）。
    • 嵌入 H5 应用或混合开发（Hybrid App）。
    • 渲染本地 HTML 内容（如富文本显示）。
  • 局限性：
    • 性能依赖设备浏览器引擎。
    • 安全性和隐私需特别注意。
    • 大型网页可能导致内存占用高。

二、准备工作

  1. 权限声明：
    如果加载远程 URL，需要在 AndroidManifest.xml 中添加网络权限：

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

  2. 添加 WebView：
    在布局文件中添加 WebView：

    <!-- res/layout/activity_main.xml -->
<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

  3. 依赖：

    • WebView 是 Android SDK 内置组件，无需额外依赖。
    • 如果需要 JSON 或网络请求（如加载数据后渲染 HTML），可添加 Gson 或 OkHttp：
      implementation 'com.google.code.gson:gson:2.10.1'
implementation 'com.squareup.okhttp3:okhttp:4.12.0'

  4. 注意：

    • Android 4.4（API 19）及以上使用 Chromium 引擎，性能更佳。
    • Android 10+ 默认限制非 HTTPS 链接，需配置 android:usesCleartextTraffic="true"（不推荐）或使用 HTTPS。

三、WebView 基本用法

以下是 WebView 的基本用法，包括加载 URL、本地 HTML 和配置常见设置。

1. 初始化 WebView

在 Activity 或 Fragment 中获取 WebView 并进行基本配置。

import android.os.Bundle;
import android.webkit.WebView;
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
        webView = findViewById(R.id.webView);

        // 启用 JavaScript（默认禁用）
        webView.getSettings().setJavaScriptEnabled(true);

        // 设置支持缩放
        webView.getSettings().setSupportZoom(true);
        webView.getSettings().setBuiltInZoomControls(true);
        webView.getSettings().setDisplayZoomControls(false); // 隐藏缩放控件

        // 设置自适应屏幕
        webView.getSettings().setUseWideViewPort(true);
        webView.getSettings().setLoadWithOverviewMode(true);
    }
}
  • 说明：
    • setJavaScriptEnabled(true)：启用 JavaScript（注意安全风险）。
    • setSupportZoom 和 setBuiltInZoomControls：支持缩放和手势缩放。
    • setUseWideViewPort 和 setLoadWithOverviewMode：网页适配屏幕宽度。
2. 加载远程 URL

加载在线网页，如 https://www.example.com。

// 加载远程 URL
webView.loadUrl("https://www.example.com");
  • 说明：
    • 确保 URL 使用 HTTPS（Android 10+ 默认禁用 HTTP）。
    • 加载 URL 是异步操作，需确保网络权限。
3. 加载本地 HTML 文件

从 assets 或 res/raw 目录加载 HTML 文件。

  • 创建 HTML 文件：
    在 assets 目录下创建 index.html：

    <!-- assets/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Local HTML</title>
</head>
<body>
    <h1>Hello, WebView!</h1>
    <p>This is a local HTML file loaded in WebView.</p>
</body>
</html>

  • 加载代码：

    // 加载 assets 目录下的 HTML 文件
webView.loadUrl("file:///android_asset/index.html");

  • 说明：

    • file:///android_asset/ 是访问 assets 目录的固定前缀。
    • 可加载复杂 HTML（如包含 CSS 和 JavaScript）。
4. 加载动态 HTML 内容

直接加载字符串格式的 HTML 内容。

String htmlContent = "<html><body><h1>Dynamic HTML</h1><p>This is dynamically generated HTML.</p></body></html>";
webView.loadData(htmlContent, "text/html", "UTF-8");
  • 改进版（处理特殊字符）：
webView.loadDataWithBaseURL(null, htmlContent, "text/html", "UTF-8", null);
  • 说明：
    • loadData 适合简单 HTML，可能有编码问题。
    • loadDataWithBaseURL 更安全，支持复杂内容。
5. 处理网页导航

使用 WebViewClient 控制网页加载行为，如处理链接点击或页面加载事件。

import android.webkit.WebViewClient;

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // 在 WebView 内加载新链接
        view.loadUrl(url);
        return true; // 返回 true 表示拦截，默认 false 交给系统浏览器
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        // 页面开始加载
        Log.d("WebView", "Loading: " + url);
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        // 页面加载完成
        Log.d("WebView", "Loaded: " + url);
    }

    @Override
    public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
        // 加载错误
        Log.e("WebView", "Error: " + error.getDescription());
    }
});
  • 说明：
    • shouldOverrideUrlLoading：控制链接跳转，默认在 WebView 内加载。
    • onReceivedError：处理加载失败（如网络断开）。
6. 处理 JavaScript 交互

通过 WebChromeClient 处理 JavaScript 弹窗、进度条等。

import android.webkit.WebChromeClient;

webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        // 页面加载进度
        Log.d("WebView", "Progress: " + newProgress + "%");
    }

    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        // 处理 JavaScript alert 弹窗
        new AlertDialog.Builder(view.getContext())
                .setMessage(message)
                .setPositiveButton("OK", (dialog, which) -> result.confirm())
                .setCancelable(false)
                .show();
        return true;
    }
});
  • 说明：
    • onProgressChanged：显示加载进度（如更新 ProgressBar）。
    • onJsAlert：处理 JavaScript 弹窗，需手动实现 UI。
7. JavaScript 与 Android 交互

通过 addJavascriptInterface 实现 JavaScript 调用 Android 方法。

  • 定义接口：

    public class WebAppInterface {
    private Context context;

    public WebAppInterface(Context context) {
        this.context = context;
    }

    @JavascriptInterface
    public void showToast(String message) {
        Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
    }
}

  • 绑定接口：

    webView.addJavascriptInterface(new WebAppInterface(this), "Android");

  • HTML 示例：

    <!-- assets/index.html -->
<!DOCTYPE html>
<html>
<body>
    <button onclick="Android.showToast('Hello from JavaScript!')">Call Android</button>
</body>
</html>

  • 说明：

    • @JavascriptInterface 注解确保方法可被 JavaScript 调用。
    • 安全风险：仅在受信任的网页中使用。
8. 处理返回键

重写返回键逻辑，支持网页后退。

@Override
public void onBackPressed() {
    if (webView.canGoBack()) {
        webView.goBack(); // 后退到上一页
    } else {
        super.onBackPressed(); // 退出 Activity
    }
}

四、完整代码示例

以下是一个完整的 WebView 示例，加载远程 URL 并支持基本交互：

import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;
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
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setSupportZoom(true);
        webView.getSettings().setBuiltInZoomControls(true);
        webView.getSettings().setDisplayZoomControls(false);
        webView.getSettings().setUseWideViewPort(true);
        webView.getSettings().setLoadWithOverviewMode(true);

        // 设置 WebViewClient
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                Log.d("WebView", "Page loaded: " + url);
            }
        });

        // 设置 WebChromeClient
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                Log.d("WebView", "Progress: " + newProgress + "%");
            }
        });

        // 添加 JavaScript 接口
        webView.addJavascriptInterface(new WebAppInterface(this), "Android");

        // 加载 URL 或 HTML
        webView.loadUrl("https://www.example.com");
        // 或者加载本地 HTML
        // webView.loadUrl("file:///android_asset/index.html");
    }

    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }

    // JavaScript 接口
    public class WebAppInterface {
        private Context context;

        public WebAppInterface(Context context) {
            this.context = context;
        }

        @JavascriptInterface
        public void showToast(String message) {
            Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
        }
    }
}

五、注意事项

  1. 安全问题：
    • JavaScript 安全：启用 setJavaScriptEnabled(true) 时，确保加载的网页可信，避免 XSS 攻击。
    • HTTPS：Android 10+ 默认禁用 HTTP，使用 HTTPS 或配置 android:usesCleartextTraffic="true"（不推荐）。
    • JavaScript 接口：addJavascriptInterface 在 API 17 以下有安全漏洞，仅在受信任内容中使用。
  2. 性能优化：
    • 启用缓存：
      webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);
webView.getSettings().setAppCacheEnabled(true);
webView.getSettings().setAppCachePath(getCacheDir().getAbsolutePath());
    • 禁用不必要的渲染：
      webView.getSettings().setRenderPriority(RenderPriority.HIGH);
  3. 错误处理：
    • 使用 onReceivedError 处理加载失败。
    • 检查网络状态：
      ConnectivityManager cm = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
NetworkInfo networkInfo = cm.getActiveNetworkInfo();
if (networkInfo == null || !networkInfo.isConnected()) {
    Toast.makeText(this, "No network", Toast.LENGTH_SHORT).show();
}
  4. 生命周期管理：
    • 暂停/恢复 WebView：
      @Override
protected void onPause() {
    super.onPause();
    webView.onPause();
    webView.pauseTimers();
}

@Override
protected void onResume() {
    super.onResume();
    webView.onResume();
    webView.resumeTimers();
}
    • 销毁 WebView：
      @Override
protected void onDestroy() {
    super.onDestroy();
    webView.destroy();
}
  5. Android 版本兼容：
    • API 19+ 使用 Chromium 引擎，性能更好。
    • API 21+ 支持 WebRTC 和现代 Web 特性。
    • 定期更新系统 WebView（通过 Google Play）。

六、学习建议与实践

  1. 学习路径：
    • 掌握 WebView 基本用法（加载 URL、本地 HTML）。
    • 配置 WebViewClient 和 WebChromeClient 处理导航和交互。
    • 实现 JavaScript 与 Android 交互。
    • 学习 WebView 缓存和性能优化。
    • 探索混合开发（Hybrid App）。
  2. 实践项目：
    • 简单项目：加载一个公开网页（如 https://www.example.com），实现返回键导航。
    • 进阶项目：加载本地 HTML 文件，支持 JavaScript 调用 Android Toast。
    • 高级项目：开发一个 H5 应用，结合 WebView 和 REST API（如加载 JSON 数据后渲染）。
  3. 调试工具：
    • Chrome DevTools：通过 chrome://inspect 调试 WebView（需启用开发者模式）。
    • Logcat：查看加载日志和错误。
    • Charles/Fiddler：抓包分析网络请求。
  4. 推荐资源：
    • Android 官方文档：https://developer.android.com/reference/android/webkit/WebView
    • WebView 调试：https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews
    • 公开网页：https://www.example.com 或本地 HTML 测试。

七、总结

  • 基本用法：
    • 初始化：配置 WebSettings（JavaScript、缩放、适配）。
    • 加载：支持 URL、本地 HTML、动态 HTML。
    • 交互：通过 WebViewClient 和 WebChromeClient 处理导航和 JavaScript。
    • 双向通信：使用 addJavascriptInterface。
  • 注意事项：安全（HTTPS、JavaScript）、性能（缓存、渲染）、生命周期管理。
  • 推荐：优先使用 HTTPS 加载受信任内容，结合 Chrome DevTools 调试。
  • 实践：实现简单网页加载和交互，逐步探索混合开发。

如果需要更详细的代码示例（如复杂 JavaScript 交互、WebView 优化、Hybrid App 开发）或特定场景的讲解，请告诉我！

【Android笔记63】Android之网页视图WebView介绍及其使用
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
12-31 804
WebView是android中提供的一个专门用于加载Web应用程序中的视图组件，通过WebView组件可以从互联网上加载任意一个web网页应用程序。WebView是对View组件的一个扩展，官方介绍【在 WebView 中编译 Web 应用 | Android 开发者 | Android Developers】。APP应用程序开发可以大致分为三类，分别是：原生开发、H5开发、混合开发。
Android网络技术——WebView的简单使用
weixin_45879630的博客
10-13 2024
前言 Android WebView在Android平台上是一个特殊的View，它能用来显示网页，这个WebView类可以被用来在app中仅仅显示一张在线的网页，当然还可以用来开发浏览器。 那么这种该如何实现呢？其实这是Android里一个叫WebView的组件实现的。接下来我将简单介绍WebView的常用用法。 1.简介 WebView是一个基于webkit引擎、展现web页面的控件。 2.基本使用 WebView的最简单的使用方式即是直接显示网页内容，有以下三个步骤：   1.添加访问网络权限（An
WebView使用解析（一）之基本用法
06-16
详见http://blog.csdn.net/huaxun66/article/details/73179187
WebView详解
最新发布
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
09-17 1218
WebView是现代移动应用与Web技术交互的关键组件，基于不同平台的内核实现（如Android的Chromium、iOS的WKWebView）。它采用多进程架构，通过JavaScript Bridge实现双向通信，包含完整的浏览器渲染流程（DOM解析、CSS解析、布局绘制等）。性能优化方面，需关注资源预加载、智能缓存和内存管理（如定时清理、事件监听器销毁）。安全机制包括内容安全策略配置（CSP）、防XSS、HTTPS校验等，确保Web内容在应用中的安全运行。
【Android WebView】WebView基础
dev晴天的博客
06-18 5476
web的error 页面比较丑，我们可以在加载失败时，展示安卓自定义的错误展示页。4、动画、银屏、视频 合适加载释放动画、银屏、视频 加载会造成cpu、电量消耗可在activity、 fragment的onResume、onStop进行开关控制。
浅谈WebView的使用
热门推荐
LiuHe
06-16 3万+
WebView是Android中一个非常实用的组件，它和Safai、Chrome一样都是基于Webkit网页渲染引擎，可以通过加载HTML数据的方式便捷地展现软件的界面。使用WebView开发软件有一下几个优点：1.可以打开远程URL页面，也可以加载本地HTML数据；2.可以无缝的在java和javascript之间进行交互操作；3.高度的定制性，可根据开发者的需要进行多样性定制。
WebView简易网页网络访问
xuwanli2012的博客
10-11 737
示例代码块 html代码： html> head> title>JS交互title> meta http-equiv="content-type" content="text/html; charset=utf-8"/> script type="text/javascript"> function invokedByJava(param) { docume
Android WebView实现网页滚动截图
08-27
首先，我们需要理解WebView的基本用法。WebView是Android SDK提供的一种视图类，它可以加载和显示HTML、CSS、JavaScript等网络内容。通过设置WebView的`loadUrl()`方法，我们可以加载指定的网页URL。同时，为了与...
Android中WebView加载的网页被放大的解决办法
08-31
然而，在实际使用过程中，有时会遇到一个常见的问题，即WebView加载的网页在显示时会被自动放大，导致用户体验不佳。本文将详细介绍如何解决这一问题。 首先，我们要了解这个问题出现的原因。在高分辨率的设备上，...
Android使用原生组件WebView加载网页和数据的方法
01-21
在Api中关于这个类的介绍大致就是这是一个可以显示网页的视图，如： webView.loadUrl(http://www.baidu.com/); 显示结果： 还可以加载一些html的字符串，如： String str = <html><body>You scored ...
QtWebView在线加载网页Demo
01-19
在本篇文章中，我们将深入探讨QtWebView的使用方法、特性以及如何通过Qt来构建一个在线加载网页的应用。 首先，让我们了解QtWebView的基本概念。QtWebView是基于WebKit引擎的，WebKit是一个开源的Web渲染引擎，被...
Android—WebView简单使用
u011277123的博客
12-13 567
华清创客学院 2016-12-12 08:49 有时候我们可能会碰到一些比较特殊的需求，比如说要求在应用程序里展示一些网页。相信每个人都知道，加载和显示网页通常都是浏览器的任务，但是需求里又明确指出，不允许打开系统浏览器，而我们当然也不可能自己去编写一个浏览器出来，这时应该怎么办呢？ 不用担心，Android 早就已经考虑到了这种需求，并提供了一个 WebView控件，借助它我们就可以
webview系列：webview的简单使用
有心好书
10-08 1300
webview系列：webview的简单使用Android及iOS的webview的引擎都是webkit，对H5提供支持. WebView可以使得网页轻松的内嵌到app里，还可以直接跟js相互调用。webview组件如何使用1)添加权限：AndroidManifest.xml中必须使用许可”android.permission.INTERNET”,否则会出Web page not availabl
WebView的使用详解
LJQDMY的博客
09-18 3337
WebView是一个基于webkit引擎、展现web页面的控件。Android的Webview在低版本和高版本采用了不同的webkit版本内核，4.4后直接使用了Chrome。一般来说Webview可单独使用，可联合其子类一起使用，下面会介绍几种:1.Webview自身的常见方法；2.Webview的最常用的子类3.（WebSettings类、WebViewClient类、WebChromeClient类)Android和Js的交互3.1 Webview常用方法3.1.1 加载URL。
WebView用法与JS交互
zhangziyangup
11-29 154
这篇文章讲了一些WevView的使用方法，在项目中，常常会使用到，尤其是需要与JS交互。 效果图 点击“调用alert”按钮，在Android中捕获JS alert，并用Android组件（AlertDialog）替换 点击“调用java方法”按钮，在JS中调用并传递参数到Java中的方法 点击“调JS方法”按钮（这个按钮不是html元素，而是android元素），...
WebView的用法
danwuxie的博客
11-22 356
webview控件可以在自己的应用程序中嵌入一个浏览器，从而非常轻松地展示各种各样的网页 一、在activity_main.xml文件中添加 &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tool...
【Android】webview常用方法和使用
m0_74825699的博客
12-11 2123
最近项目又用到了webview，在回顾复习一次webview相关的知识，顺手整理下。webview是一个基于webkit引擎、展现web页面的控件（4.4以下使用webkit引擎，4.4以后使用chrome内核），在Android开发中常用于展示网页和执行JavaScript。基本的webview一些用法和相关属性介绍大致就是上面这些，webview在应用中一般用于加载免责协议，使用说明，电子手册等一些需要经常动态的多文字或多数据需要经常更新或维护的场景。
webview使用
qinxuexiang_blog的博客
06-11 237
WebView是在应用程序中显示网页的视图。您还可以指定HTML字符串，并可以使用WebView在应用程序中显示它。WebView将应用程序转换为Web应用程序。 要将WebView添加到应用程序中，必须将<WebView>元素添加到XML布局文件中。其语法如下 <WebView xmlns:android="http://schemas.android.com/apk/...
Webview的使用
你全家都是博客
11-17 429
1.主函数 public class MainActivity extends AppCompatActivity { private TextView tv; private WebView web; @Override protected void onCreate(Bundle savedInstanceState) { super.onCr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值