未经本人授权，不得转载！否则必将维权到底
目前很多公司的 App 就只使用一个 WebView 作为整体框架， App 中的所有内容全部使用 HTML5 进行展示，这样只需要写一次 HTML5 代码，就可以在 Android 和 iOS 平台上运行，这就是所谓的「 跨平台 」。随着 HTML5 的普及，很多 App 都会内嵌 WebView 来加载 HTML5 页面，即 Native 和 HTML5 共存，这就是当下最流行的「 混合开发 」。个人觉得 HTML5 最大的优势是迭代方便, 只需要修改服务端的 HTML5 页面，App 会同步更新，无论是做活动推广 App 还是及时修复 Bug 都带来的极大的便利。不过 HTML5 劣势也很明显，受制于国内的网速限制。 虽然国内已经普及了 4g 网络，但是网速还是不尽如人意。HTML5 加载受限于网络，没有原生控件流畅，用户体验相对较差， 所以目前完全使用 HTML5 开发 App 并没有成为主流。
一、基本用法
1、添加网络权限
<manifest>
<uses-permission android:name="android.permission.INTERNET" />
</manifest>
2、在 App 布局中添加一个 WebView：
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
3、在 Activity 里找到添加的 WebView 控件：
WebView webView = (WebView) findViewById(R.id.webview);
4、使用 WebView 加载网页
//加载网页链接
webView.loadUrl("http://keithxiaoy.com");
//加载本地assets目录下的网页
webView.loadUrl("file:///android_asset/keithxiaoy.html");
//加载手机本地的html页面
webView.loadUrl("content://com.android.htmlfileprovider/sdcard/keithxiaoy.html");
//加载 HTML 页面的一小段内容。参数1：需要截取展示的内容、参数2：展示内容的类型、参数3：字节码
webView.loadData(String data, String mimeType, String encoding)
二、WebView 的基本设置
WebSettings webSettings = mWebView.getSettings();
//如果访问的页面中要与Javascript交互，则webview必须设置支持Javascript
webSettings.setJavaScriptEnabled(true);
// 若加载的 html 里有JS 在执行动画等操作，会造成资源浪费（CPU、电量）
// 在 onStop 和 onResume 里分别把 setJavaScriptEnabled() 给设置成 false 和 true 即可
//支持插件
webSettings.setPluginsEnabled(true);
//设置自适应屏幕，两者合用
webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小
webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
//缩放操作
webSettings.setSupportZoom(true); //支持缩放，默认为true。是下面那个的前提。
webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false，则该WebView不可缩放
webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件
//其他细节操作
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存
webSettings.setAllowFileAccess(true); //设置可以访问文件
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口
webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式
WebViewClient
webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
Log.d("KeithXiaoY","开始加载");
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
Log.d("KeithXiaoY","加载结束");
}
// 链接跳转都会走这个方法
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
Log.d("KeithXiaoY","Url："+ url );
view.loadUrl(url);// 强制在当前 WebView 中加载 url
return true;
}
});
WebChromeClient
webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
Log.d("KeithXiaoY","newProgress："+ newProgress );
}
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
Log.d("KeithXiaoY","标题："+ title);
}
});
WebView 中网页的前进 / 后退
webView.goBack();//跳到上个页面
webView.goForward();//跳到下个页面
webView.canGoBack();//是否可以跳到上一页(如果返回false,说明已经是第一页)
webView.canGoForward();//是否可以跳到下一页(如果返回false,说明已经是最后一页)
常见用法：Back 键控制网页后退
- 问题：在不做任何处理前提下 ，浏览网页时点击系统的「 Back 」键,整个 Browser 会调用 finish()而结束自身
- 目标：点击返回后，是网页回退而不是推出浏览器
- 解决方案：在当前 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 高级用法
1、缓存
- 缓存设置
//优先使用缓存:
webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
//缓存模式如下：
//LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
//LOAD_DEFAULT: （默认）根据cache-control决定是否从网络上取数据。
//LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
//LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。
//不使用缓存:
webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
- 清理缓存
//清除网页访问留下的缓存
//由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
webView.clearCache(true);
//清除当前webview访问的历史记录
//只会webview访问历史记录里的所有记录除了当前访问记录
webView.clearHistory()；
//这个api仅仅清除自动完成填充的表单数据，并不会清除WebView存储到本地的数据
webView.clearFormData()；
另外一种方式:
//删除缓存文件夹
File file = CacheManager.getCacheFileBaseDir();
if (file != null && file.exists() && file.isDirectory()) {
for (File item : file.listFiles()) {
item.delete();
}
file.delete();
}
//删除缓存数据库
context.deleteDatabase("webview.db");
context.deleteDatabase("webviewCache.db");
2、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、Android 和 JavaScript 交互###
JavaScript 和 Android 可以交互，我们可以在网页中随意调用本地的 Java 代码，实现了 WebView 和本地代码的交互。所以 WebView 的功能非常强大，我们直接在一个 WebView 中就几乎可以实现 Android 的所有功能，所以现在才会出现不少纯 HTML5 开发的 App，这往往适合创业型公司刚起步阶段。
-
JavaScript 调用 Android
WebSettings settings = mWebView.getSettings(); settings.setJavaScriptEnabled(true);//开启JavaScript mWebView.loadUrl("file:///android_asset/keithxiaoy.html");//加载本地网页 mWebView.setWebChromeClient(new WebChromeClient());//此行代码可以保证JavaScript的Alert弹窗正常弹出 //核心方法, 用于处理JavaScript被执行后的回调 mWebView.addJavascriptInterface(new JsCallback() { @JavascriptInterface//注意:此处一定要加该注解,否则在4.1+系统上运行失败 @Override public void onJsCallback() { System.out.println("JavaScript调用Android啦"); } }, "keithxiaoy");//参1是回调接口的实现;参2是JavaScript回调对象的名称 //定义回调接口 public interface JsCallback { public void onJsCallback(); } -
Android 调用 JavaScript
//直接使用webview加载js就可以了 mWebView.loadUrl("javascript:wave()"); -
附上 keithxiaoy.html 源码
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <script language="javascript"> /* This function is invoked by the activity */ function wave() { alert("Android调用JavaScript"); } </script> <body> <!-- JavaScript调用Android代码 --> <a onClick="window.demo.onJsCallback()"><div style="width:80px; margin:0px auto; padding:10px; text-align:center; border:2px solid #202020;" > <br> Click me! </div></a> </body> </html>
注意：JavaScript 回调的方法的书写格式: onClick="window.demo.onJsCallback()
格式是: Windows.js 回调对象的名称(要和 Java 代码中设置的一致)。回调方法名称(要和 Java 代码中设置的一致)
- 注意事项
JavaScript 调用 Android 的方式具有版本兼容问题。经测试，在 2.2、4.0+ 系统上运行稳定，可以正常调用，但是在 2.3 系统上运行时出现崩溃。原因是底层进行 JNI 调用时，把一个 Java 中的 String 对象当数组来访问了，最终导致虚拟机崩溃。基本算是一个比较严重的 Bug，没办法解决。所以如果说用 WebView 组件想在 JavaScript 和 Java 互调就没办法适配所有机型。
#本文参考：
[Android开发：最全面、最易懂的Webview使用详解](http://www.jianshu.com/p/3c94ae673e2a)
[Google Issue Tracker ](https://issuetracker.google.com/issues/36923426)
[android2.3上用WebView组件js和java相互调用报错](http://www.2cto.com/kf/201108/101375.html)
---
