【移动应用开发技术】WebView的介绍与简单实现Android和H5互调的方法

【移动应用开发技术】WebView的介绍与简单实现Android和H5互调的方法

为什么要学习Android与H5互调？微信，QQ空间等大量软件都内嵌了H5，不得不说是一种趋势。Android与H5互调可以让我们的实现混合开发，至于混合开发就是在一个App中内嵌一个轻量级的浏览器，一部分原生的功能改为Html5来开发。

优势：使用H5实现的功能能够在不升级App的情况下动态更新，而且可以在Android或iOS的App上同时运行，节约了成本，提高了开发效率。

原理：其实就是Java代码和JavaScript之间的调用。开局插入一张文章的目录结构：

WebView简介要实现Android与H5互调，WebView是一个很重要的控件，WebView可以很好地帮助我们展示html页面,所以有必要先了解一下WebView。一丶WebView常用方法loadUrl加载界面，其次还有LoadData和LoadDataWithBase方法setWebViewClient（如果用户设置了WebViewClient，则在点击新的链接以后就不会跳转到系统浏览器了，而是在本WebView中显示。注意：并不需要覆盖shouldOverrideUrlLoading方法，同样可以实现所有的链接都在WebView中打开。）WebViewClient主要用来辅助WebView处理各种通知、请求等事件，通过setWebViewClient方法设置。以下是它的几种常见用法：实现对网页中超链接的拦截(比如如果是极客导航的主页，则直接拦截转到百度主页)：

当点击页面中的链接后，会在WebView加载URL前回调shouldOverrideUrlLoading(WebViewview,Stringurl)方法，一般点击一个链接此方法调用一次。关于shouldOverrideUrlLoading返回值的误区：网上很多解释是returntrue代表在本WebView中打开链接，returnfalse代表调用系统浏览器打开链接。其实只要设置了WebViewClient，则就不会调用系统浏览器。

那么shouldOverrideUrlLoading的返回值到底代表什么呢？returntrue，则在打开新的url时WebView就不会再加载这个url了，所有处理都需要在WebView中操作，包含加载；returnfalse，则系统就认为上层没有做处理，接下来还是会继续加载这个url的；默认returnfalse。具体的区别展示如下：

加载百度主页，设置WebViewClient后，重写shouldOverrideUrlLoading(WebViewview,Stringurl)方法，第一张是返回false的截图（点击后正常跳转），第二章是返回true的截图（点击无反应，如果希望能够跳转，则需要我们自己进行处理）：

还有一点需要注意的是，如果我们拦截了某个url，那么returnfalse和returntrue区别不大，所以一般建议returnfalse。加载网页时替换某个资源（比如在加载一个网页时，需要加载一个logo图片，而我们想要替换这个logo图片，用我们assets目录下的一张图片替代）

我们知道我们在加载一个网页的同时也会加载js,css,图片等资源，所以会多次调用shouldInterceptRequest方法，我们可以在shouldInterceptRequest中进行图片替换。

注意：shouldInterceptRequest有两个重载：

①publicWebResourceResponseshouldInterceptRequest(WebViewview,Stringurl)【已过时】

②publicWebResourceResponseshouldInterceptRequest(WebViewview,WebResourceRequestrequest)

这两种方法主要是第二个参数的不同，WebResourceRequest将能够获取更多的信息，提供了getUrl(),getMethod,getRequestHeaders等方法。这里主要是为了展示效果，使用了第一种回调方法。实现方法如下：设置开始加载网页、加载完成、加载错误时处理处理https请求，为WebView处理ssl证书设置WebView默认是不处理https请求的，需要在WebViewClient子类中重写父类的onReceivedSslError函数setWebChromeClientWebChromeClient主要用来辅助WebView处理Javascript的对话框、网站图标、网站标题以及网页加载进度等。通过WebView的setWebChromeClient()方法设置。显示页面加载进度在WebChromeClient子类中重写父类的onProgressChanged函数，progress表示当前页面加载的进度，为1至100的整数加快HTML网页加载完成速度（默认情况html代码下载到WebView后，webkit开始解析网页各个节点，发现有外部样式文件或者外部脚本文件时，会异步发起网络请求下载文件，但如果在这之前也有解析到image节点，那势必也会发起网络请求下载相应的图片。在网络情况较差的情况下，过多的网络请求就会造成带宽紧张，影响到css或js文件加载完成的时间，造成页面空白loading过久。解决的方法就是告诉WebView先不要自动加载图片，等页面finish后再发起图片加载。）setDownloadListener通常webview渲染的界面中含有可以下载文件的链接，点击该链接后，应该开始执行下载的操作并保存文件到本地中。创建DownloadListener给webview加入监听goBack()返回上一浏览页面，通过重写onKeyDown方法实现点击返回键返回上一浏览页面而非退出程序二丶WebSettings配置获取WebSettings对象

WebSettingswebSettings=webView.getSettings();

WebSettingswebSettings=webView.getSettings();

常用设置方法（1）支持js

settings.setJavaScriptEnabled(true);

settings.setJavaScriptEnabled(true);

（2）设置缓存方式，主要有以下几种：

LOAD_CACHE_ONLY:不使用网络，只读取本地缓存数据。

LOAD_DEFAULT:根据cache-control决定是否从网络上取数据。

LOAD_CACHE_NORMAL:APIlevel17中已经废弃,从APIlevel11开始作用同LOAD_DEFAULT模式。

LOAD_NO_CACHE:不使用缓存，只从网络获取数据。

LOAD_CACHE_ELSE_NETWORK：只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。

settings.setCacheMode(WebSettings.LOAD_NO_CACHE);

settings.setCacheMode(WebSettings.LOAD_NO_CACHE);

（3）开启DOMstorageAPI功能（HTML5提供的一种标准的接口，主要将键值对存储在本地，在页面加载完毕后可以通过JavaScript来操作这些数据。）

settings.setDomStorageEnabled(true);

settings.setDomStorageEnabled(true);

（4）设置数据库缓存路径

settings.setDatabasePath(cacheDirPath);

settings.setDatabasePath(cacheDirPath);

（5）设置ApplicationCaches缓存目录

settings.setAppCachePath(cacheDirPath);

settings.setAppCachePath(cacheDirPath);

（6）设置默认编码

settings.setDefaultTextEncodingName(“utf-8”);

settings.setDefaultTextEncodingName(“utf-8”);

（7）将图片调整到适合webview的大小

settings.setUseWideViewPort(false);

settings.setUseWideViewPort(false);

（8）支持缩放

settings.setSupportZoom(true);

settings.setSupportZoom(true);

（9）支持内容重新布局

settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);

settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);

（10）多窗口

settings.supportMultipleWindows();

settings.supportMultipleWindows();

（11）设置可以访问文件

settings.setAllowFileAccess(true);

settings.setAllowFileAccess(true);

（12）当webview调用requestFocus时为webview设置节点

settings.setNeedInitialFocus(true);

settings.setNeedInitialFocus(true);

（13）设置支持缩放

settings.setBuiltInZoomControls(true);

settings.setBuiltInZoomControls(true);

（14）支持通过JS打开新窗口

settings.setJavaScriptCanOpenWindowsAutomatically(true);

settings.setJavaScriptCanOpenWindowsAutomatically(true);

（15）缩放至屏幕的大小

settings.setLoadWithOverviewMode(true);

settings.setLoadWithOverviewMode(true);

（16）支持自动加载图片

settings.setLoadsImagesAutomatically(true);

settings.setLoadsImagesAutomatically(true);

三丶WebViewClient的回调方法列表WebViewClient主要用来辅助WebView处理各种通知、请求等事件，通过setWebViewClient方法设置。（1）更新历史记录

doUpdateVisitedHistory(WebViewview,Stringurl,booleanisReload)

doUpdateVisitedHistory(WebViewview,Stringurl,booleanisReload)

（2）应用程序重新请求网页数据

onFormResubmission(WebViewview,MessagedontResend,Messageresend)

onFormResubmission(WebViewview,MessagedontResend,Messageresend)

（3）在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次。

onLoadResource(WebViewview,Stringurl)

onLoadResource(WebViewview,Stringurl)

（4）开始载入页面调用，通常我们可以在这设定一个loading的页面，告诉用户程序在等待网络响应。

onPageStarted(WebViewview,Stringurl,Bitmapfavicon)

onPageStarted(WebViewview,Stringurl,Bitmapfavicon)

（5）在页面加载结束时调用。同样道理，我们知道一个页面载入完成，于是我们可以关闭loading条，切换程序动作。

onPageFinished(WebViewview,Stringurl)

onPageFinished(WebViewview,Stringurl)

（6）报告错误信息

onReceivedError(WebViewview,interrorCode,Stringdescription,StringfailingUrl)

onReceivedError(WebViewview,interrorCode,Stringdescription,StringfailingUrl)

（7）获取返回信息授权请求

onReceivedHttpAuthRequest(WebViewview,HttpAuthHandlerhandler,Stringhost,Stringrealm)

onReceivedHttpAuthRequest(WebViewview,HttpAuthHandlerhandler,Stringhost,Stringrealm)

（8）重写此方法可以让webview处理https请求。

onReceivedSslError(WebViewview,SslErrorHandlerhandler,SslErrorerror)

onReceivedSslError(WebViewview,SslErrorHandlerhandler,SslErrorerror)

（9）WebView发生改变时调用

onScaleChanged(WebViewview,floatoldScale,floatnewScale)

onScaleChanged(WebViewview,floatoldScale,floatnewScale)

（10）Key事件未被加载时调用

onUnhandledKeyEvent(WebViewview,KeyEventevent)

onUnhandledKeyEvent(WebViewview,KeyEventevent)

（11）重写此方法才能够处理在浏览器中的按键事件。

shouldOverrideKeyEvent(WebViewview,KeyEventevent)

shouldOverrideKeyEvent(WebViewview,KeyEventevent)

（12）在网页跳转时调用，这个函数我们可以做很多操作，比如我们读取到某些特殊的URL，于是就可以不打开地址，取消这个操作，进行预先定义的其他操作，这对一个程序是非常必要的。

shouldOverrideUrlLoading(WebViewview,Stringurl)

shouldOverrideUrlLoading(WebViewview,Stringurl)

（13）在加载某个网页的资源的时候多次调用（已过时）

shouldInterceptRequest(WebViewview,Stringurl)

shouldInterceptRequest(WebViewview,Stringurl)

（14）在加载某个网页的资源的时候多次调用

shouldInterceptRequest(WebViewview,WebResourceRequestrequest)

shouldInterceptRequest(WebViewview,WebResourceRequestrequest)

注意：四丶WebChoromeClient的回调方法列表WebChromeClient主要用来辅助WebView处理Javascript的对话框、网站图标、网站标题以及网页加载进度等。通过WebView的setWebChromeClient()方法设置。（1）监听网页加载进度

onProgressChanged(WebViewview,intnewProgress)

onProgressChanged(WebViewview,intnewProgress)

（2）监听网页标题:比如百度页面的标题是“百度一下，你就知道”

onReceivedTitle(WebViewview,Stringtitle)

onReceivedTitle(WebViewview,Stringtitle)

（3）监听网页图标

onReceivedIcon(WebViewview,Bitmapicon)

onReceivedIcon(WebViewview,Bitmapicon)

Java和JavaScript互调为方便展示，使用addJavascriptInterface方式实现与本地js交互（存在漏洞）。也可通过其他方式实现，比如拦截ur进行参数解析l等。Java调JS首先是JS的一段代码：

然后是在java中调用JS中的方法

以上代码就是调用了JS中一个叫javaCallJs(arg)的方法，并传入了一个name参数。（具体效果下面有展示）JS调java配置Javascript接口

实现Javascript接口类

JS中调用java代码

window.Android.showToast(‘JS中传来的参数')”中的”Android”即addJavascriptInterface（）中指定的，并且JS向java传递了参数，类型为String。而showToast(Stringarg)会以Toast的形式弹出此参数。java与JS互调代码示例先看效果图：代码非常简单，并且加了注释，直接看代码就可以了。首先是本地的JavaAndJavaScriptCall.html文件，放在asstes目录下

javaCallJs是java调用JS的方法，showToast方法是JS调用java的方法接下来是布局文件，activity_main.xml

很简单，就是一个输入框和一个确定按钮，点击按钮会调用JS中的方法。MainActivity

需要注意的地方参考链接：安卓webview的一些坑保存状态恢复状态（在activity的onCreate(bundlesavedInstanceState)里）其他一些常见问题：1.WebViewClient.onPageFinished()。

你永远无法确定当WebView调用这个方法的时候，网页内容是否真的加载完毕了。当前正在加