讲解如何利用HTML5开发android教程

作者:课课家教育更新于： 2016-05-09 11:50:50

　　HTML5是万维网的核心语言以及标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改，且HTML5手机应用中存在最大优势就是可以在网页上直接调试和修改，能够把原先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行，也有许多手机杂志客户端是基于HTML5标准，开发人员可以轻松调试修改。那么本文只要讲解如何利用HTML5开发Android。

　　● Android设备多分辨率的问题

　　在Android浏览器默认的情况下预览模式浏览，会缩小页面W，ebView中则会以原始大小显示。

　　然而在Android浏览器和WebView默认情况若为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍。

　　这三种解决方式为：1 viewport属性 2 CSS控制 3 JS控制

　　1 viewport属性放在HTML的中

　　Html代码

　　在meta中的viewport属性设置如下，

　　Html代码

     2 CSS控制设备密度

　　为每种密度创建独立的样式表，(需要注意的是其中webkit-device-pixel-ratio 3个数值对应3种分辨率)

　　Html代码

　　在一个样式表中，可以指定不同的样式，

　　Html代码

　　Html代码

　　3 JS控制

　　Android浏览器和WebView支持查询当前设别密度的DOM特性

　　window.devicePixelRatio 同样值有3个(0.75,1,1.5对应3种分辨率)

　　JS中查询设备密度的方法

　　Js代码

　　● Android中构建HTML5应用

　　使用WebView控件是与其他控件的使用方法相同，其是在layout中使用一个标签

　　WebView不包括导航栏，地址栏等完整浏览器功能，只用于显示一个网页

　　在WebView中加载Web页面，使用loadUrl()

　　java代码

　　注意在manifest文件中加入访问互联网的权限：

　　Xml代码

　　如果在Android中点击一个链接，其默认的是调用应用程序来启动，那么因此WebView是需要代为处理这个动作，其是通过WebViewClient方法，

　　Java代码

　　然而这个WebViewClient对象是可以自己扩展的，例如

　　Java代码

　　之后：

　　Java代码

　　考虑到用户习惯上的的问题，我们需要将WebView表现得更像一个浏览器，也就是需要可以回退历史记录

　　因此需要覆盖系统的回退键 goBack，goForward可向前向后浏览历史页面

　　Java代码

　　webSetting在这里的用处是非常大，其是可以开启很多设置，在之后的本地存储，地理位置等之中都会使用到，

     1 在JS中调用Android的函数方法

      首先，是需要在Android程序中建立接口，

　　Java代码

　　Java代码

　　在Javascript中调用

　　Js代码

　　2 在Android中调用JS的方法，在JS中的方法：

　　Js代码

　　在Android调用该方法，

　　Java代码

　　3 Android中处理JS的警告，对话框等在Android中处理JS的警告，对话框等需要对WebView设置WebChromeClient对象

　　Java代码

　　● Android中的调试通过JS代码输出log信息

　　Js代码

　　在WebChromeClient中实现onConsoleMesaage()回调方法，让其在LogCat中打印信息

　　Java代码

　　以及

　　Java代码

　　*ConsoleMessage 还包括一个 MessageLevel 表示控制台传递信息类型。 您可以用messageLevel()查询信息级别，以确定信息的严重程度，然后使用适当的Log方法或采取其他适当的措施。

     ● HTML5本地存储在Android中的应用HTML5提供了2种客户端存储数据新方法：localStorage 没有时间限制sessionStorage 针对一个Session的数据存储

　　Js代码

　　WebStorage的API:

　　Js代码

　　在Android中进行操作

　　Java代码

　　在JS中按常规进行数据库操作

　　Js代码

　　● HTML5地理位置服务在Android中的应用Android中

　　Java代码

　　在Manifest中添加权限

　　Xml代码

　　HTML5中 通过navigator.geolocation对象获取地理位置信息常用的navigator.geolocation对象有以下三种方法：

　　Js代码

　　其中success_callback_function为成功之后处理的函数，error_callback_function为失败之后返回的处理函数，参数position_options是配置项是在JS中的代码，

　　Js代码

　　其中position对象包含很多数据 error代码及选项 可以查看文档● 构建HTML5离线应用需要提供一个cache manifest文件，理出所有需要在离线状态下使用的资源例如

　　Manifest代码

　　在html标签中声明 HTML5离线应用更新缓存机制分为手动更新和自动更新2种自动更新：在cache manifest文件本身发生变化时更新缓存 资源文件发生变化不会触发更新手动更新：使用window.applicationCache

　　Js代码

　　在线状态检测HTML5 提供了两种检测是否在线的方式：navigator.online(true/false) 和 online/offline事件。在Android中构建离线应用，

　　Java代码

　　综上文，主要是通过不大部分讲解利用HTML5开发android，第一部分是 Android设备多分辨率的问题，从viewport属性、CSS控制设备密度和JS控制这三方面类介绍，第二部分是 Android中构建HTML5应用，其实首先是在空间的设置，还有在JS中调用Android的函数方法、在Android中调用JS的方法以及Android中处理JS的警告中介绍，第三部分是Android中的调试通过JS代码输出log信息，第四部分是HTML5本地存储在Android中的应用HTML5提供了2种客户端存储数据新方法，和最后一部分是HTML5地理位置服务在Android中的应用Android中。