html5开发android应用,安卓端html

如何将HTML5程序打包成Android应用

将HTML5打包为Android应用可以使用HBuilder

创新互联建站服务紧随时代发展步伐，进行技术革新和技术进步，经过十年的发展和积累，已经汇集了一批资深网站策划师、设计师、专业的网站实施团队以及高素质售后服务人员，并且完全形成了一套成熟的业务流程，能够完全依照客户要求对网站进行网站设计制作、成都网站建设、建设、维护、更新和改版，实现客户网站对外宣传展示的首要目的，并为客户企业品牌互联网化提供全面的解决方案。

下载安装完毕后操作步奏如下：

1.点击文件-新建-新建移动APP

2.设置你的应用名称后点完成

3.写入你的代码

!DOCTYPE html

html

head

meta charset="utf-8"

meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /

title/title

script type="text/javascript"

document.addEventListener('plusready', function(){

//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

});

/script

/head

body

p这是一个手机APP/p

/body

/html

4.设置你的APP信息

在IDE的右方，项目管理器处双击manifest.json，进入设置应用名称，权限，图标，签名等设置

5.全部设置完毕后，生成APP

点击菜单中的发行-发行为原生安装包

选择安卓，也可同步打包为IOS的Ipk文件，打包为远程打包，无需本地安装环境。

确定后，稍等片刻

6.打包完成

完成预览：

怎么用html5开发android

Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示

Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍

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

1 viewport属性放在HTML的meta中

Html代码

SPAN style="FONT-SIZE: x-small" head

titleExmaple/title

meta name=”viewport” content=”width=device-width,user-scalable=no”/

/head/SPAN

meta中viewport的属性如下

Html代码

SPAN style="FONT-SIZE: x-small" meta name="viewport"

content="

height = [pixel_value | device-height] ,

width = [pixel_value | device-width ] ,

initial-scale = float_value ,

minimum-scale = float_value ,

maximum-scale = float_value ,

user-scalable = [yes | no] ,

target-densitydpi = [dpi_value | device-dpi |

high-dpi | medium-dpi | low-dpi]

"

//SPAN

2 CSS控制设备密度

为每种密度创建独立的样式表（注意其中的webkit-device-pixel-ratio 3个数值对应3种分辨率）

Html代码

link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /

link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /

link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" /

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

Html代码

#header {

SPAN style="WHITE-SPACE: pre" /SPAN background:url(medium-density-image.png);

}

@media screen and (-webkit-device-pixel-ratio: 1.5) {

// CSS for high-density screens

#header {

background:url(high-density-image.png);

}

}

@media screen and (-webkit-device-pixel-ratio: 0.75) {

// CSS for low-density screens

#header {

background:url(low-density-image.png);

}

}

Html代码

meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" /

3 JS控制

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

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

JS中查询设备密度的方法

Js代码

if (window.devicePixelRatio == 1.5) {

alert("This is a high-density screen");

} else if (window.devicePixelRation == 0.75) {

alert("This is a low-density screen");

}

● Android中构建HTML5应用

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

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

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

Java代码

WebView myWebView = (WebView) findViewById(R.id.webview);

myWebView.loadUrl("");

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

Xml代码

uses-permission android:name="android.permission.INTERNET" /

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

Java代码

//设置WebViewClient

webView.setWebViewClient(new WebViewClient(){

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return true;

}

public void onPageFinished(WebView view, String url) {

super.onPageFinished(view, url);

}

public void onPageStarted(WebView view, String url, Bitmap favicon) {

super.onPageStarted(view, url, favicon);

}

});

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

Java代码

private class MyWebViewClient extends WebViewClient {

public boolean shouldOverrideUrlLoading(WebView view, String url) {

if (Uri.parse(url).getHost().equals("")) {

return false;

}

Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));

startActivity(intent);

return true;

}

}

之后：

Java代码

WebView myWebView = (WebView) findViewById(R.id.webview);

myWebView.setWebViewClient(new MyWebViewClient());

另外出于用户习惯上的考虑 需要将WebView表现得更像一个浏览器，也就是需要可以回退历史记录

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

Java代码

public boolean onKeyDown(int keyCode, KeyEvent event) {

if ((keyCode == KeyEvent.KEYCODE_BACK) myWebView.canGoBack() {

myWebView.goBack();

return true;

}

return super.onKeyDown(keyCode, event);

}

Java代码

WebView myWebView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = myWebView.getSettings();

webSettings.setJavaScriptEnabled(true);

如何利用html5开发android界面

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

1 viewport属性放在HTML的meta中

SPAN style="FONT-SIZE: x-small" head

titleExmaple/title

meta name=”viewport” content=”width=device-width,user-scalable=no”/

/head/SPAN

meta中viewport的属性如下

SPAN style="FONT-SIZE: x-small" meta name="viewport"

content="

height = [pixel_value | device-height] ,

width = [pixel_value | device-width ] ,

initial-scale = float_value ,

minimum-scale = float_value ,

maximum-scale = float_value ,

user-scalable = [yes | no] ,

target-densitydpi = [dpi_value | device-dpi |

high-dpi | medium-dpi | low-dpi]

"

//SPAN

2 CSS控制设备密度

为每种密度创建独立的样式表（注意其中的webkit-device-pixel-ratio 3个数值对应3种分辨率）

link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /

link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /

link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" /

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

WebView myWebView = (WebView) findViewById(R.id.webview);

myWebView.setWebViewClient(new MyWebViewClient());

另外出于用户习惯上的考虑 需要将WebView表现得更像一个浏览器，也就是需要可以回退历史记录

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

Java代码

public boolean onKeyDown(int keyCode, KeyEvent event) {

if ((keyCode == KeyEvent.KEYCODE_BACK) myWebView.canGoBack() {

myWebView.goBack();

return true;

}

return super.onKeyDown(keyCode, event);

}

//处理javascript中的confirm

public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {

Builder builder = new Builder(MainActivity.this);

builder.setTitle("confirm");

builder.setMessage(message);

builder.setPositiveButton(android.R.string.ok,

new AlertDialog.OnClickListener() {

public void onClick(DialogInterface dialog, int which) {

result.confirm();

}

});

builder.setNegativeButton(android.R.string.cancel,

new DialogInterface.OnClickListener() {

public void onClick(DialogInterface dialog, int which) {

result.cancel();

}

});

builder.setCancelable(false);

builder.create();

builder.show();

return true;

};

@Override

//设置网页加载的进度条

public void onProgressChanged(WebView view, int newProgress) {

MainActivity.this.getWindow().setFeatureInt(Window.FEATURE_PROGRESS, newProgress * 100);

super.onProgressChanged(view, newProgress);

}

//设置应用程序的标题title

public void onReceivedTitle(WebView view, String title) {

MainActivity.this.setTitle(title);

super.onReceivedTitle(view, title);

}

});

● Android中的调试

通过JS代码输出log信息

Js代码

Js代码： console.log("Hello World");

Log信息： Console: Hello World :82

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

Java代码 复制代码 收藏代码

WebView myWebView = (WebView) findViewById(R.id.webview);

myWebView.setWebChromeClient(new WebChromeClient() {

public void onConsoleMessage(String message, int lineNumber, String sourceID) {

Log.d("MyApplication", message + " -- From line "

+ lineNumber + " of "

+ sourceID);

}

});

以及

Java代码

WebView myWebView = (WebView) findViewById(R.id.webview);

myWebView.setWebChromeClient(new WebChromeClient() {

public boolean onConsoleMessage(ConsoleMessage cm) {

Log.d("MyApplication", cm.message() + " -- From line "

+ cm.lineNumber() + " of "

+ cm.sourceId() );

return true;

}

});

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

● HTML5本地存储在Android中的应用

HTML5提供了2种客户端存储数据新方法：

localStorage 没有时间限制

sessionStorage 针对一个Session的数据存储

Js代码

script type="text/javascript"

localStorage.lastname="Smith";

document.write(localStorage.lastname);

/script

script type="text/javascript"

sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname);

/script

WebStorage的API:

//清空storage

localStorage.clear();

//设置一个键值

localStorage.setItem(“yarin”,“yangfegnsheng”);

//获取一个键值

localStorage.getItem(“yarin”);

//获取指定下标的键的名称（如同Array）

localStorage.key(0);

//return “fresh” //删除一个键值

localStorage.removeItem(“yarin”);

注意一定要在设置中开启哦

setDomStorageEnabled（true）

在Android中进行操作

//启用数据库

webSettings.setDatabaseEnabled(true);

String dir = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();

//设置数据库路径

webSettings.setDatabasePath(dir);

//使用localStorage则必须打开

webSettings.setDomStorageEnabled(true);

//扩充数据库的容量（在WebChromeClinet中实现）

public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota,

long estimatedSize, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {

quotaUpdater.updateQuota(estimatedSize * 2);

}

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

function initDatabase() {

try {

if (!window.openDatabase) {

alert('Databases are not supported by your browser');

} else {

var shortName = 'YARINDB';

var version = '1.0';

var displayName = 'yarin db';

var maxSize = 100000; // in bytes

YARINDB = openDatabase(shortName, version, displayName, maxSize);

createTables();

selectAll();

}

} catch(e) {

if (e == 2) {

// Version mismatch.

console.log("Invalid database version.");

} else {

console.log("Unknown error "+ e +".");

}

return;

}

}

function createTables(){

YARINDB.transaction(

function (transaction) {

transaction.executeSql('CREATE TABLE IF NOT EXISTS yarin(id INTEGER NOT NULL PRIMARY KEY, name TEXT NOT NULL,desc TEXT NOT NULL);', [], nullDataHandler, errorHandler);

}

);

insertData();

}

function insertData(){

YARINDB.transaction(

function (transaction) {

//Starter data when page is initialized

var data = ['1','yarin yang','I am yarin'];

transaction.executeSql("INSERT INTO yarin(id, name, desc) VALUES (?, ?, ?)", [data[0], data[1], data[2]]);

}

);

}

function errorHandler(transaction, error){

if (error.code==1){

// DB Table already exists

} else {

// Error is a human-readable string.

console.log('Oops. Error was '+error.message+' (Code '+error.code+')');

}

return false;

}

function nullDataHandler(){

console.log("SQL Query Succeeded");

}

function selectAll(){

YARINDB.transaction(

function (transaction) {

transaction.executeSql("SELECT * FROM yarin;", [], dataSelectHandler, errorHandler);

}

);

}

function dataSelectHandler(transaction, results){

// Handle the results

for (var i=0; iresults.rows.length; i++) {

var row = results.rows.item(i);

var newFeature = new Object();

newFeature.name = row['name'];

newFeature.decs = row['desc'];

document.getElementByIdx_x_x_x("name").innerHTML="name:"+newFeature.name;

document.getElementByIdx_x_x_x("desc").innerHTML="desc:"+newFeature.decs;

}

}

function updateData(){

YARINDB.transaction(

function (transaction) {

var data = ['fengsheng yang','I am fengsheng'];

transaction.executeSql("UPDATE yarin SET name=?, desc=? WHERE id = 1", [data[0], data[1]]);

}

);

selectAll();

}

function ddeleteTables(){

YARINDB.transaction(

function (transaction) {

transaction.executeSql("DROP TABLE yarin;", [], nullDataHandler, errorHandler);

}

);

console.log("Table 'page_settings' has been dropped.");

}

注意onLoad中的初始化工作

function initLocalStorage(){

if (window.localStorage) {

textarea.addEventListener("keyup", function() {

window.localStorage["value"] = this.value;

window.localStorage["time"] = new Date().getTime();

}, false);

} else {

alert("LocalStorage are not supported in this browser.");

}

}

window.onload = function() {

initDatabase();

initLocalStorage();

}

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

//启用地理定位

webSettings.setGeolocationEnabled(true);

//设置定位的数据库路径

webSettings.setGeolocationDatabasePath(dir);

//配置权限（同样在WebChromeClient中实现）

public void onGeolocationPermissionsShowPrompt(String origin,

GeolocationPermissions.Callback callback) {

callback.invoke(origin, true, false);

super.onGeolocationPermissionsShowPrompt(origin, callback);

}

HTML5中 通过navigator.geolocation对象获取地理位置信息

常用的navigator.geolocation对象有以下三种方法：

Js代码

//获取当前地理位置

navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)

//持续获取地理位置

navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)

//清除持续获取地理位置事件

navigator.geolocation.clearWatch(watch_position_id)

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

//定位

function get_location() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(show_map,handle_error,{enableHighAccuracy:false,maximumAge:1000,timeout:15000});

} else {

alert("Your browser does not support HTML5 geoLocation");

}

}

如何将html5程序打包成Android应用

1下载安装MyEclipse2014，AndroidSDK，eclipse(需配置Android开发环境)Java和Android环境安装与配置，将另写经验分享，读者也可百度参考其他相关资料，自行安装2打开MyEclipse2014，新建一个HTML5MobileApplicationProject，

现在有什么 Android App是用 HTML5 开发的

您好，我是一名站长。可以尝试使用应用公园来在线制作手机APP1.这个网站无需编程和代码，小白用户也能在线开发app；2.功能很多，只要不是很复杂的APP，一般够用；3.有多种主题模板可以直接套用，省时省力；4.有免费版、付费版，即使是付费版比APP定制公司便宜。5.可制作出安卓Android、IOS版手机APP6.同城生活、电商、旅游、美食、社区、教育、新闻等多类型APP。希望可以帮到您！

HTML5开发Android本地应用靠谱吗

依据Gartner的研究，Android是全球最受欢迎的移动操作系统，是它支持着大多数智能手机；而依据Canalys的调研，现在在平板电脑领域享有多数市场份额（53%）。让Android有如此热度的一部分因素是其多样性。几乎每个用户都有一个的Android设备的尺寸和形状，想要一个13英寸带可拆卸键盘的平板电脑？Android同样满足你。

当如此多样的设备让用户欢喜时，它也为开发人员带来了不少头疼的麻烦。屏幕尺寸、分辨率、CPU架构和操作系统版本等，都会为开发人员创建原生Android app带来挑战。幸运的是，HTML5使得处理这庞大而多样的Android设备队伍变得快速而简单。

“服务员，我的冻酸奶里面有果冻豆”

Android初次广泛登台是在2009年。制造商发布设备，一般只对操作系统更新一两次，就放弃它开始关注新硬件了。因此，根据OpenSignal对超过五十万台Android设备中，名为Gingerbread（姜饼2.3 x）的版本依然占据着最大市场份额（34.1%）。

Android SDK是操作系统特定的，这为Android开发人员营造了挑战。也就是说，如果你用4.0 SDK（冰淇淋三明治）开发app，你的app将不能在2.3（姜饼）上运行。这无疑让开发人员置身于一个尴尬境地。一方面，你要用最新最好的SDK，另一方面，你要app得到尽可能多的下载。

有了HTML5，你不用再纠结于选择。你可以用强大的它来构建你的app，无视Android操作系统版本。

庞大的Android设备队伍

在Android设备运行的不同不仅仅是表面上的，任何Android设备的心脏部分都是CPU由Qualcomm、PowerVR、NVidia、MediaTek、Intel等制造。取决于你的app需要用到哪个操作系统的特性，原生Android SDK可能不会兼容什么特别设备。

HTML5提供APIs来做很多通常被认为是原生操作系统功能的事情。HTML5包含对于键/值存储、文件系统IO甚至通过地理定位访问GPS的强大APIs。

要访问原生操作系统功能，没有标准的HTL5界面。 Apache Cordova framework提供一个界面让你的app在任何设备上访问原生操作系统资源，诸如摄像机和加速计。

各种形状和大小

Android设备有着各种尺寸，小至三星的新齿轮智能手表，大至13英寸或更大的平板电脑。更添其复杂性的是分辨率范围从240×320跨到2560×1600。

要解决这个问题，你可能得用线形布局或网格视图。这类布局能良好运行，如果你想要依据用户需求滚动到视图中查看app。

好在HTML5提供一个更好的途径来处理尺寸大小的问题——用响应设计。响应设计是由CSS Media Queries所增强的简单结构的HTML在更大的屏幕利用更多的空间，在更小的屏幕上缩小或消除那些并不重要的元素。

当响应设计正确完成时，用户就对跨平台的app有了流畅的体验，即便是重新调整屏幕，这是在任何操作系统上解决屏幕尺寸/分辨率问题的最好办法。

移植到其它平台

Java的愿景是“write once, run any where（只写一次，哪儿都能跑）”。不幸，出于种种原因，不能实现这个梦。一些交互编译器可以允许创建针对Android和iOS的app，但只有HTML5能在移动操作系统和互联网浏览器上运行。

在诸如Android、iOS、Windows Phone等移动操作系统上，HTML5应用通常托管于Apache Cordova （aka PhoneGap）内，Apache Cordova充当将你的HTML5联系到原生操作系统的角色，这包括定义你的app图标、加载屏幕和提供JavaScript来访问原生操作系统硬件。

HTML5支持跨平台，当然，还支持网页。你第一次用HTML5取代.ASPX或PHP来开启一个新项目将需要十足的信仰之外，还要你的app在没有服务器端生成HTML的情况下工作。

开启你的浏览器

HTML5应用的性能可以无限接近于原生性能，如果它们是被精心无误地制作处理的。

HTML5应用绝对需要被安装到设备上。通过将Apache Cordova或嵌入的WebView指向一个托管于互联网的网页来构建的app只能提供可怜的用户体验。如果你的app每次都需要用户通过点击一些东西来下载用户界面，这是不可能满足他们“即时响应”的期望的。为获得接近于原生的速度，你所有的HTML5、JavaScript和CSS都必须安装在本地设备上，从而使它能够在用户点击后就运行。

大多数移动app从互联网服务器上加载和保存数据。为了保持你的app以最快的速度响应，你将要在本地存储一个缓存数据并异步刷新你的数据。这将允许你的app在异步更新时，立即渲染其UI。

HTML的复杂性使得关于渲染你的用户界面需要多少CPU cycles有了很大不同，最好是保持你的HTML尽可能地结构简单化，带有尽可能少的嵌套级别标签。举个例子说，深度嵌套的HTML表格，是出了名地衰！

结论

HTML5允许你写一次应用程序并快速部署它到几乎现有的每个操作系统。它即时响应的能力很适合现在数不胜数的安卓设备屏幕尺寸。凭借大量可用的工具，诸如 Intel XDK new IDE，你可以在Android使用HTML开放式架构、CSS和JavaScript上提供一种美妙的体验。