前言

首先本篇文章是铺垫，为了下一篇的WebView的优化。所以本文还是比较轻松的，都是说的如何去使用，保姆级入门教程哦。

Android WebView在Android平台上是一个特殊的View，它能用来显示网页。
WebView的内部是基于WebKit引擎来实现渲染网页。
一般来说，WebView不仅可以单独使用，也可以联合其子类一起使用，接下来我们也简要了解一下下面这三个部分的内容：

• WebView的常见方法
• WebView常用的子类 （WebSettings类、WebViewClient类、WebChromeClient类）
• WebView和JavaScript的交互

WebView的常见方法

WebView的状态相关方法

//激活WebView为活跃状态，能正常执行网页的响应webView.onResume() ；//当页面被失去焦点被切换到后台不可见状态，需要执行onPause()
//通过onPause()动作通知内核暂停所有的动作，比如DOM的解析、JavaScript执行等webView.onPause()；//当应用程序(存在webview)被切换到后台时，这个方法不仅仅针对当前的webview而是全局的全应用程序的webview//它会暂停所有webview的布局显示、解析、延时，从而降低CPU功耗
webView.pauseTimers()//恢复pauseTimers状态webView.resumeTimers()；//销毁Webview //在关闭了Activity时，如果Webview的音乐或视频，还在播放，就必须销毁Webview。
//但是注意：webview调用destory时,webview仍绑定在Activity上
//这是由于自定义webview构建时传入了该Activity的context对象
//因此需要先从父容器中移除webview,然后再销毁webview
rootLayout.removeView(webView);
webView.destroy();

WebView的前进和后退

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

比如：当不做任何处理时，浏览网页时，点击系统的“Back”键。就会退出当前的Activity。那么，在这里，我们可以做一些处理，让点击“Back”键后，让网页返回上一页而不是直接退出浏览器。

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

WebView的缓存

//清除网页访问留下的缓存
//由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
Webview.clearCache(true);//清除当前webview访问的历史记录
//只会webview访问历史记录里的所有记录除了当前访问记录
Webview.clearHistory()；//这个api仅仅清除自动完成填充的表单数据，并不会清除WebView存储到本地的数据
Webview.clearFormData()；

WebView常用的子类

WebSettings类

作用：对WebView进行配置和管理，可以设置与Javascript交互、适应屏幕、设置缓存模式等等设置项

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

一些常用的对WebView的设置

//如果访问的页面中要与Javascript交互，则webview必须设置支持Javascript
webSettings.setJavaScriptEnabled(true);//支持插件
webSettings.setPluginsEnabled(true);//设置自适应屏幕，两者合用
webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小
webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小//缩放操作
webSettings.setSupportZoom(true); //支持缩放，默认为true。是下面那个的前提。
webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false，则该WebView不可缩放
webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件//webview中缓存设置
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据//LOAD_DEFAULT: （默认）根据cache-control决定是否从网络上取数据。//LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.//LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据//设置可以访问文件
webSettings.setAllowFileAccess(true); 
//支持通过JS打开新窗口
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); 
//支持自动加载图片
webSettings.setLoadsImagesAutomatically(true); 
//设置编码格式
webSettings.setDefaultTextEncodingName("utf-8");

WebViewClient类

作用：主要处理webView加载过程中的各种事件，并在其中进行拦截和处理，例如加载开始、加载完成、加载错误、页面跳转等。
设计模式：采用了适配器模式

webView.setWebViewClient(new WebViewClient(){@Overridepublic boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {// 重写shouldOverrideUrlLoading()方法，使得打开网页时不调用系统浏览器， 而是在本WebView中显示view.loadUrl(request.getUrl().toString());return true;}@Overridepublic void onPageStarted(WebView view, String url, Bitmap favicon) {// 页面加载的开始，我们可以去启动进度条等加载动画}@Overridepublic void onPageFinished(WebView view, String url) {// 页面加载结束，可以去关闭进度条等加载动画}@Overridepublic void onLoadResource(WebView view, String url) {// 每次加载资源都会去调用// 可以对一些加载资源进行拦截}@Overridepublic void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {// 加载页面的服务器出现错误时（如404）调用。// 通常出现错误的时候，不会给用户直接展示404。而是替换本地的错误展示页面// 比如本地的一个HTML(自己写一个HTML放在代码根目录的assets文件夹下)switch(errorCode) {case 404:view.loadUrl("file:///android_assets/error.html");break;}}@Overridepublic void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {// 处理https请求// webView默认是不处理https请求的，页面显示空白handler.proceed(); //表示等待证书响应handler.cancel(); //表示挂起连接，为默认方式handler.handleMessage(null); //可做其他处理}
});

WebChromeClient类

作用：主要处理webView中关于页面的各种事件，例如页面标题改变、进度改变、弹窗提示、获取网页信息等
设计模式：采用了适配器模式

webView.setWebChromeClient(new WebChromeClient(){@Overridepublic void onProgressChanged(WebView view, int newProgress) {//获得网页的加载进度并显示processView.set(newProgress);}//拦截JS中的三种弹窗@Overridepublic boolean onJsAlert(WebView view, String url, String message, JsResult result) {// 当网页调用alert()来弹出alert弹出框前回调，用以拦截alert()函数return true;}@Overridepublic boolean onJsConfirm(WebView view, String url, String message, JsResult result) {// 当网页调用confirm()来弹出confirm弹出框前回调，用以拦截confirm()函数return true;}@Overridepublic boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {// 当网页调用prompt()来弹出prompt弹出框前回调，用以拦截prompt()函数return true;}@Overridepublic void onReceivedTitle(WebView view, String title) {// 获取标题的titleView.setText(title);}
});

WebView和JavaScript的交互

WebView和JS的交互，是在开发中经常遇到的需求，下面简单介绍几种交互的方式。

JS调用Android

对于JS调用Android代码的方法有3种：

1. 通过 WebView 的addJavascriptInterface()进行对象映射
2. 通过 WebViewClient 的shouldOverrideUrlLoading()方法回调拦截 url
3. 通过 WebChromeClient 的 onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt() 消息

建议：使用第一种方法去进行交互、使用简单、也便于封装。

通过 WebView 的addJavascriptInterface()进行对象映射

第一步：准备一个HTML，当然可以是下发的HTML，放在app/src/main/assets/下为js.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>WebView</title><style>body {background-color: #f2f2f2;}</style>
<!--由于对象映射，所以调用jsMethod对象等于调用Android映射的对象--><script>function callAndroid(){jsMethod.hello("哈哈哈,笑死了");}</script>
</head>
<body>
<!--触发事件-->
<button type="button" id="button1" onclick="callAndroid()">点击按钮，笑死了</button>
</body>
</html>

第二步：定义一个与JS对象映射关系的Android类：JsMethod()

public class JsMethod{//定义JS需要调用的方法，被JS调用的方法必须加入@JavascriptInterface注解@JavascriptInterfacepublic void hello(String msg){Toast.makeText(aaa.this, msg, Toast.LENGTH_SHORT).show();}
}

第三步：在Android里通过WebView设置Android类与JS代码的映射

WebSettings webSettings = webView.getSettings();
//设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
//通过addJavascriptInterface和@JavascriptInterface映射hello方法
webView.addJavascriptInterface(new JsMethod(), "jsMethod");
//加载本地的HTML
webView.loadUrl("file:///android_asset/js.html");

通过WebViewClient的shouldOverrideUrlLoading()方法回调拦截url

第一步：还是一样准备一个HTML，当然可以是下发的HTML

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>SoarYuan</title>
<!--约定的url协议为：js://webview?arg1=哈哈哈&arg2=呜呜呜--><script>function callAndroid(){document.location = "js://webview?arg1=哈哈哈&arg2=呜呜呜";}</script>
</head><!-- 点击按钮则调用callAndroid()方法  -->
<body>
<button type="button" id="button2" onclick="callAndroid()">点击按钮，调用Android</button>
</body>
</html>

第二步：在Android通过WebViewClient复写shouldOverrideUrlLoading()
当该JS通过Android的mWebView.loadUrl(“file:///android_asset/javascript.html”)加载后，就会回调shouldOverrideUrlLoading()。

webView.loadUrl("file:///android_asset/js2.html");
webView.setWebViewClient(new WebViewClient() {@Nullable@Overridepublic WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {//拦截URL，进行解析Uri uri = request.getUrl();Set<String> collection = uri.getQueryParameterNames();new Handler(Looper.getMainLooper()).post(() ->{Toast.makeText(aaa.this, "哈哈哈" + collection.size(), Toast.LENGTH_SHORT).show();});return super.shouldInterceptRequest(view, request);}
});

通过 WebChromeClient 的 onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt() 消息

具体原理：Android通过 WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调分别拦截JS对话框（即上述三个方法），得到他们的消息内容，然后解析即可。
第一步：还是一样准备一个HTML，当然可以是下发的HTML

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>SoarYuan</title><script>function clickprompt(){// 调用prompt()var result=prompt("js://webview?arg1=哈哈哈&arg2=呜呜呜");alert("demo " + result);}</script>
</head><!-- 点击按钮则调用clickprompt()  -->
<body>
<button type="button" id="button3" onclick="clickprompt()">点击调用,Android方法</button>
</body>
</html>

第二步：在Android通过WebChromeClient复写onJsPrompt()
当使用mWebView.loadUrl(“file:///android_asset/javascript.html”)加载了上述JS代码后，就会触发回调onJsPrompt()

webView.setWebChromeClient(new WebChromeClient(){@Overridepublic boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {// 注意一般是通过message去传送内容，message是代表promt())的内容。Uri uri = Uri.parse(message);Set<String> collection = uri.getQueryParameterNames();new Handler(Looper.getMainLooper()).post(() ->{Toast.makeText(aaa.this, "哈哈哈" + collection.size(), Toast.LENGTH_SHORT).show();});return super.onJsPrompt(view, url, message, defaultValue, result);}
});

Android调用JS

1. 通过WebView的loadUrl()
2. 通过WebView的evaluateJavascript()

建议：两种结合使用，因为WebView的evaluateJavascript()是在Android4.4之后支持的，之前要适配WebView的loadUrl()，一起使用。

通过WebView的loadUrl()

第一步：准备一个HTML，当然可以是下发的HTML

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>WebView</title><!--Android需要调用的方法--><script>function callJS(){alert("Android调用了JS的callJS方法");}</script>
</head>
</html>

第二步：在Android里通过WebView设置调用JS代码
JS代码调用一定要在 onPageFinished() 回调之后才能调用
不然会报错：Uncaught ReferenceError: functionName is not defined

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true); // 设置与Js交互的权限
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);// 设置允许JS弹窗webView.loadUrl("file:///android_asset/js4.html");
button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// 通过Handler发送消息webView.post(new Runnable() {@Overridepublic void run() {// 调用javascript的callJS()方法webView.loadUrl("javascript:callJS()");}});}
});// webview只是载体，内容的渲染需要使用webviewChromClient类去实现
// 通过设置WebChromeClient对象处理JavaScript的对话框
webView.setWebChromeClient(new WebChromeClient());

通过WebView.evaluateJavascript()-Android4.4之后

• 比第一种方法效率更高、使用更简洁。Android 4.4 后才可使用
• 该方法的执行不会使页面刷新，而第一种方法（loadUrl ）的执行则会。

webView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {@Override public void onReceiveValue(String value) { //此处为 js 返回的结果     }
}); 

正常使用需要混合使用

因为带适配Android 4.4之前的版本

if (Build.VERSION.SDK_INT < 18) {webView.loadUrl("javascript:callJS()");
} else {webView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {@Overridepublic void onReceiveValue(String value) {//此处为 js 返回的结果}});
}

开发中出现的问题

WebView内存泄漏的问题

可以分为三点进行解决：

• 不在XML中初始化，直接在代码中new出来，添加到布局中
  • 当在xml布局文件中定义了一个WebView时，WebView会被添加到视图层级中，并且被视为一个视图对象而被持有。在Activity或Fragment销毁时，如果没有及时释放WebView对象，就会导致WebView的内存泄露。
  • 相比之下，通过代码将WebView实例化并添加到视图层级中，可以更加灵活地控制WebView的生命周期。在Activity或Fragment销毁时，在相应的生命周期方法（如onDestroy）中调用WebView的destroy()方法来释放WebView对象，从而避免WebView的内存泄露。
• 不要让 WebView 持有对 Activity/Fragment 的 Context 引用
  • WebView 内存泄露的主要原因是引用了 Activity/Fragment 的 Context，加之 WebView 本身的设计问题，导致 Activity/Fragment 无法被即时释放，既然 WebView 无法即时释放 Context，因此使用全局的Context去解决这个问题。

// 让 WebView 使用 ApplicationContext
WebView webview = new WebView(this.applicationContext)

• 销毁时，停止 WebView 的加载，并从父控件中将其移除

@Override
protected void onDestroy() {if (webView != null) {webView.removeAllViews();((ViewGroup) webView.getParent()).removeView(webView);webView.setTag(null);webView.clearHistory();webView.destroy();webView = null;}
}

补充1：其实新版的webView（在Android6.0）以上，webView泄漏的问题已经被官方解决了，但是还是建议加上这些方案，避免不必要的问题发生。
补充2：如果使用的是单独进程的话，就没这个问题了，直接杀死进程就完事了。

Alert无法弹出

没有设置WebChromeClient,按照以下代码设置：

• webview只是载体，内容的渲染需要使用webviewChromClient类去实现
• 通过设置WebChromeClient对象处理JavaScript的对话框

webView.setWebChromeClient(new WebChromeClient());

Uncaught ReferenceError: functionName is not defined

原因：页面没加载完，找不到JS方法
调用等待onPageFinished() 回调之后

@Override
public void onPageFinished(WebView view, String url) {// 页面加载结束，可以去关闭进度条等加载动画
}

Uncaught TypeError: Object [object Object] has no method

• 没加@JavascriptInterface注释
• 代码混淆问题：在混淆文件加入映射的JS调用类

在proguard-rules.pro中添加混淆。
-keepattributes *Annotation*-keepattributes *JavascriptInterface*-keep public class xx.xxx.JsMethod{public <methods>;
}
其中xx.xxx..JsMethod 是不需要混淆的类

总结

奥利给！！！！