WebView的使用及实战

淩亂°似流年 2022-07-15 07:50 207阅读 0赞

这篇博客主要讲解一下问题  
\- webView 的 基本使用  
\- webView怎样配置缓存  
\- webView请求错误时候的处理  
\- webView cookie的同步与清除  
\- webView 下载文件的两种方法  
\- webView的 一些扩展使用

思路图如下

![9fe4afa0gw1f9ktb5obwcj20qb09owha.jpg][]

## 大概的效果图如下 ##

![9fe4afa0gw1f9kt650r0fg208s0eskgo.gif][]

## webView的基本使用 ##

大概可以分为以下步骤  
\- 配置权限  
\- 创建webView  
\- 配置webView（是否支持js，是否由系统浏览器打开）  
\- 加载数据

### 第一步，别忘了 在AndroidMainfest中 添加权限 ###

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

### 第二步，创建webView ###

在xml文件中

<?xml version="1.0" encoding="utf-8"?>
    <layout xmlns:android="http://schemas.android.com/apk/res/android">
    
        <RelativeLayout android:layout_width="match_parent"
                        android:layout_height="match_parent"
        >
    
            <RelativeLayout
                android:id="@+id/rl_head"
                android:layout_width="match_parent"
                android:layout_height="?android:actionBarSize"
                android:background="@color/colorAccent">
    
    
                <ImageView
                    android:id="@+id/iv_back"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:padding="10dp"
                    android:src="@drawable/sel_back"/>
    
                <TextView
                    android:id="@+id/tv_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:ellipsize="end"
                    android:maxLength="200"
                    android:maxLines="1"
                    android:text="标题"/>
            </RelativeLayout>
    
            <ProgressBar
    
                android:id="@+id/progressBar"
                style="@style/Widget.AppCompat.ProgressBar.Horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/rl_head"/>
    
            <WebView android:id="@+id/webView"
                     android:layout_width="match_parent"
                     android:layout_height="match_parent"
                     android:layout_below="@id/progressBar"></WebView>
    
        </RelativeLayout>
    
    
    </layout>

mWebView = bind.webView;

需要注意的是 这里我采用的是 databinding库，这个库可以很方便 地将我们减少findViewById 的代码，同时可以将数据与我们的View 绑定在一起，是Android支持MVVN的一个库，不了解这个库用法的用法的 请自行搜索，这里基本不涉及到这个库的 用法。

### 第三步，配置webView ###

如果想在当前客户端打开浏览器的话，可以给webView 设置 setWebViewClient，并重写 shouldOverrideUrlLoading这个方法

WebSettings settings = mWebView.getSettings();
    // 设置是够支持js脚本
    settings.setJavaScriptEnabled(true);
    
    
    mWebView.setWebViewClient(new WebViewClient() {
        //重写这个方法 返回true，在当前 webView 打开，否则在浏览器中打开
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            view.loadUrl(mUrl);
            return true;
        }
    
    });

如果想显示加载进度的话，可以给webView 设置setWebChromeClient，并重写onProgressChanged（）方法，至于onReceivedTitle（）这个方法是拿到网页加载中的 标题

mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                // LUtils.i("newProgress=" + newProgress);
                if (newProgress != 100) {
                    mProgressBar.setProgress(newProgress);
                } else {
                    mProgressBar.setVisibility(View.GONE);
                }
    
            }
    
            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
                mTvTitle.setText(title);
            }
        });
    
    }

想大多数APP的做法一样，如微信，按下返回键，只是想后退，并不是想销毁Activity，我们可以这样做，重写 Activity的 onKeyDown（）方法 ，并监听按下的键，采取 相应的 操作。

public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KEYCODE_BACK) && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

既然有后退操作，当然也有前进操作

//是够能够前进
    mWebView.canGoForward();
    //前进
    mWebView.goForward();

### 第四步 ###

调用该方法开始加载网页

mWebView.loadUrl(mUrl);

到此，webView的基本用法讲解到此。

--------------------

## webView 配置缓存 ##

### 配置 缓存模式 ###

缓存模式主要有一下几种：

*  LOAD\_CACHE\_ELSE\_NETWORK
    
    Use cached resources when they are available, even if they have expired.（如果本地有缓存，优先使用 本地 缓存，即使已经过期了 ）
 *  LOAD\_CACHE\_ONLY
    
    Don’t use the network, load from the cache.（只使用本地 缓存）
 *  LOAD\_DEFAULT
    
    Default cache usage mode.（默认的缓存 模式）
 *  LOAD\_NORMAL
    
    This constant was deprecated in API level 17. This value is obsolete, as from API level HONEYCOMB and onwards it has the same effect as LOAD\_DEFAULT.
 *  LOAD\_NO\_CACHE
    
    Don’t use the cache, load from the network.（不使用 本地缓存 ）

我们可以通过以下方法设置缓存模式

WebSettings settings = mWebView.getSettings();
    settings.setCacheMode(WebSettings.LOAD_DEFAULT);

--------------------

## webView请求错误时候的处理 ##

因为系统自带的 错误页面太丑了，所以我们经常会对其 进行处理，目前本人了解到的主要有两种方法  
\- 加载本地的控件，显示 错误信息  
\- 加载自己 定义的 html页面

### 加载本地的控件 ###

@SuppressWarnings("deprecation")
    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String
            failingUrl) {
        super.onReceivedError(view, errorCode, description, failingUrl);
        if (errorCode == 404) {
            //用javascript隐藏系统定义的404页面信息
            //String data = "Page NO FOUND！";
           // view.loadUrl("javascript:document.body.innerHTML=\"" + data + "\"");
            mWebView.setVisibility(View.INVISIBLE);
            mErrorView.setVisibility(View.VISIBLE);
    
        }
    }

### 加载 定义的 html页面 ###

@SuppressWarnings("deprecation")
    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String
            failingUrl) {
        super.onReceivedError(view, errorCode, description, failingUrl);
        if (errorCode == 404) {
            //用javascript隐藏系统定义的404页面信息
            String data = "Page NO FOUND！";
            view.loadUrl("javascript:document.body.innerHTML=\"" + data + "\"");
        }
    }

当然实际开发中为了给用户比较还要的体验，会做非常多的处理,包括有网络情况和没有网络情况的处理，对于没有网络情况的处理，这里我们跳转到打开WiFi界面，详情可以参照我的 上一篇博客[android 监听网络状态的变化及实战][android],而对于有网络情况的处理，这里我们只处理404错误，其他错误请根据项目的需求自行处理。

@SuppressWarnings("deprecation")
    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String
            failingUrl) {
        super.onReceivedError(view, errorCode, description, failingUrl);
        // 没有网络连接
        if (false == APP.getInstance().isConnected()) {
            APP.getInstance().showWifiDlg(NewsDetailActivity.this);
        } else {
            if (errorCode == 404) {
                //用javascript隐藏系统定义的404页面信息
                String data = "Page NO FOUND！";
                view.loadUrl("javascript:document.body.innerHTML=\"" + data + "\"");
                mWebView.setVisibility(View.INVISIBLE);
            } else {
       //其他状态码错误的处理，这里就不罗列出来了
    
            }
        }
    
    }

--------------------

## webView cookie的同步与清除 ##

关于这个问题，我们主要分为两步，  
\- 怎样获取cookie  
\- 怎样将cookie与webView进行 同步

### 对于怎样获取 cookie，主要有以下方法 ###

下面只给出核心代码

**第一，使用DefaultHttpClient**

DefaultHttpClient client = new DefaultHttpClient();
    CookieStore store = client.getCookieStore();
    List<Cookie> list = store.getCookies();

**第二，使用HttpURLConnection**

URLConnection con= (HttpURLConnection) url.openConnection(); 
    // 取得sessionid. 
    String cookieval = con.getHeaderField("set-cookie"); 
    String sessionid; 
    if(cookieval != null) { 
        sessionid = cookieval.substring(0, cookieval.indexOf(";")); 
    }

发送设置cookie：

URL url = new URL(requrl);
    HttpURLConnectioncon= (HttpURLConnection) url.openConnection(); 
    if(sessionid != null) { 
       con.setRequestProperty("cookie", sessionid); 
    }

**第三，使用Retrofit**

Call<ResponseBody> call = tnGouAPi.getTest(test);
    call.enqueue(new Callback<ResponseBody>() {
        @Override
        public void onResponse(Call<ResponseBody> call, Response<ResponseBody> response) {
            ResponseBody body = response.body();
            Headers headers = response.headers();
            Set<String> names = headers.names();
            for(String  key:names){
                String value = headers.get(key);
            }
    
    
            try {
                Logger.i("onResponse: body=" + body.string());
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    
        @Override
        public void onFailure(Call<ResponseBody> call, Throwable t) {
            Logger.i("onResponse: t=" + t.getMessage());
        }
    });

### cookie 同步 ###

/** * cookie同步 */
    @SuppressWarnings("deprecation")
    private void syncCookieToWebView(String url,List<String> cookies)
    {
        CookieSyncManager.createInstance(this);
        CookieManager cm = CookieManager.getInstance();
        cm.setAcceptCookie(true);
        if(cookies!=null)
        {
            for (String cookie : cookies)
            {
                cm.setCookie(url,cookie);//注意端口号和域名，这种方式可以同步所有cookie，包括sessionid 
            }
        }
    
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) {
            CookieManager.getInstance().flush();
        } else {
            CookieSyncManager.getInstance().sync();
        }
    }

### 清除cookie ###

@SuppressWarnings("deprecation")
    public void clearCookies(Context context) {
        CookieSyncManager.createInstance(context);
        CookieManager cookieManager = CookieManager.getInstance();
    
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            cookieManager.removeAllCookies(null);
        } else {
            cookieManager.removeAllCookie();
        }
    }

### 注意事项 ###

1.  同步cookie要在WebView加载url之前，否则WebView无法获得相应的cookie，也就无法通过验证。
2.  每次登录成功后都需要调用”syncCookie”方法将cookie同步到WebView中，同时也达到了更新WebView的cookie。如果登录后没有及时将cookie同步到WebView可能导致WebView拿的是旧的session id和服务器进行通信。

--------------------

## webView 下载文件的两种方法 ##

总共 有两种 方法，  
\- 第一种，自己实现实现逻辑 ，下载，保存到相应目录；  
\- 第二种，调用系统的下载方法

### 核心代码如下 ###

主要是给webView设置DownloadListener监听器

mWebView.setDownloadListener(new DownloadListener() {
                @Override
                public void onDownloadStart(String url, String userAgent, String contentDisposition,
                                            String mimetype, long contentLength) {
    
                    //第一种下载方式是 自定义的http工具类
    // new HttpDownloadThread(url,contentDisposition,mimetype,contentLength).start();
                    //第二种下载方式是调用系统的webView,具有默认的进度条
                    Intent intent = new Intent(Intent.ACTION_VIEW);
                    intent.setData(Uri.parse(url));
                    startActivity(intent);
                }
            });

HttpDownloadThread

public class HttpDownloadThread extends Thread { 
    
    
        private String mUrl;
        private String mContentDisposition;
        private String mMimetype;
        private long mContentLength;
    
        public HttpDownloadThread(String url, String contentDisposition, String mimetype, long contentLength) {
            this.mUrl = url;
            this.mContentDisposition=contentDisposition;
            this.mContentDisposition=mimetype;
            this.mContentDisposition=contentDisposition;
    
        }
    
        @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();
            }
        }
    
    }

--------------------

## webView的 一些扩展使用 ##

// 设置是否支持画面缩放
    settings.setBuiltInZoomControls(true);
    
    settings.setSupportZoom(true);
    // 设置是否显示缩放器
    settings.setDisplayZoomControls(false);
    // 设置字体的大小
    settings.setTextZoom(120);

关于webView 与js互相调用的，可以 参考这一篇文章[webview与javascript交互回调与异步][webview_javascript]

--------------------

## 题外话 ##

*  个人觉得webView还是 挺坑爹的，在不同的sdk版本中，方法修改的幅度有点多，看文档的时候经常看到许多方法过时了
 *  webView的用法还有很多很多，这里只讲解了比较常用的，有兴趣的话了解更多的 话，请自行 阅读官方文档。不过本人建议是先掌握常用的 就OK了，以后其他需要用到的再去学就好了

--------------------

关于如何监听网络简化及处理的 ，有兴趣的可以阅读我的这一篇博客[android 监听网络状态的变化及实战][android]

**[文章首发地址CSDN:][CSDN][http://blog.csdn.net/gdutxiaoxu/article/details/53084703][CSDN]**

**[源码下载地址:][Link 1][https://github.com/gdutxiaoxu/FunAPP.git][Link 1]**

[9fe4afa0gw1f9ktb5obwcj20qb09owha.jpg]: /images/20220715/e3c351dd0d04480bba8717ba8212b704.png
[9fe4afa0gw1f9kt650r0fg208s0eskgo.gif]: /images/20220715/c40f4a692a00412c848c09544bded7fb.png
[android]: http://blog.csdn.net/gdutxiaoxu/article/details/53008266
[webview_javascript]: http://www.apkfuns.com/webview%E4%B8%8Ejavascript%E4%BA%A4%E4%BA%92%E5%9B%9E%E8%B0%83%E4%B8%8E%E5%BC%82%E6%AD%A5.html
[CSDN]: http://blog.csdn.net/gdutxiaoxu/article/details/53084703
[Link 1]: https://github.com/gdutxiaoxu/FunAPP.git