北京傳智播客教育Android應用開發－webView講師：劉亞超北京傳智播客教育

Android應用開發之webView學習大綱WebView介紹WebView常用功能java代碼與javaScript代碼之間的相互調用WebChromeClient的使用Html5介紹Canvas的使用PhoneGap的功能介紹PhoneGap實例北京傳智播客教育Tip1：WebView介紹WebView介紹

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

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

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

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

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

Tip3：webView頁面顯示的優化webView中頁面的優化

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

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

北京傳智播客教育

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

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

北京傳智播客教育

Tip6：Html5介紹HTML5是什么： HTML5即HTML1.5他將成為HTML、XHTML以及HTMLDOM的新標準。HTML的上一個版本誕生于1999年。自從那以后，Web世界已經經歷了巨變。HTML5仍處于完善之中。然而，大部分現代瀏覽器已經具備了某些HTML5支持。HTML5中的一些有趣的新特性：用于繪畫的canvas元素用于媒介回放的video和audio元素對本地離線存儲的更好的支持新的特殊內容元素，比如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>之間插入的內容是供不支持video元素的瀏覽器顯示的示例二：<videowidth="320"height="240"controls="controls"><sourcesrc="movie.ogg"type="video/ogg"><sourcesrc="movie.mp4"type="video/mp4">Yourbrowserdoesnotsupportthevideotag.</video>

北京傳智播客教育

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

Tip6：Html5示例HTML5Canvas

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

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

Tip6：Html5示例HTML5Canvas

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

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

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

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

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

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

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

1、successCallback：成功獲取用戶位置信息后的回調函數

2、errorCallback：獲取用戶位置信息失敗時的回調函數

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

2、watchPosition()

watchPosition的三個參數和getCurrentPosition完全一樣，不同的是watchPosition是設計用來實時獲取＼檢測用戶的位置信息。它像一個追蹤器一樣時刻監視用戶的位置，只要發生變化，瀏覽器就會觸發watchPosition的回調函數。成功則觸發successCallback，否則觸發errorCallback。3、clearWatch()

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

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

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

北京傳智播客教育

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

1、導入phoneGap.jar 2、添加相應的權限

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