html5开发android应用
作为非常看好未来手机网络的我,也在一直研究Android平台的应用的开发,也许是因为自己更熟悉HTML及CSS、JS,并受到之前使用HTML和VC开发程序的影响,我也更愿意使用HTML来做Android程序的UI….
在开发《华夏风云》游戏的时候,使用了基于Google Gear插件来做了很多离线应用,可惜Gear已经不在更新开发,被HTML5取代。下面介绍基于HTML 5 的Web 应用程序的本地存储,不再废话,例子说明一切。
HTML5让我兴奋,因为它可以将桌面应用程序功能带入浏览器中。但在国内,看着到处横行的IE8版本以下的浏览器,觉得到能大规模使用HTML5技术的那天,还遥遥无期。但面对iOS及Android等平台的手机用户越来越多,基于Webkit内核的移动浏览器一定能让HTML5先大规模应用起来。这将对对移动 Web 应用程序开发具有重大影响。
一、离线应用缓存 HTML 5 Offline Application Cache
如果在Apache下添加:
1
|
AddType text/cache-manifest manifest
|
如果为Nginx,在添加:
1
|
text/cache-manifest manifest;
|
或者通过动态程序生成:
1
|
header( 'Content-type: text/cache-manifest; charset=UTF-8' );
|
- 在服务器上添加MIME TYPE支:text/cache-manifest
新建清单文件 manifest
01
|
CACHE MANIFEST
|
02
|
# This is a comment.
|
03
|
# Cache manifest version 0.0.1
|
04
|
# If you change the version number in this comment,
|
05
|
# the cache manifest is no longer byte-for-byte
|
06
|
# identical.
|
07
|
08
|
/app/static/default/js/models/prototype.js
|
09
|
/app/static/default/js/controllers/init.js
|
10
|
11
|
NETWORK:
|
12
|
# All URLs that start with the following lines
|
13
|
# are whitelisted.
|
14
|
15
|
http://a.com/
|
16
|
17
|
CACHE:
|
18
|
# Additional items to cache.
|
19
|
/app/static/default/images/main/ bg .png
|
20
|
21
|
FALLBACK:
|
22
|
demoimages/ images/
|
建立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>
- 创建 NAME.manifest:
- 给 <html> 标签加 manifest 属性:
二、Key-Value Storage
三、Using the JavaScript Database
四、Android下使用WebView来做基于HTML5的App
见如下AndroidManifest.xml
01
|
< ? xml version = "1.0" encoding = "utf-8" ?>
|
02
|
< manifest android:versionName = "1.0" android:versionCode = "1" package = "com.xinze.joke" xmlns:android = "http://schemas.android.com/apk/res/android" >
|
03
|
< application android:label = "@string/app_name" android:icon = "@drawable/icon" >
|
04
|
< activity android:label = "@string/app_name" android:theme = "@android:style/Theme.NoTitleBar" android:configChanges = "orientation|keyboardHidden|navigation" android:name = ".Joke" >
|
05
|
< intent -filter = "" >
|
06
|
< action android:name = "android.intent.action.MAIN" >
|
07
|
< category android:name = "android.intent.category.LAUNCHER" >
|
08
|
</ category ></ action ></ intent >
|
09
|
</ activity >
|
10
|
</ application >
|
11
|
< uses android:name = "android.permission.INTERNET" -permission = "" >
|
12
|
</ uses ></ manifest >
|
注意:
1
|
< uses android:name = "android.permission.INTERNET" -permission = "" ></ uses >
|
, 允许网络应用,必须!!
Android主程序代码:
001
|
package com.xinze.joke;
|
002
|
003
|
import android.app.Activity;
|
004
|
import android.app.AlertDialog;
|
005
|
import android.app.AlertDialog.Builder;
|
006
|
007
|
import android.content.DialogInterface;
|
008
|
009
|
import android.os.Bundle;
|
010
|
import android.view.KeyEvent;
|
011
|
import android.view.View;
|
012
|
import android.view.Window;
|
013
|
import android.view.WindowManager;
|
014
|
import android.webkit.JsPromptResult;
|
015
|
import android.webkit.JsResult;
|
016
|
import android.webkit.WebChromeClient;
|
017
|
import android.webkit.WebView;
|
018
|
import android.webkit.WebViewClient;
|
019
|
020
|
import android.webkit.WebStorage ;
|
021
|
022
|
public class Joke extends Activity {
|
023
|
024
|
/** Called when the activity is first created. */
|
025
|
@Override
|
026
|
public void onCreate(Bundle savedInstanceState) {
|
027
|
super .onCreate(savedInstanceState);
|
028
|
029
|
final WebView wv = new WebView( this );
|
030
|
031
|
// 覆盖默认后退按钮的作用,替换成WebView里的查看历史页面
|
032
|
wv.setOnKeyListener( new View.OnKeyListener() {
|
033
|
034
|
@Override
|
035
|
public boolean onKey(View v, int keyCode, KeyEvent event) {
|
036
|
if (event.getAction() == KeyEvent.ACTION_DOWN) {
|
037
|
if ((keyCode == KeyEvent.KEYCODE_BACK) && wv.canGoBack()) {
|
038
|
wv.goBack();
|
039
|
return true ;
|
040
|
}
|
041
|
}
|
042
|
return false ;
|
043
|
}
|
044
|
});
|
045
|
046
|
// 设置支持Javascript
|
047
|
wv.getSettings().setJavaScriptEnabled( true );
|
048
|
049
|
wv.getSettings().setJavaScriptCanOpenWindowsAutomatically( true );
|
050
|
wv.getSettings().setDatabaseEnabled( true );
|
051
|
wv.getSettings().setDatabasePath( "/data/data/com.xinze.joke/databases" );
|
052
|
053
|
// 创建WebViewClient对象
|
054
|
WebViewClient wvc = new WebViewClient() {
|
055
|
056
|
@Override
|
057
|
public boolean shouldOverrideUrlLoading(WebView view, String url) {
|
058
|
wv.loadUrl(url);
|
059
|
// 记得消耗掉这个事件。给不知道的朋友再解释一下,Android中返回True的意思就是到此为止吧,事件就会不会冒泡传递了,我们称之为消耗掉
|
060
|
return true ;
|
061
|
}
|
062
|
};
|
063
|
064
|
// 设置WebViewClient对象
|
065
|
wv.setWebViewClient(wvc);
|
066
|
067
|
// 创建WebViewChromeClient
|
068
|
WebChromeClient wvcc = new WebChromeClient() {
|
069
|
070
|
// 处理Alert事件
|
071
|
@Override
|
072
|
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
|
073
|
// 构建一个Builder来显示网页中的alert对话框
|
074
|
Builder builder = new Builder(Joke. this );
|
075
|
builder.setTitle( "笑死不偿命" );
|
076
|
builder.setMessage(message);
|
077
|
builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {
|
078
|
@Override
|
079
|
public void onClick(DialogInterface dialog, int which) {
|
080
|
result.confirm();
|
081
|
}
|
082
|
});
|
083
|
builder.setCancelable( false );
|
084
|
builder.create();
|
085
|
builder.show();
|
086
|
return true ;
|
087
|
}
|
088
|
089
|
// 处理Confirm事件
|
090
|
@Override
|
091
|
public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
|
092
|
Builder builder = new Builder(Joke. this );
|
093
|
builder.setTitle( "删除确认" );
|
094
|
builder.setMessage(message);
|
095
|
builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {
|
096
|
097
|
@Override
|
098
|
public void onClick(DialogInterface dialog, int which) {
|
099
|
result.confirm();
|
100
|
}
|
101
|
102
|
});
|
103
|
builder.setNeutralButton(android.R.string.cancel, new AlertDialog.OnClickListener() {
|
104
|
105
|
@Override
|
106
|
public void onClick(DialogInterface dialog, int which) {
|
107
|
result.cancel();
|
108
|
}
|
109
|
110
|
});
|
111
|
builder.setCancelable( false );
|
112
|
builder.create();
|
113
|
builder.show();
|
114
|
return true ;
|
115
|
}
|
116
|
117
|
// 处理提示事件
|
118
|
@Override
|
119
|
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue,
|
120
|
JsPromptResult result) {
|
121
|
// 看看默认的效果
|
122
|
return super .onJsPrompt(view, url, message, defaultValue, result);
|
123
|
}
|
124
|
125
|
@Override
|
126
|
public void onExceededDatabaseQuota(String url, String
|
127
|
databaseIdentifier, long currentQuota, long estimatedSize, long
|
128
|
totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {
|
129
|
quotaUpdater.updateQuota( 204801 );
|
130
|
}
|
131
|
132
|
};
|
133
|
134
|
wv.loadUrl( "http://192.168.1.14/index.html" );
|
135
|
136
|
// 设置setWebChromeClient对象
|
137
|
wv.setWebChromeClient(wvcc);
|
138
|
setContentView(wv);
|
139
|
}
|
140
|
}
|
使用 JavaScript Database 的时候,需要特别注意:setDatabaseEnabled 以及 onExceededDatabaseQuota
转自:http://www.lchots.com/html/2012/html5gj_0822/641.html
html5开发android应用相关推荐
- html开发android,使用HTML5开发Android本地应用(一)
HTML5是现在最热门的技术之一,Android自带的WebKit浏览器对于HTML5有着不错的支持,而各种浏览器的最新版本都开始普遍的支持HTML5.使用HTML5开发手机应用的主要好处有两个:一个 ...
- 利用HTML5开发Android
为什么80%的码农都做不了架构师?>>> 在此输入链接描述 ● Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大 ...
- 利用HTML5开发Android笔记(中篇)
资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个很简明的demo 可以作为入门基础 学习的过程中做了点笔记 整理如下 虽然内容比较简单 但是数量还是比较多的 所以分了3篇 ( ...
- 用HTML5开发Android笔记(下篇)
iSmart-艾思www.smartmobi.com.cn ● HTML5本地存储在Android中的应用 HTML5提供了2种客户端存储数据新方法: localStorage 没有时间限制 sess ...
- HTML5开发Android程序
初遇WeX5的看过来 针对刚接触WeX5的用户建议通过起步官方在百度传课及腾讯课堂发布的<H5 App开发 WeX5入门课程>视频教程,使用配套的教材及案例素材学习,全部免费, 新来的小伙 ...
- Android逆向工程:针对HTML5开发的App如何下手?这就带你上车!
亲爱的小伙伴们大家好,春节已经过去了,想必小伙伴们在家玩的都很愉快吧~现在不知道大家是否已经告别了老家温暖的港湾再次投入到工作岗位中,博主反正是已经投入到岗位一星期了,不过还是有点不在状态~~新年新气 ...
- html5文章 -- 应用HTML5 开发手机APP
因为HTML5暂时无法短期内在PC普及,主要方向在使用高端浏览器的高端移动设备,所以可以用作开发Android系统的App.但只有Android2.2以上.iOS3.2以上均支持HTML5,两大平台有 ...
- 用HTML5/CSS3/JS开发Android/IOS应用
现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会 ...
- Android and HTML5 开发手机应用
作为一个WEB开发者,HTML5让我兴奋,因为它可以将桌面应用程序功能带入浏览器中.但在国内,看着到处横行的IE8版本以下的浏览器,觉得到能大规模使用HTML5技术的那天,还遥遥无期.但面对iOS及A ...
最新文章
- 实现HTTP协议Get、Post和文件上传功能——使用libcurl接口实现
- 深度神经网络在NLP的应用!
- 数学知识--Unconstrained Optimization(第二章)
- C# 5.0中引入了async 和 await
- iOS 热更新方案 - lance的专栏 - 博客频道 - CSDN.NET
- OBIEE 11g:Error:nQSError 36010 Server version 318 cannot read the newer version of the repository
- Java基础(三十五)Math、Random类和数字格式化(String.format方法)
- 防火墙(14)——实现路由转发功能(2)
- 可访问范围 与 visual 或 abstract “修饰符”
- 看完这些干货帖,大数据产品从入门到精通
- no segments* file found in org.apache.lucene.store.SimpleFSDirectory
- iis php5.3套件,IIS下安装php5.3
- 推荐《程序设计导引及在线实践》
- DCDC电源模块方案 大功率DCDC变换器
- 小程序源码:图片秒加水印制作生成
- 交友网站界面设计+数据库设计
- 小白刷LeeCode(算法篇)3
- python试卷管理系统的设计与实现_在线考试系统的设计与实现毕业设计论文.doc...
- 计划排程系统用户画象分析
- springboot jpa链接数据库