《在android上利用html5与java进行混搭开发课件》由会员分享，可在线阅读，更多相关《在android上利用html5与java进行混搭开发课件（26页珍藏版）》请在金锄头文库上搜索。
1、移动互联网路上的囧小子,姓名：杨丰盛 英文名字：yarin 网名：半灌水 门派：移动互联网 _ 现任公司：云晖软件（成都）有限公司 开发经验：J2me、Brew、Android、Iphone、HTML5 主要作品：Android应用开发揭秘 Android技术内幕：系统卷 新浪微博：杨丰盛（ 个人主页：,Android应用开发新路线,利用HTML5开发Android应用程序！,Android与HTML5融合,Android的HTML5应用程序概述 如何适配多分辨率的Android设备？ 如何在Android中构建HTML5应用程序？ 如何在Android中调试HTML5应用程序？ 如何在And
2、roid中使用HTML5的本地储存？ 如何在Android中使用HTML5的本地数据库？ 如何在Android中使用HTML5的地理定位？ 如何在Android中构建HTML5离线应用？ 如何使用Canvas进行绘图？,Android HTML5应用概述,viewport,适配多分辨率的Android设备,Android浏览器加载WEB页面时，如果用户没有禁止启用”预览模式“，那么将默认为“预览模式“，通常会缩小WEB页面。而当页面在WebView中显示时，会采用”完全载入“的方式，即保证WEB页面的原始大小。,设备屏幕的密度是基于屏幕的分辨率（由每英寸所包含的点数（dpi）定义的。Andro
3、id支持三种类别的屏幕密度：低（ldpi），中（mdpi）和高（hdpi）。与中等密度屏幕相比，低密度屏幕每英寸像素较少，高密度屏幕每英寸像素较多。默认情况下，Android浏览器和 WebView是针对中等密度的屏幕。Android浏览器和 WebView 在高密度屏幕上将Web页面缩放约1.5倍（因为中等密度屏幕像素较小），而在低密度屏幕上将Web页面缩放约0.75倍（因为中等密度屏幕像素大）。,viewport属性的应用,viewport需要放置在HTML的标签中，在标签的 content属性中，就可以定义多个视窗特性。包括视窗的宽度、高度、缩放比例，目标设备密度等，但是，需要注意每个视
4、窗属性必须有逗号隔开。, 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-
5、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”
6、，则说明设备是中等密度，并且默认页面不进行缩放；如果该值是“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应用程序,
7、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日注册并开通
8、网站，Linux现在已经成为一种广受关注和支持的一种操作系统，IDC是互联网数据中心，LinuxIDC就是关于Linux的数据中心。 LinuxIDC.com提供包括Ubuntu，Fedora，SUSE技术，以及最新IT资讯等Linux专业类网站。,处理页面导航,在WebView中，当用户从Web页面里点击一个链接，在Android中，默认行为是启动一个应用程序来处理URL。 通常，默认Web浏览器打开并加载这个目的URL。 但是，您可以为您的 WebView忽略此默认行为 ，由 WebView 打开所有链接。 然后，通过WebView，您可以运行用户向前、向后浏览他们的Web页面的历史 。,
9、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)
10、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页面加载到
11、WebView 中，您就必须为您的 WebView 启用JavaScript。一旦启用JavaScript，您就可以在您的应用程序与您的JavaScript代码之间建立接口。 默认情况下，在WebView中，JavaScript是禁用的。您可以通过将WebSettings附加到您的WebView中来启用JavaScript。你可以用getSettings()检索WebSettings，然后用setJavaScriptEnabled() 启动JavaScript。,WebView myWebView = (WebView) findViewById(R.id.webview);WebSettin
12、gs 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(He
13、llo 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”标签。 如果您是针对Androi
14、d 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(MyApplicat
15、ion, 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.sour
16、ceId() ); 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
