Android WebView介绍、优势和使用教程

WebView是Android平台中一个非常重要的控件，它可以用来在Android应用中显示网页。WebView使用WebKit引擎来渲染网页，因此可以很好地兼容Web标准。

WebView的介绍

WebView是一个Android控件，它可以用来在Android应用中显示网页。WebView使用WebKit引擎来渲染网页，因此可以很好地兼容Web标准。

WebView的使用非常简单，只需要在布局文件中添加WebView控件，然后调用WebView的loadUrl()方法即可加载网页。

WebView功能

显示网页内容：WebView可以显示HTML、CSS和JavaScript等内容，因此可以用于展示网站、新闻、文章等。可以动态加载网页内容。
与网页交互：WebView可以与网页进行交互，例如点击链接、输入文本等。
自定义WebView：WebView可以自定义外观和行为，例如设置背景颜色、字体大小等。

WebView优势

跨平台：WebView使用WebKit引擎，因此可以跨平台使用。
动态更新：WebView可以动态更新网页内容，因此可以用于展示最新信息。
安全性：WebView使用沙盒机制，因此可以防止恶意网页对应用程序的访问。

WebView的使用教程

创建WebView

要创建WebView，只需要在布局文件中添加WebView控件即可：

<WebViewandroid:id="@+id/webView"android:layout_width="match_parent"android:layout_height="match_parent"/>

加载网页

要加载网页，只需要调用WebView的loadUrl()方法即可：

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

与JavaScript进行交互

WebView可以与JavaScript进行交互，这可以实现一些非常有趣的功能。

要与JavaScript进行交互，只需要实现WebViewClient和WebChromeClient接口即可。

WebViewClient接口用于处理WebView加载网页时的事件，例如网页加载完成、网页加载失败等。

WebChromeClient接口用于处理WebView加载网页时与JavaScript交互的事件，例如网页弹出警告框、网页弹出对话框等。

常用属性

WebView具有以下常用属性：

android:layout_width：WebView的宽度
android:layout_height：WebView的高度
android:layout_gravity：WebView的布局方式
android:background：WebView的背景颜色
android:layerType：WebView的层级类型
android:overScrollMode：WebView的滚动方式
android:scrollbars：WebView是否显示滚动条
android:scrollBarStyle：WebView滚动条的样式
android:webViewClient：WebView的客户端
android:webChromeClient：WebView的Chrome客户端

Android WebView可以设置的参数有很多，以下是一些常用的参数及其含义：

android:layout_width：用于设置WebView的宽度
android:layout_height：用于设置WebView的高度
android:layout_gravity：用于设置WebView在布局中的布局方式
android:background：用于设置WebView的背景颜色
android:layerType：用于设置WebView的层级类型
android:overScrollMode：用于设置WebView的滚动方式
android:scrollbars：用于设置WebView是否显示滚动条
android:scrollBarStyle：用于设置WebView滚动条的样式
android:webViewClient：用于设置WebView的客户端。WebViewClient是WebView的回调接口，用于处理WebView加载网页时的事件，例如网页加载完成、网页加载失败等。
android:webChromeClient：用于设置WebView的Chrome客户端。WebChromeClient是WebView的回调接口，用于处理WebView加载网页时与JavaScript交互的事件，例如网页弹出警告框、网页弹出对话框等。

除了这些常用属性之外，WebView还可以设置其他属性，例如：

android:allowFileAccess：是否允许WebView访问文件系统
android:allowContentAccess：是否允许WebView访问内容提供者
android:allowFileAccessFromFileURLs：是否允许WebView从文件URL加载资源
android:allowUniversalAccessFromFileURLs：是否允许WebView从任意文件URL加载资源
android:cacheMode：WebView的缓存模式
android:databaseEnabled：是否启用WebView的数据库功能
android:domStorageEnabled：是否启用WebView的DOM存储功能
android:geolocationEnabled：是否启用WebView的地理位置功能
android:hardwareAccelerated：是否使用硬件加速
android:initialScale：WebView的初始缩放级别
android:loadWithOverviewMode：是否在WebView加载网页时使用全屏模式
android:mediaPlaybackRequiresUserGesture：是否在WebView播放音频或视频时需要用户手势
android:mixedContentMode：WebView在加载混合内容（即包含http和https资源）时的模式
android:pluginState：WebView的插件状态
android:saveFormData：是否保存表单数据
android:savePassword：是否保存密码
android:selectAllOnFocus：是否在WebView获得焦点时选择所有文本
android:useWideViewPort：是否在WebView加载网页时使用宽视图模式
android:userAgent：WebView的用户代理字符串

这些属性可以用来配置WebView的行为和外观。

常用方法

WebView具有以下常用方法：

loadUrl()：加载网页
reload()：重新加载网页
canGoBack()：是否可以返回上一页
goBack()：返回上一页
canGoForward()：是否可以前进下一页
goForward()：前进下一页
evaluateJavascript()：执行JavaScript代码
addJavascriptInterface()：将Java对象暴露给JavaScript

WebView和原生交互

Android WebView和原生可以通过以下两种方式进行交互：

通过JavaScript
通过WebViewClient和WebChromeClient

1. 通过JavaScript

通过JavaScript，WebView可以与原生进行交互。原生可以通过WebView的evaluateJavascript()方法来执行JavaScript代码，也可以通过WebView的addJavascriptInterface()方法来将Java对象暴露给JavaScript。

以下是通过JavaScript进行交互的示例代码：

// 在Java代码中，将一个Java对象暴露给JavaScript
WebView webView = findViewById(R.id.webView);
webView.addJavascriptInterface(new MyJavaScriptInterface(), "myObject");// 在JavaScript代码中，调用Java对象的方法
var myObject = window.myObject;
myObject.showToast("Hello, world!");

2. 通过WebViewClient和WebChromeClient

通过WebViewClient和WebChromeClient，WebView可以处理JavaScript事件，例如网页加载完成、网页加载失败、网页弹出对话框等。

以下是通过WebViewClient和WebChromeClient进行交互的示例代码：

// 实现WebViewClient接口，处理网页加载完成事件
class MyWebViewClient extends WebViewClient {@Overridepublic void onPageFinished(WebView view, String url) {// 网页加载完成后，执行操作}
}// 实现WebChromeClient接口，处理网页弹出对话框事件
class MyWebChromeClient extends WebChromeClient {@Overridepublic boolean onJsAlert(WebView view, String url, String message, JsResult result) {// 处理网页弹出警告框事件return true;}
}// 将WebViewClient和WebChromeClient设置给WebView
WebView webView = findViewById(R.id.webView);
webView.setWebViewClient(new MyWebViewClient());
webView.setWebChromeClient(new MyWebChromeClient());

WebView和原生示例

在Android中，您可以通过WebView和原生代码进行交互，使Web页面与Android应用程序进行数据交换和调用原生功能。以下是一个简单示例代码，演示了如何在WebView中调用原生代码并从原生代码返回结果：

首先，我们在Android原生代码中创建一个JavaScript接口类，用于与WebView进行交互：

import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;public class JavaScriptInterface {private WebView webView;public JavaScriptInterface(WebView webView) {this.webView = webView;}// 在JavaScript中调用此方法@JavascriptInterfacepublic void showToast(String message) {Toast.makeText(webView.getContext(), message, Toast.LENGTH_SHORT).show();}// 在JavaScript中调用此方法，并返回结果给JavaScript@JavascriptInterfacepublic String getNativeData() {// 在这里执行原生代码逻辑，获取需要返回给JavaScript的数据String nativeData = "这是来自原生代码的数据";return nativeData;}
}

接下来，在Android Activity（或 Fragment）中，我们将WebView与JavaScript接口类进行关联，并加载Web页面：

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;public class MainActivity extends AppCompatActivity {private WebView webView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);webView = findViewById(R.id.webview);// 启用JavaScriptWebSettings webSettings = webView.getSettings();webSettings.setJavaScriptEnabled(true);// 创建JavaScript接口实例，传入WebViewJavaScriptInterface jsInterface = new JavaScriptInterface(webView);// 将JavaScript接口类与WebView关联webView.addJavascriptInterface(jsInterface, "AndroidInterface");// 加载Web页面webView.loadUrl("file:///android_asset/index.html");}
}

在上述代码中，我们在WebView中启用JavaScript，并创建了JavaScriptInterface实例，然后将其与WebView关联起来。我在这里给它起了一个名字"AndroidInterface"，该名称将在JavaScript中使用。

现在，我们可以在Web页面的JavaScript代码中调用原生代码并处理返回结果：

<!DOCTYPE html>
<html>
<head><title>WebView与原生代码交互示例</title>
</head>
<body><h1>WebView与原生代码交互示例</h1><button onclick="showToast()">调用原生代码</button><script>function showToast() {// 在JavaScript中调用原生代码AndroidInterface.showToast('这是来自WebView的消息');// 在JavaScript中调用原生代码，并获取返回结果var nativeData = AndroidInterface.getNativeData();alert(nativeData);}</script>
</body>
</html>