Android WebView开发（一）--WebView的使用介绍

1.前言

目前很多公司的 App 就只使用一个 WebView 作为整体框架， App 中的所有内容全部使用 HTML5 进行展示，这样只需要写一次 HTML5 代码，就可以在 Android 和 iOS 平台上运行，这就是所谓的「 跨平台 」。随着 HTML5 的普及，很多 App 都会内嵌 WebView 来加载 HTML5 页面，即 Native 和 HTML5 共存，这就是当下最流行的「 混合开发 」。HTML5 除了开发简单，还有一个优势就是迭代方便, 只需要修改服务端的 HTML5 页面，App 会同步更新，无论是做活动推广 App 还是及时修复 Bug 都带来的极大的便利。不过 HTML5 劣势也很明显，受制于国内的网速限制。 虽然国内已经普及了 4g 网络，但是网速还是不尽如人意。HTML5 加载受限于网络，没有原生控件流畅，用户体验相对较差， 所以目前完全使用 HTML5 开发 App 并没有成为主流。我所在的项目组也使用HTML5开发比较频繁，这个时候了解WebView使用就变得尤为重要了，而WebView的坑也是非常的多，我在开发中就遇到了许多莫名其妙的问题。 所以准备写几篇文章总结一下，文章按照类来进行分类。WebView开发常用的类是 WebView , WebSettings , WebViewClient , WebChromeClient。
这里是WebView开发第一篇： WebView 的使用介绍；

2. Android WebView 简介

我们先来看一下官方对Android WebView的介绍

A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.

总结起来就是：WebView是一个基于WebKit引擎的，并且可以在activity展现Web页面的控件。

3. 简单使用

3.1、添加网络权限

<uses-permission android:name="android.permission.INTERNET" />

3.2 添加布局页面
这里介绍另外一种方式，通过addView添加进去
1.在布局页面添加布局

  <FrameLayout
        android:id="@+id/webViewWrap"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible" />

2.实体化webview并添加到布局中

        webViewWrap = findViewById(R.id.webViewWrap); //上面的FrameLayout
        webView = new WebView(MyApplication.getAppContext()); //使用应用上下文，可以防止内存泄露，如果传入activity的上下文，需要将webview remove掉。下面有讲解。
        webViewWrap.addView(webView);

3.加载页面

//方式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");

   // 方式4： 加载 HTML 页面的一小段内容
  WebView.loadData(String data, String mimeType, String encoding)
// 参数说明：
// 参数1：一段HTML代码
// 参数2：展示内容的类型
// 参数3：字节码

到这一步我们就能够展示一个WebView页面了，不过是通过外部浏览器打开的。但是还有许多优化的地方。

4.WebView的状态

//激活WebView为活跃状态，能正常执行网页的响应，可以在activity 的回调方法中调用
webView.onResume() ；

//当页面被失去焦点被切换到后台不可见状态，需要执行onPause，可以在activity 的回调方法中调用
//通过onPause动作通知内核暂停所有的动作，比如DOM的解析、plugin的执行、JavaScript执行。
webView.onPause()；

//当应用程序(存在webview)被切换到后台时，这个方法不仅仅针对当前的webview而是全局的全应用程序的webview
//它会暂停所有webview的layout，parsing，javascripttimer。降低CPU功耗。
webView.pauseTimers()

//恢复pauseTimers状态
webView.resumeTimers()；

//销毁Webview
//在关闭了Activity时，如果Webview的音乐或视频，还在播放。就必须销毁Webview
//但是注意：webview调用destory时,webview仍绑定在Activity上
//这是由于自定义webview构建时传入了该Activity的context对象
//因此需要先从父容器中移除webview,然后再销毁webview:
ViewParent parent = mWebView.getParent();
        if (parent != null) {
            ((ViewGroup) parent).removeView(mWebView);// 防止内存泄露
        } 
webView.destroy();

5. 关于前进 / 后退网页

//是否可以后退
Webview.canGoBack() 
//后退网页
Webview.goBack()

//是否可以前进                     
Webview.canGoForward()
//前进网页
Webview.goForward()

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

常见用法：Back键控制网页后退

问题：在不做任何处理前提下 ，浏览网页时点击系统的“Back”键,整个 Browser 会调用 finish()而结束自身
目标：点击返回后，是网页回退而不是推出浏览器
解决方案：在当前Activity中处理并消费掉该 Back 事件

6. 清除缓存数据

//清除网页访问留下的缓存
//由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
Webview.clearCache(true);

//清除当前webview访问的历史记录
//只会webview访问历史记录里的所有记录除了当前访问记录
Webview.clearHistory()；

//这个api仅仅清除自动完成填充的表单数据，并不会清除WebView存储到本地的数据
Webview.clearFormData()；

WebView 的使用介绍就先到这里了，下一篇将会讲解WebSettings的使用。