Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> android產品研發（十八）--) webview問題集錦

android產品研發（十八）--) webview問題集錦

編輯：關於Android編程

上一篇文章中我們介紹了hybrid開發相關的知識。重點介紹了hybrid開發的概念，hybrid開發的作用，android中如何實現hybrid開發，android中實現hybrid開發的例子，以及產品開發中hybrid開發實踐等，通過對以上這些概念的介紹我們對hybrid開發應該已經有了大概的了解

本文中我們將介紹一下android中webview在使用過程中會遇到的一些問題。這些問題主要是webview在使用過程中我已經趟過的坑，希望通過這篇文章的介紹能夠幫助大家更好的使用webview。

下面是本文主要介紹的一些知識點，後續使用過程中可能會有更新。

webview的性能優化

webview注入cookie信息

webview退出activity異常

webview中native與js交互

webview下載文件

騰訊X5浏覽服務

最近App中相當一部分的頁面內容使用的是webview。而使用webview加載頁面一個需要注意的地方就是性能，所以最近也研究了一下webview的性能優化問題。

webview的性能問題

在講解webview的性能問題之前，我們先來了解一下android webview的緩存機制。

Android WebView緩存機制

WebView中存在著兩種緩存：網頁數據緩存（網頁數據，url等）、H5緩存（H5代碼緩存數據）

不同的緩存數據會保存在不同的文件目錄下，這裡引用一下其他blog的說法：

當我們加載Html時候，會在我們data/應用package下生成database與cache兩個文件夾:
我們請求的Url記錄是保存在webviewCache.db裡，而url的內容是保存在webviewCache文件夾下。
這裡寫圖片描述

webview中也是可以設置緩存是否可用的，一般是通過WebSettings對象設置，下面我們就來看一下WebSettings對象的使用。

android中webview組件有幾個重要的方法 
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setAllowFileAccess(false);
webSettings.setUseWideViewPort(false);
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
webSettings.setDatabaseEnabled(false);
webSettings.setAppCacheEnabled(false);
webSettings.setBlockNetworkImage(true);
// 設置WebView的Client
mWebView.setWebViewClient(new MWebViewClient(this));
// 設置可現實js的alert彈窗
mWebView.setWebChromeClient(new WebChromeClient());

可以看到我們可以使用WebSettings對象設置緩存是否可用，緩存DB是否可用等。我們需要首先確保這裡設置了緩存可用，才可以繼續設置使用何種緩存策略。

下面我們來看一下webview的五種緩存模式：
LOAD_CACHE_ONLY: 不使用網絡，只讀取本地緩存數據
LOAD_DEFAULT: 根據cache-control決定是否從網絡上取數據。
LOAD_CACHE_NORMAL: API level 17中已經廢棄, 從API level 11開始作用同LOAD_DEFAULT模式
LOAD_NO_CACHE: 不使用緩存，只從網絡獲取數據.
LOAD_CACHE_ELSE_NETWORK，只要本地有，無論是否過期，或者no-cache，都使用緩存中的數據。

幾種緩存方式的實現

（1）使用LOAD_CACHE_ELSE_NETWORK緩存模式，這樣需要在APP退出的時候清除webview緩存，但是這樣做有一個弊端就是如果當前App已經是打開狀態，網頁內容有更新的話不會看到；

（2）使用LOAD_DEFAULT這種緩存方式，數據從緩存中獲取還是從網絡中獲取根據H5頁面的參數判斷，這樣做的好處是可以動態的處理更新內容；

設置緩存 
mWebView.getSettings().setJavaScriptEnabled(true); 
     mWebView.getSettings().setRenderPriority(RenderPriority.HIGH);  mWebView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);  //設置 緩存模式 
        // 開啟 DOM storage API 功能 
        mWebView.getSettings().setDomStorageEnabled(true); 
        //開啟 database storage API 功能 
        mWebView.getSettings().setDatabaseEnabled(true);  
        String cacheDirPath = getFilesDir().getAbsolutePath()+APP_CACAHE_DIRNAME; 
//      String cacheDirPath = getCacheDir().getAbsolutePath()+Constant.APP_DB_DIRNAME; 
        Log.i(TAG, "cacheDirPath="+cacheDirPath); 
        //設置數據庫緩存路徑 
        mWebView.getSettings().setDatabasePath(cacheDirPath); 
        //設置  Application Caches 緩存目錄 
        mWebView.getSettings().setAppCachePath(cacheDirPath); 
        //開啟 Application Caches 功能 
        mWebView.getSettings().setAppCacheEnabled(true);
退出App時清除緩存 
//清理Webview緩存數據庫 
        try { 
            deleteDatabase("webview.db");  
            deleteDatabase("webviewCache.db"); 
        } catch (Exception e) { 
            e.printStackTrace(); 
        } 

        //WebView 緩存文件 
        File appCacheDir = new File(getFilesDir().getAbsolutePath()+APP_CACAHE_DIRNAME); 
        Log.e(TAG, "appCacheDir path="+appCacheDir.getAbsolutePath()); 

        File webviewCacheDir = new File(getCacheDir().getAbsolutePath()+"/webviewCache"); 
        Log.e(TAG, "webviewCacheDir path="+webviewCacheDir.getAbsolutePath()); 

        //刪除webview 緩存目錄 
        if(webviewCacheDir.exists()){ 
            deleteFile(webviewCacheDir); 
        } 
        //刪除webview 緩存 緩存目錄 
        if(appCacheDir.exists()){ 
            deleteFile(appCacheDir); 
        }
其他的緩存策略

網頁在加載的時候暫時不加載圖片，當所有的HTML標簽加載完成時在加載圖片具體的做法如下初始化webview的時候設置不加載圖片

webSettings.setBlockNetworkImage(true);

然後在html標簽加載完成之後在加載圖片內容:

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

O(∩_∩)O哈哈~，這樣做的好處就是可以給人的感覺網頁加載速度很快…

將網頁內容中需要的js，css引用文件保存在App本地

加載網頁內容時，在加載完成html後替換頁面內容引用的地址改為本地的資源文件地址，這樣可以直接加載本地的資源文件加快資源的訪問速度，目前主流的新聞客戶端訪問webview時多采用這種方式。

好吧，講解完了webview的性能優化問題之後我們在講解一下如何在H5頁面種入Cookie信息。

H5頁面種入Cookie問題

app中存在webview控件，既可以通過Native與js代碼交互的方式實現信息的交互也可以通過cookie的方式與實現Native與H5端的交互，查詢的好多資料各種各樣的實現方式都有，最終不斷嘗試基本實現了需求，現說明一下最終的實現方式；

/**
     * 客戶端將cookie種入H5頁面中，H5頁面可以通過js代碼實現對native種入cookie信息的讀取操作
     */
    public static void synCookies(Context context, String url, String cookie) {
        CookieSyncManager.createInstance(context);
        CookieManager cookieManager = CookieManager.getInstance();
        cookieManager.setAcceptCookie(true);

        Uri uri = null;
        String domain = "";
        try {
            uri = Uri.parse(URLDecoder.decode(url, "utf-8"));
            domain = uri.getHost();
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        String cookieStr = cookieManager.getCookie(url);
        // 判斷token是否發生變化，發生變化的話則更新cookie
        L.i("cookieEquce:" + cookie.equals(H5Constant.TOKEN + "="));
        if (!TextUtils.isEmpty(cookieStr) && cookieStr.contains(cookie) && !cookie.equals(H5Constant.TOKEN + "=")) {
            return;
        }
        // 更新domain(不再從UserInfo中獲取，更改為從UrlInfo中獲取)
        if (!TextUtils.isEmpty(URLConfig.getUrlInfo().getB4Domain())) {
            domain = URLConfig.getUrlInfo().getB4Domain();
        }
        List uaList = SysConfig.getSystemUa(context);
        String md = ";domain=" + domain;
        // 添加經緯度信息到Cookie中
        cookieManager.setCookie(url, "lat=" + Config.lat + md);
        cookieManager.setCookie(url, "lng=" + Config.lng + md);
        cookieManager.setCookie(url, cookie + ";" + md);
        if (uaList != null && uaList.size() > 0) {
            for (String coo : uaList) {
                cookieManager.setCookie(url, coo + md);
            }
        }

        CookieSyncManager.getInstance().sync();
    }

其中CookieManager是cookie的管理對象，主要實現對網頁cookie的注入與清除等工作。注入字符串的形式是：key=value;domain=url的形式（其中url為需要注入cookie的url鏈接地址）

那麼如何移除cookie呢？

/**
     * 移除cookie
     */
    public static void removeCookies(Context context) {
        CookieSyncManager.createInstance(context);
        CookieManager cookieManager = CookieManager.getInstance();
        cookieManager.removeSessionCookie();

        CookieSyncManager.getInstance().sync();
    }

一般情況下都是在打開H5頁面的時候種入Cookie信息，然後在離開H5頁面的時候清除cookie信息。當然了通過cookie實現native與js的交互只是實現信息交互的一種方式，我們還可以通過js與java代碼相互調用的方式實現相互交互，文章的後面會有介紹。

而下面我們再來講解一下activity退出時webview報錯的問題。

Activity退出時webview報錯的問題

前段時間在調試代碼的時候，有一段關於webview的代碼，即退出Fragment的時候清除webview，這時候在其他手機上是沒有問題的，但是在三星Grand2中報錯，而其報錯信息是：

java.lang.Throwable: Error: WebView.destroy() called while still attached!
at android.webkit.WebViewClassic.destroy(WebViewClassic.java:4173)
at android.webkit.WebView.destroy(WebView.java:707)
at com.youyou.uuelectric.renter.UI.web.H5Fragment.onDestroyView(H5Fragment.java:202)
at android.support.v4.app.Fragment.performDestroyView(Fragment.java:2167)
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1141)
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1248)
at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1230)
at android.support.v4.app.FragmentManagerImpl.dispatchDestroy(FragmentManager.java:2079)
at android.support.v4.app.FragmentController.dispatchDestroy(FragmentController.java:235)
 at android.support.v4.app.FragmentActivity.onDestroy(FragmentActivity.java:326)
at android.support.v7.app.AppCompatActivity.onDestroy(AppCompatActivity.java:161)
at com.youyou.uuelectric.renter.UI.base.BaseActivity.onDestroy(BaseActivity.java:136)
at android.app.Activity.performDestroy(Activity.java:5543)
at android.app.Instrumentation.callActivityOnDestroy(Instrumentation.java:1134)
at android.app.ActivityThread.performDestroyActivity(ActivityThread.java:3637)
at android.app.ActivityThread.handleDestroyActivity(ActivityThread.java:3672)
at android.app.ActivityThread.access$1300(ActivityThread.java:168)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1382)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:176)
at android.app.ActivityThread.main(ActivityThread.java:5493)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:525)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1225)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1041)
at dalvik.system.NativeStart.main(Native Method)

程序也沒有異常退出之類的動作，清除webview的代碼是這樣寫的：

@Override
    public void onDestroyView() {
        super.onDestroyView();
        mWebView.removeAllViews();
        mWebView.destroy();
    }

這個錯誤大概的意思是：當你結束webview的時候，webview還依附在其父控件之下，應當在調用webview.destory()方法之前接觸他們之間的依附關系，那麼既然錯誤提示信息已經很明顯了，我們就根據錯誤信息嘗試著首先執行webview父控件的清除工作，然後在執行webview控件的清除操作，所以代碼中應該這樣實現：

@Override
    public void onDestroyView() {
        super.onDestroyView();
        swipeRefreshLayout.removeView(mWebView);
        mWebView.removeAllViews();
        mWebView.destroy();
    }

這樣經過修改之後特定機型上關於webview的錯誤就不在了。

webview中實現Native與js相互調用

上面我們介紹的通過cookie實現android native與H5的信息交互只是一種方式，我們也可以通過java代碼與js代碼直接相互調用的方式實現android native與H5信息的相互，這裡簡單的介紹一下使用方式

native代碼調用H5的js代碼

（1）在H5頁面中添加一個js函數

<script type="text/javascript">
function uu_click(clicked_id) {
    alert(clicked_id);
}

（2）在Native中通過java代碼調用
若這時候H5頁面已經被加載到webview中,則可以通過java代碼直接調用js函數：

h5Fragment.mWebView.loadUrl("javascript：uu_click" + "('" + clickId + "')");

是的，沒錯就是這麼簡單，這樣就實現了java代碼對js代碼的調用，但是需要指出的是這裡無法調用含有返回值的js函數，這裡也算是小小的問題吧，但是話說回來，一般也沒有這種需要調用js代碼並獲得返回值的場景吧。

js代碼調用java函數

（1）首先在java端編寫能夠被js代碼調用的java函數

native方法的實現 
/**
 * 自定義實現的native函數，可被js代碼調用
 */
class JsInteration {
    ...
    @JavascriptInterface
        public void toastMessage(String message) {
            Toast.makeText(getActivity(), message, Toast.LENGTH_LONG).show();
        }
    ...
}

（2）在native中注入本地方法，供js調用；

mWebView.addJavascriptInterface(new JsInteration(), "control");

（3）在js代碼中調用java代碼：

function reply_click(clicked_id {
    window.control.toastMessage(clicked_id)
}

以上就是webview中使用js代碼與java代碼相互調用的簡單例子。

webview下載文件

在使用webview開發中還遇到一個問題，app中webview中存在下載鏈接，但是在手機浏覽器中點擊下載是沒有問題的，在webview中怎麼都不好使。查詢了好久，原來是因為WebView默認沒有開啟文件下載的功能，如果要實現文件下載的功能，需要設置WebView的DownloadListener，通過實現自己的DownloadListener來實現文件的下載。

設置webview的setDownloadListener方法 
mWebView.setDownloadListener(new DownloadListener() {
            @Override
            public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {
                L.i("tag", "this is a message!!!");
            }
        });
重寫onDownloadStart回調方法，實現下載文件的邏輯

比如在浏覽器中實現下載：

@Override  
        public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype,  
                                    long contentLength) {  
            Uri uri = Uri.parse(url);  
            Intent intent = new Intent(Intent.ACTION_VIEW, uri);  
            startActivity(intent);  
        }

這樣我們的webview中如果包含了下載鏈接就可以通過打開浏覽器的方式實現下載了。

注：個人感覺webview沒有默認實現下載鏈接的功能更多的可能是考慮權限，安全方面的問題。

騰訊X5浏覽服務

由於不同的手機版本問題，各個廠商的定制化操作，webview在不同的手機上表現有很大的不同，所以webview的適配工作在android機上顯得比較重要，這裡我們就簡單的介紹一下騰訊的X5浏覽服務，其相當於android上webview的第三方框架。

這裡先暫時看一下騰訊X5服務的官方介紹，其官網是：騰訊浏覽服務，然後我們看一下X5浏覽服務官網對其的描述。

騰訊浏覽服務由QQ浏覽器團隊出品，致力於優化移動端webview體驗的整套解決方案，使用QQ浏覽器X5內核SDK和X5雲端服務，解決移動端webview使用過程中出現的一切問題，優化用戶的浏覽體驗，同時騰訊還將持續提供後續的更新和優化，為開發者提供最新最優秀的功能和服務。

X5SDK是通過調用微信/手機QQ/空間的X5內核，解決系統webview兼容性差、加載速度慢、功能缺陷等問題，開發接入便捷，大小只有253K，僅需幾行代碼，即可解決一切令開發者們頭疼的問題，為用戶提供最優秀的浏覽體驗。
同時，QQ浏覽器團隊還將持續更新和優化X5內核，持續優化功能，並保證兼容各種web新特性。

騰訊X5浏覽服務的優勢：

1) 速度快：相比系統webView的網頁加載速度有近30%的提升。
2) 省流量：雲端優化技術使流量節省20%
3) 更安全：24小時安全問題解決機制
4) 更穩定：經過億級用戶的使用考驗，CRASH率0.15%
5) 集成強大的視頻播放器，支持各種視頻格式直接打開
6) 適屏排版、字體設置等浏覽增強功能的提供
7) Html5更完整支持。
8) 無系統內核的碎片化問題，更少的兼容性問題

那麼現在那些App具體接入了X5服務了呢？
這裡寫圖片描述

可以發現已經有不少的牛擦的App接入了X5服務（當然主要是騰訊系的，原因你懂的），其相對於原生的webview的最大優勢是做了各種型號手機的適配工作，而且其也添加了不少有特色的小功能，對於使用webview開發App的同學而言，可以考慮一下集成X5服務哈。

總結：<喎?/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPjwvcD4NCg0KDQo8cD53ZWJ2aWV3tcTT0NK7tqi1xNDUxNzOyszio6y/ydLUyejWw7K7zay1xLu6tOay38LUzOG433dlYnZpZXe1xLzT1NjL2cLKPC9wPg0KPHA+d2Vidmlld9PrbmF0aXZlv8nS1M2ouf1jb29raWW1xLe9yr3Ktc/W0MXPor27u6U8L3A+DQo8cD53ZWJ2aWV3z8LU2M7EvP6jrNDo0qrW2NC019S8urXEbmF0aXZltcREb3dubG9hZExpc3RlbmVywOCjrNLUvLDG5LvYtfe3vbeoPC9wPg0KPHA+yrXP1k5hdGl2ZdPrSDW2y9DFz6K1xL27u6W8yL/J0tTKudPDY29va2lltcS3vcq90rK/ydLUzai5/WphdmG0+sLr0+tqc7T6wuvKtc/WPC9wPg0KPHA+1K3J+rXEd2Vidmlld9TasrvNrMrWu/rJz7/JxNy05tTasrvNrLXEse3P1qOsvajS6b/J0tTKudPDzNrRtrXEWDXkr8DAt/7O8cbBsc61xLK7zazK1rv6tcSy7rHwo6zM7bzTwcuyu8nZzNjJq7XE0KG5psTcPC9wPg0KDQoNCjxwPjxzdHJvbmc+sb7OxNLUzayyvdbBZ2l0aHVi1tCjujxhICBkYXRhLWNrZS1zYXZlZC1ocmVmPQ=="https://github.com/yipianfengye/androidProject" href="https://github.com/yipianfengye/androidProject">https://github.com/yipianfengye/androidProject，歡迎star和follow

</script>
  1. 上一頁:
  2. 下一頁:
關於Android編程
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
Android中的各種保活1 Android開發學習之路--RxAndroid之簡單原理 Android仿QQ6.0主頁面側滑效果 Android的基本世界觀——系統簡介，組件邏輯及其他 android 分辨率適配的方法 android的對話框
OpenCV實現圖片銳化

效果圖源碼KqwOpenCVBlurDemo銳化也可以看作是一種線性濾波
Android - 五子連珠

繪制棋盤面板：MainActivity.javapackage com.
Android自定義下拉刷新上拉加載

本文實例為大家分享了Android自定義下拉刷新上拉加載的具體實現步驟，
Android shape和selector 結合使用實例代碼

shape和selector是Android UI設計中經常用到的，比如
閱讀排行版
Copyright © Android教程網 All Rights Reserved