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 onClick="window.demo.clickOnAndroid()"><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 onload="javascript:demo.clickOnAndroid()">  
    ...
</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*