html5開發androidapp_如何利用html5開發android界面

A. 如何利用html5開發android界面

H5開發安卓界面需要注意以下三點：
（上）包括Android設備多解析度的問題，Android中構建HTML5應用程序基礎
（中）包括Android與JS之間的互動，Android處理JS的警告對話框等，Android中的調試
（下）包括本地儲存在Android中的應用，地理位置的應用，離線應用的構建
進入正題
● Android設備多解析度的問題
Android瀏覽器默認預覽模式瀏覽會縮小頁面 WebView中則會以原始大小顯示
Android瀏覽器和WebView默認為mdpi。hdpi相當於mdpi的1.5倍 ldpi相當於0.75倍
三種解決方式：1 viewport屬性 2 CSS控制 3 JS控制
1 viewport屬性放在HTML的<meta>中
html代碼：

 <head>
<title>Exmaple</title>
<meta name=」viewport」 content=」width=device-width,user-scalable=no」/>
</head>
meta中viewport的屬性如下：
 <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]
"
/>

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" />
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不包括導航欄，地址欄等完整瀏覽器功能，只用於顯示一個網頁。

B. 怎麼用HTML5開發手機app

可以通過webview方式訪問遠程，也可以把html5頁面放在手機app端，本地方式進行訪問。但都離不開webview。
HTML5現在現成的框架比較多，photogap,jquery mobile,bootstrap等都可以，如果功能簡單，也可以不使用框架，自己寫幾個html5頁面就行了。

C. 如何用html5開發android應用

html5就是做網頁的，用html5做好網頁版的軟體後用PhoneGap 打包成apk，就能在安卓上安裝運行。

D. 怎麼用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代碼
 <head>
<title>Exmaple</title>
<meta name=」viewport」 content=」width=device-width,user-scalable=no」/>
</head>

meta中viewport的屬性如下

Html代碼
 <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]
"
/>

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 {
 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);
}
Java代碼
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

E. 如何將html5程序打包成Android應用

問題分析：

html5網站主要由html+css+js的形式組成，需要使用瀏覽器進行展現。

Android需要使用Java語言來開發，對於前端工程師來說，無疑是增加了很大的難度。

隨後出現了很多打包工具，來協助我們將網頁元素打包成手機app，將我們編寫的html轉化為Java語言。

解決方案：

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

該工具不僅提供了Android應用打包，還可以直接連接手機進行調試，配合HTML5+可以實現很多Android原生的功能。比如：掃碼二維碼，拍照，搖一搖等等。

具體操作步驟：

1、真機調試

②勾選Android復選框，如果使用Dcloud公用證書的話，可以直接進行打包，手機可以安裝使用。如果需要上傳發行到第三方應用平台的話，需要使用自有證書，自用證書可以使用JRE自帶的創建和管理數字證書的工具Keytool來生成自有證書，生成過程是免費的。

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

填寫完畢後，點擊打包，即可生成apk文件。

其他注意事項：

1、在開發過程中，不需要進行打包，應更多的使用真機調試，可以節約很多時間。

2、開發完畢後，盡可能在各種版本的android機器上做一下測試，因為一些網頁的樣式在不同的android版本中呈現的效果略有不同。

3、重新編輯一下html5網站代碼，將一些網頁功能轉換為手機功能，比如網頁元素的<a>標簽跳轉，就應該使用Webview來完成。可以解決頁面切換白屏的問題，還可以提高網站在手機中的運行效率。

F. 如何利用html5開發android界面

使用WebView載入HTML即可。
WebView(網路視圖)能載入顯示網頁，可以將其視為一個瀏覽器。它使用了WebKit渲染引擎載入顯示網頁，實現WebView有以下兩種不同的方法：
第一種方法的步驟：
1.在要Activity中實例化WebView組件：WebView webView = new WebView(this);
2.調用WebView的loadUrl()方法，設置WevView要顯示的網頁：
互聯網用：webView.loadUrl("http://www.google.com");
本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets 文件中
3.調用Activity的setContentView( )方法來顯示網頁視圖
4.用WebView點鏈接看了很多頁以後為了讓WebView支持回退功能，需要覆蓋覆蓋Activity類的onKeyDown()方法，如果不做任何處理，點擊系統回退剪鍵，整個瀏覽器會調用finish()而結束自身，而不是回退到上一頁面
5.需要在AndroidManifest.xml文件中添加許可權，否則會出現Web page not available錯誤。
<uses-permission android:name="android.permission.INTERNET" />

第二種方法的步驟：
1、在布局文件中聲明WebView
2、在Activity中實例化WebView
3、調用WebView的loadUrl( )方法，設置WevView要顯示的網頁
4、為了讓WebView能夠響應超鏈接功能，調用setWebViewClient( )方法，設置 WebView視圖
5、用WebView點鏈接看了很多頁以後為了讓WebView支持回退功能，需要覆蓋覆蓋Activity類的onKeyDown()方法，如果不做任何處理，點擊系統回退剪鍵，整個瀏覽器會調用finish()而結束自身，而不是回退到上一頁面
6、需要在AndroidManifest.xml文件中添加許可權，否則出現Web page not available錯誤。
<uses-permission android:name="android.permission.INTERNET"/>

導航:首頁 > 操作系統 > html5開發androidapp

html5開發androidapp

與html5開發androidapp相關的資料