導航:首頁 > 操作系統 > html5android教程

html5android教程

發布時間:2023-07-19 16:22:15

㈠ 如何利用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代碼:

<span style="font-size: x-small;"> <head>
<title>Exmaple</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種解析度)
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不包括導航欄,地址欄等完整瀏覽器功能,只用於顯示一個網頁。

㈡ 如何利用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"/>

㈢ 怎麼在安卓app中嵌套html5網頁

HTML5嵌入到APP中方法:
1、android webview控制項載入html5;
2、即webview基於webkit內核支持html5;
3、進行做自定義屏幕適應調試和測試!

㈣ 如何使html5網頁游戲封裝成app後在安卓手機上全屏

打包成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程序拷至剛剛在eclipse新建hello工程對應assets目錄下面

Step3、下面要做的就是如何將我們的HTML5程序在Android應用中啟動,這里我們要使用Android系統自帶的WebView控制項(具體信息參考Adroid開發文檔)---在工程下找到res->layout->activity_main.xml並打開,向裡面插入WebView控制項,編輯好自己想要的樣式

8
Step4、在主程序入口,用剛剛編輯好的WebView控制項將HTML5程序引入,此時,主體功能已實現,編譯工程即可得到apk

㈤ html5怎麼與android交互

Android中構建HTML5應用
使用WebView控制項,與其他控制項的使用方法相同在layout中使用一個標簽,WebView不包括導航欄,地址欄等完整瀏覽器功能,只用於顯示一個html.
在WebView中載入Web頁面:
(1)注意在manifest文件中加入訪問互聯網的許可權:
<</SPAN>uses-permission android:name="android.permission.INTERNET" />
在Android中點擊一個鏈接,默認是調用應用程序來啟動,因此WebView需要代為處理這個動作通過WebViewClient。
(2)在布局文件中(main.xml),添加標簽WebView的id
[html] view plainprint?
<</SPAN>WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
(2)在onCreate()中使用loadUrl(...)載入html。
[java] view plainprint?
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

WebView mWebView = (WebView)findViewById(R.id.webview);
// mWebView.getSettings().setJavaScriptEnabled(true);
// mWebView.setWebChromeClient(new WebChromeClient());
mWebView.loadUrl("file:///android_asset/www/NewFile.html");
}
(3)實現android與js交互
默認情況下WebView中的js是禁用的,通過將WebSettings附加到WebView中啟動js,可以用getSettings()檢索WebSettings,然後用setJavaScriptEnabled()啟動js。
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebChromeClient(new WebChromeClient());
(4)在JS中調用Android的函數方法
把本類的一個實例添加到js的全局對象window中,這里是"injs"。
mWebView.addJavascriptInterface(new JavaScriptInterface(),"injs");
實現JavaScriptInterface()類,這里在該類中定義一個方法public void runOnAndroidJavaScript(final String str){...}
在js中調用java函數
windows.injs.runOnAndroidJavaScript(str);//調用android的函數

閱讀全文

與html5android教程相關的資料

熱點內容
租個伺服器開個私服需要什麼 瀏覽:270
圖片換成pdf格式 瀏覽:659
javamidi編程 瀏覽:831
android60demo 瀏覽:65
頭條演算法怎麼復習 瀏覽:512
燈光控制通道可以編程設置嗎 瀏覽:781
webpack命令行 瀏覽:805
卸載雲伺服器操作系統 瀏覽:29
java文件移動文件夾 瀏覽:449
針織公斤足稱演算法 瀏覽:457
電腦下載的圖片從文件夾重新編組 瀏覽:645
安卓源碼編譯引導失敗 瀏覽:676
蘋果怎麼添加自定義app文件夾 瀏覽:930
橙牛app怎麼找客服 瀏覽:307
php對象魔術方法 瀏覽:487
OBV能量潮幅圖指標源碼 瀏覽:915
編程15個好習慣 瀏覽:676
電腦u盤文件夾顯示屏幕保護程序 瀏覽:803
我的世界伺服器版本怎麼下載 瀏覽:600
c代碼加密工具 瀏覽:359