网上关于HTML5规范定稿的一篇见解文章:
http://www.csdn.net/article/2014-11-06/2822513-how-html5-changes
本篇主要基于这段时间对WebView的使用经验和网上学习到的对WebView开发做一个要点小结:
 
 
一、WebView基于webkit引擎展现web页面的控件,使用前需要在Android Manifest file中配置internet访问权限,否则提示页面无法访问。
| 1 2 3 4 | <manifest ...="">    <uses-permission android:name="android.permission.INTERNET">    ...</uses-permission></manifest> | 
 
 
1、设置WebSettings类
WebSettings用来对WebView的配置进行配置和管理,比如是否可以进行文件操作、缓存的设置、页面是否支持放大和缩小、是否允许使用数据库api、字体及文字编码设置、是否允许js脚本运行、是否允许图片自动加载、是否允许数据及密码保存等等
示例代码如下:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | WebSettings webSettings = mWebView.getSettings();webSettings.setJavaScriptEnabled(true);webSettings.setCacheMode(WebSettings.LOAD_DEFAULT); webSettings.setDomStorageEnabled(true);  webSettings.setDatabaseEnabled(true);webSettings.setAppCacheEnabled(true); webSettings.setAllowFileAccess(true);webSettings.setSavePassword(true);webSettings.setSupportZoom(true);webSettings.setBuiltInZoomControls(true);  /**  * 用WebView显示图片,可使用这个参数 设置网页布局类型:  * 1、LayoutAlgorithm.NARROW_COLUMNS :适应内容大小  * 2、LayoutAlgorithm.SINGLE_COLUMN : 适应屏幕,内容将自动缩放  */webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);webSettings.setUseWideViewPort(true); mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);mWebView.setHorizontalScrollbarOverlay(true);mWebView.setHorizontalScrollBarEnabled(true);mWebView.requestFocus(); | 
WebChromeClient会在一些影响浏览器ui交互动作发生时被调用,比如WebView关闭和隐藏、页面加载进展、js确认框和警告框、js加载前、js操作超时、webView获得焦点等等
| 1 | mWebView.setWebChromeClient(new MyWebChromeClient()); | 
WebViewClient会在一些影响内容渲染的动作发生时被调用,比如表单的错误提交需要重新提交、页面开始加载及加载完成、资源加载中、接收到https认证需要处理、页面键盘响应、页面中的url打开处理等等
| 1 | mWebView.setWebViewClient(new MyWebViewClient()); | 
使Js调用Native本地Java对象,实现本地Java代码和HTML页面进行交互,
注意:因为安全问题的考虑 Google在使用Android API 17以上的版本的时候 需要通过@JavascriptInterface来注解的Java函数才能被识别可以被Js调用。
 
 
 三、设置当前网页的链接仍在WebView中跳转,而不是跳到手机浏览器里显示,
 在WebViewClient的子类中重写shouldOverrideUrlLoading函数 代码如下:
| 1 2 3 4 5 6 7 8 | webView.setWebViewClient(new WebViewClient() {        @Override    public boolean shouldOverrideUrlLoading(WebView view, String url) {          view.loadUrl(url);          return true;      }  }); | 
四、设置开始加载网页、加载完成、加载错误时处理
在WebViewClient子类中分别重写如下父类函数 代码如下:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | webView.setWebViewClient(new WebViewClient() {        @Override    public void onPageStarted(WebView view, String url, Bitmap favicon) {        super.onPageStarted(view, url, favicon);        // 开始加载网页时处理 如:显示"加载提示" 的加载对话框        DialogManager.showLoadingDialog(this);    }    @Override    public void onPageFinished(WebView view, String url) {        super.onPageFinished(view, url);        // 网页加载完成时处理  如:让 加载对话框 消失        DialogManager.dismissLoadingDialog();    }    @Override    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {        super.onReceivedError(view, errorCode, description, failingUrl);        // 加载网页失败时处理  如:        view.loadDataWithBaseURL(null,                "<span style="\"color:#FF0000\"">网页加载失败</span>",                "text/html",                "utf-8",                null);    }  }); | 
WebView默认是不处理https请求的,页面显示空白,需要进行如下设置
在WebViewClient子类中重写父类的onReceivedSslError函数 代码如下:
| 1 2 3 4 5 6 7 8 9 | webView.setWebViewClient(new WebViewClient() {        @Override    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {        handler.proceed();  // 接受信任所有网站的证书        // handler.cancel();   // 默认操作 不处理        // handler.handleMessage(null);  // 可做其他处理    } }); | 
六、显示页面加载进度
在WebChromeClient子类中重写父类的onProgressChanged函数 代码如下:
| 1 2 3 4 5 6 7 8 9 10 11 | webView.setWebChromeClient(new WebChromeClient() {        public void onProgressChanged(WebView view, int progress) {          setTitle("页面加载中,请稍候..." + progress + "%");          setProgress(progress * 100);            if (progress == 100) {              setTitle(R.string.app_name);          }      }  }); | 
progress表示当前页面加载的进度,为1至100的整数
七、back键控制网页后退
Activity默认的back键处理为结束当前Activity,WebView查看了很多网页后,希望按back键返回上一次浏览的页面,这个时候我们就需要覆盖WebView所在Activity的onKeyDown函数,告诉他如何处理,代码如下:
| 1 2 3 4 5 6 7 | public boolean onKeyDown(int keyCode, KeyEvent event) {      if (webView.canGoBack() && event.getKeyCode() == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {          webView.goBack();          return true;      }      return super.onKeyDown(keyCode, event);  } | 
webView.goBack();表示返回至webView的上次访问页面
 八、使用addJavascriptInterface完成和js交互
 1、Js中调Native本地Java方法
 设置webView的addJavascriptInterface方法,该方法有两个参数,第一个参数为被绑定到js中的类实例,第二个参数为在js中暴露的类别名,在js中引用java对象就是用这个名字
 在Native Java代码如下:
 
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | mWebView.getSettings().setJavaScriptEnabled(true);mWebView.addJavascriptInterface(new JavaScriptInterface(this), "Android");class JavaScriptInterface{    Context mContext;    /** Instantiate the interface and set the context */    JavaScriptInterface(Context c) {        mContext = c;    }    /** Show a toast from the web page       * 由Js调用执行Native本地Java方法      */    @JavascriptInterface    public void showToast(String toast) {        Log.d("TAG", "Js Invoker Native Function");        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();    }               } | 
| 1 2 3 4 5 6 7 | <input type="button" value="Say hello" onclick="showAndroidToast('Hello Android!')"><script type="text/javascript">    function showAndroidToast(toast) {        Android.showToast(toast);    }</script> | 
比如在HTML中有如下Js函数
| 1 2 3 4 5 | <script type="text/javascript">      function showAlert() {        alert("Be executed by Native");    }</script> | 
| 1 | mWebView.loadUrl("javascript:showAlert()"); | 
九、WebView缓存模式的设置
1、网页数据缓存
当使用WebView加载HTML网页时,会在我们data/应用package下生成database与cache两个文件夹:
我们请求的Url记录是保存在webviewCache.db里,而url的内容是保存在webviewCache文件夹下.
五种缓存模式的设置setCacheMode:
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,都使用缓存中的数据。
如示例代码:
| 1 2 3 4 5 6 | WebSettings webSettings = mWebView.getSettings();webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);  //设置 缓存模式  // 开启 DOM storage API 功能  webSettings.setDomStorageEnabled(true);  //开启 database storage API 功能  webSettings.setDatabaseEnabled(true); | 
2、H5缓存
通过setAppCacheEnabled(boolean flag)设置H5的缓存是否打开,默认关闭。
根据setAppCachePath(String appCachePath)提供的路径,在H5使用缓存过程中生成的缓存文件。
通过setAppCacheMaxSize(long appCacheMaxSize)设置缓存最大容量。
如示例代码:
| 1 2 3 4 5 6 7 8 9 10 | String cacheDirPath = getCacheDir().getAbsolutePath()+ "/webViewCache ";WebSettings webSettings = mWebView.getSettings();//开启 database storage API 功能  webSettings.setDatabaseEnabled(true);    //设置数据库缓存路径  webSettings.setDatabasePath(cacheDirPath); //开启Application H5 Caches 功能  webSettings.setAppCacheEnabled(true); //设置Application Caches 缓存目录  webSettings.setAppCachePath(cacheDirPath); | 
十、加快HTML网页加载完成速度
默认情况html代码 下载 到WebView后,webkit开始解析网页各个节点,发现有外部样式文件或者外部脚本文件时,会异步发起网络请求下载文件,但如果在这之前也有解析到image节点,那势必也会发起网络请求下载相应的图片。在网络情况较差的情况下,过多的网络请求就会造成带宽紧张,影响到css或js文件加载完成的时间,造成页面空白loading过久。解决的方法就是告诉WebView先不要自动加载图片,等页面finish后再发起图片加载。
故在WebView初始化时设置如下代码:
| 1 2 3 4 5 6 7 | public void int () {    if(Build.VERSION.SDK_INT >= 19) {        webView.getSettings().setLoadsImagesAutomatically(true);    } else {        webView.getSettings().setLoadsImagesAutomatically(false);    }} | 
| 1 2 3 4 5 6 | @Overridepublic void onPageFinished(WebView view, String url) {    if(!webView.getSettings().getLoadsImagesAutomatically()) {        webView.getSettings().setLoadsImagesAutomatically(true);    }} | 
 
 
 十一、WebView硬件加速导致页面渲染闪烁问题解决方法
 关于Android硬件加速 开始于Android 3.0 (API level 11),在四个级别上开启/关闭硬件加速
 1、Application级别:为整个应用程序开启硬件加速,在AndroidManifest中加入如下配置
| 1 | </application> | 
| 1 | </activity> | 
| 1 2 3 | getWindow().setFlags(    WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,    WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED); | 
| 1 | mView.setLayerType(View.LAYER_TYPE_SOFTWARE, null); | 
 [//TODO 关于Android硬件加速 小吕有时间会更详细的单独整理成一篇来做介绍 
 先提供学习地址:http://android.toolib.net/guide/topics/graphics/hardware-accel.html ]
 
 我们开启硬件加速后,WebView渲染页面更加快速,拖动也更加顺滑。但有个副作用就是容易会出现页面加载白块同时界面闪烁现象。解决这个问题的方法是设置WebView暂时关闭硬件加速 代码如下:
 
| 1 2 3 | if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {    webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);} | 
十二、其他注意事项:
1> 从网络上下载html页面的过程应放在工作线程(后台线程)中
2> html下载成功后渲染出html的步骤应放在UI主线程,不然WebView加载网页过程会容易报错