天天看點
傳回

Android 開發HTML5應用-總結（不跳轉到系統浏覽器） Android開發HTML5應用-總結（在自己aap 裡面通路，不跳轉到系統浏覽器）

Android開發HTML5應用-總結（在自己aap 裡面通路，不跳轉到系統浏覽器）

時間 2013-01-30 12:02:00   部落格園-原創精華區 原文   http://www.cnblogs.com/GhostHorse/archive/2013/01/30/Android_HTML5_WebView.html 主題  Html5  安卓開發

在做這個總結之前呢看過一些優秀文章和文檔，在此時間過于久遠原因，引用了原作者大段的摘抄而沒有寫明出處

在Android上做HTML5應用用到了 Webkit 這個浏覽器核心，這裡具體不讨論Webkit for Android。

HTML5如何在安卓上開發HTML5應用

Android開發HTML5應用實際項目面臨的問題1：

Android的HTML5應用程式概述 如何适配多分辨率的Android裝置？

如何在Android中建構HTML5應用程式？

如何在Android中調試HTML5應用程式？

如何在Android中使用HTML5的本地儲存？

如何在Android中使用HTML5的本地資料庫？

如何在Android中使用HTML5的地理定位？

如何在Android中建構HTML5離線應用？

如何使用Canvas進行繪圖？

上述問題這裡提供一個 ppt 和參考代碼

package com.example.androidwebview;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;

import android.view.KeyEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;

import android.webkit.GeolocationPermissions;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebStorage;
import android.webkit.WebView;
import android.webkit.WebSettings.RenderPriority;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {

    private WebView mWebView;

    private WebViewClient mWebViewClient = new WebViewClient() {
        // 處理頁面導航
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            mWebView.loadUrl(url);
            // 記得消耗掉這個事件。給不知道的朋友再解釋一下，
            // Android中傳回True的意思就是到此為止吧,事件就會不會冒泡傳遞了，我們稱之為消耗掉
            return true;
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }
    };

    // 浏覽網頁曆史記錄
    // goBack()和goForward()
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

    private WebChromeClient mChromeClient = new WebChromeClient() {

        private View myView = null;
        private CustomViewCallback myCallback = null;

        // 配置權限 （在WebChromeClinet中實作）
        @Override
        public void onGeolocationPermissionsShowPrompt(String origin,
                GeolocationPermissions.Callback callback) {
            callback.invoke(origin, true, false);
            super.onGeolocationPermissionsShowPrompt(origin, callback);
        }

        // 擴充資料庫的容量（在WebChromeClinet中實作）
        @Override
        public void onExceededDatabaseQuota(String url,
                String databaseIdentifier, long currentQuota,
                long estimatedSize, long totalUsedQuota,
                WebStorage.QuotaUpdater quotaUpdater) {

            quotaUpdater.updateQuota(estimatedSize * 2);
        }

        // 擴充緩存的容量
        @Override
        public void onReachedMaxAppCacheSize(long spaceNeeded,
                long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {

            quotaUpdater.updateQuota(spaceNeeded * 2);
        }

        // Android 使WebView支援HTML5 Video（全屏）播放的方法
        @Override
        public void onShowCustomView(View view, CustomViewCallback callback) {
            if (myCallback != null) {
                myCallback.onCustomViewHidden();
                myCallback = null;
                return;
            }

            ViewGroup parent = (ViewGroup) mWebView.getParent();
            parent.removeView(mWebView);
            parent.addView(view);
            myView = view;
            myCallback = callback;
            mChromeClient = this;
        }

        @Override
        public void onHideCustomView() {
            if (myView != null) {
                if (myCallback != null) {
                    myCallback.onCustomViewHidden();
                    myCallback = null;
                }

                ViewGroup parent = (ViewGroup) myView.getParent();
                parent.removeView(myView);
                parent.addView(mWebView);
                myView = null;
            }
        }
    };

    @SuppressLint("SetJavaScriptEnabled")
    @SuppressWarnings("deprecation")
    private void initSettings() {

        requestWindowFeature(Window.FEATURE_NO_TITLE); //設定标題欄樣式
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); //全屏
        
        setContentView(R.layout.activity_main);
        mWebView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = mWebView.getSettings();
        // 開啟Javascript腳本
        webSettings.setJavaScriptEnabled(true);

        // 啟用localStorage 和 essionStorage
        webSettings.setDomStorageEnabled(true);

        // 開啟應用程式緩存
        webSettings.setAppCacheEnabled(true);
        String appCacheDir = this.getApplicationContext()
                .getDir("cache", Context.MODE_PRIVATE).getPath();
        webSettings.setAppCachePath(appCacheDir);
        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
        webSettings.setAppCacheMaxSize(1024 * 1024 * 10);// 設定緩沖大小，我設的是10M
        webSettings.setAllowFileAccess(true);

        // 啟用Webdatabase資料庫
        webSettings.setDatabaseEnabled(true);
        String databaseDir = this.getApplicationContext()
                .getDir("database", Context.MODE_PRIVATE).getPath();
        webSettings.setDatabasePath(databaseDir);// 設定資料庫路徑

        // 啟用地理定位
        webSettings.setGeolocationEnabled(true);
        // 設定定位的資料庫路徑
        webSettings.setGeolocationDatabasePath(databaseDir);

        // 開啟插件（對flash的支援）
        webSettings.setPluginsEnabled(true);
        webSettings.setRenderPriority(RenderPriority.HIGH);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        mWebView.setWebChromeClient(mChromeClient);
        mWebView.setWebViewClient(mWebViewClient);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        this.initSettings();

        mWebView.loadUrl("http://192.168.1.14/Heaven");
    }
}

上述代碼僅作參考，因為有些應用不用開啟地理定位什麼的，就可不用開啟（這不是廢話嗎？呵呵）

Android開發HTML5應用實際項目面臨的問題2：

1.支援視訊流的播放， 如果要求更具體點就是通過IPC直接或間接的在平闆上或手機上呈現監控攝像，包括斷線重連、支援分屏 、固定螢幕橫豎屏、硬體加速和大小螢幕的切換（手機屏太小可以再智能電視上或大一點螢幕的PC機上顯示，手機當遙控器用）。

2.目前Android上不支援HTML5部分特性 WebSockets、WebWorkers。

3.Android上js執行效率慢；比iphone、ipad慢很多，需要長時間等待。 使用者體驗度無線趨近于0，有木有。

4.Webview不支援多點觸摸

支援視訊流的播放

大緻主流做法是：

1.有一台高吞吐量的流媒體伺服器可以将視訊流或視訊檔案轉碼以适應各種用戶端播放視訊流

2.就android而言需要做到 斷線重連、支援分屏、固定螢幕橫豎屏、硬體加速、大小螢幕的切換等。

流媒體伺服器現在主流是linux做伺服器，C++編寫服務端

android平闆針對特殊的功能也會用到JNI調用郵件、截屏、錄像等 Webkit是提供了js代碼與android的java代碼互相調用的接口 是以這些可以通過js調用java可以通過JNI調用C++寫特殊的功能代碼。

這裡就請大家參考其他文章。如果有機會會補充這塊内容。

Android上不支援HTML5部分特性 WebSockets、WebWorkers

1.HTML5應用程式開發的硬傷呀！WebWorkers基本沒轍，隻改成單線程的了。

Android 開發HTML5應用-總結（不跳轉到系統浏覽器） Android開發HTML5應用-總結（在自己aap 裡面通路，不跳轉到系統浏覽器）
Android 開發HTML5應用-總結（不跳轉到系統浏覽器） Android開發HTML5應用-總結（在自己aap 裡面通路，不跳轉到系統浏覽器）
Android 開發HTML5應用-總結（不跳轉到系統浏覽器） Android開發HTML5應用-總結（在自己aap 裡面通路，不跳轉到系統浏覽器）

2.WebSockets這個有個很好的通訊架構 socket.io  這個有 socket.io(用戶端js)  +   socketio-netty （socket.io伺服器端JAVA實作）

當然原本 socket.io  是Node.js中的一套架構輕量級支援通訊多種協定 使用方面,不得不推薦一下。

這裡就請大家參考其他文章。如果有機會會補充這塊内容。

Android上js執行效率慢

硬傷！精簡代碼，寫一些輕量級的應用，期待android越做越好 也可以寫一些重型火炮型的HTML5應用

像這樣的

Android 開發HTML5應用-總結（不跳轉到系統浏覽器） Android開發HTML5應用-總結（在自己aap 裡面通路，不跳轉到系統浏覽器）
加載渲染超過一分鐘 

Webview不支援多點觸摸

hammer.js 可以模拟多點觸摸 但是支援不是太好，不過能用。

當然在 Android開發HTML5應用實際項目面臨的問題 還有很多 比如一個很簡單的問題使用者縮放頁面禁用 Canvas重畫頻率過高 圖形型渲染不出來，SVG的記憶體占用過大等問題，都要給出一個解決方案。 

這裡就大緻總結這麼多了。希望有你的好的做法介紹一下 也可以吐槽 如果關于我的，會輕微回擊。

有好的做法請一定留言 請不吝賜教。您的熱心的一句話，就可以幫到我很多。

-------------------------華麗的分割線 -.----------------------------------------------------------------

 mWebView.setWebViewClient(mWebViewClient);

 private WebViewClient mWebViewClient = new WebViewClient() {

    // 處理頁面導航

    @Override

    public boolean shouldOverrideUrlLoading(WebView view, String url) {

    mWebView.loadUrl(url);

    // 記得消耗掉這個事件。給不知道的朋友再解釋一下，

    // Android中傳回True的意思就是到此為止吧,事件就會不會冒泡傳遞了，我們稱之為消耗掉

    return true;

    }

    };

Android 開發Html5 Android 開發HTML5應用-總結
上一篇: .NET中小數，浮點數和雙精度之間的差別？
下一篇: python decimal 轉換為float_在Python中将float轉換為decimal類型