WebView的基础篇

最新推荐文章于 2021-12-08 11:30:06 发布

笨qiao先飞

最新推荐文章于 2021-12-08 11:30:06 发布

阅读量208

点赞数 1

分类专栏： AndroidWebView Android 文章标签： Android WebView开发 WebView基础

本文链接：https://blog.csdn.net/wq1051852572/article/details/82855736

版权

Android 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

AndroidWebView

1 篇文章 0 订阅

订阅专栏

现在很多App里都内置了Web网页，比如说很多电商平台，淘宝、京东、聚划算等等，还有一些App的广告也用到了Web网页。

WebView比较灵活，不需要更新App，只需要修改网页代码即可。一些经常变化的页面可以用WebView这种方式去加载网页。例如中秋节跟国庆节打开的页面不一样，如果是用WebView显示的话，只修改修改html页面就行，而不需要更新App。

WebView内部实现是采用渲染引擎来展示view的内容，提供网页前进后退，网页放大，缩小，搜索。Android的Webview在低版本和高版本采用了不同的webkit版本内核，4.4后直接使用了Chrome。

废话就不说了直接上代码了：
加载html四种方式

//加载url      **用到这个方法要先给访问网络的权限**
webView.loadUrl("https://www.baidu.com/");

//加载asset文件夹下html
webView.loadUrl("file:///android_asset/test.html");

//方式3：加载手机sdcard上的html页面
webView.loadUrl("content://com.ansen.webview/sdcard/test.html");

//方式4 使用webview显示html代码
webView.loadDataWithBaseURL(null,
                "<body><h2> 这里是html的代码 </h2></body></html>", "text/html" ,
                "utf-8", null);

WebView的状态

//激活WebView，能正常执行网页的响应，类似Activity的获取焦点
webView.onResume() ；

//当页面被失去焦点被切换到后台不可见状态，需要执行onPause
//通过onPause动作通知内核暂停所有的动作，比如DOM的解析、plugin的执行、JavaScript执行。
webView.onPause()；

//当应用程序(存在webview)被切换到后台时，这个方法不仅仅针对当前的webview而是全局的全应用程序的webview
//它会暂停所有webview的layout，parsing，javascripttimer。降低CPU功耗。
webView.pauseTimers()
//恢复pauseTimers状态
webView.resumeTimers()；

//销毁Webview
//在关闭了Activity时，如果Webview的音乐或视频，还在播放。就必须销毁Webview
//但是注意：webview调用destory时,webview仍绑定在Activity上
//这是由于自定义webview构建时传入了该Activity的context对象
//因此需要先从父容器中移除webview,然后再销毁webview:
rootLayout.removeView(webView); 
webView.destroy();

关于前进 / 后退网页

//是否可以后退
webView.canGoBack() 
//后退网页
webView.goBack()

//是否可以前进                     
webView.canGoForward()
//前进网页
webView.goForward()

返回键控制网页后退
需要重写onKeyDown方法

public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KEYCODE_BACK) && mWebview.canGoBack()) {
            webView.goBack();//网页后退
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

WebSettings子类的一些方法

		WebSettings webSettings = webView.getSettings();

        //如果访问的页面中要与Javascript交互，则webview必须设置支持Javascript
        webSettings.setJavaScriptEnabled(true);
        // 若加载的 html 里有JS 在执行动画等操作，会造成资源浪费（CPU、电量）
        // 在 onStop 和 onResume 里分别把 setJavaScriptEnabled() 给设置成 false 和 true 即可
        //设置自适应屏幕，两者合用
        webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小
        webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
        // 跨域问题
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            webSettings.setAllowUniversalAccessFromFileURLs(true);
        }
        //缩放操作
        webSettings.setSupportZoom(true); //支持缩放，默认为true。是下面那个的前提。
        webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false，则该WebView不可缩放
        webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件

        //其他细节操作
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存
        webSettings.setAllowFileAccess(true); //设置可以访问文件
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口
        webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
        webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式

WebViewClient类

打开网页时不调用系统浏览器，而是在本WebView中显示；在网页上的所有加载都经过这个方法,这个函数我们可以做很多操作。

webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return false;
            }
        });

开始载入页面调用的，我们可以设定一个loading的页面或者动画，告诉用户程序在等待网络响应。

webView.setWebViewClient(new WebViewClient(){
     @Override
     public void  onPageStarted(WebView view, String url, Bitmap favicon) {
        //设定加载开始的操作
     }
 });

在页面加载结束时调用。我们可以关闭loading 条，切换程序动作。

webView.setWebViewClient(new WebViewClient(){
      @Override
      public void onPageFinished(WebView view, String url) {
         //设定加载结束的操作
      }
  });

在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次。

webView.setWebViewClient(new WebViewClient(){
      @Override
      public boolean onLoadResource(WebView view, String url) {
         //设定加载资源的操作
      }
  });

加载页面的服务器出现错误时（如404）调用。

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.html");
                    break;
                }
            }
        });

html代码

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>error network</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=0,minimum-scale=0.5">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style type="text/css">
    	*{box-sizing:border-box;}
    	body{
			color:#333;
		 	font-family: 'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei','微软雅黑','宋体',sans-serif;
		 	-webkit-tap-highlight-color:transparent;
			background:#fff;
		    font-size:12px;
		    word-break: break-all;
		}
		a{text-decoration:none;color:#666;}
		.error_network{
		  	max-width: 100%;
  			max-height: 100%;
			text-align:center;
			position:absolute;
			top: 50%;
		  	left: 50%;
		  	-webkit-transform: translate3d(-50%,-50%,0);
		}
		.error_1{ margin-bottom:30px; }
		img.no_network_1{ max-width:100%; }
		.error_2 span{
			height:40px;
			display:inline-block;
			text-align:center;
			margin:0 15px;
		}
		.error_2 i{
			width:40px;
			height:40px;
			display:block;
			padding:10px;
			margin:0 auto 5px;
		}
		.error_2_1 i{
			background:url(放在同一包下的照片路径) no-repeat;
			background-size:cover;
		}
		.error_2_2 i{
			background:url(放在同一包下的照片路径) no-repeat;
			background-size:cover;
		}
    </style>
</head>
<body>
<div class="error_network">
    <div class="error_1">
        <img src="images/no_network_1.png" class="no_network_1" />
    </div>
    <div class="error_2">
			<span class="error_2_1">
				<a href="javascript:void(0);" "App.check_network()">
					<i></i>检查网络
				</a>
			</span>
        <span class="error_2_2">
				<a href="javascript:opener.location.reload();" "App.refresh_reload()">
					<i></i>刷新页面
				</a>
			</span>
    </div>
</div>
</body>
</html>

WebChromeClient类

获得网页的加载进度并显示

webview.setWebChromeClient(new WebChromeClient(){
      @Override
      public void onProgressChanged(WebView view, int newProgress) {
          if (newProgress < 100) {
              String progress = newProgress + "%";
              progress.setText(progress);
            } else {
        }
    });

获取Web页中的标题

webview.setWebChromeClient(new WebChromeClient(){

    @Override
    public void onReceivedTitle(WebView view, String title) {
       titleview.setText(title)；
    }

支持javascript的警告框

webview.setWebChromeClient(new WebChromeClient() {
            
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result)  {
    new AlertDialog.Builder(MainActivity.this)
            .setTitle("JsAlert")
            .setMessage(message)
            .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    result.confirm();
                }
            })
            .setCancelable(false)
            .show();
    return true;
            }

WebViewClient与WebChromeClient区别

WebViewClient主要帮助WebView处理各种通知、请求事件的，有以下常用方法：

onPageFinished 页面请求完成
onPageStarted 页面开始加载
shouldOverrideUrlLoading 拦截url
onReceivedError 访问错误时回调，例如访问网页时报错404，在这个方法回调的时候可以加载错误页面。

WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等，有以下常用方法。

onJsAlert webview不支持js的alert弹窗，需要自己监听然后通过dialog弹窗
onReceivedTitle 获取网页标题
onReceivedIcon 获取网页icon
onProgressChanged 加载进度回调

这些就是小弟所理解的一些基础知识，Demo就不放了，希望对大家的学习有帮助吧。

如有那些错误的地方小弟求各位大佬指点迷津。

笨qiao先飞

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebView的基础篇

现在很多App里都内置了Web网页，比如说很多电商平台，淘宝、京东、聚划算等等，还有一些App的广告也用到了Web网页。WebView比较灵活，不需要更新App，只需要修改网页代码即可。一些经常变化的页面可以用WebView这种方式去加载网页。例如中秋节跟国庆节打开的页面不一样，如果是用WebView显示的话，只修改修改html页面就行，而不需要更新App。WebView内部实现是采用渲染引擎...
复制链接

扫一扫

专栏目录