利用HTML5开发Android应用程序

姓 名：杨丰盛、英文名字：yarin网 名：半灌水门 派：移动互联网A_A现任公司：云晖软件（成都）有限公司开发经验：J2me、Brew、Android. Iphonex HTML5 主要作品：Android应用开发揭秘Android技术内幕：系统卷新浪微博：杨丰盛( )个人主页：Android应用开发新路线利用HTML5开发Android应用程序!Android 与 H TML5 融合Android的HTML5应用程序概述 如何适配多分辨率的Android设备? 如何在Android中构建HTML5应用程序? 如何在Android中调试HTML5应用程序? 如何在Android中使用HTML5的本地储存? 如何在Android中使用HTML5的本地数据库?如何在Android中使用HTML5的地理定位？ 如何在Android中构建HTML5离线应用？ 如何使用Canvas进行绘图？Android设备的多分辨率？物理分辨率视窗大与WEB页面比例屏幕密度适配多分辨率的Android设备Android浏览器加载WEB页面时，如果用户没有禁止启用” 式w,那么将默认为“预览模式“，通常会缩小WEB页面.而当页 面在WebView中显示时，会采用完全载入的方式,即保证WEB 页面的原始大小.设备屏幕的岳度是基于屏幕的分辨率（由每英寸所包含的点数（dpi）宦义的。 Android支持三种类别的屏幕密度:低（Idpi）,中（mdpi）和高（hdpi）. 与中等密度屏幕相比M氐密度屏幕每英寸像素较少,高密度屏幕每英寸像素较 多。默认情况下 Android浏览器和WebViewB针对中等密度的屏鼠 Android浏览器和WebView在高密度屏幕上将Web页面缩放约1.5倍（因为中 等密度屏幕像素较小）而在彳氐密度屏幕上将Web页面缩放约0.75倍（因为中 等密度屏幕像素大）.用JavaScript控制设备密度viewport属性的应用 viewport需要放置在HTML的vmeta标签中,在vmeta标签的 content属性中，就可以定义多个视窗特性。包括视窗的宽度、高度、 缩放比例，目标设备密度等，但是，需要注意每个视窗属性必须有 逗号隔开。Exmaple meta name=viewportncontent=wheight 3 pixelsvalue device-height 9 width = pixelvalue | device-width .initial-scale = float_value , mininnun-scale - floavalue , maximum-scale = floaRvalue , user-scalable = yes I no.target-densitydpi dpivalue I device-dpi 、 high-dpi I medium-dpi I low-dpi噩塑匝匪I HWcss控制设备密度 Android浏览和WebView支持CSS媒体性能(webkit-device-pixel- ratio ),允许指定屏幕密度创建一些样式CSS媒体性能。该值应该是 0.75”，1”或1.5”，它们分别表示对于低、中、高密度屏幕的设备。下面为每种密度创建独立的样式: 在一个样式表中/指定不同样式:header background:url(medium density-imagepng);Gmedia szreen and ( webkit device pixel ratio: 15) / CSS for high-density screens #header oackground:url(high-density-imagepng);Gmedia szreen and ( webkit device pixel ratio: 075) / CSS for low density screens#header oackground:url(low-density-image png);在Android中构建H TML5应用程序、使用WebV i e w在A ndroid中构建We b应用处理页面导航浏览网页历史记录Android 与 JavaScript 交互Android WebView应用WebView类是Android View类的扩展，它允许Web页面作为Activity布局 的一部分显示。它不包括完整Web浏览器的但可功能，如导航控制或地 址栏。默认情况下WebView所能做的就是显示f 网页。添加WebView到应用程序中： ();return true;return superonKeyDown(keyCoder event);Android 与 JavaScript 交互如果您计划使用JavaScript将Web页面加载到WebView中，您就必须为悠 的WebView启用JavaScript。一旦启用JavaScript，您就可以在您的应用 程序与您的JavaScript代码之间建立接口。默认情况下，在WebView中，JavaScript是禁用的。您可以通过将 WebSettings附加到您的WebView中来启用JavaScript。你可以用 getSettings()检秦WebSettings ,然后用setJavaScriptEnabled()启动 JavaScriptoWebView myWebView = (WebView) findViewByld(Ridwebview); WebSettings webSettings = myWebView.getSettings(); webSettings setJavaScriptEnabled(true);Android与JS通信实例演示：A在Android中处理JS的警告、对话框等； “在JS中调用Android接口 ;A在Android调用JS函数。/ff 1 Y池注华Q6oi関宗罢宙国曰黑翅重雄関、首曰舌翰旳码筋昌劉轄()刊芮晁essBUj 宙幻8场。帝杀冒号躁爭吕畔菇竺峯|9A9-a6esss &一呈*冯列a6essa9|osuoD:( UIO + JO + T3 +M auTj uioij -_ tl + 73T-wo .uoTiPOiiddvAWy) pboq (uio 96pssoh9TOSUO0) abessawTOSUODUO uayooq OTjqnd() uaxToauiojuoqaw mqu) luaTfDauiojqDqaMls-mqtAqmMw/ (MQTAqaM卩丁h)PiAemqtaputj (MBTAqaM) = mqtAqMAui MaxAqMX ! (aieomos +M jo u + laqwnNeuTi + al auTj uioJ2 _ u + a6pssauj 机uoTQEnTfddpA闪.)p6oq (aiaojnos buxs /jraquinNujx。6它ssbui 6utis) bessaniosuoouo pxoA OTjqnd() uaTToauiojqoqaw M3U) uaTTOoMDAMas-MSTAqawi (MaTAqaM-pT-H)piAeMQTApuTj (MGTAqeM) * mstAqM屉 MarAqM。曲Bobom理酉冒g|阳吕瞎孕创工M 1 件啟回()96BSS9|A|a|0SU00U0 也运)U8l|99U10JM9q9M O蜩修0渤乡雎伞羽昼車率(L I9AS-1 IdV ) L2 P!0jpuvWWD4器孚Qooq8M Y!Wif 5血T|j寮孕购目冒諏闿母 丄伞酬另更吐9 L P!Opu/丑|“吕咼彥畀萃音冈凰匹qM帥2!/qoM&0巒黑曲丑IdVli 宙中 MmsqsM 丑HTML5本地储存在Android中的应用HTML5提供了两种在客户端存储数据的新方法： localstorage 没有时间限制的数据存储 sessionstorage -针对一个session的数据存储 localstorage lastname=Smith; document write(localstoragelastname); sessionstorage. lastname=,Smith,t; document write (sessionstorage lastname);Web Storage API :/清空 storage localstoragecleaxr();/i鱷i键值localstorage set Item (uyarinf/ yangf egnshengr/);/获取一个縫值 localstorage.getltem(yarin);/获取指定下栋的键的名称(亦同A“ay ) localstorage.key(0);/return fresh /删除一键值 localstorage removeitem(yarin);setDomStorageEnabled (true )HTML5地理定位在Android中的应用HTML5提供了一组API用来获取用户的地理位置，如果浏览器支持且设备 具有定位功能”就能够直接使用这组API来获取当前位置信息。地理定位演示：/启用地理定位webSettingssetGeolocationEnabled(true);/设置定位的数据库路径webSettingssetGeolocationDatabasePath(dir);/配st权限public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissionsCallback callback) callback.invoke(origin, true, false);superonGeolocationPermissionsShowPrompt(origin, callback);HTML5地理定位API W3C 中新添加了一个名为 Geolocation的 API 规范 r GeoIoaction API的作用就是通过浏览器获取用户的地理位置。我们可以使用 n avigator.geolocation来简单的获取用户的地理位置信息。常用的navigator, geolostio门对象有以下三种方法：/获取当前噸曲navigator geolocationgetCurrentPosition(success_callback_functionr error_callback_functionr position_options)/持续获取换位置navigator.geolocation watchPosition (success_callback_functionz er ror_callunct: ionr posit ion_opt ions)/清除持续获取地理位置事件navigator.geolocation.clearWatch(watch_position_id)其中success_callbackJunction为成功之后处理的函数，error_callbackJunction为失败之后返回 的处理函数，参数positionoptionsB配置项HTML5地理定位APIError代码:,A TIMEOUT :表示获取信息超时。PERMISSION_DENIED :表示用尸选择了拒绝了位置服务。POSITION_UNAVAILABLE :表示位置不可知。Position选项：Property|TypeDefaultNotesen ableHighAccuracyboolea nfalsetrue might be slowertimeoutlong(no default)In milliseconds1maximumAgelong0In milliseconds1构建HTML5离线应用为了能够让用户在离线状态下继续访问Web应用，开发者需要提供 个cache manifest文件。这个文件中列岀了所有需要在离甥快态 下使用的资源，浏览器会把这些资源缓存到本地。cache manifest文件例子：HTM L5离线应用的更新缓存机制应用程序可以等待浏览器自动更新缓存，也可以使用Javascript接口手动触发更新。自动更新浏览器除了在第一次访问Web应用时缓存资源外，只会在cache manifest文件本身发生变化 时更新缓存。而cache manifest中的资源文件发生变化并不会触发更新。手动更新开发者也可以使用window .mpplicationCache的接口更新缓存。方法是检测 window. applicationcache .status 的值.如果是 UPDA ：EREADY r 那么可以调用 windowapplicationcache update () 更新缓存。if (windowapplicationcache.status = window.applicationCache.UPDATEREADY) window.applicationcacheupdate();在线状态检测HTML5提供了两种检测是否在线的Tjit : navigator . online和online/off line事件。 navigator onLinenavigator onLine 属性表示当前是否在线。如果为true,表示在线；如果为false,表示离 线。当网络状态发生变化时，wig址。ror)Line的值也随之变化。开发者可以通过读取它的值 获取网络次态。online/off line 事彳牛当开发离线应用时，通过navigator.onLine获取网络状态通常是不够的。开发者还需要在网络 状态发生变化时立刻得到通知，因此HTML5还提供了 online/offline事件。当在线/离线 状态切换时/ online/offline事件将触发在body元素上，并且沿着document .body, document和window的顺序冒泡.因此开发者奇以通过监听它们的online/offline事件 来获悉网络状态.在Android中构建H TML5离线应用/,开启应用程序缓存webSettingssetAppCacheEnabled(true);String dir = thisgetApplicationContext().getDir(ncacheH,Context. MODE_PRIVATE) .getPathO ;/ /设葩用缓舖勰webSettings setAppCachePath(dir);/设置缓存曲模式webSettings setCacheMode(WebSettings LOAD_DEFA7LT);/,设置应用缓存的最大尺寸webSettings.setAppCacheMaxSize(1024*1024*8);/扩充缓存的容量public void onReachedMaxAppCacheSize(long spaceNeededflong totalUsedQuotar WebStorage QuotaUpdater quotaUpdater) quotaUpdaterupdateQuota(spaceNeeded * 2);什么是Canvas ?_HTML5的canvas元素使用JavaScript在网页上绘制图像。 画布是一个矩形区域,您可躺制其笹T象素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建Canvas元素向HTML5页面添加canvas元素。规定元素的id、宽度和高度:通过JavaScript来绘制canvas元素本身是没有绘国能力的。所有的绘制工作必须在JavaScript内部完成:/通过id获取canvms元素var c=document.getElementByld(myCanvas);/ /创建context对象var cxt=c.getContext (,2dM);extfillStyle=n#FF0000M;ext.zillRect(0,0,150/75);谢谢I2011-07-16