WebView的使用及实战

2016-11-09 本文已影响1605人程序员徐公

这篇博客主要讲解一下问题

webView 的基本使用
webView怎样配置缓存
webView请求错误时候的处理
webView cookie的同步与清除
webView 下载文件的两种方法
webView的一些扩展使用

思路图如下

大概的效果图如下

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 监听网络状态的变化及实战,而对于有网络情况的处理，这里我们只处理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();
    }
}

注意事项

同步cookie要在WebView加载url之前，否则WebView无法获得相应的cookie，也就无法通过验证。
每次登录成功后都需要调用”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还是挺坑爹的，在不同的sdk版本中，方法修改的幅度有点多，看文档的时候经常看到许多方法过时了
webView的用法还有很多很多，这里只讲解了比较常用的，有兴趣的话了解更多的话，请自行阅读官方文档。不过本人建议是先掌握常用的就OK了，以后其他需要用到的再去学就好了

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

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

源码下载地址:https://github.com/gdutxiaoxu/FunAPP.git

WebView的使用及实战

大概的效果图如下

webView的基本使用

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

第二步，创建webView

第三步，配置webView

第四步

webView 配置缓存

配置缓存模式

webView请求错误时候的处理

加载本地的控件

加载定义的 html页面

webView cookie的同步与清除

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

cookie 同步

清除cookie

注意事项

webView 下载文件的两种方法

核心代码如下

webView的一些扩展使用

题外话

猜你喜欢

热点阅读

WebView的使用及实战

大概的效果图如下

webView的基本使用

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

第二步，创建webView

第三步，配置webView

第四步

webView 配置缓存

配置 缓存模式

webView请求错误时候的处理

加载本地的控件

加载 定义的 html页面

webView cookie的同步与清除

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

cookie 同步

清除cookie

注意事项

webView 下载文件的两种方法

核心代码如下

webView的 一些扩展使用

题外话

猜你喜欢

热点阅读

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

配置缓存模式

加载定义的 html页面

webView的一些扩展使用