前言
Android项目中WebView是必不可少的，越来越开的迭代节奏导致越来越多的App采用混合开发，接着我们就介绍一下Android中WebView的使用。
一、混合开发的优缺点：
优点：
1.开发成本较低：Android和iOS使用一个地址就可以。
2.自动更新最新的web内容。
3.兼容平台较多。
缺点：
1.用户体验没有原生的炫酷。
2.连接网络等性能较差。
但瑕不掩瑜，对于不需要炫酷动效的简单页面如：用户协议、注册说明、banner跳转的一些推广页面、图文展示的文章等页面都可以用WebView来完成！
二、如何配置WebView：
常用的类：
WebSettings用于管理WebView状态配置
webView.getSettings().setDisplayZoomControls(false);//是否使用内置缩放机制
webView.getSettings().setSupportZoom(true);// 是否支持变焦
wvSignin.getSettings().setBuiltInZoomControls(true);// 设置WebView是否应该使用其内置变焦机制,显示放大缩小
webView.getSettings().setUseWideViewPort(true);//是否开启控件viewport。默认false，自适应；true时标签中指定宽度值生效
webView.getSettings().setLoadWithOverviewMode(true);
webView.setInitialScale(100);// 初始化时缩放
webView.getSettings().setJavaScriptEnabled(true);
WebViewClient :主要帮助WebView处理各种通知、请求事件的。
shouldOverrideUrlLoading（打开网页时不调用系统浏览器）
onLoadResource（在加载页面资源时会调用）
onPageStart（设定加载开始的操作）
onPageFinish（在页面加载结束时调用。我们可以关闭loading 条，切换程序动作）
onReceiveError（加载出错调用）
//首先选择加载方式
//方式1. 加载一个网页：
webView.loadUrl("http://www.google.com/");
//方式2：加载apk包中的html页面
webView.loadUrl("file:///android_asset/test.html");
//方式3：加载手机本地的html页面
webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");
webView.setWebViewClient(new WebViewClient() {
@Override
public void doUpdateVisitedHistory(WebView view, String url,
boolean isReload) {
super.doUpdateVisitedHistory(view, url, isReload);
}
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);// 点击超链接的时候重新在原来进程上加载URL
return true;
}
@Override
public void onPageFinished(WebView view, String url) {
}
});
WebChromeClien：WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等
onCloseWindow(关闭WebView)
onCreateWindow()
onJsAlert (WebView上alert无效，需要定制WebChromeClient处理弹出)
onJsPrompt（支持javascript输入框）
onJsConfirm（支持javascript的确认框）
onProgressChanged（获得网页的加载进度并显示）
onReceivedIcon（获取WebView的icon）
onReceivedTitle（获取WebView的标题）
如果你的WebView只是用来处理一些html的页面内容，只用WebViewClient就行了，如果需要更丰富的处理效果，比如JS、进度条等，就要用到WebChromeClient。
进度条例子：
webView.setWebChromeClient(webChromeClient)
WebChromeClient webChromeClient = new WebChromeClient() {
public void onProgressChanged(WebView view, int progress) {
super.onProgressChanged(view, progress);
wvProgressbar.setMax(100);
if (progress < 100) {
wvProgressbar.setVisibility(View.VISIBLE);
if (progress < 10) {
wvProgressbar.setProgress(10);
} else {
wvProgressbar.setProgress(progress);
}
} else {
wvProgressbar.setProgress(100);
wvProgressbar.setVisibility(View.GONE);
}
}
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
}
};
三、WebView和JS的交互：
之间的交互无非两种，Android调用Js，Js调用Android。
1.Android调用Js：
- 通过WebView的loadUrl（）
webView.loadUrl(url);里面可以配置userId、page等信息。
- 通过WebView的evaluateJavascript（）
比第一种方法效率更高，有返回值。但只支持Android4.4以上
mWebView.evaluateJavascript（url, new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//结果
}
});
2.Js调用Android：
- 通过 addJavascriptInterface(存在严重的漏洞问题)
被JS调用的方法必须加入@JavascriptInterface注解
@JavascriptInterface
public void getData(String msg) {
System.out.println("JS调用了Android的getData方法");
}
- 通过WebViewClient 的方法回调拦截，常用的如 shouldOverrideUrlLoading ()方法回调拦截 url(不存在漏洞，但使用麻烦)
Android通过 WebViewClient 的回调方法shouldOverrideUrlLoading ()拦截 url
解析该 url 的协议
如果检测到是预先约定好的协议，就调用相应方法
四、封装一下WebView让使用更简单~
public class MyWebView extends WebView {
private int currentY = 0;
private Context context;
public MyWebView(Context context) {
super(context);
init(context);
}
public MyWebView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
public MyWebView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context) {
this.context = context;
initWebSettings();
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(ev);
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
currentY = t;
super.onScrollChanged(l, t, oldl, oldt);
}
public int getCurrentY() {
return currentY;
}
public boolean canZoomIn() {
boolean canZoomIn = true;
try {
Field mActualScale = WebView.class.getDeclaredField("mActualScale");
Field mMaxZoomScale = WebView.class
.getDeclaredField("mMaxZoomScale");
mActualScale.setAccessible(true);
mMaxZoomScale.setAccessible(true);
canZoomIn = mActualScale.getFloat(this) < mMaxZoomScale
.getFloat(this);
} catch (Exception e) {
try {
Field mZoomManager = WebView.class
.getDeclaredField("mZoomManager");
if (mZoomManager != null) {
mZoomManager.setAccessible(true);
Object zoomManager = mZoomManager.get(this);
if (zoomManager != null) {
Field mEmbeddedZoomControl = zoomManager.getClass()
.getDeclaredField("mEmbeddedZoomControl");
if (mEmbeddedZoomControl != null) {
mEmbeddedZoomControl.setAccessible(true);
Object zoomControlEmbedded = mEmbeddedZoomControl
.get(zoomManager);
if (zoomControlEmbedded != null) {
mZoomManager = zoomControlEmbedded.getClass()
.getDeclaredField("mZoomManager");
if (mZoomManager != null) {
mZoomManager.setAccessible(true);
zoomManager = mZoomManager
.get(zoomControlEmbedded);
Method canZoomInMethod = zoomManager
.getClass().getDeclaredMethod(
"canZoomIn");
if (canZoomInMethod != null) {
canZoomInMethod.setAccessible(true);
Object canZoomInObj = canZoomInMethod
.invoke(zoomManager,
new Object[0]);
if (canZoomInObj != null
&& canZoomInObj instanceof Boolean) {
return (Boolean) canZoomInObj;
}
}
}
}
}
}
}
} catch (Exception e2) {
}
}
return canZoomIn;
}
public boolean canZoomOut() {
boolean canZoomOut = true;
try {
Field mActualScale = WebView.class.getDeclaredField("mActualScale");
Field mMinZoomScale = WebView.class
.getDeclaredField("mMinZoomScale");
Field mInZoomOverview = WebView.class
.getDeclaredField("mInZoomOverview");
mActualScale.setAccessible(true);
mMinZoomScale.setAccessible(true);
mInZoomOverview.setAccessible(true);
canZoomOut = mActualScale.getFloat(this) > mMinZoomScale
.getFloat(this) && !mInZoomOverview.getBoolean(this);
} catch (Exception e) {
try {
Field mZoomManager = WebView.class
.getDeclaredField("mZoomManager");
if (mZoomManager != null) {
mZoomManager.setAccessible(true);
Object zoomManager = mZoomManager.get(this);
if (zoomManager != null) {
Field mEmbeddedZoomControl = zoomManager.getClass()
.getDeclaredField("mEmbeddedZoomControl");
if (mEmbeddedZoomControl != null) {
mEmbeddedZoomControl.setAccessible(true);
Object zoomControlEmbedded = mEmbeddedZoomControl
.get(zoomManager);
if (zoomControlEmbedded != null) {
mZoomManager = zoomControlEmbedded.getClass()
.getDeclaredField("mZoomManager");
if (mZoomManager != null) {
mZoomManager.setAccessible(true);
zoomManager = mZoomManager
.get(zoomControlEmbedded);
Method canZoomOutMethod = zoomManager
.getClass().getDeclaredMethod(
"canZoomOut");
if (canZoomOutMethod != null) {
canZoomOutMethod.setAccessible(true);
Object canZoomOutObj = canZoomOutMethod
.invoke(zoomManager,
new Object[0]);
if (canZoomOutObj != null
&& canZoomOutObj instanceof Boolean) {
return (Boolean) canZoomOutObj;
}
}
}
}
}
}
}
} catch (Exception e2) {
}
}
return canZoomOut;
}
@SuppressLint("SetJavaScriptEnabled")
@SuppressWarnings("deprecation")
private void initWebSettings() {
WebSettings webSettings = getSettings();
webSettings.setRenderPriority(RenderPriority.HIGH);
webSettings.setTextSize(TextSize.NORMAL);// 设置字体
// 设置支持缩放
webSettings.setAllowFileAccess(true);// 设置可以访问文件
webSettings.setDomStorageEnabled(true);
// 设置屏幕自适应
if (Integer.parseInt(Build.VERSION.SDK) <= 10) {
webSettings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
} else {
webSettings.setLayoutAlgorithm(LayoutAlgorithm.NORMAL);
}
// 启用插件
// webSettings.setPluginsEnabled(true);
// 设置缓存
webSettings.setAppCacheEnabled(true);
webSettings.setAppCacheMaxSize(10 * 1204 * 1024);
webSettings.setDatabaseEnabled(true);
webSettings.setBlockNetworkImage(false);//延迟加载图片，首先加载文字
this.setBackgroundColor(context.getResources().getColor(
R.color.white));
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
// 去掉缩放按钮
webSettings.setDisplayZoomControls(false);
webSettings.setSupportZoom(true);// 是否支持变焦
webSettings.setBuiltInZoomControls(true);// 设置WebView是否应该使用其内置变焦机制,显示放大缩小
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
this.setInitialScale(100);// 初始化时缩放
webSettings.setJavaScriptEnabled(true);
this.addJavascriptInterface(new JavaScriptinterface(context), "android");
this.setWebViewClient(new WebViewClient() {
@Override
public void doUpdateVisitedHistory(WebView view, String url,
boolean isReload) {
super.doUpdateVisitedHistory(view, url, isReload);
}
public boolean shouldOverrideUrlLoading(WebView view, String url) {
DfheWebView.this.loadUrl(url);// 点击超链接的时候重新在原来进程上加载URL
return true;
}
@Override
public void onPageFinished(WebView view, String url) {
}
});
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
// TODO Auto-generated method stub
return super.onKeyDown(keyCode, event);
}
public interface OnScrollListener {
void onScroll();
}
}
628180
五、WebView 踩过的坑：
1.WebView内存泄漏问题
解决方案：
1.展示webview的activity可以另开一个进程，这样就能和我们app的主进程分开了，即使webview产生了oom崩溃等问题也不会影响到主程序，在Androidmanifest.xml的activity标签里加上Android:process=”packagename.web”就可以了，并且当这个 进程结束时，请手动调用System.exit(0)。
- 如果实在不想用开额外进程的方式解决webview 内存泄露的问题，那么下面的方法很大程度上可以避免这种情况,在webview的 destroy方法里 调用这个方法就行了。
public void releaseAllWebViewCallback() {
if (android.os.Build.VERSION.SDK_INT < 16) {
try {
Field field = WebView.class.getDeclaredField("mWebViewCore");
field = field.getType().getDeclaredField("mBrowserFrame");
field = field.getType().getDeclaredField("sConfigCallback");
field.setAccessible(true);
field.set(null, null);
} catch (NoSuchFieldException e) {
if (BuildConfig.DEBUG) {
e.printStackTrace();
}
} catch (IllegalAccessException e) {
if (BuildConfig.DEBUG) {
e.printStackTrace();
}
}
} else {
try {
Field sConfigCallback = Class.forName("android.webkit.BrowserFrame").getDeclaredField("sConfigCallback");
if (sConfigCallback != null) {
sConfigCallback.setAccessible(true);
sConfigCallback.set(null, null);
}
} catch (NoSuchFieldException e) {
if (BuildConfig.DEBUG) {
e.printStackTrace();
}
} catch (ClassNotFoundException e) {
if (BuildConfig.DEBUG) {
e.printStackTrace();
}
} catch (IllegalAccessException e) {
if (BuildConfig.DEBUG) {
e.printStackTrace();
}
}
}
}
2.getSettings().setBuiltInZoomControls(true) 引发的crash。
这个方法调用以后 如果你触摸屏幕 弹出的提示框还没消失的时候 你如果activity结束了 就会报错了。3.0以上 4.4以下很多手机会出现这种情况。解决方法是在activity的onDestroy方法里手动的将webiew设置成 setVisibility(View.GONE)
3.WebView后台耗电问题。
WebView会自己开启一些线程，如果没有正确的销毁，这些残留的线程会一直在后台运行，导致耗费电量。还有在有的手机里，你如果webview加载的html里 有一些js 一直在执行比如动画之类的东西，如果此刻webview 挂在了后台，这些资源是不会被释放 用户也无法感知，导致一直占有cpu 耗电特别快。
解决方案：在Activity.onDestroy()中直接调用System.exit(0)，使得应用程序完全被移出虚拟机。在Activity的onstop和onresume里分别把setJavaScriptEnabled();给设置成false和true。
六、WebView进阶，缓存原理：
原文链接：WebView缓存原理分析和应用
减少流量和资源的占用，加载完一次后Js没有变化就不再发起网络请求去加载网页
- 浏览器自带的网页数据缓存：浏览器自带
- H5缓存：由web页面的开发者设置
利用App Cache 来缓存js文件
浏览器缓存机制是通过HTTP协议Header里的Cache-Control和Last-Modified等字段来控制的。
接受响应时： 加载文件时，浏览器是否发出请求字段：
Cache-Control:max-age=36000**，这表示缓存时长为36000秒。如果36000秒内需要再次请求这个文件，那么浏览器不会发出请求，直接使用本地的缓存的文件。这是HTTP/1.1标准中的字段。
发起请求时：服务器决定文件是否需要更新的字段：
Last-Modified:Wed, 28 Sep 2016 09:24:35 GMT，表示这个文件最后的修改时间是2016年9月28日9点24分35秒。这个字段对于浏览器来说，会在下次请求的时候作为Request Header的If-Modified-Since字段带上。例如浏览器缓存的文件已经超过了Cache-Control，那么需要加载这个文件时，就会发出请求，请求的Header有一个字段为If-Modified-Since：Wed, 28 Sep 2016 09:24:35 GMT，服务器接收到请求后，会把文件的Last-Modified时间和这个时间对比，如果时间没变，那么浏览器将返回304 Not Modified给浏览器，且content-length肯定是0个字节。如果时间有变化，那么服务器会返回200 OK，并返回相应的内容给浏览器。
WebView 如何设置：设置WebView的Cache Mode： - LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据。
- LOAD_DEFAULT: 根据cache-control决定是否从网络上取数据。
- LOAD_CACHE_NORMAL: API level 17中已经废弃，从API level 11开始作用同LOAD_DEFAULT模式
- LOAD_NO_CACHE: 不使用缓存，只从网络获取数据。
- LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。本地没有缓存时才从网络上获取。
例子
WebSettings settings = webView.getSettings();
settings.setCacheMode(WebSettings.LOAD_DEFAULT);
浏览器默认缓存的路径
WebView自带的浏览器协议支持的缓存，在不同的系统版本上，位置是不一样的。
H5的缓存
这个Cache是由开发Web页面的开发者控制的，而不是由Native去控制的，但是Native里面的WebView也需要我们做一下设置才能支持H5的这个特性
1.工作原理
写Web页面代码时，指定manifest属性即可让页面使用App Cache。通常html页面代码会这么写：
<html manifest="xxx.appcache">
</html>
xxx.appcache文件用的是相对路径，这时appcache文件的路径是和页面一样的。也可以使用的绝对路径，但是域名要保持和页面一致。
完整的xxx.appcache文件一般包括了3个section，基本格式如下：
CACHE MANIFEST
# 2017-05-13 v1.0.0
/bridge.js
NETWORK:
*
FALLBACK:
/404.html
CACHE MANIFEST下面文件就是要被浏览器缓存的文件
NETWORK下面的文件就是要被加载的文件
FALLBACK下面的文件是目标页面加载失败时的显示的页面
AppCache工作的原理：
当一个设置了manifest文件的html页面被加载时，CACHE MANIFEST指定的文件就会被缓存到浏览器的App Cache目录下面。当下次加载这个页面时，会首先应用通过manifest已经缓存过的文件，然后发起一个加载xxx.appcache文件的请求到服务器，如果xxx.appcache文件没有被修改过，那么服务器会返回304 Not Modified给到浏览器，如果xxx.appcache文件被修改过，那么服务器会返回200 OK，并返回新的xxx.appcache文件的内容给浏览器，浏览器收到之后，再把新的xxx.appcache文件中指定的内容加载过来进行缓存。
可以看到，AppCache缓存需要在每次加载页面时都发出一个xxx.appcache的请求去检查manifest文件是不是有更新（byte by byte）。根据这篇文章（H5 缓存机制浅析 移动端 Web 加载性能优化）的介绍，AppCache有一些坑的地方，且官方已经不推荐使用了，但目前主流的浏览器依然是支持的。文章里主要提到下面这些坑：要更新缓存的文件，需要更新包含它的 manifest 文件，那怕只加一个空格。常用的方法，是修改 manifest 文件注释中的版本号。如：# 2012-02-21 v1.0.0
被缓存的文件，浏览器是先使用，再通过检查 manifest 文件是否有更新来更新缓存文件。这样缓存文件可能用的不是最新的版本。
在更新缓存过程中，如果有一个文件更新失败，则整个更新会失败。
manifest 和引用它的HTML要在相同 HOST。
manifest 文件中的文件列表，如果是相对路径，则是相对 manifest 文件的相对路径。
manifest 也有可能更新出错，导致缓存文件更新失败。
没有缓存的资源在已经缓存的 HTML 中不能加载，即使有网络。例如：http://appcache-demo.s3-website-us-east-1.amazonaws.com/without-network/
manifest 文件本身不能被缓存，且 manifest 文件的更新使用的是浏览器缓存机制。所以 manifest 文件的 Cache-Control 缓存时间不能设置太长。
2.WebView如何设置才能支持AppCache
WebView默认是没有开启AppCache支持的，需要添加下面这几行代码来设置：
WebSettings webSettings = webView.getSettings();
webSettings.setAppCacheEnabled(true);
String cachePath = getApplicationContext().getCacheDir().getPath(); // 把内部私有缓存目录'/data/data/包名/cache/'作为WebView的AppCache的存储路径
webSettings.setAppCachePath(cachePath);
webSettings.setAppCacheMaxSize(5 * 1024 * 1024);
注意：WebSettings的setAppCacheEnabled和setAppCachePath都必须要调用才行。
3.存储AppCache的路径
按照Android SDK的API说明，setAppCachePath是可以用来设置AppCache路径的，但是我实际测试发现，不管你怎么设置这个路径，设置到应用自己的内部私有目录还是外部SD卡，都无法生效。AppCache缓存文件最终都会存到/data/data/包名/app_webview/cache/Application Cache这个文件夹下面，在上面的Android 4.4和5.1系统目录截图可以看得到，但是如果你不调用setAppCachePath方法，WebView将不会产生这个目录。这里有点让我觉得奇怪，我猜测可能从某一个系统版本开始，为了缓存文件的完整性和安全性考虑，SDK实现的时候就吧AppCache缓存目录设置到了内部私有存储。
关于WebView的基础用法基本就这么多，了解本篇足以应付项目中的场景，但使用WebView也会遇到很多小问题，我会结合以往总结一下，再拜读一下大家的博客遇到的问题总结一下~
如果喜欢请点个赞再走~
github地址：https://github.com/bigeyechou
