Android and HTML5 开发手机应用

最新推荐文章于 2024-04-26 09:14:08 发布

ladeng

最新推荐文章于 2024-04-26 09:14:08 发布

阅读量1.4k

点赞数

分类专栏： Android 文章标签： android html5 手机 string javascript dialog

Android 专栏收录该内容

110 篇文章 0 订阅

订阅专栏

一、离线应用缓存 HTML 5 Offline Application Cache

在服务器上添加MIME TYPE支:text/cache-manifest
如果在Apache下添加：

1 AddType text/cache-manifest manifest

如果为Nginx，在添加：

1 text/cache-manifest manifest;

或者通过动态程序生成：

1 header('Content-type: text/cache-manifest; charset=UTF-8');

创建 NAME.manifest:
新建清单文件 manifest

01 CACHE MANIFEST

02 # This is a comment.

03 # Cache manifest version 0.0.1

04 # If you change the version number in this comment,

05 # the cache manifest is no longer byte-for-byte

06 # identical.

07

08 /app/static/default/js/models/prototype.js

09 /app/static/default/js/controllers/init.js

10

11 NETWORK:

12 # All URLs that start with the following lines

13 # are whitelisted.

14

15 http://a.com/

16

17 CACHE:

18 # Additional items to cache.

19 /app/static/default/images/main/bg.png

20

21 FALLBACK:

22 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 xmlns:android="http://schemas.android.com/apk/res/android"package="com.xinze.joke" android:versioncode="1"android:versionname="1.0">
 
    <application android:icon="@drawable/icon"android:label="@string/app_name">
 
        <activity android:name=".Joke"android:label="@string/app_name"android:configchanges="orientation|keyboardHidden|navigation"android:theme="@android:style/Theme.NoTitleBar">
 
            <intent -filter="">
 
                <action android:name="android.intent.action.MAIN">
 
                <categoryandroid:name="android.intent.category.LAUNCHER">
 
            </category></action></intent>
 
        </activity>
 
    </application>
 
    <uses -permission="" android:name="android.permission.INTERNET">
 
</uses></manifest>

注意：

 
     1 <uses -permission="" android:name="android.permission.INTERNET"></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 {
 
 
 
    /** Called when the activity is first created. */
 
    @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, newAlertDialog.OnClickListener() {
 
                    @Override
 
                    public void onClick(DialogInterface dialog, intwhich) {
 
                        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, newAlertDialog.OnClickListener() {
 
 
 
                    @Override
 
                    public void onClick(DialogInterface dialog, intwhich) {
 
                        result.confirm();
 
                    }
 
 
 
                });
 
                builder.setNeutralButton(android.R.string.cancel, newAlertDialog.OnClickListener() {
 
 
 
                    @Override
 
                    public void onClick(DialogInterface dialog, intwhich) {
 
                        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, longestimatedSize, 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！

ladeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Android and HTML5 开发手机应用

一、离线应用缓存 HTML 5 Offline Application Cache在服务器上添加MIME TYPE支:text/cache-manifest如果在Apache下添加：1AddType text
复制链接

扫一扫