如何將html5程序打包成Android應(yīng)用

問題分析：

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的阜陽(yáng)網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

html5網(wǎng)站主要由html+css+js的形式組成，需要使用瀏覽器進(jìn)行展現(xiàn)。

Android需要使用Java語(yǔ)言來開發(fā)，對(duì)于前端工程師來說，無疑是增加了很大的難度。

隨后出現(xiàn)了很多打包工具，來協(xié)助我們將網(wǎng)頁(yè)元素打包成手機(jī)app，將我們編寫的html轉(zhuǎn)化為Java語(yǔ)言。

解決方案：

推薦一款我們常用的打包工具：HBuilder。

該工具不僅提供了Android應(yīng)用打包，還可以直接連接手機(jī)進(jìn)行調(diào)試，配合HTML5+可以實(shí)現(xiàn)很多Android原生的功能。比如：掃碼二維碼，拍照，搖一搖等等。

具體操作步驟：

1、真機(jī)調(diào)試

進(jìn)入軟件后，第一步點(diǎn)擊“運(yùn)行”，第二步點(diǎn)擊“手機(jī)運(yùn)行”，第三步選擇已連接的手機(jī)，示例中我使用的是安卓模擬機(jī)進(jìn)行連接的。市面上常用的幾款安卓模擬機(jī)器都可以直接連接上。

按如上幾個(gè)步驟操作后，會(huì)自動(dòng)執(zhí)行打包并將應(yīng)用安裝在鏈接的手機(jī)（模擬器）中，可以操作手機(jī)（模擬機(jī)）進(jìn)行測(cè)試。

2、打包生成Android的安裝格式apk文件

① 打開軟件，選擇發(fā)行-發(fā)行為原生安裝包，隨即打開下圖窗口。

② 勾選Android復(fù)選框，如果使用Dcloud公用證書的話，可以直接進(jìn)行打包，手機(jī)可以安裝使用。如果需要上傳發(fā)行到第三方應(yīng)用平臺(tái)的話，需要使用自有證書，自用證書可以使用JRE自帶的創(chuàng)建和管理數(shù)字證書的工具Keytool來生成自有證書，生成過程是免費(fèi)的。

勾選Android選項(xiàng)后，在下方表單中填寫Android包名，為保證唯一性，可以使用自有網(wǎng)站域名的反寫方式加上應(yīng)用名稱。如果使用自有證書的話，還需要填寫證書別名，密鑰密碼，證書文件。

填寫完畢后，點(diǎn)擊打包，即可生成apk文件。

其他注意事項(xiàng)：

1、在開發(fā)過程中，不需要進(jìn)行打包，應(yīng)更多的使用真機(jī)調(diào)試，可以節(jié)約很多時(shí)間。

2、開發(fā)完畢后，盡可能在各種版本的android機(jī)器上做一下測(cè)試，因?yàn)橐恍┚W(wǎng)頁(yè)的樣式在不同的android版本中呈現(xiàn)的效果略有不同。

3、重新編輯一下html5網(wǎng)站代碼，將一些網(wǎng)頁(yè)功能轉(zhuǎn)換為手機(jī)功能，比如網(wǎng)頁(yè)元素的a標(biāo)簽跳轉(zhuǎn)，就應(yīng)該使用Webview來完成。可以解決頁(yè)面切換白屏的問題，還可以提高網(wǎng)站在手機(jī)中的運(yùn)行效率。

如何利用html5開發(fā)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控制設(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可向前向后瀏覽歷史頁(yè)面

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)頁(yè)加載的進(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ù)庫(kù)

webSettings.setDatabaseEnabled(true);

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

//設(shè)置數(shù)據(jù)庫(kù)路徑

webSettings.setDatabasePath(dir);

//使用localStorage則必須打開

webSettings.setDomStorageEnabled(true);

//擴(kuò)充數(shù)據(jù)庫(kù)的容量（在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ù)庫(kù)操作

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ù)庫(kù)路徑

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");

}

}

如何將HTML5程序打包成Android應(yīng)用

工具/原料

MyEclipse2014

Android SDK

eclipse

java開發(fā)環(huán)境

方法/步驟

下載安裝MyEclipse2014，Android SDK，eclipse(需配置Android開發(fā)環(huán)境)

Java和Android環(huán)境安裝與配置，將另寫經(jīng)驗(yàn)分享，讀者也可百度參考其他相關(guān)資料，自行安裝

打開MyEclipse2014，新建一個(gè)HTML5 Mobile Application Project，命名，例如：hello

html5程序在工程www目錄下編輯；

編輯好我們的html5程序，下面就要開始學(xué)習(xí)打包了

這里介紹兩種打包方式：1、PhoneGap Build Service 打包

PhoneGap官網(wǎng)有相關(guān)教程可參考，不具體介紹

2、android SDK +eclispe 打包

android SDK +eclispe 打包(前提已配置好，android開發(fā)環(huán)境)：

Step1、啟動(dòng)eclipse，新建Android Application Project，即Android工程，命名，例如：hello

Step2、將前面Myeclipse2014中編輯好的HTML5程序(www整個(gè)目錄）拷至剛剛在eclipse新建hello工程對(duì)應(yīng)assets目錄下面

Step3、下面要做的就是如何將我們的HTML5程序在Android應(yīng)用中啟動(dòng)，這里我們要使用Android系統(tǒng)自帶的WebView控件（具體信息參考Adroid開發(fā)文檔）---在工程下找到res-layout-activity_main.xml并打開，向里面插入WebView控件，編輯好自己想要的樣式

Step4、在主程序入口，用剛剛編輯好的WebView控件將HTML5程序引入，此時(shí)，主體功能已實(shí)現(xiàn)，編譯工程即可得到apk

怎么用html5開發(fā)android

Android瀏覽器默認(rèn)預(yù)覽模式瀏覽 會(huì)縮小頁(yè)面 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)頁(yè)

在WebView中加載Web頁(yè)面，使用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可向前向后瀏覽歷史頁(yè)面

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);

網(wǎng)站題目：html5開發(fā)android應(yīng)用,安卓嵌入html5代碼
文章源于：http://chinadenli.net/article7/dsepeij.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、App開發(fā)、用戶體驗(yàn)、做網(wǎng)站、網(wǎng)站收錄、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)