h5android
㈠ 如何將h5程序打包成android應用
H5開發的web APP和原生APP的區別有以下幾個方面: 一、開發方面 原生App ⊙ 每一種移動操作系統都需要獨立的開發項目 ⊙ 每種平台都需要獨立的開發語言。java(Android), Objective-C(iOS)以及VisualC++(Windows Mobile)等等 ⊙ 需要使用各自的軟體開發包,開發工具以及各自的控制項 移動Web App ⊙ 因為運行在移動設備的瀏覽器上,所以只需要一個開發項目 ⊙ 這種應用可以使用HTML5,CSS3以及JavaScript以及伺服器端語言來完成(PHP,Ruby on Rails,Python) ⊙ 這里可沒有標準的SDK,基本任意選擇別忘了有一些跨平台的開發工具,比如PhoneGap, Sencha Touch 2,APPcan以及Appcelerator Titanium等等。 二、能力方面 原生App ⊙ 能夠與移動硬體設備的底層功能,比如個人信息,攝像頭以及重力加速器等等 移動Web App ⊙ 只能使用有限的移動硬體設備功能。 三、獲取方法 原生App ⊙ 直接下載到設備 ⊙ 以獨立的應用程序運行(並不需要瀏覽器) ⊙ 用戶必須手動去下載並安裝這些原生App ⊙ 有一些商店與賣場來幫助用戶尋找你的App,目前app市場不計其數 移動Web App ⊙ 從移動設備上的瀏覽器訪問 ⊙ 不需要安裝額外的軟體 ⊙ 軟體更新只需要伺服器就夠了 ⊙ 因為現在沒有什麼商品或賣場提供這種App,所以如何搜索這些移動Web App相當不簡單。 四、版本控制 原生App ⊙ 用戶可以自由地選擇是否更新軟體版本,所以會出現不同用戶同時使用不同版本的情況 移動Web App ⊙ 所有的用戶都是用同樣的版本 五、優勢 原生App ⊙ 比移動Web App運行快 ⊙ 一些商店與賣場會幫助用戶尋找原生App ⊙ 官方賣場的應用審核流程會保證讓用戶得到高質量以及安全的App ⊙ 官方會發布很多開發工具或者人工支持來幫助你的開發 移動Web App ⊙ 跨平台開發 ⊙ 用戶不需要去賣場來下載安裝App ⊙ 任何時候都可以發布App,因為根本不需要官方賣場的審核 ⊙ 如果你已經有了一個Web App,你可以使用 responsive web design來輔助改進 六、缺陷 原生App ⊙ 開發成本高,尤其是當需要多種移動設備來測試時 ⊙ 因為是不同的開發語言,所以開發,維護成本也高 ⊙ 因為用戶使用的App版本不同,所以你維護起來很困難 ⊙ 官方賣場審核流程復雜且慢,會嚴重影響你的發布進程 移動Web App ⊙ 無法使用很多移動硬體設備的獨特功能 ⊙ 要同時支持多種移動設備的瀏覽器讓開發維護的成本也不低 ⊙ 如果用戶使用更多的新型瀏覽器,那問題就更不好處理了 ⊙ 對於用戶來說,這種App很難被用戶發現 附:原生App 與 移動Web App:您如何選擇? 所以在你准備做移動App時,你應該先問問自己以下幾個問題: 1. 你的應用是否需要使用某些設備的特殊功能,比如攝像頭,攝像頭閃光燈或者重力加速器 2. 你的開發預算是多少? 3. 你的應用是否一定需要網路 4. 你的應用的目標硬體設備是所有的移動設備還是僅僅只是一部分而已 5. 你自己已經熟悉的開發語言 6. 這個應用對於性能要求是否苛刻 7. 如何靠這個應用贏利
㈡ h5怎麼打開android app
如果你是自己開發的app嵌套的webview打開的h5,h5和app交互一下,通過自己的app打開其他的app很簡單,但是你要是從UC瀏覽器訪問個自己的h5,再點擊某個按鈕打開手機上的app是做不到的。
㈢ android h5什麼意思
html5,其實就是在android上用網頁代替原生技術開發
㈣ android嵌入h5,怎麼交互
Android和H5之間的交互
hybrid App開發也不是什麼新鮮事了,其中native和h5之間的交互則是必不可少的。Android中是如何和H5交互的?
1、webView載入頁面
我們都知道在Android中是通過webView來載入html頁面的,根據HTML文件所在的位置不同寫法也不同:
//例如:載入assets文件夾下的test.html頁面
mWebView.loadUrl("file:///android_asset/test.html")
//例如:載入網頁
mWebView.loadUrl("http://www..com")
如果只是這樣調用mWebView.loadUrl()載入的話,那麼當你點擊頁面中的鏈接時,頁面將會在你手機默認的瀏覽器上打開。那如果想要頁面在App內中打開的話,那麼就得設置setWebViewClient:
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
mWebView.loadUrl(url);
return true;
}
}
});
2、Android本地通過Java調用HTML頁面中的JavaScript方法
想要調用js方法那麼就必須讓webView支持
WebSettings webSettings = mWebView.getSettings();
//設置為可調用js方法
webSettings.setJavaScriptEnabled(true);
若調用的js方法沒有返回值,則直接可以調用mWebView.loadUrl("JavaScript:do()");其中do是js中的方法;若有返回值時我們可以調用mWebView.evaluateJavascript()方法:
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.e(TAG, "onReceiveValue value=" + value);
}
});
js代碼如下:
<script type="text/javascript">
function sum(a,b){
return a+b;
}
function do(){
document.getElementById("p").innerHTML="hello world";
}
</script>
2、js調用Android本地Java方法
在Android4.2以上可以直接使用@JavascriptInterface註解來聲明,下面是在一個本地Java方法
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
定義完這個方法後再調用mWebView.addJavascriptInterface()方法:
mWebView.addJavascriptInterface(new JsInteration(), "android");
那麼在js中怎麼來調用呢?
<script type="text/javascript">
function s(){
//調用Java的back()方法
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
</script>
4、攔截HTML頁面中的點擊事件
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//判斷url攔截事件
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this,Main2Activity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});
以上就是Java調用js方法以及js調用Java方法的實現交互方式中的一種。下面給出完整代碼:
mainActivity
public class MainActivity extends AppCompatActivity {
public static final String TAG = "MainActivity";
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webView);
mWebView.loadUrl("file:///android_asset/test.html");
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JsInteration(), "android");
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this,Main2Activity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});
}
//Android調用有返回值js方法
@TargetApi(Build.VERSION_CODES.KITKAT)
public void onClick(View v) {
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.e(TAG, "onReceiveValue value=" + value);
}
});
}
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
}
test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function sum(a,b){
return a+b;
}
function s(){
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
</script>
</head>
<body>
<button onclick="s()">調用本地方法</button>
<a href="file:///android_asset/test2.html">點擊</a>
<p id="p"></p>
</body>
</html>
㈤ androd H5混合開發 當無網路下,android怎麼載入H5界面
H5開發安卓界面需要注意以下三點:(上)包括Android設備多解析度的問題,Android中構建HTML5應用程序基礎(中)包括Android與JS之間的互動,Android處理JS的警告對話框等,Android中的調試(下)包括本地儲存在Android中的應用,地理位置的應用,離線應用的構建進入正題●Android設備多解析度的問題Android瀏覽器默認預覽模式瀏覽會縮小頁面WebView中則會以原始大小顯示Android瀏覽器和WebView默認為mdpi。hdpi相當於mdpi的1.5倍ldpi相當於0.75倍三種解決方式:1viewport屬性2CSS控制3JS控制1viewport屬性放在HTML的中html代碼:Exmaplemeta中viewport的屬性如下:2CSS控制設備密度為每種密度創建獨立的樣式表(注意其中的webkit-device-pixel-ratio3個數值對應3種解析度)html代碼:3JS控制Android瀏覽器和WebView支持查詢當前設別密度的DOM特性window.devicePixelRatio同樣值有3個(0.75,1,1.5對應3種解析度)JS中查詢設備密度的方法js代碼:if(window.devicePixelRatio==1.5){alert("Thisisahigh-densityscreen");}elseif(window.devicePixelRation==0.75){alert("Thisisalow-densityscreen");}Android中構建HTML5應用使用WebView控制項與其他控制項的使用方法相同在layout中使用一個標簽WebView不包括導航欄,地址欄等完整瀏覽器功能,只用於顯示一個網頁。
㈥ h5怎樣調用android的api
1)首先在桌面找到並點擊進入【設置】,找到並點擊進入【高級設置】。
2)在【高級設置】中找到並點擊進入【家長控制】,然後就進入家長控制介紹界面。
3)按照說明設置後,點擊【開始使用】。
4)跳轉到【用戶協議】,閱讀完成後點擊【同意】,進入【設置家長密碼】輸入賬戶和密碼點擊【下一步】。
5)開啟【家長控制】後找到並點擊進入【受限應用設置】中開啟受限應用。
㈦ 移動端h5開發 分ios和android么
h5開發開發的應用是純html寫的,不需要分ios 還是android, 但是最終需要ios或者android來打包成不同平台的應用程序包, 通常不同的h5框架都有不同的打包方式或者打包平台.
㈧ android為什麼要用h5做界面
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不包括導航欄,地址欄等完整瀏覽器功能,只用於顯示一個網頁。