【Android WebView】WebView的基本使用

前言

现在越来越多的App都将原生功能开发转向混合开发，原生只写个“外壳”，内嵌H5页面，便于维护。今天来介绍下Android中内置的高性能内核浏览器webkit。提供了控件WebView以及API

WebView介绍

1、作用

1.渲染web页面,可以加载网络或者本地html文件
2.和JavaScript进行互相调用

2、WebView创建

在程序中获取WebView实例有两种方式。

2-1.动态创建WebView实例

private var webView: WebView? = null

//构建webview对象
webView = WebView(applicationContext)

2-2.布局文件中声明

<WebView
  android:id="@+id/webview"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/>

3、常用类以及常用方法介绍

下面介绍WebView类中几个常用的方法。

3-1.声明获取实例

首先在布局文件中声明 web_view_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

 <FrameLayout
    android:id="@+id/web_view_layout"
    android:layout_width="match_parent"
   android:layout_height="match_parent" />
        
</LinearLayout>

动态获取WebView实例以及动态添加到布局中

//获取Framelayout对象
webFrameLayout = findViewById(R.id.web_view_layout)

//构建webview对象
webView = WebView(applicationContext)

//构建WebView的参数
val params = FrameLayout.LayoutParams(
	ViewGroup.LayoutParams.MATCH_PARENT,
	ViewGroup.LayoutParams.MATCH_PARENT)
	
//将WebView动态添加到FrameLayout中
webViewLayout!!.addView(webView, params)

if ("" != linkUrl) {
   val tmpLink = linkUrl.toLowerCase()
   if (!tmpLink.startsWith("http://") && !tmpLink.startsWith("https://") && !tmpLink.startsWith("file://")) {
         linkUrl = "http://$linkUrl"
     }
	     webView!!.loadUrl(linkUrl)
}

动态创建WebView以及动态添加进入布局的好处是在当页面销毁时候，可以手动将WebView从布局中移除，这样可以避免造成内存泄漏。

override fun onDestroy() {
    super.onDestroy()
    //1.将FrameLayout中所有子布局移除(webview)
    webViewLayout!!.removeAllViews()
    if (webView != null) {
    //2.清除缓存
    webView!!.clearCache(true)
    //3.清除历史记录
    webView!!.clearHistory()
    //4.调用WebView生命周期方法，此时webview仍然绑定Activity上，所以先调用第1步
    webView!!.destroy()
   }
}

3-2、WebView生命周期（参考Activity生命周期）

//webView处于前台可见状态，用户可以操作
webView!!.onResume() 

//页面失去焦点切换到后台，用户无法操作
webView!!.onPause()

//暂停webview所有的layout，parsing，javascripttimer。降低CPU功耗。
webView.pauseTimers()

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

//webview调用destory时,webview仍绑定在Activity上,webview构建时传入了该Activity的context对象
//需要先从父容器中移除webview,然后再销毁webview:
webFrameLayout.removeView(webView); 
webView.destroy();

3-3、WebViewClient类

主要用户处理WebView上的一些事件。

webView!!.webViewClient = object : WebViewClient() {

     //页面开始加载 可以设置加载进度条
     override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {


    }

     //复写该方法，表示url加载进本webview中而不会打开系统的浏览器
     override fun shouldOverrideUrlLoading(webView: WebView?, request: WebResourceRequest?): Boolean {
           webView!!.loadUrl("")
           return true
     }

    //页面加载结束，可以设置进度条状态
    override fun onPageFinished(view: WebView?, url: String?) {

     }

     //加载主机指定的url中的资源
     override fun onLoadResource(view: WebView?, url: String?) {

     }

     //加载页面的服务器出现错误时候调用
     override fun onReceivedError(view: WebView?, request: WebResourceRequest?, error: WebResourceError?) {

      }

     //webview加载https请求时报错
     override fun onReceivedSslError(view: WebView?, handler: SslErrorHandler?, error: SslError?) {

     //继续挂载请求,等待响应
     handler!!.proceed()

     //取消挂载请求
	 //handler.cancel()

     //发送消息，做其他处理
	 //handler.handleMessage(null)
     }
}

3-4、WebChromeClient类

WebView辅助类，常用功能有处理Javascript，获取web页面的title和图标等。

webView!!.webChromeClient = object : WebChromeClient() {

      //获取网页的加载进度
     override fun onProgressChanged(view: WebView?, newProgress: Int) {

          }

     //获取网页的title，可以设置在当前webview上
     override fun onReceivedTitle(view: WebView?, title: String?) {

          }

     //获取网页的图标
     override fun onReceivedIcon(view: WebView?, icon: Bitmap?) {

     }
 }

3-5、WebSetting类

val webSetting = webView!!.settings
	 
//启用webview中文件访问，这是针对系统文件。android 的资源文件仍可访问
webSetting.allowFileAccess = true
webSetting.layoutAlgorithm = WebSettings.LayoutAlgorithm.NARROW_COLUMNS

//设置WebView是否应支持使用屏幕缩放进行缩放
webSetting.setSupportZoom(true)

//设置缩放控件是否显示
webSetting.builtInZoomControls = true

//设置为false:始终为webview的宽度，true:为视图上最宽的宽度
webSetting.useWideViewPort = true

//设置WebView是否支持多个窗口
webSetting.setSupportMultipleWindows(true)

//是否按宽度缩小内容以适合屏幕
webSetting.loadWithOverviewMode = true

//设置是否应启用应用程序缓存API
webSetting.setAppCacheEnabled(true)

//设置是否启用数据库存储API
webSetting.databaseEnabled = true

//设置是否启用DOM存储API
webSetting.domStorageEnabled = true

//设置是否开启定位
webSetting.setGeolocationEnabled(true)

//设置是否应显示屏幕缩放控件
webSetting.displayZoomControls = false

//设置缓存模式
webSetting.cacheMode = WebSettings.LOAD_NO_CACHE

结尾

本篇介绍了WebView的基本使用方法，下篇将介绍WebView和JavaScript交互，以及内存泄漏问题和解决方案。

Android WebView系列（二）Android和JS互调，BridgeWebView的使用。