最新HTML5开发Android应用程序概述(共25张PPT课件).pptx

《最新HTML5开发Android应用程序概述(共25张PPT课件).pptx》由会员分享，可在线阅读，更多相关《最新HTML5开发Android应用程序概述(共25张PPT课件).pptx（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Android应用(yngyng)开发新路线利用(lyng)HTML5开发Android应用程序！第一页，共二十五页。Android与HTML5融合(rngh) Android的HTML5应用程序概述 如何适配多分辨率的Android设备？ 如何在Android中构建HTML5应用程序？ 如何在Android中调试HTML5应用程序？ 如何在Android中使用(shyng)HTML5的本地储存？ 如何在Android中使用HTML5的本地数据库？ 如何在Android中使用HTML5的地理定位？ 如何在Android中构建HTML5离线应用？ 如何使用Canvas进行绘图？第二页，共二十五页

2、。Android HTML5应用(yngyng)概述Android应用客户端应用SDK应用WEB应用浏览器应用WebView应用（browser）&（SDK+WebView）HTML5JavaScriptCSS第三页，共二十五页。适配多分辨率的Android设备(shbi)Android设备的多分辨率？物理分辨率视窗大小与WEB页面比例屏幕密度怎么办？viewport属性用CSS控制设备密度用JavaScript控制设备密度Android浏览器加载WEB页面(y min)时，如果用户没有禁止启用”预览模式“，那么将默认为“预览模式“，通常会缩小WEB页面。而当页面在WebView中显示时，会采

3、用”完全载入“的方式，即保证WEB页面的原始大小。设备屏幕的密度是基于屏幕的分辨率（由每英寸(yngcn)所包含的点数（dpi）定义的。Android支持三种类别的屏幕密度：低（ldpi），中（mdpi）和高（hdpi）。与中等密度屏幕相比，低密度屏幕每英寸像素较少，高密度屏幕每英寸像素较多。默认情况下，Android浏览器和 WebView是针对中等密度的屏幕。Android浏览器和 WebView 在高密度屏幕上将Web页面缩放约1.5倍（因为中等密度屏幕像素较小），而在低密度屏幕上将Web页面缩放约0.75倍（因为中等密度屏幕像素大）。第四页，共二十五页。viewport属性(shxng

4、)的应用uviewport需要放置在HTML的标签中，在标签的 content属性中，就可以定义多个视窗特性。包括视窗的宽度(kund)、高度、缩放比例，目标设备密度等，但是，需要注意每个视窗属性必须有逗号隔开。 Exmaple 第五页，共二十五页。CSS控制(kngzh)设备密度uAndroid浏览和WebView支持CSS媒体性能(xngnng)（webkit-device-pixel-ratio），允许指定屏幕密度创建一些样式CSS媒体性能。该值应该是“0.75”，“1”或“1.5”，它们分别表示对于低、中、高密度屏幕的设备。下面为每种密度创建(chungjin)独立的样式：在一个样式表

5、中，指定不同样式：#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-density-image.png); media screen and (-webkit-device-pixel-ratio: 0.75) / CSS for low-density screens #header background:url(low-de

6、nsity-image.png); 第六页，共二十五页。JavaScript控制(kngzh)设备密度uAndroid浏览器和WebView支持查询当前设备密度的DOM特性（window.devicePixelRatio），该值指定用于当前设备按比例缩放的系数。例如，值为“1.0”，则说明设备是中等密度，并且默认页面不进行缩放；如果该值是“1.5”，那么(n me)，设备是高密度设备，并且默认页面调整1.5x（倍）；如果该值是“0.75”，那么，设备是低密度设备，并且默认页面调整0.75x（倍）。如何使用(shyng)JavaScript查询设备密度：if (window.devicePixe

7、lRatio = 1.5) alert(This is a high-density screen); else if (window.devicePixelRation = 0.75) alert(This is a low-density screen);第七页，共二十五页。在Android中构建(u jin)HTML5应用程序使用WebView在Android中构建Web应用处理页面导航浏览网页历史记录Android与JavaScript交互第八页，共二十五页。Android WebView应用(yngyng)WebView 类是Android View类的扩展，它允许Web页面作为Ac

8、tivity布局的一部分显示。它不包括完整Web浏览器的任何功能，如导航控制或地址栏。默认情况(qngkung)下WebView 所能做的就是显示一个网页。添加(tin ji)WebView到应用程序中:要在WebView中加载Web页面，使用loadUrl()WebView myWebView = (WebView) findViewById(R.id.webview);myWebView.loadUrl(http:/);.第九页，共二十五页。处理(chl)页面导航在WebView中，当用户从Web页面里点击一个链接，在Android中，默认行为是启动一个应用程序来处理URL。 通常，默认W

9、eb浏览器打开并加载这个目的URL。 但是，您可以为您的 WebView忽略此默认行为 ，由 WebView 打开所有链接。 然后，通过WebView，您可以运行用户向前、向后浏览(li ln)他们的Web页面的历史 。private class MyWebViewClient extends WebViewClient public boolean shouldOverrideUrlLoading(WebView view, String url) if (Uri.parse(url).getHost().equals() return false; Intent intent = new

10、Intent(Intent.ACTION_VIEW, Uri.parse(url); startActivity(intent); return true; WebView myWebView = (WebView) findViewById(R.id.webview);myWebView.setWebViewClient(new MyWebViewClient();第十页，共二十五页。浏览(li ln)网页历史记录当 WebView 重写URL加载后，它会自动累计(li j)访问过Web页面的历史。 你可以用goBack()和goForward()向前和向后浏览历史页面。public boo

11、lean onKeyDown(int keyCode, KeyEvent event) if (keyCode = KeyEvent.KEYCODE_BACK) & myWebView.canGoBack() myWebView.goBack(); return true; return super.onKeyDown(keyCode, event);第十一页，共二十五页。Android与JavaScript交互(jioh)u如果您计划使用JavaScript将Web页面加载到WebView 中，您就必须为您的 WebView 启用JavaScript。一旦启用JavaScript，您就可以在

12、您的应用程序与您的JavaScript代码之间建立接口。u 默认情况下，在WebView中，JavaScript是禁用的。您可以通过将WebSettings附加到您的WebView中来启用JavaScript。你可以用getSettings()检索WebSettings，然后(rnhu)用setJavaScriptEnabled() 启动JavaScript。WebView myWebView = (WebView) findViewById(R.id.webview);WebSettings webSettings = myWebView.getSettings();webSettings.

13、setJavaScriptEnabled(true);Android与JS通信实例(shl)演示:在Android中处理JS的警告、对话框等；在JS中调用Android接口；在Android调用JS函数。第十二页，共二十五页。Android中调试(dio sh)HTML5应用如果您正在开发(kif)一个Android的Web应用程序，您可以使用控制台（console）JavaScript API调试您的JavaScript，调试消息输出到Logcat。在Android浏览器中用控制台API：Js代码(di m)： console.log(Hello World);Log信息： Console:

14、 Hello World http:/ :82 Android的WebKit没有实现在其他桌面浏览器中实现的所有控制台API。 但您可以使用基本的文本记录功能：console.log (String)console.info (String)console.warn (String)console.error (String)第十三页，共二十五页。在WebView中用控制台APIu在调试您的WebView的Web页面时，是支持控制台API。在Android 1.6和更低版本下，控制台信息自动发送到Logcat，并加以“WebCore”标签。 如果(rgu)您是针对Android 2.1（API

15、 Level 7）或更高版本，那么你必须提供一个 WebChromeClient 实现 onConsoleMessage() 回调方法，为了使控制台的信息显示到Logcat中。WebView myWebView = (WebView) findViewById(R.id.webview);myWebView.setWebChromeClient(new WebChromeClient() public void onConsoleMessage(String message, int lineNumber, String sourceID) Log.d(MyApplication, messa

16、ge + - From line + lineNumber + of + sourceID); );WebView myWebView = (WebView) findViewById(R.id.webview);myWebView.setWebChromeClient(new WebChromeClient() public boolean onConsoleMessage(ConsoleMessage cm) Log.d(MyApplication, cm.message() + - From line + cm.lineNumber() + of + cm.sourceId() ); r

17、eturn true; );ConsoleMessage 还包括一个 MessageLevel 表示控制台传递信息类型。 您可以用messageLevel()查询信息级别，以确定信息的严重程度，然后(rnhu)使用适当的Log方法或采取其他适当的措施。第十四页，共二十五页。HTML5本地储存(chcn)在Android中的应用HTML5 提供了两种在客户端存储数据的新方法：ulocalStorage - 没有时间限制(xinzh)的数据存储 usessionStorage - 针对一个 session 的数据存储 localStorage.lastname=Smith; document.wr

18、ite(localStorage.lastname); sessionStorage.lastname=Smith; document.write(sessionStorage.lastname); Web Storage API：/清空storagelocalStorage.clear();/设置一个键值localStorage.setItem(“yarin”,“yangfegnsheng”);/获取一个键值localStorage.getItem(“yarin”); /获取指定下标的(bio de)键的名称（如同Array）localStorage.key(0); /return “fre

19、sh” /删除一个键值localStorage.removeItem(“yarin”);setDomStorageEnabled（true）第十五页，共二十五页。HTML5本地(bnd)数据库在Android中的应用uHTML5的本地数据库使用的是SQLite这款轻型数据库。我们(w men)可以使用SQL语句进行复杂的本地数据存储。/启用数据库webSettings.setDatabaseEnabled(true); String dir = this.getApplicationContext().getDir(database, Context.MODE_PRIVATE).getPath

20、();/设置数据库路径设置数据库路径webSettings.setDatabasePath(dir);/扩充(kuchng)数据库的容量public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota, long estimatedSize, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) quotaUpdater.updateQuota(estimatedSize * 2);SQLite数据库使用演示：第

21、十六页，共二十五页。HTML5地理定位(dngwi)在Android中的应用HTML5提供了一组API用来获取用户的地理位置，如果浏览器支持且设备具有定位功能，就能够(nnggu)直接使用这组API来获取当前位置信息。地理(dl)定位演示：/启用地理定位webSettings.setGeolocationEnabled(true);/设置定位的数据库路径设置定位的数据库路径webSettings.setGeolocationDatabasePath(dir);/配置权限public void onGeolocationPermissionsShowPrompt(String origin, G

22、eolocationPermissions.Callback callback) callback.invoke(origin, true, false); super.onGeolocationPermissionsShowPrompt(origin, callback);第十七页，共二十五页。HTML5地理(dl)定位APIu W3C 中新添加(tin ji)了一个名为 Geolocation的 API 规范，Geoloaction API的作用就是通过浏览器获取用户的地理位置。我们可以使用navigator.geolocation来简单的获取用户的地理位置信息。常用的navigator.

23、geolocation对象有以下三种方法(fngf)：/获取当前地理位置navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)/持续获取地理位置navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)/清除持续获取地理位置事件navigator.geolocation.clear

24、Watch(watch_position_id)其中success_callback_function为成功之后处理的函数，error_callback_function为失败之后返回的处理函数，参数position_options是配置项第十八页，共二十五页。HTML5地理(dl)定位APIposition对象所包含(bohn)的数据： Property Type Notes coords.latitude（纬度） double Decimal degrees coords.longitude（经度） double Decimal degrees coords.altitude（海拔） do

25、uble or null Meters coords.accuracy（精确度） double Meters coords.altitudeAccuracy double or null Meters coords.heading（朝向） double or null degrees clockwise from the north coords.speed double or null Meters/second timestamp DOMTimeStamp Like a Date() objectError代码：TIMEOUT:表示获取信息超时。PERMISSION_DENIED：表示用户

26、(yngh)选择了拒绝了位置服务。POSITION_UNAVAILABLE：表示位置不可知。Position选项： Property Type Default Notes enableHighAccuracy boolean false true might be slower timeout long (no default) In milliseconds maximumAge long 0 In milliseconds第十九页，共二十五页。构建(u jin)HTML5离线应用u 为了能够让用户在离线状态下继续访问 Web 应用，开发者需要提供一个(y ) cache manifest

27、文件。这个文件中列出了所有需要在离线状态下使用的资源，浏览器会把这些资源缓存到本地。cache manifest文件(wnjin)例子：CACHE MANIFEST #这是注释images/sound-icon.pngimages/background.png NETWORK: test.cgiCACHE: style/default.cssFALLBACK: /files/projects /projects 第二十页，共二十五页。HTML5离线应用的更新(gngxn)缓存机制应用程序可以等待浏览器自动更新缓存，也可以使用 Javascript 接口手动触发更新。u自动更新 浏览器除了在第一

28、次访问 Web 应用时缓存资源外，只会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest 中的资源文件发生变化并不会(b hu)触发更新。u手动更新 开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update() 更新缓存。if (window.applicationCache.status = window.applicationCache.

29、UPDATEREADY) window.applicationCache.update(); 在线状态检测HTML5 提供了两种检测是否在线的方式：navigator.online 和 online/offline事件。unavigator.onLinenavigator.onLine 属性表示当前是否在线。如果为 true, 表示在线；如果为false, 表示离线。当网络状态发生变化时，navigator.onLine 的值也随之变化。开发者可以通过(tnggu)读取它的值获取网络状态。uonline/offline事件 当开发离线应用时，通过 navigator.onLine获取网络状态通

30、常是不够的。开发者还需要在网络状态发生变化时立刻得到通知，因此 HTML5 还提供了 online/offline 事件。当在线 / 离线状态切换时，online/offline 事件将触发在 body 元素上，并且沿着 document.body、document 和 window 的顺序冒泡。因此，开发者可以通过监听它们的 online/offline 事件来获悉网络状态。第二十一页，共二十五页。在Android中构建(u jin)HTML5离线应用/开启应用程序缓存webSettingssetAppCacheEnabled(true);String dir = this.getAppli

31、cationContext().getDir(cache, Context.MODE_PRIVATE).getPath();/设置(shzh)应用缓存的路径webSettings.setAppCachePath(dir);/设置缓存的模式webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);/设置应用缓存的最大尺寸webSettings.setAppCacheMaxSize(1024*1024*8);/扩充缓存的容量public void onReachedMaxAppCacheSize(long spaceNeeded, long totalU

32、sedQuota, WebStorage.QuotaUpdater quotaUpdater) quotaUpdater.updateQuota(spaceNeeded * 2);第二十二页，共二十五页。使用(shyng)Canvas绘制图形图像什么是什么是 Canvas？HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制(kngzh)其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建创建Canvas元素元素(yun s)向HTML5页面添加canvas元素。规定元素的 id、宽度和高度：通过通过 JavaSc

33、ript 来绘制来绘制canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成： /通过id获取canvas元素 var c=document.getElementById(myCanvas); /创建context对象 var cxt=c.getContext(2d); cxt.fillStyle=#FF0000; cxt.fillRect(0,0,150,75); 第二十三页，共二十五页。结束(jish)谢谢(xi xie)！第二十四页，共二十五页。内容(nirng)总结Android应用开发新路线。PERMISSION_DENIED：表示用户选择了拒绝了位置服务。这个文件中列出了所有需要在离线状态下使用的资源，浏览器会把这些资源缓存到本地。webSettings.setAppCacheMaxSize(1024*1024*8)。canvas 拥有多种绘制路径、矩形、圆形、字符(z f)以及添加图像的方法。谢谢第二十五页，共二十五页。