Android and HTML5 开发手机应用(转载）
作为一个WEB开发者，HTML5让我兴奋，因为它可以将桌面应用程序功能带入浏览器中。但在国内，看着到处横行的IE8版本以下的浏览器，觉得到能大规模使用HTML5技术的那天，还遥遥无期。但面对iOS及Android等平台的手机用户越来越多，基于Webkit内核的移动浏览器一定能让HTML5先大规模应用起来。这将对对移动 Web 应用程序开发具有重大影响。
作为非常看好未来手机网络的我，也在一直研究Android平台的应用的开发，也许是因为自己更熟悉HTML及CSS、JS，并受到之前使用HTML和VC开发程序的影响，我也更愿意使用HTML来做Android程序的UI….
09年，在开发《华夏风云》游戏的时候，使用了基于Google Gear插件来做了很多离线应用，可惜Gear已经不在更新开发，被HTML5取代。下面介绍基于HTML 5 的Web 应用程序的本地存储，不再废话，例子说明一切。
一、离线应用缓存 HTML 5 Offline Application Cache
•在服务器上添加MIME TYPE支:text/cache-manifest
如果在Apache下添加：
AddType text/cache-manifest manifest
如果为Nginx，在添加：
text/cache-manifest manifest;
或者通过动态程序生成：
1
header('Content-type: text/cache-manifest; charset=UTF-8');
•创建 NAME.manifest:
新建清单文件 manifest
CACHE MANIFEST
# This is a comment.
# Cache manifest version 0.0.1
# If you change the version number in this comment,
# the cache manifest is no longer byte-for-byte
# identical.
/app/static/default/js/models/prototype.js
/app/static/default/js/controllers/init.js
NETWORK:
# All URLs that start with the following lines
# are whitelisted.
CACHE:
# Additional items to cache.
/app/static/default/images/main/bg.png
FALLBACK:
demoimages/ images/
•给 <html> 标签加 manifest 属性：
建立manifest文件之后，需要在HTML文档中声明：
声明清单文件 manifest
<!doctype html>
<html manifest="notebook.manifest">
<head>
<meta charset="UTF-8" />
<meta name = "viewport" content = "width = device-width, user-scalable = no">
<title>NoteBook</title>
</head>
<body>
</body>
</html>
二、Key-Value Storage
三、Using the JavaScript Database
四、Android下使用WebView来做基于HTML5的App
见如下AndroidManifest.xml
< ?xml version="1.0" encoding="utf-8"?>
<manifest android:versionName="1.0" android:versionCode="1" package="com.xinze.joke" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:label="@string/app_name" android:icon="@drawable/icon">
<activity android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar" android:configChanges="orientation|keyboardHidden|navigation" android:name=".Joke">
<intent -filter="">
<action android:name="android.intent.action.MAIN">
<category android:name="android.intent.category.LAUNCHER">
</category></action></intent>
</activity>
</application>
<uses android:name="android.permission.INTERNET" -permission="">
</uses></manifest>
注意：
<uses android:name="android.permission.INTERNET" -permission=""></uses>
， 允许网络应用，必须！！
Android主程序代码：
package com.xinze.joke;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.AlertDialog.Builder;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.WebStorage ;
public class Joke extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
final WebView wv = new WebView(this);
// 覆盖默认后退按钮的作用，替换成WebView里的查看历史页面
wv.setOnKeyListener(new View.OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (event.getAction() == KeyEvent.ACTION_DOWN) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && wv.canGoBack()) {
wv.goBack();
return true;
}
}
return false;
}
});
// 设置支持Javascript
wv.getSettings().setJavaScriptEnabled(true);
wv.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
wv.getSettings().setDatabaseEnabled(true);
wv.getSettings().setDatabasePath("/data/data/com.xinze.joke/databases");
// 创建WebViewClient对象
WebViewClient wvc = new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
wv.loadUrl(url);
// 记得消耗掉这个事件。给不知道的朋友再解释一下，Android中返回True的意思就是到此为止吧,事件就会不会冒泡传递了，我们称之为消耗掉
return true;
}
};
// 设置WebViewClient对象
wv.setWebViewClient(wvc);
// 创建WebViewChromeClient
WebChromeClient wvcc = new WebChromeClient() {
// 处理Alert事件
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
// 构建一个Builder来显示网页中的alert对话框
Builder builder = new Builder(Joke.this);
builder.setTitle("笑死不偿命");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
builder.setCancelable(false);
builder.create();
builder.show();
return true;
}
// 处理Confirm事件
@Override
public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
Builder builder = new Builder(Joke.this);
builder.setTitle("删除确认");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
builder.setNeutralButton(android.R.string.cancel, new AlertDialog.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.cancel();
}
});
builder.setCancelable(false);
builder.create();
builder.show();
return true;
}
// 处理提示事件
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue,
JsPromptResult result) {
// 看看默认的效果
return super.onJsPrompt(view, url, message, defaultValue, result);
}
@Override
public void onExceededDatabaseQuota(String url, String
databaseIdentifier, long currentQuota, long estimatedSize, long
totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {
quotaUpdater.updateQuota(204801);
}
};
wv.loadUrl("http://192.168.1.14/index.html");
// 设置setWebChromeClient对象
wv.setWebChromeClient(wvcc);
setContentView(wv);
}
}
使用 JavaScript Database 的时候，需要特别注意：setDatabaseEnabled 以及 onExceededDatabaseQuota！
结伴旅游,一个免费的交友网站：www.jieberu.com
推推族，免费得门票，游景区：www.tuituizu.com
Android and HTML5 开发手机应用(转载）的更多相关文章
- HTML5开发手机应用--viewport的作用
在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <met ...
- HTML5开发手机应用--viewport的作用--20150216
在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <met ...
- html5文章 -- 应用HTML5 开发手机APP
因为HTML5暂时无法短期内在PC普及,主要方向在使用高端浏览器的高端移动设备,所以可以用作开发Android系统的App.但只有Android2.2以上.iOS3.2以上均支持HTML5,两大平台有 ...
- [Html5] HTML5 开发手机应用
上次周例会我给大家做了题目为:<漫游移动平台前端开发>的汇报,现在推荐一些额外的学习资料. 依照目前iPhone/Android 迅速提升市占率的情势来看,未来如果想要在 ...
- html5开发手机打电话发短信功能
原文:http://www.open-open.com/code/view/1449843459332 在很多的手机网站上,有打电话和发短信的功能,对于这些功能是如何实现的呢.其实不难,今天我们就用h ...
- html5开发手机打电话发短信功能,html5的高级开发,html5开发大全,html手机电话短信功能具体解释
在非常多的手机站点上,有打电话和发短信的功能,对于这些功能是怎样实现的呢.事实上不难,今天我们就用html5来实现他们. 简单的让你大开眼界.HTML5 非常easy写,但创建网页时,您常常须要反复做 ...
- android 百度地图开发实例（转载）
因为在我的寝室google基站定位返回的数据总是为空,所以换成百度地图,发现百度地图开发起来非常方便,提供了许多有用的工具,地图的加载速度也比google地图快许多. 为了加强记忆,写一点androi ...
- HTML5开发手机项目—个人总结
让网页的宽度自适应屏幕<meta name="viewport" content="width=device-width"/> 1)html上加 ...
- HTML5开发手机项目-个人总结（转）
让网页的宽度自适应屏幕<meta name="viewport" content="width=device-width"/> 1)html上 ...
随机推荐
- 11.metasploit辅助模块----基本Exp----ARP欺骗中间人MITM----WordPress破解
metasploit辅助模块 信息收集 auxiliary scanners 使用metasploitable靶机 桥接 同一局域网 msfconsole nmap -sT 靶机IP nmap -sS ...
- django 的多对多关系
django里自带的多对多表创建 其实就是两个多对一关系各自关联,在第三张表上 多对多的增加 add()可以传数值 例如 add(1)或数组 add(*[2,3]) 多对多反向操作 自己创建第三张表, ...
- 第六周总结&第四次实验报告
实验四 类的继承 一. 实验目的 (1) 掌握类的继承方法: (2) 变量的继承和覆盖,方法的继承.重载和覆盖实现: 二. 实验内容 三.实验过程 实验代码 package Shiyan4; publ ...
- 牛客练习赛46 E 华华和奕奕学物理 （树状数组）
https://ac.nowcoder.com/acm/contest/894/E 一开始写了一个简单的模拟 通过率只有5%...... 看题解真的理解了好久!!肥宅大哭orz 题解如下 最后一句:“ ...
- 2019 CSP-S初赛游记
2019-10-19 ——这个注定要被载入史册的日子 作为一名初中生,和lpy大佬一同参加提高组的比赛,而今年普及组和提高组的时间竟然不一样,于是——凌晨六点半,来到了pdyz和高中生一起坐车去. 高 ...
- Docker Compose 部署 Redis 及原理讲解 | 懒人屋
原文:Docker Compose 部署 Redis 及原理讲解 | 懒人屋 Docker Compose 部署 Redis 及原理讲解 4.4k 字 16 分钟 2019-10-1 ...
- lldb调试命令
XCode4.0以后,编译器换成了LLVM 编译器 2.0 与以前相比,更加强大:1.LLVM 编译器是下一带开源的编译技术.完全支持C, Objective-C, 和 C++.2.LLVM 速度比 ...
- Mybatis驼峰式命名
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC ...
- Apache 的 bin 目录文件详解
[root@Apache bin]# tree ├── ab #Apache 性能测试工具 ├── apachectl #Apache 启动命令,它是一个脚本 ├── apr-1-conf ...
- Win10遇到蓝屏错误CRITICAL_STRUCTURE_CORRUPTION如何解决
很多使用win10系统的用户,都曾经遇到过蓝屏故障.比如,最近有位win10用户在使用电脑时,就发现电脑突然出现了蓝屏,且提示错误CRITICAL_STRUCTURE_CORRUPTION,这是怎么回 ...