【Android】WebView初体验

作者: 吾非言 | 来源:发表于2017-09-01 22:02 被阅读187次

    作者:邹峰立,微博:zrunker,邮箱:zrunker@yahoo.com,微信公众号:书客创作,个人平台:www.ibooker.cc

    本文选自书客创作平台第36篇文章。阅读原文

    书客创作

    在WebView没有出现之前,如果要访问一个网页只能通过打开手机内的浏览器,通过浏览器来加载网页,但是打开浏览器的同时,也脱离了当前的应用软件,这样就大大的降低了网页与应用软件的交互。随着Android SDK的不断升级,官方提供一个WebView控件,专门用于加载网页并实现交互。那么到底WebView是什么?又该如何使用呢?

    什么是WebView?

    简单来说WebView是移动端用于加载Web页面的控件。

    怎么使用WebView?

    1、移动端加载网页方式

    A、通过打开浏览器访问网页

    String weburl ="http://www.baidu.com/";
    Uri uri = Uri.parse(weburl);// weburl网址
    Intent intent = new Intent(Intent.ACTION_VIEW, uri);
    startActivity(intent);
    

    B、通过WebView打开本地网页

    WebView.loadUrl("file:///android_asset/baidu.html");
    

    注意1:本地文件放在assets文件中,assets文件是main的子文件,与res文件同级。
    注意2:设置WebView支持加载本地文件。

    WebSettings webSettings = webView.getSettings();
    // 允许加载Assets和resources文件
    webSettings.setAllowFileAccess(true);
    
    本地baidu.html代码

    C、通过WebView加载网址

    webView.loadUrl("http://www.baidu.com/");
    

    加载网址,需要在清单文件中加上网络请求权限

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

    当WebView加载失败时,可以使用webView.reload();来重新加载。
    注意:当加载完网页之后,如果发现网页无法点击,这很可能是WebView没有获取焦点。

    webView.requestFocus();// 使页面获取焦点,防止点击无响应
    

    2、WebView基本属性设置

    WebView提供很多属性,需要通过WebSettings来进行设置,下面是对一些常用属性进行设置。

    // 设置WebView相关属性
    WebSettings webSettings = webView.getSettings();
    // 是否缓存表单数据
    webSettings.setSaveFormData(false);
    // 设置WebView 可以加载更多格式页面
    webSettings.setLoadWithOverviewMode(true);
    // 设置WebView使用广泛的视窗
    webSettings.setUseWideViewPort(true);
    // 支持2.2以上所有版本
    webSettings.setPluginState(WebSettings.PluginState.ON);
    // 允许加载Assets和resources文件
    webSettings.setAllowFileAccess(true);
    // 告诉webview启用应用程序缓存api
    webSettings.setAppCacheEnabled(true);
    // 排版适应屏幕
    webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
    // 支持插件
    webSettings.setPluginState(WebSettings.PluginState.ON);
    // 设置是否启用了DOM storage AP搜索I
    webSettings.setDomStorageEnabled(true);
    // 设置缓存,默认不使用缓存-有缓存,使用缓存
    webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
    // 是否允许缩放
    webSettings.setSupportZoom(false);
    // 是否支持通过js打开新的窗口
    webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
    // 允许加载JS
    webSettings.setJavaScriptEnabled(true);
    
    // 隐藏滚动条
    webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
    

    3、WebView默认是通过浏览器打开网页,如何使用WebView打开网页?

    WebViewClient是WebView的一个重要属性,它不仅仅能够实现WebView打开网页,而且还能够实现URL重构等功能。

    // WebView默认是通过浏览器打开url,使用url在WebView中打开
    webView.setWebViewClient(new WebViewClient() {
    //    // 旧版本
    //    @Override
    //    public boolean shouldOverrideUrlLoading(WebView view, String url) {
            // 使url在WebView中打开,在这里可以进行重构url
    //        webView.loadUrl(url);
    //        return true;
    //    }
    
        // 新版本
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            // 返回false,意味着请求过程中,不管有多少次的跳转请求(即新的请求地址),均交给webView自己处理,这也是此方法的默认处理
            // 返回true,说明你自己想根据url,做新的跳转,比如在判断url符合条件的情况下,我想让webView加载http://baidu.com/
            // 加载Url,使网页在WebView中打开,在这里可以进行重构url
            if(Build.VERSION.SDK_INT>= Build.VERSION_CODES.LOLLIPOP) {
                webView.loadUrl(request.getUrl().toString());
            }
            return true;
        }
    
        // WebViewClient帮助WebView去处理页面控制和请求通知
        @Override
        public void onLoadResource(WebView view, String url) {
            super.onLoadResource(view, url);
        }
    
        // 错误代码处理,一般是加载本地Html页面,或者使用TextView显示错误
        @Override
        public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
            // 当网页加载出错时,加载本地错误文件
    //      webView.loadUrl("file:///android_asset/error.html");
        }
    
        // 页面开始加载-例如在这里开启进度条
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }
    
        // 页面加载结束,一般用来加载或者执行javaScript脚本
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
        }
    });
    

    4、设置WebView的WebChromeClient属性

    WebChromeClient是WebView中一个非常重要的属性,使用它可以监听网页加载的进度,获取网页主题等信息。

    // 监听网页加载进度
    webView.setWebChromeClient(new WebChromeClient() {
        // 网页Title信息
        @Override
        public void onReceivedTitle(WebView view, String title) {
            super.onReceivedTitle(view, title);
        }
    
        // 监听网页alert方法
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            return super(view, url, message, result);
        }
    
        // 显示网页加载进度
         @Override
        public void onProgressChanged(WebView view, int newProgress) {
            // newProgress 1-100
        }
    });
    

    5、WebView中使用JavaScript

    WebView与网页的交互大多数是使用JavaScript来实现

    //设置WebView支持JavaScript
    WebSettings webSettings = webView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    

    6、下载文件监听

    // 下载文件
    webView.setDownloadListener(new DownloadListener() {
        @Override
        public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {
            // url下载文件地址
            // 处理下载文件逻辑
        }
    });
    

    7、后退与前进

    // 返回键监听
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            if (webView.canGoBack())
                // 判断WebView是否能够返回,能-返回
                webView.canGoBack();
            else
                finish();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
    

    8、WebView优化-缓存

    //设置缓存,默认不使用缓存
    webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);//有缓存,使用缓存
    webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);//不使用缓存
    

    Github地址
    阅读原文


    微信公众号:书客创作

    相关文章

      网友评论

        本文标题:【Android】WebView初体验

        本文链接:https://www.haomeiwen.com/subject/cgwkjxtx.html