【移動(dòng)應(yīng)用開發(fā)技術(shù)】WebView的介紹與簡單實(shí)現(xiàn)Android和H5互調(diào)的方法

【移動(dòng)應(yīng)用開發(fā)技術(shù)】WebView的介紹與簡單實(shí)現(xiàn)Android和H5互調(diào)的方法

為什么要學(xué)習(xí)Android與H5互調(diào)？微信，QQ空間等大量軟件都內(nèi)嵌了H5，不得不說是一種趨勢。Android與H5互調(diào)可以讓我們的實(shí)現(xiàn)混合開發(fā)，至于混合開發(fā)就是在一個(gè)App中內(nèi)嵌一個(gè)輕量級(jí)的瀏覽器，一部分原生的功能改為Html5來開發(fā)。

優(yōu)勢：使用H5實(shí)現(xiàn)的功能能夠在不升級(jí)App的情況下動(dòng)態(tài)更新，而且可以在Android或iOS的App上同時(shí)運(yùn)行，節(jié)約了成本，提高了開發(fā)效率。

原理：其實(shí)就是Java代碼和JavaScript之間的調(diào)用。開局插入一張文章的目錄結(jié)構(gòu)：

WebView簡介要實(shí)現(xiàn)Android與H5互調(diào)，WebView是一個(gè)很重要的控件，WebView可以很好地幫助我們展示html頁面,所以有必要先了解一下WebView。一丶WebView常用方法loadUrl加載界面，其次還有LoadData和LoadDataWithBase方法setWebViewClient（如果用戶設(shè)置了WebViewClient，則在點(diǎn)擊新的鏈接以后就不會(huì)跳轉(zhuǎn)到系統(tǒng)瀏覽器了，而是在本W(wǎng)ebView中顯示。注意：并不需要覆蓋shouldOverrideUrlLoading方法，同樣可以實(shí)現(xiàn)所有的鏈接都在WebView中打開。）WebViewClient主要用來輔助WebView處理各種通知、請求等事件，通過setWebViewClient方法設(shè)置。以下是它的幾種常見用法：實(shí)現(xiàn)對網(wǎng)頁中超鏈接的攔截(比如如果是極客導(dǎo)航的主頁，則直接攔截轉(zhuǎn)到百度主頁)：

當(dāng)點(diǎn)擊頁面中的鏈接后，會(huì)在WebView加載URL前回調(diào)shouldOverrideUrlLoading(WebViewview,Stringurl)方法，一般點(diǎn)擊一個(gè)鏈接此方法調(diào)用一次。關(guān)于shouldOverrideUrlLoading返回值的誤區(qū)：網(wǎng)上很多解釋是returntrue代表在本W(wǎng)ebView中打開鏈接，returnfalse代表調(diào)用系統(tǒng)瀏覽器打開鏈接。其實(shí)只要設(shè)置了WebViewClient，則就不會(huì)調(diào)用系統(tǒng)瀏覽器。

那么shouldOverrideUrlLoading的返回值到底代表什么呢？returntrue，則在打開新的url時(shí)WebView就不會(huì)再加載這個(gè)url了，所有處理都需要在WebView中操作，包含加載；returnfalse，則系統(tǒng)就認(rèn)為上層沒有做處理，接下來還是會(huì)繼續(xù)加載這個(gè)url的；默認(rèn)returnfalse。具體的區(qū)別展示如下：

加載百度主頁，設(shè)置WebViewClient后，重寫shouldOverrideUrlLoading(WebViewview,Stringurl)方法，第一張是返回false的截圖（點(diǎn)擊后正常跳轉(zhuǎn)），第二章是返回true的截圖（點(diǎn)擊無反應(yīng)，如果希望能夠跳轉(zhuǎn)，則需要我們自己進(jìn)行處理）：

還有一點(diǎn)需要注意的是，如果我們攔截了某個(gè)url，那么returnfalse和returntrue區(qū)別不大，所以一般建議returnfalse。加載網(wǎng)頁時(shí)替換某個(gè)資源（比如在加載一個(gè)網(wǎng)頁時(shí)，需要加載一個(gè)logo圖片，而我們想要替換這個(gè)logo圖片，用我們assets目錄下的一張圖片替代）

我們知道我們在加載一個(gè)網(wǎng)頁的同時(shí)也會(huì)加載js,css,圖片等資源，所以會(huì)多次調(diào)用shouldInterceptRequest方法，我們可以在shouldInterceptRequest中進(jìn)行圖片替換。

注意：shouldInterceptRequest有兩個(gè)重載：

①publicWebResourceResponseshouldInterceptRequest(WebViewview,Stringurl)【已過時(shí)】

②publicWebResourceResponseshouldInterceptRequest(WebViewview,WebResourceRequestrequest)

這兩種方法主要是第二個(gè)參數(shù)的不同，WebResourceRequest將能夠獲取更多的信息，提供了getUrl(),getMethod,getRequestHeaders等方法。這里主要是為了展示效果，使用了第一種回調(diào)方法。實(shí)現(xiàn)方法如下：設(shè)置開始加載網(wǎng)頁、加載完成、加載錯(cuò)誤時(shí)處理處理https請求，為WebView處理ssl證書設(shè)置WebView默認(rèn)是不處理https請求的，需要在WebViewClient子類中重寫父類的onReceivedSslError函數(shù)setWebChromeClientWebChromeClient主要用來輔助WebView處理Javascript的對話框、網(wǎng)站圖標(biāo)、網(wǎng)站標(biāo)題以及網(wǎng)頁加載進(jìn)度等。通過WebView的setWebChromeClient()方法設(shè)置。顯示頁面加載進(jìn)度在WebChromeClient子類中重寫父類的onProgressChanged函數(shù)，progress表示當(dāng)前頁面加載的進(jìn)度，為1至100的整數(shù)加快HTML網(wǎng)頁加載完成速度（默認(rèn)情況html代碼下載到WebView后，webkit開始解析網(wǎng)頁各個(gè)節(jié)點(diǎn)，發(fā)現(xiàn)有外部樣式文件或者外部腳本文件時(shí)，會(huì)異步發(fā)起網(wǎng)絡(luò)請求下載文件，但如果在這之前也有解析到image節(jié)點(diǎn)，那勢必也會(huì)發(fā)起網(wǎng)絡(luò)請求下載相應(yīng)的圖片。在網(wǎng)絡(luò)情況較差的情況下，過多的網(wǎng)絡(luò)請求就會(huì)造成帶寬緊張，影響到css或js文件加載完成的時(shí)間，造成頁面空白loading過久。解決的方法就是告訴WebView先不要自動(dòng)加載圖片，等頁面finish后再發(fā)起圖片加載。）setDownloadListener通常webview渲染的界面中含有可以下載文件的鏈接，點(diǎn)擊該鏈接后，應(yīng)該開始執(zhí)行下載的操作并保存文件到本地中。創(chuàng)建DownloadListener給webview加入監(jiān)聽goBack()返回上一瀏覽頁面，通過重寫onKeyDown方法實(shí)現(xiàn)點(diǎn)擊返回鍵返回上一瀏覽頁面而非退出程序二丶WebSettings配置獲取WebSettings對象

WebSettingswebSettings=webView.getSettings();

WebSettingswebSettings=webView.getSettings();

常用設(shè)置方法（1）支持js

settings.setJavaScriptEnabled(true);

settings.setJavaScriptEnabled(true);

（2）設(shè)置緩存方式，主要有以下幾種：

LOAD_CACHE_ONLY:不使用網(wǎng)絡(luò)，只讀取本地緩存數(shù)據(jù)。

LOAD_DEFAULT:根據(jù)cache-control決定是否從網(wǎng)絡(luò)上取數(shù)據(jù)。

LOAD_CACHE_NORMAL:APIlevel17中已經(jīng)廢棄,從APIlevel11開始作用同LOAD_DEFAULT模式。

LOAD_NO_CACHE:不使用緩存，只從網(wǎng)絡(luò)獲取數(shù)據(jù)。

LOAD_CACHE_ELSE_NETWORK：只要本地有，無論是否過期，或者no-cache，都使用緩存中的數(shù)據(jù)。

settings.setCacheMode(WebSettings.LOAD_NO_CACHE);

settings.setCacheMode(WebSettings.LOAD_NO_CACHE);

（3）開啟DOMstorageAPI功能（HTML5提供的一種標(biāo)準(zhǔn)的接口，主要將鍵值對存儲(chǔ)在本地，在頁面加載完畢后可以通過JavaScript來操作這些數(shù)據(jù)。）

settings.setDomStorageEnabled(true);

settings.setDomStorageEnabled(true);

（4）設(shè)置數(shù)據(jù)庫緩存路徑

settings.setDatabasePath(cacheDirPath);

settings.setDatabasePath(cacheDirPath);

（5）設(shè)置ApplicationCaches緩存目錄

settings.setAppCachePath(cacheDirPath);

settings.setAppCachePath(cacheDirPath);

（6）設(shè)置默認(rèn)編碼

settings.setDefaultTextEncodingName(“utf-8”);

settings.setDefaultTextEncodingName(“utf-8”);

（7）將圖片調(diào)整到適合webview的大小

settings.setUseWideViewPort(false);

settings.setUseWideViewPort(false);

（8）支持縮放

settings.setSupportZoom(true);

settings.setSupportZoom(true);

（9）支持內(nèi)容重新布局

settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);

settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);

（10）多窗口

settings.supportMultipleWindows();

settings.supportMultipleWindows();

（11）設(shè)置可以訪問文件

settings.setAllowFileAccess(true);

settings.setAllowFileAccess(true);

（12）當(dāng)webview調(diào)用requestFocus時(shí)為webview設(shè)置節(jié)點(diǎn)

settings.setNeedInitialFocus(true);

settings.setNeedInitialFocus(true);

（13）設(shè)置支持縮放

settings.setBuiltInZoomControls(true);

settings.setBuiltInZoomControls(true);

（14）支持通過JS打開新窗口

settings.setJavaScriptCanOpenWindowsAutomatically(true);

settings.setJavaScriptCanOpenWindowsAutomatically(true);

（15）縮放至屏幕的大小

settings.setLoadWithOverviewMode(true);

settings.setLoadWithOverviewMode(true);

（16）支持自動(dòng)加載圖片

settings.setLoadsImagesAutomatically(true);

settings.setLoadsImagesAutomatically(true);

三丶WebViewClient的回調(diào)方法列表WebViewClient主要用來輔助WebView處理各種通知、請求等事件，通過setWebViewClient方法設(shè)置。（1）更新歷史記錄

doUpdateVisitedHistory(WebViewview,Stringurl,booleanisReload)

doUpdateVisitedHistory(WebViewview,Stringurl,booleanisReload)

（2）應(yīng)用程序重新請求網(wǎng)頁數(shù)據(jù)

onFormResubmission(WebViewview,MessagedontResend,Messageresend)

onFormResubmission(WebViewview,MessagedontResend,Messageresend)

（3）在加載頁面資源時(shí)會(huì)調(diào)用，每一個(gè)資源（比如圖片）的加載都會(huì)調(diào)用一次。

onLoadResource(WebViewview,Stringurl)

onLoadResource(WebViewview,Stringurl)

（4）開始載入頁面調(diào)用，通常我們可以在這設(shè)定一個(gè)loading的頁面，告訴用戶程序在等待網(wǎng)絡(luò)響應(yīng)。

onPageStarted(WebViewview,Stringurl,Bitmapfavicon)

onPageStarted(WebViewview,Stringurl,Bitmapfavicon)

（5）在頁面加載結(jié)束時(shí)調(diào)用。同樣道理，我們知道一個(gè)頁面載入完成，于是我們可以關(guān)閉loading條，切換程序動(dòng)作。

onPageFinished(WebViewview,Stringurl)

onPageFinished(WebViewview,Stringurl)

（6）報(bào)告錯(cuò)誤信息

onReceivedError(WebViewview,interrorCode,Stringdescription,StringfailingUrl)

onReceivedError(WebViewview,interrorCode,Stringdescription,StringfailingUrl)

（7）獲取返回信息授權(quán)請求

onReceivedHttpAuthRequest(WebViewview,HttpAuthHandlerhandler,Stringhost,Stringrealm)

onReceivedHttpAuthRequest(WebViewview,HttpAuthHandlerhandler,Stringhost,Stringrealm)

（8）重寫此方法可以讓webview處理https請求。

onReceivedSslError(WebViewview,SslErrorHandlerhandler,SslErrorerror)

onReceivedSslError(WebViewview,SslErrorHandlerhandler,SslErrorerror)

（9）WebView發(fā)生改變時(shí)調(diào)用

onScaleChanged(WebViewview,floatoldScale,floatnewScale)

onScaleChanged(WebViewview,floatoldScale,floatnewScale)

（10）Key事件未被加載時(shí)調(diào)用

onUnhandledKeyEvent(WebViewview,KeyEventevent)

onUnhandledKeyEvent(WebViewview,KeyEventevent)

（11）重寫此方法才能夠處理在瀏覽器中的按鍵事件。

shouldOverrideKeyEvent(WebViewview,KeyEventevent)

shouldOverrideKeyEvent(WebViewview,KeyEventevent)

（12）在網(wǎng)頁跳轉(zhuǎn)時(shí)調(diào)用，這個(gè)函數(shù)我們可以做很多操作，比如我們讀取到某些特殊的URL，于是就可以不打開地址，取消這個(gè)操作，進(jìn)行預(yù)先定義的其他操作，這對一個(gè)程序是非常必要的。

shouldOverrideUrlLoading(WebViewview,Stringurl)

shouldOverrideUrlLoading(WebViewview,Stringurl)

（13）在加載某個(gè)網(wǎng)頁的資源的時(shí)候多次調(diào)用（已過時(shí)）

shouldInterceptRequest(WebViewview,Stringurl)

shouldInterceptRequest(WebViewview,Stringurl)

（14）在加載某個(gè)網(wǎng)頁的資源的時(shí)候多次調(diào)用

shouldInterceptRequest(WebViewview,WebResourceRequestrequest)

shouldInterceptRequest(WebViewview,WebResourceRequestrequest)

注意：四丶WebChoromeClient的回調(diào)方法列表WebChromeClient主要用來輔助WebView處理Javascript的對話框、網(wǎng)站圖標(biāo)、網(wǎng)站標(biāo)題以及網(wǎng)頁加載進(jìn)度等。通過WebView的setWebChromeClient()方法設(shè)置。（1）監(jiān)聽網(wǎng)頁加載進(jìn)度

onProgressChanged(WebViewview,intnewProgress)

onProgressChanged(WebViewview,intnewProgress)

（2）監(jiān)聽網(wǎng)頁標(biāo)題:比如百度頁面的標(biāo)題是“百度一下，你就知道”

onReceivedTitle(WebViewview,Stringtitle)

onReceivedTitle(WebViewview,Stringtitle)

（3）監(jiān)聽網(wǎng)頁圖標(biāo)

onReceivedIcon(WebViewview,Bitmapicon)

onReceivedIcon(WebViewview,Bitmapicon)

Java和JavaScript互調(diào)為方便展示，使用addJavascriptInterface方式實(shí)現(xiàn)與本地js交互（存在漏洞）。也可通過其他方式實(shí)現(xiàn)，比如攔截ur進(jìn)行參數(shù)解析l等。Java調(diào)JS首先是JS的一段代碼：

然后是在java中調(diào)用JS中的方法

以上代碼就是調(diào)用了JS中一個(gè)叫javaCallJs(arg)的方法，并傳入了一個(gè)name參數(shù)。（具體效果下面有展示）JS調(diào)java配置Javascript接口

實(shí)現(xiàn)Javascript接口類

JS中調(diào)用java代碼

window.Android.showToast(‘JS中傳來的參數(shù)')”中的”Android”即addJavascriptInterface（）中指定的，并且JS向java傳遞了參數(shù)，類型為String。而showToast(Stringarg)會(huì)以Toast的形式彈出此參數(shù)。java與JS互調(diào)代碼示例先看效果圖：代碼非常簡單，并且加了注釋，直接看代碼就可以了。首先是本地的JavaAndJavaScriptCall.html文件，放在asstes目錄下

javaCallJs是java調(diào)用JS的方法，showToast方法是JS調(diào)用java的方法接下來是布局文件，activity_main.xml

很簡單，就是一個(gè)輸入框和一個(gè)確定按鈕，點(diǎn)擊按鈕會(huì)調(diào)用JS中的方法。MainActivity

需要注意的地方參考鏈接：安卓webview的一些坑保存狀態(tài)恢復(fù)狀態(tài)（在activity的onCreate(bundlesavedInstanceState)里）其他一些常見問題：1.WebViewClient.onPageFinished()。

你永遠(yuǎn)無法確定當(dāng)WebView調(diào)用這個(gè)方法的時(shí)候，網(wǎng)頁內(nèi)容是否真的加載完畢了。當(dāng)前正在加