HTML5開(kāi)發(fā)Android應(yīng)用程序概述

1、移動(dòng)互聯(lián)網(wǎng)路上的囧小子姓名：楊豐盛英文名字：yarin網(wǎng)名：半灌水門派：移動(dòng)互聯(lián)網(wǎng) _開(kāi)發(fā)經(jīng)驗(yàn)：J2me、Brew、Android、Iphone、HTML5主要作品：Android應(yīng)用開(kāi)發(fā)揭秘Android技術(shù)內(nèi)幕：系統(tǒng)卷新浪微博：楊豐盛（）個(gè)人主頁(yè)：1Android應(yīng)用開(kāi)發(fā)新路線利用HTML5開(kāi)發(fā)Android應(yīng)用程序！2Android與HTML5融合Android的HTML5應(yīng)用程序概述如何適配多分辨率的Android設(shè)備？如何在Android中構(gòu)建HTML5應(yīng)用程序？如何在Android中調(diào)試HTML5應(yīng)用程序？如何在Android中使用HTML5的本地儲(chǔ)存？如何在Android中使用H

2、TML5的本地?cái)?shù)據(jù)庫(kù)？如何在Android中使用HTML5的地理定位？如何在Android中構(gòu)建HTML5離線應(yīng)用？如何使用Canvas進(jìn)行繪圖？3Android HTML5應(yīng)用概述 viewport4適配多分辨率的Android設(shè)備Android瀏覽器加載WEB頁(yè)面時(shí)，如果用戶沒(méi)有禁止啟用”預(yù)覽模式“，那么將默認(rèn)為“預(yù)覽模式“，通常會(huì)縮小WEB頁(yè)面。而當(dāng)頁(yè)面在WebView中顯示時(shí)，會(huì)采用”完全載入“的方式，即保證WEB頁(yè)面的原始大小。設(shè)備屏幕的密度是基于屏幕的分辨率（由每英寸所包含的點(diǎn)數(shù)（dpi）定義的。Android支持三種類別的屏幕密度：低（ldpi），中（mdpi）和高（hdpi）。

3、與中等密度屏幕相比，低密度屏幕每英寸像素較少，高密度屏幕每英寸像素較多。默認(rèn)情況下，Android瀏覽器和 WebView是針對(duì)中等密度的屏幕。Android瀏覽器和 WebView 在高密度屏幕上將Web頁(yè)面縮放約1.5倍（因?yàn)橹械让芏绕聊幌袼剌^小），而在低密度屏幕上將Web頁(yè)面縮放約0.75倍（因?yàn)橹械让芏绕聊幌袼卮螅?viewport屬性的應(yīng)用viewport需要放置在HTML的標(biāo)簽中，在標(biāo)簽的 content屬性中，就可以定義多個(gè)視窗特性。包括視窗的寬度、高度、縮放比例，目標(biāo)設(shè)備密度等，但是，需要注意每個(gè)視窗屬性必須有逗號(hào)隔開(kāi)。 Exmaple 6CSS控制設(shè)備密度Android瀏覽

4、和WebView支持CSS媒體性能（webkit-device-pixel-ratio），允許指定屏幕密度創(chuàng)建一些樣式CSS媒體性能。該值應(yīng)該是“0.75”，“1”或“1.5”，它們分別表示對(duì)于低、中、高密度屏幕的設(shè)備。下面為每種密度創(chuàng)建獨(dú)立的樣式：在一個(gè)樣式表中，指定不同樣式：#header background:url(medium-density-image.png); media screen and (-webkit-device-pixel-ratio: 1.5) / CSS for high-density screens #header background:url(high-

5、density-image.png); media screen and (-webkit-device-pixel-ratio: 0.75) / CSS for low-density screens #header background:url(low-density-image.png); 7JavaScript控制設(shè)備密度Android瀏覽器和WebView支持查詢當(dāng)前設(shè)備密度的DOM特性（window.devicePixelRatio），該值指定用于當(dāng)前設(shè)備按比例縮放的系數(shù)。例如，值為“1.0”，則說(shuō)明設(shè)備是中等密度，并且默認(rèn)頁(yè)面不進(jìn)行縮放；如果該值是“1.5”，那么，設(shè)備是高密度設(shè)

6、備，并且默認(rèn)頁(yè)面調(diào)整1.5x（倍）；如果該值是“0.75”，那么，設(shè)備是低密度設(shè)備，并且默認(rèn)頁(yè)面調(diào)整0.75x（倍）。如何使用JavaScript查詢?cè)O(shè)備密度：if (window.devicePixelRatio = 1.5) alert(This is a high-density screen); else if (window.devicePixelRation = 0.75) alert(This is a low-density screen);8在Android中構(gòu)建HTML5應(yīng)用程序9Android WebView應(yīng)用WebView 類是Android View類的擴(kuò)展，它允許

7、Web頁(yè)面作為Activity布局的一部分顯示。它不包括完整Web瀏覽器的任何功能，如導(dǎo)航控制或地址欄。默認(rèn)情況下WebView 所能做的就是顯示一個(gè)網(wǎng)頁(yè)。添加WebView到應(yīng)用程序中:要在WebView中加載Web頁(yè)面，使用loadUrl()WebView myWebView = (WebView) findViewById(R.id.webview);myWebView.loadUrl();.10處理頁(yè)面導(dǎo)航在WebView中，當(dāng)用戶從Web頁(yè)面里點(diǎn)擊一個(gè)鏈接，在Android中，默認(rèn)行為是啟動(dòng)一個(gè)應(yīng)用程序來(lái)處理URL。 通常，默認(rèn)Web瀏覽器打開(kāi)并加載這個(gè)目的URL。 但是，您可以為您

8、的 WebView忽略此默認(rèn)行為 ，由 WebView 打開(kāi)所有鏈接。 然后，通過(guò)WebView，您可以運(yùn)行用戶向前、向后瀏覽他們的Web頁(yè)面的歷史 。private class MyWebViewClient extends WebViewClient public boolean shouldOverrideUrlLoading(WebView view, String url) if (Uri.parse(url).getHost().equals() return false; Intent intent = new Intent(Intent.ACTION_VIEW, Uri.par

9、se(url); startActivity(intent); return true; WebView myWebView = (WebView) findViewById(R.id.webview);myWebView.setWebViewClient(new MyWebViewClient();11瀏覽網(wǎng)頁(yè)歷史記錄當(dāng) WebView 重寫URL加載后，它會(huì)自動(dòng)累計(jì)訪問(wèn)過(guò)Web頁(yè)面的歷史。 你可以用goBack()和goForward()向前和向后瀏覽歷史頁(yè)面。public boolean onKeyDown(int keyCode, KeyEvent event) if (keyCode

10、 = KeyEvent.KEYCODE_BACK) & myWebView.canGoBack() myWebView.goBack(); return true; return super.onKeyDown(keyCode, event);12Android與JavaScript交互如果您計(jì)劃使用JavaScript將Web頁(yè)面加載到WebView 中，您就必須為您的 WebView 啟用JavaScript。一旦啟用JavaScript，您就可以在您的應(yīng)用程序與您的JavaScript代碼之間建立接口。默認(rèn)情況下，在WebView中，JavaScript是禁用的。您可以通過(guò)將WebSet

11、tings附加到您的WebView中來(lái)啟用JavaScript。你可以用getSettings()檢索WebSettings，然后用setJavaScriptEnabled() 啟動(dòng)JavaScript。WebView myWebView = (WebView) findViewById(R.id.webview);WebSettings webSettings = myWebView.getSettings();webSettings.setJavaScriptEnabled(true);Android與JS通信實(shí)例演示:在Android中處理JS的警告、對(duì)話框等；在JS中調(diào)用Android

12、接口；在Android調(diào)用JS函數(shù)。13Android中調(diào)試HTML5應(yīng)用如果您正在開(kāi)發(fā)一個(gè)Android的Web應(yīng)用程序，您可以使用控制臺(tái)（console）JavaScript API調(diào)試您的JavaScript，調(diào)試消息輸出到Logcat。在Android瀏覽器中用控制臺(tái)API：Js代碼： console.log(Hello World);Log信息： Console: Hello World :82 Android的WebKit沒(méi)有實(shí)現(xiàn)在其他桌面瀏覽器中實(shí)現(xiàn)的所有控制臺(tái)API。 但您可以使用基本的文本記錄功能：console.log (String) (Strin

13、g)console.warn (String)console.error (String)14在WebView中用控制臺(tái)API在調(diào)試您的WebView的Web頁(yè)面時(shí)，是支持控制臺(tái)API。在Android 1.6和更低版本下，控制臺(tái)信息自動(dòng)發(fā)送到Logcat，并加以“WebCore”標(biāo)簽。 如果您是針對(duì)Android 2.1（API Level 7）或更高版本，那么你必須提供一個(gè) WebChromeClient 實(shí)現(xiàn) onConsoleMessage() 回調(diào)方法，為了使控制臺(tái)的信息顯示到Logcat中。WebView myWebView = (WebView) findViewById(R.i

14、d.webview);myWebView.setWebChromeClient(new WebChromeClient() public void onConsoleMessage(String message, int lineNumber, String sourceID) Log.d(MyApplication, message + - From line + lineNumber + of + sourceID); );WebView myWebView = (WebView) findViewById(R.id.webview);myWebView.setWebChromeClien

15、t(new WebChromeClient() public boolean onConsoleMessage(ConsoleMessage cm) Log.d(MyApplication, cm.message() + - From line + cm.lineNumber() + of + cm.sourceId() ); return true; );ConsoleMessage 還包括一個(gè) MessageLevel 表示控制臺(tái)傳遞信息類型。 您可以用messageLevel()查詢信息級(jí)別，以確定信息的嚴(yán)重程度，然后使用適當(dāng)?shù)腖og方法或采取其他適當(dāng)?shù)拇胧?5HTML5本地儲(chǔ)存在An

16、droid中的應(yīng)用HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ) sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ) localStorage.lastname=Smith; document.write(localStorage.lastname); sessionStorage.lastname=Smith; document.write(sessionStorage.lastname); Web Storage API：/清空storagelocalStorage.clear();/設(shè)置一個(gè)鍵值localStora

17、ge.setItem(“yarin”,“yangfegnsheng”);/獲取一個(gè)鍵值localStorage.getItem(“yarin”); /獲取指定下標(biāo)的鍵的名稱（如同Array）localStorage.key(0); /return “fresh” /刪除一個(gè)鍵值localStorage.removeItem(“yarin”);setDomStorageEnabled（true）16HTML5本地?cái)?shù)據(jù)庫(kù)在Android中的應(yīng)用HTML5的本地?cái)?shù)據(jù)庫(kù)使用的是SQLite這款輕型數(shù)據(jù)庫(kù)。我們可以使用SQL語(yǔ)句進(jìn)行復(fù)雜的本地?cái)?shù)據(jù)存儲(chǔ)。/啟用數(shù)據(jù)庫(kù)webSettings.setDatab

18、aseEnabled(true); String dir = this.getApplicationContext().getDir(database, Context.MODE_PRIVATE).getPath();/設(shè)置數(shù)據(jù)庫(kù)路徑webSettings.setDatabasePath(dir);/擴(kuò)充數(shù)據(jù)庫(kù)的容量public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota, long estimatedSize, long totalUsedQuota, WebSto

19、rage.QuotaUpdater quotaUpdater) quotaUpdater.updateQuota(estimatedSize * 2);SQLite數(shù)據(jù)庫(kù)使用演示：17HTML5地理定位在Android中的應(yīng)用HTML5提供了一組API用來(lái)獲取用戶的地理位置，如果瀏覽器支持且設(shè)備具有定位功能，就能夠直接使用這組API來(lái)獲取當(dāng)前位置信息。地理定位演示：/啟用地理定位webSettings.setGeolocationEnabled(true);/設(shè)置定位的數(shù)據(jù)庫(kù)路徑webSettings.setGeolocationDatabasePath(dir);/配置權(quán)限public vo

20、id onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) callback.invoke(origin, true, false); super.onGeolocationPermissionsShowPrompt(origin, callback);18HTML5地理定位APIW3C 中新添加了一個(gè)名為 Geolocation的 API 規(guī)范，Geoloaction API的作用就是通過(guò)瀏覽器獲取用戶的地理位置。我們可以使用navigator.geolocati

21、on來(lái)簡(jiǎn)單的獲取用戶的地理位置信息。常用的navigator.geolocation對(duì)象有以下三種方法：/獲取當(dāng)前地理位置navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)/持續(xù)獲取地理位置navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)/清除持續(xù)獲取地理位置事件na

22、vigator.geolocation.clearWatch(watch_position_id)其中success_callback_function為成功之后處理的函數(shù)，error_callback_function為失敗之后返回的處理函數(shù)，參數(shù)position_options是配置項(xiàng)19HTML5地理定位APIposition對(duì)象所包含的數(shù)據(jù)：PropertyTypeNotescoords.latitude（緯度）doubleDecimal degreescoords.longitude（經(jīng)度）doubleDecimal degreescoords.altitude（海拔）double

23、or nullMeterscoords.accuracy（精確度）doubleMeterscoords.altitudeAccuracydouble or nullMeterscoords.heading（朝向）double or nulldegrees clockwise from the northcoords.speeddouble or nullMeters/secondtimestampDOMTimeStampLike a Date() objectError代碼：TIMEOUT:表示獲取信息超時(shí)。PERMISSION_DENIED：表示用戶選擇了拒絕了位置服務(wù)。POSITION_U

24、NAVAILABLE：表示位置不可知。Position選項(xiàng)：PropertyTypeDefaultNotesenableHighAccuracybooleanfalsetrue might be slowertimeoutlong(no default)In millisecondsmaximumAgelong0In milliseconds20構(gòu)建HTML5離線應(yīng)用為了能夠讓用戶在離線狀態(tài)下繼續(xù)訪問(wèn) Web 應(yīng)用，開(kāi)發(fā)者需要提供一個(gè) cache manifest 文件。這個(gè)文件中列出了所有需要在離線狀態(tài)下使用的資源，瀏覽器會(huì)把這些資源緩存到本地。cache manifest文件例子：CACH

25、E MANIFEST #這是注釋images/sound-icon.pngimages/background.png NETWORK: test.cgiCACHE: style/default.cssFALLBACK: / /projects 21HTML5離線應(yīng)用的更新緩存機(jī)制應(yīng)用程序可以等待瀏覽器自動(dòng)更新緩存，也可以使用 Javascript 接口手動(dòng)觸發(fā)更新。自動(dòng)更新 瀏覽器除了在第一次訪問(wèn) Web 應(yīng)用時(shí)緩存資源外，只會(huì)在 cache manifest 文件本身發(fā)生變化時(shí)更新緩存。而 cache manifest 中的資源文件發(fā)生變化并不會(huì)觸發(fā)更新。手動(dòng)更新 開(kāi)發(fā)者也可以使用 wind

26、ow.applicationCache 的接口更新緩存。方法是檢測(cè) window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以調(diào)用 window.applicationCache.update() 更新緩存。if (window.applicationCache.status = window.applicationCache.UPDATEREADY) window.applicationCache.update(); 在線狀態(tài)檢測(cè)HTML5 提供了兩種檢測(cè)是否在線的方式：navigator.online 和 online/offline事件。

27、navigator.onLinenavigator.onLine 屬性表示當(dāng)前是否在線。如果為 true, 表示在線；如果為false, 表示離線。當(dāng)網(wǎng)絡(luò)狀態(tài)發(fā)生變化時(shí)，navigator.onLine 的值也隨之變化。開(kāi)發(fā)者可以通過(guò)讀取它的值獲取網(wǎng)絡(luò)狀態(tài)。online/offline事件 當(dāng)開(kāi)發(fā)離線應(yīng)用時(shí)，通過(guò) navigator.onLine獲取網(wǎng)絡(luò)狀態(tài)通常是不夠的。開(kāi)發(fā)者還需要在網(wǎng)絡(luò)狀態(tài)發(fā)生變化時(shí)立刻得到通知，因此 HTML5 還提供了 online/offline 事件。當(dāng)在線 / 離線狀態(tài)切換時(shí)，online/offline 事件將觸發(fā)在 body 元素上，并且沿著 document.body、document 和 window 的順序冒泡。因此