本文将带你了解Android应用开发之Android混合开发之WebView的基础用法介绍，希望本文对大家学Android有所帮助

前言
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("//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() {@Overridepublic 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;} @Overridepublic 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() {  @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() {@Overridepublic 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;} @Overridepublic 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)。
2. 如果实在不想用开额外进程的方式解决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，都使用缓存中的数据。本地没有缓存时才从网络上获取。
例子
?12WebSettings settings = webView.getSettings();settings.setCacheMode(WebSettings.LOAD_DEFAULT);
浏览器默认缓存的路径
WebView自带的浏览器协议支持的缓存，在不同的系统版本上，位置是不一样的。
H5的缓存
这个Cache是由开发Web页面的开发者控制的，而不是由Native去控制的，但是Native里面的WebView也需要我们做一下设置才能支持H5的这个特性
1.工作原理
写Web页面代码时，指定manifest属性即可让页面使用App Cache。通常html页面代码会这么写：
xxx.appcache文件用的是相对路径，这时appcache文件的路径是和页面一样的。也可以使用的绝对路径，但是域名要保持和页面一致。
完整的xxx.appcache文件一般包括了3个section，基本格式如下：
CACHE MANIFEST# 2017-05-13 v1.0.0/bridge.jsNETWORK:*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 中不能加载，即使有网络。例如：//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缓存目录设置到了内部私有存储。    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之Android频道！