html5android應用開發
『壹』 怎樣 用html5開發android app
下載安裝MyEclipse2014，Android SDK，eclipse(需配置Android開發環境)
Java和Android環境安裝與配置，將另寫經驗分享，讀者也可網路參考其他相關資料，自行安裝
打開MyEclipse2014，新建一個HTML5 Mobile Application Project，命名，例如：hello
html5程序在工程www目錄下編輯；
編輯好我們的html5程序，下面就要開始學習打包了
這里介紹兩種打包方式：1、PhoneGap Build Service 打包
PhoneGap官網有相關教程可參考，不具體介紹
2、android SDK +eclispe 打包
android SDK +eclispe 打包(前提已配置好，android開發環境)：
Step1、啟動eclipse，新建Android Application Project，即Android工程，命名，例如：hello
Step2、將前面Myeclipse2014中編輯好的HTML5程序(www整個目錄）拷至剛剛在eclipse新建hello工程對應assets目錄下面
Step3、下面要做的就是如何將我們的HTML5程序在Android應用中啟動，這里我們要使用Android系統自帶的WebView控制項（具體信息參考Adroid開發文檔）---在工程下找到res->layout->activity_main.xml並打開，向裡面插入WebView控制項，編輯好自己想要的樣式
Step4、在主程序入口，用剛剛編輯好的WebView控制項將HTML5程序引入，此時，主體功能已實現，編譯工程即可得到apk
『貳』 如何用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>
<title>Exmaple</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("http://www.example.com");
注意在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("www.example.com")) {
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);
}
河南新華網路運營協會
『叄』 如何開發同時支持ios和Android的應用html5
Html5是一種網頁開發語言，現在仍處於發展階段，但大部分瀏覽器已經支持某些
HTML5 技術為開發者提供了一個跨平台的移動apps開發方案，並且該方案具有很好的擴展性和靈活性。
如今國內使用html5開發app應用技術尚有欠缺，因為在手機開發app上，html5應用只有兩種方法，要不就是全使用HTML5的語法，要不就是僅使用JavaScript引擎。
JavaScript引擎的構建方法讓製作手機網頁游戲成為可能。
由於界面層很復雜，已預訂了一個UI工具包去使用。
純HTML5手機應用運行緩慢並錯漏百出，但優化後的效果會好轉。盡管不是很多人願意去做這樣的優化，但依然可以去嘗試。
HTML5手機應用的最大優勢就是可以在網頁上直接調試和修改。原生應用的開發人員
可能需要花費非常大的力氣才能達到HTML5的效果，不斷地重復編碼、調試和運行，這是
首先得解決的一個問題。
即使這樣，愛在臨港還是很看好html5 app開發，原因有一下幾點。
一：現在HTML5非常火的技術，主要方向在使用高端瀏覽器的高端移動設備，所以可以用作開發Android系統的App。
二：html5對android、ios系統都支持。
三：HTML5可以用作離線應用的開發，離線應用就是把需要的資源先緩存到本地，下次再查看時無需聯網。
四：html5開發app，能提供更快、更簡便的服務，代碼可高度重用，服務發布方便。
五：動畫、游戲方面，地理定位方面的app應用正在崛，而html5技術優勢正是這在些方面。
可以說，未來採用html5開發app的，將會大量減少代碼量，應用軟體也會得到更高的用戶
體驗。
『肆』 現在有什麼 Android App是用 HTML5 開發的
不管是安卓還是IOS，html5是潮流，越來越多的程序員用於開發web
app，相較於原生的Native
App，webapp有自己的優勢，比如無需更新、全平台兼容。現在大部門的APP都是採用混合開發的模式，在原生的基礎上套上WEB的外衣。
『伍』 如何用html5開發android應用
html5就是做網頁的，用html5做好網頁版的軟體後 用PhoneGap 打包成apk，就能在安卓上安裝運行。
『陸』 html5開發的app有哪些優點
一：現在HTML5非常火的技術，主要方向在使用高端瀏覽器的高端移動設備，所以可以用作開發Android系統的App。
二：html5對android、ios系統都支持。
三：
HTML5可以用作離線應用的開發，離線應用就是把需要的資源先緩存到本地，下次再查看時無需聯網。
四：html5開發app，能提供更快、更簡便的服務，代碼可高度重用，服務發布方便。
五：動畫、游戲方面，地理定位方面的app應用正在崛，而html5技術優勢正是這在些方面。
可以說，未來採用html5開發app的，將會大量減少代碼量，應用軟體也會得到更高的用戶體驗。
『柒』 如何將html5程序打包成Android應用
需要使用安卓編譯器進行處理.
工具如下
(Exlipse)
原因是: H5是無法直接編譯成 Android 程序的
使用方法如下:
通過安卓編譯器(Android Studio 或者 Exlipse) 創建安卓程序
在安卓程序中載入 webview(瀏覽器控制項)
用 webview 打開 H5頁面.