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.

http://a.com/

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

时间: 2024-10-09 03:59:44

Android and HTML5 开发手机应用(转载)的相关文章

html5开发手机打电话发短信功能,html5的高级开发,html5开发大全,html手机电话短信功能详解

在很多的手机网站上,有打电话和发短信的功能,对于这些功能是如何实现的呢.其实不难,今天我们就用html5来实现他们.简单的让你大开眼界. HTML5 很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单.在这...有 HTML5 启动模板.空白图片.打电话和发短信.自动完成等等,帮助你提高开发效率的同时,还带来了更炫的功能.好了,我们今天就来做一做看看效果吧!! 看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitio

HTML5开发手机应用--viewport的作用--20150216

在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" /> 什么是Viewp

HTML5开发手机应用--viewport的作用

HTML5开发手机应用--viewport的作用 在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable

html5开发手机打电话发短信功能

原文:http://www.open-open.com/code/view/1449843459332 在很多的手机网站上,有打电话和发短信的功能,对于这些功能是如何实现的呢.其实不难,今天我们就用html5来实现他们.简单的让你大开眼界. HTML5 很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单.在这...有 HTML5 启动模板.空白图片. 打电话和发短信.自动完成等等,帮助你提高开发效率的同时,还带来了更炫的功能.好了,我们今天就来做一做看看效果吧!! 看代码: <!DO

android 百度地图开发实例(转载)

因为在我的寝室google基站定位返回的数据总是为空,所以换成百度地图,发现百度地图开发起来非常方便,提供了许多有用的工具,地图的加载速度也比google地图快许多. 为了加强记忆,写一点android 百度地图开发常用的方法. 1初始化 MapManager mBMapMan = new BMapManager(this);boolean isSuccess = mBMapMan.init(this.mStrKey, new MyGeneralListener()); isSuccess 的值

HTML5开发手机项目-个人总结(转)

让网页的宽度自适应屏幕<meta name="viewport" content="width=device-width"/>    1)html上加入<meta name="viewport" content=" initial-scale=1.0,user-scalable=no" />     发确保网页的效果        2)         加上以下语句可使网页在苹果设备上运行更好     

ios,android使用HTML5开发问题汇总

viewport  控制应用屏幕属性 viewport是一个针对移动web的meta标签,它的主要属性如下 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> width = [pixel_value | device-width ] 控制 viewp

使用Html5开发Android和iOS应用:HBuilder、Html5Plus、MUI

活动主题:五一巨献,问答有礼,105QB送给IT互联网界的劳动人民活动时间:4月30日晚上10点~5月2日晚上10点网址: http://ask.jiutianniao.com  2014年的时候,就初步学习了下HTML5进行移动开发.主要考虑是,Android只算入门,iOS完全不会,重新学习太费时间了.如果用HTML5可以搞定的话,入门特别简单,也可以一次性搞定2个平台,节省大量的精力和成本. HBuilder是个IDE,就像Eclipse.Html5Plus是个标准,对HTML5的风准,就

linux-mint下搭建android,angularjs,rails,html5开发环境

目录[-] 必备软件: 环境配置: [open-jdk-6.0] [android-sdk] [ant] [github] [node.js] [rvm](ruby-1.9.3 rails-4.0.0 gemfile) 必备概念: 关于自动化部署我推荐大家参谋一下Fortune Zhang的一篇文章:android开发过程中我是怎么一步步让项目自动化起来的 最新更新链接:https://gist.github.com/Channely/8296901 系统以64bit为例进行配置/2013/11