Android WebView使用详解

前言

现在越来越多的APP都内置了Web网页去加载视图，也就是我们常说的Hybrid APP混合应用，市场上很多平台都是这样做的，比如我们经常使用的淘宝、京东等电商平台。这些是如何实现的呢？在我们Android中有一个WebView组件，它就可以实现此类功能。它是Android中的原生UI控件，主要用于在APP应用中方便地访问远程网页或本地HTML资源，同时WebView也在Android中充当Java代码和JS代码之间交互的桥梁，实际上也可以将WebView看做一个功能最小化的浏览器。下面我们一起来看看WebView的一些常用的使用方法。

一、简介

WebView是Android系统提供的一个能显示网页的系统控件，它是一个特殊的View，同时也是一个ViewGroup，可以有很多其他子View。在Android 4.4以下（不包含4.4）系统WebView底层实现是采用WebKit内核，而在Android 4.4及其以上Google采用了Chromium内核作为系统WebView的底层内核支持。在这一变化中Android提供的WebView相关API并没有发生较大变化，在4.4上也兼容低版本的API并且引进了少部分API。这里简单介绍下基于Chromium的WebView和基于WebKit的WebView之间的差异，基于Chromium的Webview提供了更广的HTML5、CSS3、JavaScript支持，在Android系统版本5.0上基于Chromium 37，WebView提供了绝大多数的HTML5特性支持，除此之外Chromium也支持远程调试（Chrome DevTools）。WebKit JavaScript引起采用WebCore JavaScript在Android 4.4上换成了V8能直接提升JavaScript性能。

二、作用

1、显示和渲染Web页面
2、使用html文件（网络上或本地assets中）作为布局
3、可与JavaScript交互调用
注： WebView控件功能强大，除了具有一般View的属性和设置外，还可以对Url请求、页面加载、渲染、页面交互进行强大的处理。

三. 使用

3.1 配置网络权限

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

3.2 Webview常用方法
3.2.1 WebView的状态

// 激活WebView为活跃状态，能正常执行网页的响应
webView.onResume() ；

// 当页面失去焦点或者切换到后台不可见状态时需要执行onPause方法
// 通过onPause方法通知内核暂停所有的动作，比如DOM解析、Plugin执行、JavaScript执行等
webView.onPause()；

// 当应用程序（存在WebView）切换到后台时此方法不仅仅针对当前的WebView，而是全局、全应用程序的WebView
// 它会暂停所有WebView的layout、parsing、javascripttimer等，降低CPU功耗
webView.pauseTimers()

// 恢复pauseTimers状态
webView.resumeTimers()；

// 停止当前加载
webView.stopLoading(); 

// 销毁WebView，当关闭了当前Activity时，如果WebView中的音乐或视频还在播放，此时就必须销毁当前的WebView
// 需要注意的是：WebView调用destory方法时，WebView仍然绑定在Activity上，这是由于自定义WebView构建时传入了该Activity的context对象
// 因此需要在销毁时先从父容器中移除当前的WebView，然后再销毁WebView
rootLayout.removeView(webView); 
// 清空子View
webView.removeAllViews();  
webView.destroy();

3.2.2 网页加载上一页和下一页

// 是否可以跳到上一页（如果返回false，说明已经是第一页）
Webview.canGoBack() 
// 跳到上个页面
Webview.goBack()

// 是否可以跳到下一页（如果返回false,说明已经是最后一页）                   
Webview.canGoForward()
// 跳到下个页面
Webview.goForward()

// 以当前的index为起始点前进或者后退到历史记录中指定的steps，如果steps为负数则为后退，正数则为前进
Webview.goBackOrForward(intsteps) 

例如：使用Back按键控制网页后退
问题：不做任何处理的前提下浏览网页时点击系统的Back按键，整个Browser浏览器会调用finish()方法而结束自身
目标：点击返回按键后只是网页回退而不是退出整个浏览器
方案：在当前Activity中处理并消费掉该Back事件

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if ((keyCode == event.KEYCODE_BACK) && webView.canGoBack()) {
        webView.goBack();
        return true;
    }
    return super.onKeyDown(keyCode, event);
}

3.2.3 清除缓存数据

// 清除网页访问后留下的缓存，由于内核缓存是全局的，因此这个方法不仅仅针对WebView，而是针对整个应用程序
Webview.clearCache(true);

// 清除当前WebView访问的历史记录，只会将WebView访问的历史记录里中的所有记录清除，除了当前访问记录
Webview.clearHistory()；

// 仅清除自动完成填充的表单数据，并不会清除WebView存储到本地的数据
Webview.clearFormData()；

if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR2) {
    // 向Web端注入Java对象
    mWebView.removeJavascriptInterface("AndroidNative");
}

// 清除网页查找的高亮匹配字符
Webview.clearMatches();    
// 清除ssl信息
Webview.clearSslPreferences(); 

// 删除缓存数据库
context.deleteDatabase("webview.db"); 
context.deleteDatabase("webviewCache.db");

// 删除缓存文件夹
File file = CacheManager.getCacheFileBaseDir();
if (file != null && file.exists() && file.isDirectory()) {
    for (File item : file.listFiles()) {
        item.delete();
    }
    file.delete();
}

3.2.4 Cookie设置

// Cookie设置
CookieSyncManager.createInstance(this);
CookieManager cookieManager = CookieManager.getInstance();
cookieManager.setAcceptCookie(true);
String cookie = "name=xxx;age=18";
cookieManager.setCookie(URL, cookie);
CookieSyncManager.getInstance().sync();

// 获取Cookie
CookieManager cookieManager = CookieManager.getInstance();
String cookie = cookieManager.getCookie(URL);

// 清除Cookie
CookieSyncManager.createInstance(context);
CookieManager cookieManager = CookieManager.getInstance();
cookieManager.removeAllCookie();
CookieSyncManager.getInstance().sync();

3.3 常用类使用
3.3.1 WebSettings类的使用
注：对WebView进行配置和管理。

生成WebView组件（有两种方式）：

// 方式1：直接在Activity中通过new关键字生成
WebView webView = new WebView(this);

// 方法2：在Activity的layout布局文件里添加WebView组件
WebView webView = (WebView) findViewById(R.id.webView);

使用WebSettings对WebView进行配置

// 声明WebSettings子类
WebSettings webSettings = webView.getSettings();

// 如果访问的页面中需要与JavaScript进行交互，则WebView必须设置支持JavaScript
webSettings.setJavaScriptEnabled(true);

// 设置字体缩放倍数，默认100
webSettings.setTextZoom(100);

// 支持插件
webSettings.setPluginsEnabled(true);

// 设置自适应屏幕，两者合用
webSettings.setUseWideViewPort(true);       // 支持双击缩放（wap网页不支持）
webSettings.setLoadWithOverviewMode(true);  // 缩放至屏幕大小

// 缩放操作
webSettings.setSupportZoom(true);           // 支持缩放，默认为true，是下面那个的前提
webSettings.setBuiltInZoomControls(true);   // 显示缩放按钮（wap网页不支持），若为false则该WebView不可缩放
webSettings.setDisplayZoomControls(false);  // 隐藏原生的缩放控件
webSettings.setLoadWithOverviewMode(true);  // 缩放至屏幕的大小

// 其他细节操作
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); // 支持内容重新布局
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);  // 关闭WebView中缓存
webSettings.setAllowFileAccess(true);                           // 设置可以访问文件
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);     // 支持通过js打开新窗口
webSettings.setLoadsImagesAutomatically(true);                  // 支持自动加载图片
webSettings.setDefaultTextEncodingName("utf-8");                // 设置编码格式
webSettings.supportMultipleWindows();   // 多窗口
webSettings.setNeedInitialFocus(true);