Android WebView使用深入淺出

標籤：

目前很多android app都內建了可以顯示web頁面的介面，會發現這個介面一般都是由一個叫做WebView的組件渲染出來的，學習該組件可以為你的app開發提升擴充性。

先說下WebView的一些優點：

• 可以直接顯示和渲染web頁面，直接顯示網頁
• webview可以直接用html檔案（網路上或本地assets中）作布局
• 和JavaScript互動調用

一、基本使用

首先layout中即為一個基本的簡單控制項：

 

<WebView        android:id="@+id/webView1"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_marginTop="10dp" />

同時，因為要房訪問網路，所以manifest中必須要加uses-permission：

 

<uses-permission android:name="android.permission.INTERNET"/>

在activity中即可獲得webview的引用，同時load一個網址：

 

webview = (WebView) findViewById(R.id.webView1);webview.loadUrl("http://www.baidu.com/");//webview.reload();// reload page

這個時候發現一個問題，啟動應用後，自動的開啟了系統內建的瀏覽器，解決這個問題需要為webview設定 WebViewClient，並重寫方法：

 

webview.setWebViewClient(new WebViewClient(){            @Override            public boolean shouldOverrideUrlLoading(WebView view, String url) {                view.loadUrl(url);                return true;            }        });

若自己定義了一個頁面載入進度的progressbar，需要展示給使用者的時候，可以通過如下方式擷取webview內頁面的載入進度：

 

webview.setWebChromeClient(new WebChromeClient(){            @Override            public void onProgressChanged(WebView view, int newProgress) {                //get the newProgress and refresh progress bar            }        });

每個頁面，都有一個標題，比如www.baidu.com這個頁面的title即“百度一下，你就知道”，那麼如何知道當前webview正在載入的頁面的title呢：

 

webview.setWebChromeClient(new WebChromeClient(){            @Override            public void onReceivedTitle(WebView view, String title) {                titleview.setText(title);//a textview            }        });

二、通過webview控制項下載檔案

通常webview渲染的介面中含有可以下載檔案的連結，點擊該連結後，應該開始執行下載的操作並儲存檔案到本地中。webview來下載頁面中的檔案通常有兩種方式：

1. 自己通過一個線程寫java io的代碼來下載和儲存檔案（可控性好）

2. 調用系統download的模組（代碼簡單）

方法一：

首先要寫一個下載並儲存檔案的線程類

 

public class HttpThread extends Thread {  private String mUrl;  public HttpThread(String mUrl) {    this.mUrl = mUrl;  }  @Override  public void run() {    URL url;    try {      url = new URL(mUrl);      HttpURLConnection conn = (HttpURLConnection) url.openConnection();      conn.setDoInput(true);      conn.setDoOutput(true);      InputStream in = conn.getInputStream();      File downloadFile;      File sdFile;      FileOutputStream out = null;      if(Environment.getExternalStorageState().equals(Environment.MEDIA_UNMOUNTED)){        downloadFile = Environment.getExternalStorageDirectory();        sdFile = new File(downloadFile, "test.file");        out = new FileOutputStream(sdFile);      }      //buffer 4k      byte[] buffer = new byte[1024 * 4];      int len = 0;      while((len = in.read(buffer)) != -1){        if(out != null)          out.write(buffer, 0, len);      }      //close resource      if(out != null)        out.close();      if(in != null){        in.close();      }    } catch (IOException e) {      // TODO Auto-generated catch block      e.printStackTrace();    }  }}

隨後要實現一個DownloadListener介面，這個介面實現方法OnDownloadStart()，當使用者點擊一個可以下載的連結時，該回調方法被調用同時傳進來該連結的URL，隨後即可以對該URL塞入HttpThread進行下載操作：

 

//建立DownloadListener (webkit包)class MyDownloadListenter implements DownloadListener{  @Override  public void onDownloadStart(String url, String userAgent,    String contentDisposition, String mimetype, long contentLength) {      System.out.println("url ==== >" + url);      new HttpThread(url).start();  }    }//給webview加入監聽webview.setDownloadListener(new MyDownloadListenter());

方法二：

直接發送一個action_view的intent即可：

 

class MyDownloadListenter implements DownloadListener{        @Override        public void onDownloadStart(String url, String userAgent,      String contentDisposition, String mimetype, long contentLength) {  System.out.println("url ==== >" + url);  //new HttpThread(url).start();    Uri uri = Uri.parse(url);  Intent intent = new Intent(Intent.ACTION_VIEW, uri);  startActivity(intent);        }    }

三、錯誤處理

當我們使用瀏覽器的時候，通常因為載入的頁面的伺服器的各種原因導致各種出錯的情況，最平常的比如404錯誤，通常情況下瀏覽器會提示一個錯誤提示頁面。事實上這個錯誤提示頁面是瀏覽器在載入了本地的一個頁面，用來提示使用者目前已經出錯了。

但是當我們的app裡面使用webview控制項的時候遇到了諸如404這類的錯誤的時候，若也顯示瀏覽器裡面的那種錯誤提示頁面就顯得很醜陋了，那麼這個時候我們的app就需要載入一個本地的錯誤提示頁面，即webview如何載入一個本地的頁面。

1. 首先我們需要些一個html檔案，比如error_handle.html，這個檔案裡面就是當出錯的時候需要展示給使用者看的一個錯誤提示頁面，盡量做的精美一些。然後將該檔案放置到代碼根目錄的assets檔案夾下。

2. 隨後我們需要複寫WebViewClient的onRecievedError方法，該方法傳回了錯誤碼，根據錯誤類型可以進行不同的錯誤分類處理

 

webview.setWebViewClient(new WebViewClient(){             @Override      public void onReceivedError(WebView view, int errorCode,        String description, String failingUrl) {    switch(errorCode)    {    case HttpStatus.SC_NOT_FOUND:        view.loadUrl("file:///android_assets/error_handle.html");        break;    }      }  });

其實，當出錯的時候，我們可以選擇隱藏掉webview，而顯示native的錯誤處理控制項，這個時候只需要在onReceivedError裡面顯示出錯誤處理的native控制項同時隱藏掉webview即可。

四、webview同步cookies

cookies是伺服器用來儲存每個客戶的常用資訊的，下次客戶進入一個諸如登陸的頁面時伺服器會檢測cookie資訊，如果通過則直接進入登陸後的頁面。

在webview中，如果之前已經登陸過了，那麼下次再進入同樣的登陸介面時，若需要再次登陸的話，一定會很惱人，所以這裡提供一個webview同步cookies的方法。

1.首先，我們假設某個網站的登陸介面需要提供兩個參數，一個是name，一個是pwd，那麼要是對這個頁面進行登陸，那麼必須給與這兩個資訊。我們假設伺服器已經註冊了name為jason，pwd為123456這個帳號。

2.下面，寫一個Thread用來將name和pwd自動的登入，在伺服器返回的response中獲得cookie資訊，稍後對這個cookie進行儲存，這裡先給出這個Thread的代碼：

 

public class HttpCookie extends Thread {  private Handler mHandler;  public HttpCookie(Handler mHandler) {    this.mHandler = mHandler;  }  @Override  public void run() {    HttpClient client = new DefaultHttpClient();    HttpPost post = new HttpPost("");//this place should add the login address        List<NameValuePair> list = new ArrayList<NameValuePair>();    list.add(new BasicNameValuePair("name", "jason"));    list.add(new BasicNameValuePair("pwd", "123456"));    try {      post.setEntity(new UrlEncodedFormEntity(list));      HttpResponse reponse = client.execute(post);      if(reponse.getStatusLine().getStatusCode() == HttpStatus.SC_OK){        AbstractHttpClient absClient = (AbstractHttpClient) client;        List<Cookie> cookies = absClient.getCookieStore().getCookies();        for(Cookie cookie:cookies){          if(cookie != null){            //TODO            //this place would get the cookies          }        }      }    } catch (UnsupportedEncodingException e) {      // TODO Auto-generated catch block      e.printStackTrace();    } catch (ClientProtocolException e) {      // TODO Auto-generated catch block      e.printStackTrace();    } catch (IOException e) {      // TODO Auto-generated catch block      e.printStackTrace();    }  }}

由於這是一個子線程，所以需要在主線程中建立並執行。

同時，因為其實子線程，那麼裡面必須含有一個handler的元素，用來當成功擷取cookie後通知主線程進行同步和儲存。初始化這個子線程的時候需要將主線程上的handler給傳過來，隨後在以上代碼的TODO中發送訊息，讓主線程記錄cookie，發送的這個訊息需要將cookie資訊包含進去：

 

if(cookie != null){  //TODO  //this place would get the cookies  Message msg = new Message();  msg.obj = cookie;  if(mHandler != null){    mHandler.sendMessage(msg);    return;  }}

隨後在主線程中（webview載入登陸介面前），在handler中將會擷取到cookie資訊，下面將對該cookie進行儲存和同步：

 

private Handler mHandler = new Handler(){    public void handleMessage(android.os.Message msg)     {      CookieSyncManager.createInstance(MainActivity.this);      CookieManager cookieMgr = CookieManager.getInstance();      cookieMgr.setAcceptCookie(true);      cookieMgr.setCookie("", msg.obj.toString());// this place should add the login host address(not the login index address)      CookieSyncManager.getInstance().sync();      webview.loadUrl("");// login index address    };  };

這個時候發現webview載入的login index頁面中可以自動的登陸了並顯示登陸後的介面。

五、 WebView與JavaScript的互動

1. webview調用js

 

mWebView.loadUrl("javascript:do()");

以上是webview在調用js中的一個叫做do的方法，該js所在的html檔案大致如下：

 

<html>  <script language="javascript">    /* This function is invoked by the webview*/    function do() {      alert("1");    }  </script>  <body>    <a><div style="width:80px;      margin:0px auto;      padding:10px;      text-align:center;      border:2px solid #111111;" >        <img id="droid" src="xx.png"/><br>        Click me!    </div></a>  </body></html>

2. js調用webview

我們假設下列的本地類是要給js調用的：

 

package com.test.webview;class DemoJavaScriptInterface {  DemoJavaScriptInterface() {  }  /**   * This is not called on the UI thread. Post a runnable to invoke   * loadUrl on the UI thread.   */  public void clickOnAndroid() {      mHandler.post(new Runnable() {    public void run() {        //TODO    }      });  }    }

首先給webview設定：

 

mWebview.setJavaScriptEnabled(true);

隨後將本地的類（被js調用的）映射出去：

 

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

“demo”這個名字就是公布出去給JS調用的，那麼js久可以直接用下列代碼調用本地的DemoJavaScriptInterface類中的方法了：

 

<body>      ...</body>

六、WebView與JavaScript相互調用混淆問題

若webview中的js調用了本地的方法，正常情況下發布的debug包js調用的時候是沒有問題的，但是通常發布商業版本的apk都是要經過混淆的步驟，這個時候會發現之前調用正常的js卻無法正常調用本地方法了。

這是因為混淆的時候已經把本地的代碼的引用給打亂了，導致js中的代碼找不到本地的方法的地址。

解決這個問題很簡單，即在proguard.cfg檔案中加上一些代碼，聲明本地中被js調用的代碼不被混淆。下面舉例說明：

第五節中被js調用的那個類DemoJavaScriptInterface的包名為com.test.webview，那麼就要在proguard.cfg檔案中加入：

 

-keep public class com.test.webview.DemoJavaScriptInterface{    public <methods>;}

若是內部類，則大致寫成如下形式：

 

-keep public class com.test.webview.DemoJavaScriptInterface$InnerClass{    public <methods>;}

若android版本比較新，可能還需要添加上下列代碼：

 

-keepattributes *Annotation*  -keepattributes *JavascriptInterface*

來自：http://www.cnblogs.com/soaringEveryday/p/4495221.html

Android WebView使用深入淺出