自定義項目實例webview

北京傳智播客教育Android應(yīng)用開發(fā)－webView講師：劉亞超北京傳智播客教育

Android應(yīng)用開發(fā)之webView學(xué)習(xí)大綱WebView介紹WebView常用功能java代碼與javaScript代碼之間的相互調(diào)用WebChromeClient的使用Html5介紹Canvas的使用PhoneGap的功能介紹PhoneGap實例北京傳智播客教育Tip1：WebView介紹WebView介紹

webView是一個可以顯示網(wǎng)頁的控件，他的網(wǎng)頁渲染引擎和Safari、Chrome一樣都是Webkit。使用webView來開發(fā)應(yīng)用，有幾個很明顯的優(yōu)勢： 1、搭建Java和Javascript之間交互的橋梁。 2、跨平臺，網(wǎng)頁代碼編寫一次，即可以在任何支持web的平臺上運(yùn)行，如adnroidiphonewp7接省開發(fā)成本，提高開發(fā)效率。 3、資源利用最大化，web開發(fā)人員只用很少的學(xué)習(xí)成本即可以使用webView開發(fā)。4、應(yīng)用程序維護(hù)成本大大降低，只用維護(hù)服務(wù)器端代碼即可。 即有本地應(yīng)用的功能，又有B/S應(yīng)用的優(yōu)勢，可以說是二者的結(jié)合體。北京傳智播客教育

Tip2：WebView的簡單應(yīng)用webView加載內(nèi)容 loadUrl()方法webView加載頁面，可以是url=""或本地頁面"file:///android_asset/index.html"webView1.loadUrl(url);webView的常用設(shè)置 當(dāng)webView對象構(gòu)造生成時，便會生成一個默認(rèn)的webset對象，里面包含了默認(rèn)的設(shè)置，可以用webSet=webView.getSettings();取得webset的引用，并對其進(jìn)行修改。在webView中打開新連接用setWebViewClient方法設(shè)置webView客戶端，用于接收webView發(fā)出的請求，通常的用法是覆蓋其中的方法，自己處理相關(guān)的事件，如：shouldOverrideUrlLoading(WebViewview,Stringurl)；在自身webView中打開新的超鏈接。北京傳智播客教育

Tip2：WebView的簡單應(yīng)用webView中后退鍵和前進(jìn)的處理覆蓋Activity中onKeyDown（）方法，監(jiān)聽后退按鍵，并檢測當(dāng)前webView是否可以后退。如果可以后退，調(diào)用webView.goBack()方法。同理前進(jìn)用webView.goForward()方法。webView頁面刷新

webView頁面需要刷新時，調(diào)用reload()方法即可。webView頁面加載事件 當(dāng)頁面開始加載時和頁面加載完成時如果要處理事件，只需覆蓋webViewClient對象的onPageStrawebView頁面加載進(jìn)度

為webView設(shè)置一個瀏覽器客戶端webView.setWebChromeClient(newWebChromeClient())，并覆蓋onProgressChanged方法，就可以獲得當(dāng)前網(wǎng)頁的加載進(jìn)度北京傳智播客教育

Tip3：webView頁面顯示的優(yōu)化webView中頁面的優(yōu)化

當(dāng)點(diǎn)擊頁面時，隱藏地址欄和工具按鈕，當(dāng)點(diǎn)擊menu按鍵時，顯示地址欄和工具按鈕。 1、為webView設(shè)置onTouch監(jiān)聽，但要注意返回值要為false，將此事件繼續(xù)向下傳遞。否則會出現(xiàn)問題如超鏈接不起作用。2、覆蓋Activity中的onPrepareOptionsMenu方法，此方法在每次點(diǎn)擊menu鍵時，都會執(zhí)行，在此處顯示地址欄和工具按鈕。 *發(fā)現(xiàn)一個bug，當(dāng)點(diǎn)擊webView時，有時候不會觸發(fā)onTouch事件，由于之前：webView.getSettings().setBuiltInZoomControls(true);//設(shè)置出現(xiàn)縮放工具，而這個縮放工具，也是響應(yīng)onTouch事件的，所以會覆蓋掉我們自己設(shè)置的onTouhc監(jiān)聽。解決辦法：不使用webView提供的縮放工具，自己定義按鈕，可以用webView.setInitialScale(50);來設(shè)置網(wǎng)頁的縮放比例。北京傳智播客教育

Tip4：java代碼與javaScript代碼之間的相互調(diào)用java代碼調(diào)用javaScript代碼確保當(dāng)前已經(jīng)加載html頁面，然后用webView.loadUrl("javascript:callFromJava()");即可調(diào)用頁面中的callFromJava方法。javaScript代碼調(diào)用java代碼首先要為webView添加javaScript接口對象webView.addJavascriptInterface(Object,String);然后，就可以在網(wǎng)頁中以這個String為名字，來調(diào)用這個對象，這個對象中的方法，

北京傳智播客教育

Tip5：WebChromeClient的使用javascript中控制臺和alert、confirm、prompt方法的實現(xiàn)

要實現(xiàn)控制臺打印和這幾個方法只需覆蓋WebChromeClient中的相關(guān)方法即可。如控制臺對應(yīng)的方法是：onConsoleMessage（）；alert()對應(yīng)的是onJsAlert()方法；confirm()對應(yīng)的是onJsConfirm()方法；prompt()對應(yīng)的是onJsPrompt()方法

北京傳智播客教育

Tip6：Html5介紹HTML5是什么： HTML5即HTML1.5他將成為HTML、XHTML以及HTMLDOM的新標(biāo)準(zhǔn)。HTML的上一個版本誕生于1999年。自從那以后，Web世界已經(jīng)經(jīng)歷了巨變。HTML5仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些HTML5支持。HTML5中的一些有趣的新特性：用于繪畫的canvas元素用于媒介回放的video和audio元素對本地離線存儲的更好的支持新的特殊內(nèi)容元素，比如article、footer、header、nav、section新的表單控件，比如calendar、date、time、email、url、search

北京傳智播客教育

Tip6：Html5示例視頻播放 支付的視頻格式有ogg,mpeg4,webm。但不是每種瀏覽器都支付這三種視頻格式的，推薦使用mpeg4。示例代碼：<videosrc="movie.mpeg4"width="320"height="240"controls="controls">Yourbrowserdoesnotsupportthevideotag.</video>其中：<video>與</video>之間插入的內(nèi)容是供不支持video元素的瀏覽器顯示的示例二：<videowidth="320"height="240"controls="controls"><sourcesrc="movie.ogg"type="video/ogg"><sourcesrc="movie.mp4"type="video/mp4">Yourbrowserdoesnotsupportthevideotag.</video>

北京傳智播客教育

Tip6：Html5示例音頻播放 直到現(xiàn)在，仍然不存在一項旨在網(wǎng)頁上播放音頻的標(biāo)準(zhǔn)。HTML5規(guī)定了一種通過audio元素來包含音頻的標(biāo)準(zhǔn)方法。audio元素能夠播放聲音文件或者音頻流。當(dāng)前，audio元素支持三種音頻格式OggVorbis,mp3,Wav示例代碼一：<audiosrc="song.ogg"controls="controls">Yourbrowserdoesnotsupporttheaudiotag.</audio><audio>與</audio>之間插入的內(nèi)容是供不支持audio元素的瀏覽器顯示的：示例代碼二：<audiocontrols="controls"><sourcesrc="song.ogg"type="audio/ogg"><sourcesrc="song.mp3"type="audio/mpeg">Yourbrowserdoesnotsupporttheaudiotag.</audio>北京傳智播客教育

Tip6：Html5示例HTML5Canvas

canvas元素用于在網(wǎng)頁上繪制圖形。HTML5的canvas元素使用JavaScript在網(wǎng)頁上繪制圖像。畫布是一個矩形區(qū)域，您可以控制其每一像素。canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。canvas元素本身是沒有繪圖能力的。所有的繪制工作必須在JavaScript內(nèi)部完成：通過Canvas對象的getContext(‘2d’);獲得

CanvasRenderingContext2D對象。由上下文對象，來具體進(jìn)行繪圖工作。北京傳智播客教育

Tip6：Html5示例HTML5Canvas

CanvasRenderingContext2D對象的屬性和方法CanvasRenderingContext2D對象提供了一組用來在畫布上繪制的圖形函數(shù)。可用的函數(shù)非常豐富，它們可以分為以下幾類：繪制矩形、繪制圖像、創(chuàng)建和渲染路徑、顏色、漸變和模式、線條寬度、線帽和線條連接、坐標(biāo)空間和轉(zhuǎn)換、組合、陰影、保存圖形狀態(tài)北京傳智播客教育

Tip6：Html5示例HTML5中新增的事件

觸屏設(shè)備可以綁定的事件分別是：touchstart://手指放到屏幕上的時候觸發(fā)

touchmove://手指在屏幕上移動的時候觸發(fā)

touchend://手指從屏幕上拿起的時候觸發(fā)

touchcancel://系統(tǒng)取消touch事件的時候觸發(fā)這三個事件的event參數(shù)都包含了touches、targetTouches和changedTouches三個保存手指狀態(tài)的列表。但是實際上，在touchend事件中，touches列表為空，所以在獲取手指離開屏幕時的狀態(tài)時，用到的是changedTouches列表。北京傳智播客教育

Tip6：Html5示例HTML5－GeoLocationHTML5GeolocationAPI封裝在navigator.geolocation屬性里，各種接口即是navigator.geolocation對象的方法1、getCurrentPosition用來獲取用戶當(dāng)前的位置信息，該方法帶有三個參數(shù)：

1、successCallback：成功獲取用戶位置信息后的回調(diào)函數(shù)

2、errorCallback：獲取用戶位置信息失敗時的回調(diào)函數(shù)

3、positionOptions：可選。獲取用戶位置信息的配置參數(shù)

2、watchPosition()

watchPosition的三個參數(shù)和getCurrentPosition完全一樣，不同的是watchPosition是設(shè)計用來實時獲?。軝z測用戶的位置信息。它像一個追蹤器一樣時刻監(jiān)視用戶的位置，只要發(fā)生變化，瀏覽器就會觸發(fā)watchPosition的回調(diào)函數(shù)。成功則觸發(fā)successCallback，否則觸發(fā)errorCallback。3、clearWatch()

接受一個watchPosition返回的ID，功能是清除對用戶位置的循環(huán)監(jiān)視。北京傳智播客教育

Tip6：Html5示例HTML5Web存儲 在客戶端存儲數(shù)據(jù)，HTML5提供了兩種在客戶端存儲數(shù)據(jù)的新方法：localStorage-沒有時間限制的數(shù)據(jù)存儲；sessionStorage-針對一個session的數(shù)據(jù)存儲。之前，這些都是由cookie完成的。但是cookie不適合大量數(shù)據(jù)的存儲，因為它們由每個對服務(wù)器的請求來傳遞，這使得cookie速度很慢而且效率也不高。在HTML5中，數(shù)據(jù)不是由每個服務(wù)器請求傳遞的，而是只有在請求時使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲大量數(shù)據(jù)成為可能。對于不同的網(wǎng)站，數(shù)據(jù)存儲于不同的區(qū)域，并且一個網(wǎng)站只能訪問其自身的數(shù)據(jù)。HTML5使用JavaScript來存儲和訪問數(shù)據(jù)。北京傳智播客教育

Tip5：phoneGap的使用phoneGap介紹 在webView中，java代碼和javascript代碼的相互調(diào)用中單向的，用這種方法開發(fā)的應(yīng)用，在擴(kuò)展和維護(hù)的時候會非常麻煩，為了解決這個麻煩phoneGap誕生了，phoneGap是建立在webView之上的一個開源框架，使用phoneGap來開發(fā)web應(yīng)用，可以使用java代碼和javascript代碼完全分開，互不打擾，只要尊守共同的接口文檔即可以開發(fā)出功能完善的應(yīng)用。 由于phoneGap的這些優(yōu)越性，以及html的興起，phoneGap被adobe公司收獲，并捐獻(xiàn)給了Apache開源項目組織。phoneGap現(xiàn)在最新版本是1.7，從1.5開始，phoneGap改為cordova，

北京傳智播客教育

Tip5：phoneGap的使用phoneGap的使用步聚一、java代碼部分：

1、導(dǎo)入phoneGap.jar 2、添加相應(yīng)的權(quán)限

3、修改主Activity為繼承自類DroidGap 4、在主類中用super.loadUrl