android调用html里的函数,讲解如何利用HTML5开发android教程

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()

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

Xml代码

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

Java代码

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

Java代码

之后：

Java代码

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

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

Java代码

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

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

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

Java代码

Java代码

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中。