android中webview用法总结

最新推荐文章于 2024-09-18 11:19:13 发布

zhengzhaofei

最新推荐文章于 2024-09-18 11:19:13 发布

阅读量580

点赞数 1

分类专栏： android 文章标签： android

本文链接：https://blog.csdn.net/zhengzhaofei/article/details/50196989

版权

android 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

webview在android开发中比较常用，，这是android中原生的控件，可以用来显示网页中的内容，工能非常强大；下面我们就来总结一下其在开发中的用法
1. 列表内容

webview的基本用法
webview在加载网页的时候用到的方法时loadUrl(String url)，当我们利用webview加载网页时可以设置一些属性，当看到设置这个词眼的时候我们就会想到setting，没错！！！通过webview对象.getSettings()可以获得 Websettig对象，接下来就可以设置属性了。比如说网页加载时的编码Websettig对象、网页放大缩小工具条、设置双击放大等等
下面我们来做一个具体案例

布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <WebView
        android:id="@+id/wv_load"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </WebView>

</RelativeLayout>

下面就是我们的java代码，里面都做了详细的注释：

import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.Menu;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.wv_load);
        WebSettings settings = webView.getSettings();

        // settings.setDefaultTextEncodingName("utf-8"); 设置web显示数据时的编码

        // 启用JavaScript，如果不设置此属性,网页就会出现大白板，这些的大白板的地方就是JavaScript
        settings.setJavaScriptEnabled(true);

        // 下面这两个属性只是针对普通网页，如果访问的访问的网站是wrap.--，下面这两个属性就会没有作用了，也就是说不支持wrap网页
        settings.setBuiltInZoomControls(true);// 启用网页放大缩小工具条
        settings.setUseWideViewPort(true);// 设置双击放大

        //设置WebViewClient,它可以接受通知和请求
        webView.setWebViewClient(new WebViewClient() {

            // 网页加载结束时回调方法
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                System.out.println("onPageFinished:" + url);
            }

            // 网页加载开始时回调方法
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                System.out.println("onPageStarted:" + url);
            }

            // 如果不想让网页中的链接用浏览器加载，需要重新下面的方法，起始就是在当前的页面重新加载了一次网页
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);// 在跳转链接时强制在当前webview中加载
                  //此方法还有其他应用场景, 比如写一个超链接<a href="tel:110">联系我们</a>, 当点击该超链接时,可以在此方法中获取链接地址tel:110, 解析该地址,获取电话号码, 然后跳转到本地打电话页面, 而不是加载网页, 从而实现了webView和本地代码的交互
            return true;
            }
        });

        webView.setWebChromeClient(new WebChromeClient() {

            // 进度发生改变时调用该方法
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
            //在此方法中我们可以设置progressbar的进度
                super.onProgressChanged(view, newProgress);            System.out.println("newProgress:"+newProgress);
            }

            // 网页的图标（Icon）
            @Override
            public void onReceivedIcon(WebView view, Bitmap icon) {
                super.onReceivedIcon(view, icon);
            }

            // 网页标题
            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
            }

            // 网页图标Icon的Url
            @Override
            public void onReceivedTouchIconUrl(WebView view, String url,
                    boolean precomposed) {
                super.onReceivedTouchIconUrl(view, url, precomposed);
            }
        });

        // 加载网页数据
        webView.loadUrl("http://www.itcast.cn");
    }

    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();// 跳转到上一个页面
        } else {
            finish();
        }
        // webView.goForward();跳转到下一个页面
    }
}

利用我们WebChromeClient中重写的方法，我们可以设置网页加载进度，以提高用户的体验

WebView加载上一页和下一页：
mWebView.goBack();//跳到上个页面
mWebView.goForward();//跳到下个页面
mWebView.canGoBack();//是否可以跳到上一页(如果返回false,说明已经是第一页)
mWebView.canGoForward();//是否可以跳到下一页(如果返回false,说明已经是最后一页)

webview高级用法
缓存
下面的内容就是利用WebView添加缓存和设置Cookie信息：

webview添加缓存很简单,一句代码搞定，就是这么简单任性，O(∩_∩)O哈哈~！！

settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);//只要有缓存就优先访问网络，否则访问网络加载数据

缓存模式总共有4中：
LOAD_DEFAULT：默认的模式，这个模式会根据ache-control决定是否从网络上取数据
LOAD_CACHE_ELSE_NETWORK：只要有缓存就优先访问网络，否则访问网络加载数据
LOAD_NO_CACHE：只访问网络，不加载缓存，刚好与下面的LOAD_CACHE_ONLY相反
LOAD_CACHE_ONLY：只加载缓存，如果没有缓存就会加载失败，和有网没网没有关系
默认的情况是LOAD_DEFAULT.
补充说明：
什么是cache-control?
cache-control是在请求网页时服务器的响应头,此响应头用于决定网页的缓存策略.
常见的取值有public(所有内容都将被缓存), private(内容只缓存到私有缓存中),no-cache(所有内容都不会被缓存),max-age=xxx(缓存的内容将在 xxx 秒后失效)等等
这里写图片描述
清理缓存

最简便的方式:
mWebView.clearCache(true);

另外一种方式:
//删除缓存文件夹
File file = CacheManager.getCacheFileBaseDir(); 
   if (file != null && file.exists() && file.isDirectory()) { 
    for (File item : file.listFiles()) { 
     item.delete(); 
    } 
    file.delete(); 
   } 

//删除缓存数据库
context.deleteDatabase("webview.db"); 
context.deleteDatabase("webviewCache.db");

Cookie(小饼干)
Cookie设置

CookieSyncManager.createInstance(this);
CookieManager cookieManager = CookieManager.getInstance();
cookieManager.setAcceptCookie(true);

String cookie = "name=xxx;age=18";
cookieManager.setCookie(URL, cookie);
CookieSyncManager.getInstance().sync();

获取Cookie

CookieManager cookieManager = CookieManager.getInstance();
String cookie = cookieManager.getCookie(URL);

清除Cookie

CookieSyncManager.createInstance(context);  
CookieManager cookieManager = CookieManager.getInstance(); 
cookieManager.removeAllCookie();
CookieSyncManager.getInstance().sync();

android 和js的交互
Js调用Android

WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);//开启js

mWebView.loadUrl("file:///android_asset/demo.html");//加载本地网页
mWebView.setWebChromeClient(new WebChromeClient());//此行代码可以保证js的alert弹窗正常弹出

//核心方法, 用于处理js被执行后的回调
mWebView.addJavascriptInterface(new JsCallback() {

    @JavascriptInterface//注意:此处一定要加该注解,否则在4.1+系统上运行失败
    @Override
    public void onJsCallback() {
        System.out.println("js调用Android啦");
    }
}, "demo");//参1是回调接口的实现;参2是js回调对象的名称

//定义回调接口
public interface JsCallback {
    public void onJsCallback();
}

Android调用Js

//直接使用webview加载js就可以了
mWebView.loadUrl("javascript:wave()");

demo.html源码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script language="javascript">
    /* This function is invoked by the activity */
    function wave() {
        alert("Android调用Js啦");
    }
</script>
<body>
    <!-- Js调用Android代码 -->
    <a onClick="window.demo.onJsCallback()"><div style="width:80px;
        margin:0px auto;
        padding:10px;
        text-align:center;
        border:2px solid #202020;" >
            <img id="droid" src="android_normal.png"/><br>
            Click me!
    </div></a>
</body>

注意：
js回调的方法的书写格式: onClick=”window.demo.onJsCallback() 格式是: window.js回调对象的名称(要和java代码中设置的一致).回调方法名称(要和java代码中设置的一致)

比较前卫的app就只使用一个WebView作为整体框架,app中的所有内容全部使用html5进行展示.这样做的好处就是可以实现跨平台, 只需要一份h5代码, 就可以在Android和Ios平台上同时运行, 而且更新也更加简便, 只需要更改服务器的h5页面, 本地客户端就马上会同步更新,无需下载apk覆盖安装. 不过劣势也很明显, h5受网速限制,往往加载速度比较慢, 没有原生控件流畅, 用户体验较差.