在android上利用html5与java进行混搭开发课件.ppt
26页
移动互联网路上的囧小子,姓名：杨丰盛 英文名字：yarin 网名：半灌水 门派：移动互联网 _ 现任公司：云晖软件（成都）有限公司 开发经验：J2me、Brew、Android、Iphone、HTML5 主要作品：Android应用开发揭秘 Android技术内幕：系统卷 新浪微博：杨丰盛（ 个人主页：,,Android应用开发新路线,利用HTML5开发Android应用程序！,Android与HTML5融合,,Android的HTML5应用程序概述 如何适配多分辨率的Android设备？ 如何在Android中构建HTML5应用程序？ 如何在Android中调试HTML5应用程序？ 如何在Android中使用HTML5的本地储存？ 如何在Android中使用HTML5的本地数据库？ 如何在Android中使用HTML5的地理定位？ 如何在Android中构建HTML5离线应用？ 如何使用Canvas进行绘图？,Android HTML5应用概述,,,,viewport,适配多分辨率的Android设备,,,Android浏览器加载WEB页面时，如果用户没有禁止启用”预览模式“，那么将默认为“预览模式“，通常会缩小WEB页面。
而当页面在WebView中显示时，会采用”完全载入“的方式，即保证WEB页面的原始大小设备屏幕的密度是基于屏幕的分辨率（由每英寸所包含的点数（dpi））定义的Android支持三种类别的屏幕密度：低（ldpi），中（mdpi）和高（hdpi）与中等密度屏幕相比，低密度屏幕每英寸像素较少，高密度屏幕每英寸像素较多默认情况下，Android浏览器和 WebView是针对中等密度的屏幕Android浏览器和 WebView 在高密度屏幕上将Web页面缩放约1.5倍（因为中等密度屏幕像素较小），而在低密度屏幕上将Web页面缩放约0.75倍（因为中等密度屏幕像素大）viewport属性的应用,,viewport需要放置在HTML的标签中，在标签的 content属性中，就可以定义多个视窗特性包括视窗的宽度、高度、缩放比例，目标设备密度等，但是，需要注意每个视窗属性必须有逗号隔开 Exmaple ,,CSS控制设备密度,,Android浏览和WebView支持CSS媒体性能（webkit-device-pixel-ratio），允许指定屏幕密度创建一些样式CSS媒体性能该值应该是“0.75”，“1”或“1.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-density-image.png); ,,JavaScript控制设备密度,,Android浏览器和WebView支持查询当前设备密度的DOM特性（window.devicePixelRatio），该值指定用于当前设备按比例缩放的系数例如，值为“1.0”，则说明设备是中等密度，并且默认页面不进行缩放；如果该值是“1.5”，那么，设备是高密度设备，并且默认页面调整1.5x（倍）；如果该值是“0.75”，那么，设备是低密度设备，并且默认页面调整0.75x（倍）。
如何使用JavaScript查询设备密度：,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);,在Android中构建HTML5应用程序,,,Android WebView应用,,WebView 类是Android View类的扩展，它允许Web页面作为Activity布局的一部分显示它不包括完整Web浏览器的任何功能，如导航控制或地址栏默认情况下WebView 所能做的就是显示一个网页添加WebView到应用程序中:,,要在WebView中加载Web页面，使用loadUrl(),WebView myWebView = (WebView) findViewById(R.id.webview);myWebView.loadUrl();,...,Linux公社 ,Linux公社（LinuxIDC.com）于2006年9月25日注册并开通网站，Linux现在已经成为一种广受关注和支持的一种操作系统，IDC是互联网数据中心，LinuxIDC就是关于Linux的数据中心。
LinuxIDC.com提供包括Ubuntu，Fedora，SUSE技术，以及最新IT资讯等Linux专业类网站处理页面导航,,在WebView中，当用户从Web页面里点击一个链接，在Android中，默认行为是启动一个应用程序来处理URL 通常，默认Web浏览器打开并加载这个目的URL 但是，您可以为您的 WebView忽略此默认行为 ，由 WebView 打开所有链接 然后，通过WebView，您可以运行用户向前、向后浏览他们的Web页面的历史 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.parse(url)); startActivity(intent); return true; ,WebView myWebView = (WebView) findViewById(R.id.webview);myWebView.setWebViewClient(new MyWebViewClient());,浏览网页历史记录,,当 WebView 重写URL加载后，它会自动累计访问过Web页面的历史。
你可以用goBack()和goForward()向前和向后浏览历史页面public boolean onKeyDown(int keyCode, KeyEvent event) if ((keyCode == KeyEvent.KEYCODE_BACK) ,Android与JavaScript交互,,如果您计划使用JavaScript将Web页面加载到WebView 中，您就必须为您的 WebView 启用JavaScript一旦启用JavaScript，您就可以在您的应用程序与您的JavaScript代码之间建立接口 默认情况下，在WebView中，JavaScript是禁用的您可以通过将WebSettings附加到您的WebView中来启用JavaScript你可以用getSettings()检索WebSettings，然后用setJavaScriptEnabled() 启动JavaScriptWebView myWebView = (WebView) findViewById(R.id.webview);WebSettings webSettings = myWebView.getSettings();webSettings.setJavaScriptEnabled(true);,Android与JS通信实例演示: 在Android中处理JS的警告、对话框等； 在JS中调用Android接口； 在Android调用JS函数。
Android中调试HTML5应用,,如果您正在开发一个Android的Web应用程序，您可以使用控制台（console）JavaScript API调试您的JavaScript，调试消息输出到Logcat在Android浏览器中用控制台API：,Js代码： console.log(Hello World); Log信息： Console: Hello World :82,Android的WebKit没有实现在其他桌面浏览器中实现的所有控制台API 但您可以使用基本的文本记录功能：,console.log (String) console.info (String) console.warn (String) console.error (String),在WebView中用控制台API,,在调试您的WebView的Web页面时，是支持控制台API在Android 1.6和更低版本下，控制台信息自动发送到Logcat，并加以“WebCore”标签 如果您是针对Android 2.1（API 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, message + -- 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() ); return true; );,ConsoleMessage 还包括一个 MessageLevel 表示控制台传递信息类型。
您可以用messageLevel()查询信息级别，以确定信息的严重程度，然后使用适当的Log方法或采取其他适当的措施HTML5本地储存在Android中的应用,,HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储, localStorage.lastname=Smith; document.write(localStorage.lastname); , sessionStorage.lastname=Smith; document.write(sessionStorage.lastname); ,Web Storage API：,//清空sto。
