WebView的使用

Android常用控件WebView，項目中大家並不陌生，接下來介紹下他的簡單使用。

1.基本用法

• 清單文件配置WebView

  1. <WebView
  2. android:id="@+id/wv_news_detail"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent" />

• WebView加載網頁

  1. //加載網頁鏈接
  2. mWebView.loadUrl("http://www.itheima.com");
  3. //加載本地assets目錄下的網頁
  4. mWebView.loadUrl("file:///android_asset/demo.html");

• WebView基本設置

  1. WebSettings settings = mWebView.getSettings();
  2. settings.setBuiltInZoomControls(true);// 顯示縮放按鈕(wap網頁不支持)
  3. settings.setUseWideViewPort(true);// 支持雙擊縮放(wap網頁不支持)
  4. settings.setJavaScriptEnabled(true);// 支持js功能

• 設置WebViewClient

  1. mWebView.setWebViewClient(new WebViewClient() {
  2. // 開始加載網頁
  3. @Override
  4. public void onPageStarted(WebView view, String url, Bitmap favicon) {
  5. super.onPageStarted(view, url, favicon);
  6. System.out.println("開始加載網頁了");
  7. }
  9. // 網頁加載結束
  10. @Override
  11. public void onPageFinished(WebView view, String url) {
  12. super.onPageFinished(view, url);
  13. System.out.println("網頁加載結束");
  14. }
  16. // 所有鏈接跳轉會走此方法
  17. @Override
  18. public boolean shouldOverrideUrlLoading(WebView view, String url) {
  19. System.out.println("跳轉鏈接:" + url);
  20. view.loadUrl(url);// 在跳轉鏈接時強制在當前webview中加載
  22. //此方法還有其他應用場景, 比如寫一個超鏈接<a href="tel:110">聯繫我們</a>, 當點擊該超鏈接時,可以在此方法中獲取鏈接地址tel:110, 解析該地址,獲取電話號碼, 然後跳轉到本地打電話頁面, 而不是加載網頁, 從而實現了webView和本地代碼的交互
  24. return true;
  25. }
  26. });

• 設置WebChromeClient

  1. mWebView.setWebChromeClient(new WebChromeClient() {
  2. @Override
  3. public void onProgressChanged(WebView view, int newProgress) {
  4. super.onProgressChanged(view, newProgress);
  5. // 進度發生變化
  6. System.out.println("進度:" + newProgress);
  7. }
  9. @Override
  10. public void onReceivedTitle(WebView view, String title) {
  11. super.onReceivedTitle(view, title);
  12. // 網頁標題
  13. System.out.println("網頁標題:" + title);
  14. }
  15. });

• WebView加載上一頁和下一頁

  1. mWebView.goBack();//跳到上個頁面
  2. mWebView.goForward();//跳到下個頁面
  3. mWebView.canGoBack();//是否可以跳到上一頁(如果返回false,說明已經是第一頁)
  4. mWebView.canGoForward();//是否可以跳到下一頁(如果返回false,說明已經是最後一頁)

2.WebView高級用法

緩存

• 緩存設置

  1. WebSettings settings = mWebView.getSettings();
  3. //只要本地有，無論是否過期，或者no-cache，都使用緩存中的數據
  4. settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
  5. //只加載緩存
  6. settings.setCacheMode(WebSettings.LOAD_CACHE_ONLY);
  7. //根據cache-control決定是否從網絡上取數據
  8. settings.setCacheMode(WebSettings.LOAD_DEFAULT);
  9. //不加載緩存
  10. settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
  什麼是cache-control?cache-control是在請求網頁時服務器的響應頭,此響應頭用於決定網頁的緩存策略.常見的取值有public(所有內容都將被緩存), private(內容只緩存到私有緩存中),no-cache(所有內容都不會被緩存),max-age=xxx(緩存的內容將在 xxx 秒後失效)等等

  如圖所示:

  
  

• 清理緩存

  最簡便的方式:
  

  1. mWebView.clearCache(true);
  另外一種方式:
  

  1. //刪除緩存文件夾
  2. File file = CacheManager.getCacheFileBaseDir();
  4. if (file != null && file.exists() && file.isDirectory()) {
  5. for (File item : file.listFiles()) {
  6. item.delete();
  7. }
  8. file.delete();
  9. }
  11. //刪除緩存數據庫
  12. context.deleteDatabase("webview.db");
  13. context.deleteDatabase("webviewCache.db");
  
  

3.Cookie

• Cookie設置

  1. CookieSyncManager.createInstance(this);
  2. CookieManager cookieManager = CookieManager.getInstance();
  3. cookieManager.setAcceptCookie(true);
  5. String cookie = "name=xxx;age=18";
  6. cookieManager.setCookie(URL, cookie);
  7. CookieSyncManager.getInstance().sync();

• 獲取Cookie

  1. CookieManager cookieManager = CookieManager.getInstance();
  2. String cookie = cookieManager.getCookie(URL);

• 清除Cookie

  1. CookieSyncManager.createInstance(context);
  2. CookieManager cookieManager = CookieManager.getInstance();
  3. cookieManager.removeAllCookie();
  4. CookieSyncManager.getInstance().sync();

4.Android和Js交互

如果Js和Android實現了交互, 那麼我們就可以在網頁中隨意調用本地的Java代碼, 也就是實現了WebView和本地代碼的交互. 一旦WebView可以操作Android本地代碼, 那麼WebView的功能就會更加強大,以後我們直接在一個WebView中就幾乎可以實現Android的所有功能,Android原生控件就沒有了用武之地.

• Js調用Android

  1. WebSettings settings = mWebView.getSettings();
  2. settings.setJavaScriptEnabled(true);//開啓js
  4. mWebView.loadUrl("file:///android_asset/demo.html");//加載本地網頁
  5. mWebView.setWebChromeClient(new WebChromeClient());//此行代碼可以保證js的alert彈窗正常彈出
  7. //核心方法, 用於處理js被執行後的回調
  8. mWebView.addJavascriptInterface(new JsCallback() {
  10. @JavascriptInterface//注意:此處一定要加該註解,否則在4.1+系統上運行失敗
  11. @Override
  12. public void onJsCallback() {
  13. System.out.println("js調用Android啦");
  14. }
  15. }, "demo");//參1是回調接口的實現;參2是js回調對象的名稱
  17. //定義回調接口
  18. public interface JsCallback {
  19. public void onJsCallback();
  20. }

• Android調用Js

  1. //直接使用webview加載js就可以了
  2. mWebView.loadUrl("javascript:wave()");

• 附上demo.html源碼

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. </head>
  4. <script language="javascript">
  5. /* This function is invoked by the activity */
  6. function wave() {
  7. alert("Android調用Js啦");
  8. }
  9. </script>
  10. <body>
  11. <!-- Js調用Android代碼 -->
  12. <a onClick="window.demo.onJsCallback()"><div style="width:80px;
  13. margin:0px auto;
  14. padding:10px;
  15. text-align:center;
  16. border:2px solid #202020;" >
  17. <img id="droid" src="android_normal.png"/><br>
  18. Click me!
  19. </div></a>
  20. </body>
  
  

  注意: js回調的方法的書寫格式: onClick="window.demo.onJsCallback() 格式是: window.js回調對象的名稱(要和java代碼中設置的一致).回調方法名稱(要和java代碼中設置的一致)

• 注意事項

  Js調用Android的方式具有版本兼容問題. 經測試, 在2.2, 4.0+ 系統上運行穩定, 可以正常調用, 但是在2.3系統上運行時出現崩潰.原因是底層進行JNI調用時，把一個Java中的String對象當數組來訪問了，最終導致虛擬機崩潰. 基本算是一個比較嚴重的BUG，沒辦法解決，所以如果說用WebView組件想在js和java之間相互調用的話就沒辦法適應所有機型.

  參考鏈接: https://code.google.com/p/android/issues/detail?id=12987

  http://www.2cto.com/kf/201108/101375.html

目前一些比較前衛的app就只使用一個WebView作爲整體框架,app中的所有內容全部使用html5進行展示.比如12306手機客戶端.  這樣做的好處就是可以實現跨平臺, 只需要一份h5代碼, 就可以在Android和Ios平臺上同時運行, 而且更新也更加簡便, 只需要更改服務器的h5頁面, 本地客戶端就馬上會同步更新,無需下載apk覆蓋安裝. 不過劣勢也很明顯, h5受網速限制,往往加載速度比較慢, 沒有原生控件流暢, 用戶體驗較差. 所以目前完全使用h5搭建app並沒有成爲主流方式.

5.WebView的應用場景

WebView的應用場景我們無需多講, 此處我只提一點: 隨着html5的普及, 很多app都會內嵌webview來加載html5頁面, 而且h5做的和app原生控件極其相似, 那麼我們如何辨認某個頁面使用h5做的還是用原生控件做的呢

打開開發者選項, 你會看到這樣一個選項:顯示佈局邊界

勾選之後,所有原生控件佈局的邊框都會顯示出來

我們現在在這種狀態下打開一個WebView看一眼(這是微信錢包-滴滴出行的頁面)

如果是WebView的話, 只有在WebView邊緣纔會顯示一個邊框, WebView內部是沒有邊框的;如果是原生控件,怎麼可能邊框這麼少呢? 從而我們可以斷定,微信的滴滴出行頁面一定是用WebView加載網頁實現的, 而不是系統原生控件.