標籤：android style http ar io os 使用 sp for
作為一個WEB開發人員，HTML5讓我興奮，因為它可以將傳統型應用程式功能帶入瀏覽器中。但在國內，看著到處橫行的IE8版本以下的瀏覽器，覺得到能大規模使用HTML5技術的那天，還遙遙無期。但面對iOS及Android等平台的手機使用者越來越多，基於Webkit核心的行動瀏覽器一定能讓HTML5先大規模應用起來。這將對對移動 Web 應用程式開發具有重大影響。
作為非常看好未來行動電話通訊的我，也在一直研究Android平台的應用的開發，也許是因為自己更熟悉HTML及CSS、JS，並受到之前使用HTML和VC開發程式的影響，我也更願意使用HTML來做Android程式的UI….
09年，在開發《華夏風雲》遊戲的時候，使用了基於Google Gear外掛程式來做了很多離線應用，可惜Gear已經不在更新開發，被HTML5取代。下面介紹基於HTML 5 的Web 應用程式的本機存放區，不再廢話，例子說明一切。
一、離線應用緩衝 HTML 5 Offline Application Cache
•在伺服器上添加MIME TYPE支:text/cache-manifest
如果在Apache下添加：
AddType text/cache-manifest manifest
如果為Nginx，在添加：
text/cache-manifest manifest;
或者通過動態程式產生：
1
header(‘Content-type: text/cache-manifest; charset=UTF-8‘);
•建立 NAME.manifest:
建立資訊清單檔 manifest
CACHE MANIFEST
# This is a comment.
# Cache manifest version 0.0.1
# If you change the version number in this comment,
# the cache manifest is no longer byte-for-byte
# identical.
/app/static/default/js/models/prototype.js
/app/static/default/js/controllers/init.js
NETWORK:
# All URLs that start with the following lines
# are whitelisted.
http://a.com/
CACHE:
# Additional items to cache.
/app/static/default/images/main/bg.png
FALLBACK:
demoimages/ images/
•給 <html> 標籤加 manifest 屬性：
建立manifest檔案之後，需要在HTML文檔中聲明：
聲明資訊清單檔 manifest
<!doctype html>
<html manifest="notebook.manifest">
<head>
<meta charset="UTF-8" />
<meta name = "viewport" content = "width = device-width, user-scalable = no">
<title>NoteBook</title>
</head>
<body>
</body>
</html>
二、Key-Value Storage
三、Using the JavaScript Database
四、Android下使用WebView來做基於HTML5的App
見如下AndroidManifest.xml
< ?xml version="1.0" encoding="utf-8"?>
<manifest android:versionName="1.0" android:versionCode="1" package="com.xinze.joke" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:label="@string/app_name" android:icon="@drawable/icon">
<activity android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar" android:configChanges="orientation|keyboardHidden|navigation" android:name=".Joke">
<intent -filter="">
<action android:name="android.intent.action.MAIN">
<category android:name="android.intent.category.LAUNCHER">
</category></action></intent>
</activity>
</application>
<uses android:name="android.permission.INTERNET" -permission="">
</uses></manifest>
注意：
<uses android:name="android.permission.INTERNET" -permission=""></uses>
， 允許網路應用，必須！！
Android主程式碼：
package com.xinze.joke;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.AlertDialog.Builder;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.WebStorage ;
public class Joke extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
final WebView wv = new WebView(this);
// 覆蓋預設後退按鈕的作用，替換成WebView裡的查看曆史頁面
wv.setOnKeyListener(new View.OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (event.getAction() == KeyEvent.ACTION_DOWN) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && wv.canGoBack()) {
wv.goBack();
return true;
}
}
return false;
}
});
// 設定支援Javascript
wv.getSettings().setJavaScriptEnabled(true);
wv.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
wv.getSettings().setDatabaseEnabled(true);
wv.getSettings().setDatabasePath("/data/data/com.xinze.joke/databases");
// 建立WebViewClient對象
WebViewClient wvc = new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
wv.loadUrl(url);
// 記得消耗掉這個事件。給不知道的朋友再解釋一下，Android中返回True的意思就是到此為止吧,事件就會不會冒泡傳遞了，我們稱之為消耗掉
return true;
}
};
// 設定WebViewClient對象
wv.setWebViewClient(wvc);
// 建立WebViewChromeClient
WebChromeClient wvcc = new WebChromeClient() {
// 處理Alert事件
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
// 構建一個Builder來顯示網頁中的alert對話方塊
Builder builder = new Builder(Joke.this);
builder.setTitle("笑死不償命");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
builder.setCancelable(false);
builder.create();
builder.show();
return true;
}
// 處理Confirm事件
@Override
public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
Builder builder = new Builder(Joke.this);
builder.setTitle("刪除確認");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
builder.setNeutralButton(android.R.string.cancel, new AlertDialog.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.cancel();
}
});
builder.setCancelable(false);
builder.create();
builder.show();
return true;
}
// 處理提示事件
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue,
JsPromptResult result) {
// 看看預設的效果
return super.onJsPrompt(view, url, message, defaultValue, result);
}
@Override
public void onExceededDatabaseQuota(String url, String
databaseIdentifier, long currentQuota, long estimatedSize, long
totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {
quotaUpdater.updateQuota(204801);
}
};
wv.loadUrl("http://192.168.1.14/index.html");
// 設定setWebChromeClient對象
wv.setWebChromeClient(wvcc);
setContentView(wv);
}
}
使用 JavaScript Database 的時候，需要特別注意：setDatabaseEnabled 以及 onExceededDatabaseQuota！
結伴旅遊,一個免費的交友網站：www.jieberu.com
推推族，免費得門票，遊景區：www.tuituizu.com
Android and HTML5 開發手機應用(轉載）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
