將HTML5打包為Android應(yīng)用可以使用HBuilder
創(chuàng)新互聯(lián)建站服務(wù)緊隨時(shí)代發(fā)展步伐，進(jìn)行技術(shù)革新和技術(shù)進(jìn)步，經(jīng)過十年的發(fā)展和積累，已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計(jì)師、專業(yè)的網(wǎng)站實(shí)施團(tuán)隊(duì)以及高素質(zhì)售后服務(wù)人員，并且完全形成了一套成熟的業(yè)務(wù)流程，能夠完全依照客戶要求對(duì)網(wǎng)站進(jìn)行網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、建設(shè)、維護(hù)、更新和改版，實(shí)現(xiàn)客戶網(wǎng)站對(duì)外宣傳展示的首要目的，并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。
下載安裝完畢后操作步奏如下：
1.點(diǎn)擊文件-新建-新建移動(dòng)APP
2.設(shè)置你的應(yīng)用名稱后點(diǎn)完成
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都應(yīng)該在此事件發(fā)生后調(diào)用，否則會(huì)出現(xiàn)plus?is?undefined。"
});
/script
/head
body
p這是一個(gè)手機(jī)APP/p
/body
/html
4.設(shè)置你的APP信息
在IDE的右方，項(xiàng)目管理器處雙擊manifest.json，進(jìn)入設(shè)置應(yīng)用名稱，權(quán)限，圖標(biāo)，簽名等設(shè)置
5.全部設(shè)置完畢后，生成APP
點(diǎn)擊菜單中的發(fā)行-發(fā)行為原生安裝包
選擇安卓，也可同步打包為IOS的Ipk文件，打包為遠(yuǎn)程打包，無需本地安裝環(huán)境。
確定后，稍等片刻
6.打包完成
完成預(yù)覽：
Android瀏覽器默認(rèn)預(yù)覽模式瀏覽 會(huì)縮小頁面 WebView中則會(huì)以原始大小顯示
Android瀏覽器和WebView默認(rèn)為mdpi。hdpi相當(dāng)于mdpi的1.5倍 ldpi相當(dāng)于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控制設(shè)備密度
為每種密度創(chuàng)建獨(dú)立的樣式表（注意其中的webkit-device-pixel-ratio 3個(gè)數(shù)值對(duì)應(yīng)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" /
在一個(gè)樣式表中，指定不同的樣式
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支持查詢當(dāng)前設(shè)別密度的DOM特性
window.devicePixelRatio 同樣值有3個(gè)（0.75,1,1.5對(duì)應(yīng)3種分辨率）
JS中查詢?cè)O(shè)備密度的方法
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中構(gòu)建HTML5應(yīng)用
使用WebView控件 與其他控件的使用方法相同 在layout中使用一個(gè)WebView標(biāo)簽
WebView不包括導(dǎo)航欄，地址欄等完整瀏覽器功能，只用于顯示一個(gè)網(wǎng)頁
在WebView中加載Web頁面，使用loadUrl()
Java代碼
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("");
注意在manifest文件中加入訪問互聯(lián)網(wǎng)的權(quán)限：
Xml代碼
uses-permission android:name="android.permission.INTERNET" /
在Android中點(diǎn)擊一個(gè)鏈接，默認(rèn)是調(diào)用應(yīng)用程序來啟動(dòng)，因此WebView需要代為處理這個(gè)動(dòng)作 通過WebViewClient
Java代碼
//設(shè)置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);
}
});
這個(gè)WebViewClient對(duì)象是可以自己擴(kuò)展的，例如
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());
另外出于用戶習(xí)慣上的考慮 需要將WebView表現(xiàn)得更像一個(gè)瀏覽器，也就是需要可以回退歷史記錄
因此需要覆蓋系統(tǒng)的回退鍵 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);
三種解決方式：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控制設(shè)備密度
為每種密度創(chuàng)建獨(dú)立的樣式表（注意其中的webkit-device-pixel-ratio 3個(gè)數(shù)值對(duì)應(yīng)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" /
在一個(gè)樣式表中，指定不同的樣式
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());
另外出于用戶習(xí)慣上的考慮 需要將WebView表現(xiàn)得更像一個(gè)瀏覽器，也就是需要可以回退歷史記錄
因此需要覆蓋系統(tǒng)的回退鍵 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
//設(shè)置網(wǎng)頁加載的進(jìn)度條
public void onProgressChanged(WebView view, int newProgress) {
MainActivity.this.getWindow().setFeatureInt(Window.FEATURE_PROGRESS, newProgress * 100);
super.onProgressChanged(view, newProgress);
}
//設(shè)置應(yīng)用程序的標(biāo)題title
public void onReceivedTitle(WebView view, String title) {
MainActivity.this.setTitle(title);
super.onReceivedTitle(view, title);
}
});
● Android中的調(diào)試
通過JS代碼輸出log信息
Js代碼
Js代碼： console.log("Hello World");
Log信息： Console: Hello World :82
在WebChromeClient中實(shí)現(xiàn)onConsoleMesaage()回調(diào)方法，讓其在LogCat中打印信息
Java代碼 復(fù)制代碼 收藏代碼
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 還包括一個(gè) MessageLevel 表示控制臺(tái)傳遞信息類型。 您可以用messageLevel()查詢信息級(jí)別，以確定信息的嚴(yán)重程度，然后使用適當(dāng)?shù)腖og方法或采取其他適當(dāng)?shù)拇胧?/p>
● HTML5本地存儲(chǔ)在Android中的應(yīng)用
HTML5提供了2種客戶端存儲(chǔ)數(shù)據(jù)新方法：
localStorage 沒有時(shí)間限制
sessionStorage 針對(duì)一個(gè)Session的數(shù)據(jù)存儲(chǔ)
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();
//設(shè)置一個(gè)鍵值
localStorage.setItem(“yarin”,“yangfegnsheng”);
//獲取一個(gè)鍵值
localStorage.getItem(“yarin”);
//獲取指定下標(biāo)的鍵的名稱（如同Array）
localStorage.key(0);
//return “fresh” //刪除一個(gè)鍵值
localStorage.removeItem(“yarin”);
注意一定要在設(shè)置中開啟哦
setDomStorageEnabled（true）
在Android中進(jìn)行操作
//啟用數(shù)據(jù)庫
webSettings.setDatabaseEnabled(true);
String dir = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();
//設(shè)置數(shù)據(jù)庫路徑
webSettings.setDatabasePath(dir);
//使用localStorage則必須打開
webSettings.setDomStorageEnabled(true);
//擴(kuò)充數(shù)據(jù)庫的容量（在WebChromeClinet中實(shí)現(xiàn)）
public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota,
long estimatedSize, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {
quotaUpdater.updateQuota(estimatedSize * 2);
}
在JS中按常規(guī)進(jìn)行數(shù)據(jù)庫操作
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地理位置服務(wù)在Android中的應(yīng)用
//啟用地理定位
webSettings.setGeolocationEnabled(true);
//設(shè)置定位的數(shù)據(jù)庫路徑
webSettings.setGeolocationDatabasePath(dir);
//配置權(quán)限（同樣在WebChromeClient中實(shí)現(xiàn)）
public void onGeolocationPermissionsShowPrompt(String origin,
GeolocationPermissions.Callback callback) {
callback.invoke(origin, true, false);
super.onGeolocationPermissionsShowPrompt(origin, callback);
}
HTML5中 通過navigator.geolocation對(duì)象獲取地理位置信息
常用的navigator.geolocation對(duì)象有以下三種方法：
Js代碼
//獲取當(dāng)前地理位置
navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)
//持續(xù)獲取地理位置
navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)
//清除持續(xù)獲取地理位置事件
navigator.geolocation.clearWatch(watch_position_id)
其中success_callback_function為成功之后處理的函數(shù)，error_callback_function為失敗之后返回的處理函數(shù)，參數(shù)position_options是配置項(xiàng)
//定位
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");
}
}
1下載安裝MyEclipse2014，AndroidSDK，eclipse(需配置Android開發(fā)環(huán)境)Java和Android環(huán)境安裝與配置，將另寫經(jīng)驗(yàn)分享，讀者也可百度參考其他相關(guān)資料，自行安裝2打開MyEclipse2014，新建一個(gè)HTML5MobileApplicationProject，
您好，我是一名站長。可以嘗試使用應(yīng)用公園來在線制作手機(jī)APP1.這個(gè)網(wǎng)站無需編程和代碼，小白用戶也能在線開發(fā)app；2.功能很多，只要不是很復(fù)雜的APP，一般夠用；3.有多種主題模板可以直接套用，省時(shí)省力；4.有免費(fèi)版、付費(fèi)版，即使是付費(fèi)版比APP定制公司便宜。5.可制作出安卓Android、IOS版手機(jī)APP6.同城生活、電商、旅游、美食、社區(qū)、教育、新聞等多類型APP。希望可以幫到您！
依據(jù)Gartner的研究，Android是全球最受歡迎的移動(dòng)操作系統(tǒng)，是它支持著大多數(shù)智能手機(jī)；而依據(jù)Canalys的調(diào)研，現(xiàn)在在平板電腦領(lǐng)域享有多數(shù)市場(chǎng)份額（53%）。讓Android有如此熱度的一部分因素是其多樣性。幾乎每個(gè)用戶都有一個(gè)的Android設(shè)備的尺寸和形狀，想要一個(gè)13英寸帶可拆卸鍵盤的平板電腦？Android同樣滿足你。
當(dāng)如此多樣的設(shè)備讓用戶歡喜時(shí)，它也為開發(fā)人員帶來了不少頭疼的麻煩。屏幕尺寸、分辨率、CPU架構(gòu)和操作系統(tǒng)版本等，都會(huì)為開發(fā)人員創(chuàng)建原生Android app帶來挑戰(zhàn)。幸運(yùn)的是，HTML5使得處理這龐大而多樣的Android設(shè)備隊(duì)伍變得快速而簡單。
“服務(wù)員，我的凍酸奶里面有果凍豆”
Android初次廣泛登臺(tái)是在2009年。制造商發(fā)布設(shè)備，一般只對(duì)操作系統(tǒng)更新一兩次，就放棄它開始關(guān)注新硬件了。因此，根據(jù)OpenSignal對(duì)超過五十萬臺(tái)Android設(shè)備中，名為Gingerbread（姜餅2.3 x）的版本依然占據(jù)著最大市場(chǎng)份額（34.1%）。
Android SDK是操作系統(tǒng)特定的，這為Android開發(fā)人員營造了挑戰(zhàn)。也就是說，如果你用4.0 SDK（冰淇淋三明治）開發(fā)app，你的app將不能在2.3（姜餅）上運(yùn)行。這無疑讓開發(fā)人員置身于一個(gè)尷尬境地。一方面，你要用最新最好的SDK，另一方面，你要app得到盡可能多的下載。
有了HTML5，你不用再糾結(jié)于選擇。你可以用強(qiáng)大的它來構(gòu)建你的app，無視Android操作系統(tǒng)版本。
龐大的Android設(shè)備隊(duì)伍
在Android設(shè)備運(yùn)行的不同不僅僅是表面上的，任何Android設(shè)備的心臟部分都是CPU由Qualcomm、PowerVR、NVidia、MediaTek、Intel等制造。取決于你的app需要用到哪個(gè)操作系統(tǒng)的特性，原生Android SDK可能不會(huì)兼容什么特別設(shè)備。
HTML5提供APIs來做很多通常被認(rèn)為是原生操作系統(tǒng)功能的事情。HTML5包含對(duì)于鍵/值存儲(chǔ)、文件系統(tǒng)IO甚至通過地理定位訪問GPS的強(qiáng)大APIs。
要訪問原生操作系統(tǒng)功能，沒有標(biāo)準(zhǔn)的HTL5界面。 Apache Cordova framework提供一個(gè)界面讓你的app在任何設(shè)備上訪問原生操作系統(tǒng)資源，諸如攝像機(jī)和加速計(jì)。
各種形狀和大小
Android設(shè)備有著各種尺寸，小至三星的新齒輪智能手表，大至13英寸或更大的平板電腦。更添其復(fù)雜性的是分辨率范圍從240×320跨到2560×1600。
要解決這個(gè)問題，你可能得用線形布局或網(wǎng)格視圖。這類布局能良好運(yùn)行，如果你想要依據(jù)用戶需求滾動(dòng)到視圖中查看app。
好在HTML5提供一個(gè)更好的途徑來處理尺寸大小的問題——用響應(yīng)設(shè)計(jì)。響應(yīng)設(shè)計(jì)是由CSS Media Queries所增強(qiáng)的簡單結(jié)構(gòu)的HTML在更大的屏幕利用更多的空間，在更小的屏幕上縮小或消除那些并不重要的元素。
當(dāng)響應(yīng)設(shè)計(jì)正確完成時(shí)，用戶就對(duì)跨平臺(tái)的app有了流暢的體驗(yàn)，即便是重新調(diào)整屏幕，這是在任何操作系統(tǒng)上解決屏幕尺寸/分辨率問題的最好辦法。
移植到其它平臺(tái)
Java的愿景是“write once, run any where（只寫一次，哪兒都能跑）”。不幸，出于種種原因，不能實(shí)現(xiàn)這個(gè)夢(mèng)。一些交互編譯器可以允許創(chuàng)建針對(duì)Android和iOS的app，但只有HTML5能在移動(dòng)操作系統(tǒng)和互聯(lián)網(wǎng)瀏覽器上運(yùn)行。
在諸如Android、iOS、Windows Phone等移動(dòng)操作系統(tǒng)上，HTML5應(yīng)用通常托管于Apache Cordova （aka PhoneGap）內(nèi)，Apache Cordova充當(dāng)將你的HTML5聯(lián)系到原生操作系統(tǒng)的角色，這包括定義你的app圖標(biāo)、加載屏幕和提供JavaScript來訪問原生操作系統(tǒng)硬件。
HTML5支持跨平臺(tái)，當(dāng)然，還支持網(wǎng)頁。你第一次用HTML5取代.ASPX或PHP來開啟一個(gè)新項(xiàng)目將需要十足的信仰之外，還要你的app在沒有服務(wù)器端生成HTML的情況下工作。
開啟你的瀏覽器
HTML5應(yīng)用的性能可以無限接近于原生性能，如果它們是被精心無誤地制作處理的。
HTML5應(yīng)用絕對(duì)需要被安裝到設(shè)備上。通過將Apache Cordova或嵌入的WebView指向一個(gè)托管于互聯(lián)網(wǎng)的網(wǎng)頁來構(gòu)建的app只能提供可憐的用戶體驗(yàn)。如果你的app每次都需要用戶通過點(diǎn)擊一些東西來下載用戶界面，這是不可能滿足他們“即時(shí)響應(yīng)”的期望的。為獲得接近于原生的速度，你所有的HTML5、JavaScript和CSS都必須安裝在本地設(shè)備上，從而使它能夠在用戶點(diǎn)擊后就運(yùn)行。
大多數(shù)移動(dòng)app從互聯(lián)網(wǎng)服務(wù)器上加載和保存數(shù)據(jù)。為了保持你的app以最快的速度響應(yīng)，你將要在本地存儲(chǔ)一個(gè)緩存數(shù)據(jù)并異步刷新你的數(shù)據(jù)。這將允許你的app在異步更新時(shí)，立即渲染其UI。
HTML的復(fù)雜性使得關(guān)于渲染你的用戶界面需要多少CPU cycles有了很大不同，最好是保持你的HTML盡可能地結(jié)構(gòu)簡單化，帶有盡可能少的嵌套級(jí)別標(biāo)簽。舉個(gè)例子說，深度嵌套的HTML表格，是出了名地衰！
結(jié)論
HTML5允許你寫一次應(yīng)用程序并快速部署它到幾乎現(xiàn)有的每個(gè)操作系統(tǒng)。它即時(shí)響應(yīng)的能力很適合現(xiàn)在數(shù)不勝數(shù)的安卓設(shè)備屏幕尺寸。憑借大量可用的工具，諸如 Intel XDK new IDE，你可以在Android使用HTML開放式架構(gòu)、CSS和JavaScript上提供一種美妙的體驗(yàn)。
重慶分公司
重慶分公司
