当前位置:   article > 正文

Android WebView使用详解及注意事项

android webview

未经本人授权,不得转载!否则必将维权到底

目前很多公司的 App 就只使用一个 WebView 作为整体框架, App 中的所有内容全部使用 HTML5 进行展示,这样只需要写一次 HTML5 代码,就可以在 Android 和 iOS 平台上运行,这就是所谓的「 跨平台 」。随着 HTML5 的普及,很多 App 都会内嵌 WebView 来加载 HTML5 页面,即 Native 和 HTML5 共存,这就是当下最流行的「 混合开发 」。个人觉得 HTML5 最大的优势是迭代方便, 只需要修改服务端的 HTML5 页面,App 会同步更新,无论是做活动推广 App 还是及时修复 Bug 都带来的极大的便利。不过 HTML5 劣势也很明显,受制于国内的网速限制。 虽然国内已经普及了 4g 网络,但是网速还是不尽如人意。HTML5 加载受限于网络,没有原生控件流畅,用户体验相对较差, 所以目前完全使用 HTML5 开发 App 并没有成为主流。

一、基本用法

1、添加网络权限

<manifest>  
    <uses-permission android:name="android.permission.INTERNET" />   
</manifest>  
  • 1
  • 2
  • 3

2、在 App 布局中添加一个 WebView:

<WebView
  android:id="@+id/webview"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />
  • 1
  • 2
  • 3
  • 4

3、在 Activity 里找到添加的 WebView 控件:

WebView webView = (WebView) findViewById(R.id.webview);
  • 1

4、使用 WebView 加载网页

//加载网页链接
webView.loadUrl("http://keithxiaoy.com");
//加载本地assets目录下的网页
webView.loadUrl("file:///android_asset/keithxiaoy.html");
//加载手机本地的html页面
webView.loadUrl("content://com.android.htmlfileprovider/sdcard/keithxiaoy.html");
//加载 HTML 页面的一小段内容。参数1:需要截取展示的内容、参数2:展示内容的类型、参数3:字节码
webView.loadData(String data, String mimeType, String encoding)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

二、WebView 的基本设置

WebSettings webSettings = mWebView.getSettings();
//如果访问的页面中要与Javascript交互,则webview必须设置支持Javascript
webSettings.setJavaScriptEnabled(true);  
// 若加载的 html 里有JS 在执行动画等操作,会造成资源浪费(CPU、电量)
// 在 onStop 和 onResume 里分别把 setJavaScriptEnabled() 给设置成 false 和 true 即可

//支持插件
webSettings.setPluginsEnabled(true); 

//设置自适应屏幕,两者合用
webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小 
webSettings.setLoadWithOverviewMode(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");//设置编码格式
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

###WebViewClient

	webView.setWebViewClient(new WebViewClient() {
		@Override
		public void onPageStarted(WebView view, String url, Bitmap favicon) {
			super.onPageStarted(view, url, favicon);
            Log.d("KeithXiaoY","开始加载");
		}

		@Override
		public void onPageFinished(WebView view, String url) {
			super.onPageFinished(view, url);
			Log.d("KeithXiaoY","加载结束");
		}

		// 链接跳转都会走这个方法
		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {
			Log.d("KeithXiaoY","Url:"+ url );
			view.loadUrl(url);// 强制在当前 WebView 中加载 url 		
			return true;
		}
	});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

###WebChromeClient

	webView.setWebChromeClient(new WebChromeClient() {
		@Override
		public void onProgressChanged(WebView view, int newProgress) {
			super.onProgressChanged(view, newProgress);
			Log.d("KeithXiaoY","newProgress:"+ newProgress );
		}

		@Override
		public void onReceivedTitle(WebView view, String title) {
			super.onReceivedTitle(view, title);
			Log.d("KeithXiaoY","标题:"+ title);
		}
	});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

###WebView 中网页的前进 / 后退

	webView.goBack();//跳到上个页面
	webView.goForward();//跳到下个页面
	webView.canGoBack();//是否可以跳到上一页(如果返回false,说明已经是第一页)
	webView.canGoForward();//是否可以跳到下一页(如果返回false,说明已经是最后一页)
  • 1
  • 2
  • 3
  • 4

####常见用法:Back 键控制网页后退

  • 问题:在不做任何处理前提下 ,浏览网页时点击系统的「 Back 」键,整个 Browser 会调用 finish()而结束自身
  • 目标:点击返回后,是网页回退而不是推出浏览器
  • 解决方案:在当前 Activity 中处理并消费掉该 Back 事件
public boolean onKeyDown(int keyCode, KeyEvent event) {
  if ((keyCode == KEYCODE_BACK) && mWebView.canGoBack()) { 
      mWebView.goBack();
      return true;
  }
  return super.onKeyDown(keyCode, event);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

三、WebView 高级用法

1、缓存

  • 缓存设置
//优先使用缓存: 
webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); 
//缓存模式如下:
//LOAD_CACHE_ONLY: 不使用网络,只读取本地缓存数据
//LOAD_DEFAULT: (默认)根据cache-control决定是否从网络上取数据。
//LOAD_NO_CACHE: 不使用缓存,只从网络获取数据.
//LOAD_CACHE_ELSE_NETWORK,只要本地有,无论是否过期,或者no-cache,都使用缓存中的数据。
 //不使用缓存: 
 webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 清理缓存
//清除网页访问留下的缓存
//由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
webView.clearCache(true);

//清除当前webview访问的历史记录
//只会webview访问历史记录里的所有记录除了当前访问记录
webView.clearHistory();

//这个api仅仅清除自动完成填充的表单数据,并不会清除WebView存储到本地的数据
webView.clearFormData();

另外一种方式:
//删除缓存文件夹
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");
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

2、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();
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
  • 获取 Cookie

      CookieManager cookieManager = CookieManager.getInstance();
      String cookie = cookieManager.getCookie(URL);
    
    • 1
    • 2
  • 清除 Cookie

      CookieSyncManager.createInstance(context);  
      CookieManager cookieManager = CookieManager.getInstance(); 
      cookieManager.removeAllCookie();
      CookieSyncManager.getInstance().sync();  
    
    • 1
    • 2
    • 3
    • 4

3、Android 和 JavaScript 交互###

JavaScript 和 Android 可以交互,我们可以在网页中随意调用本地的 Java 代码,实现了 WebView 和本地代码的交互。所以 WebView 的功能非常强大,我们直接在一个 WebView 中就几乎可以实现 Android 的所有功能,所以现在才会出现不少纯 HTML5 开发的 App,这往往适合创业型公司刚起步阶段。

  • JavaScript 调用 Android

      WebSettings settings = mWebView.getSettings();
      settings.setJavaScriptEnabled(true);//开启JavaScript 
    
      mWebView.loadUrl("file:///android_asset/keithxiaoy.html");//加载本地网页
      mWebView.setWebChromeClient(new WebChromeClient());//此行代码可以保证JavaScript的Alert弹窗正常弹出
    
      //核心方法, 用于处理JavaScript被执行后的回调
      mWebView.addJavascriptInterface(new JsCallback() {
    
      	@JavascriptInterface//注意:此处一定要加该注解,否则在4.1+系统上运行失败
      	@Override
      	public void onJsCallback() {
      		System.out.println("JavaScript调用Android啦");
      	}
      }, "keithxiaoy");//参1是回调接口的实现;参2是JavaScript回调对象的名称
    
      //定义回调接口
      public interface JsCallback {
      	public void onJsCallback();
      }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
  • Android 调用 JavaScript

      //直接使用webview加载js就可以了
      mWebView.loadUrl("javascript:wave()");
    
    • 1
    • 2
  • 附上 keithxiaoy.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调用JavaScript");
             }
         </script>
         <body>
             <!-- JavaScript调用Android代码 -->
             <a onClick="window.demo.onJsCallback()"><div style="width:80px;
                 margin:0px auto;
                 padding:10px;
                 text-align:center;
                 border:2px solid #202020;" >
                     [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mRUrXX9I-1679465778299)(android_normal.png)]<br>
                     Click me!
             </div></a>
         </body>
     </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
	注意:JavaScript 回调的方法的书写格式: onClick="window.demo.onJsCallback()
	格式是: Windows.js 回调对象的名称(要和 Java 代码中设置的一致)。回调方法名称(要和 Java 代码中设置的一致)

- 注意事项
	 JavaScript 调用 Android 的方式具有版本兼容问题。经测试,在 2.2、4.0+ 系统上运行稳定,可以正常调用,但是在 2.3 系统上运行时出现崩溃。原因是底层进行 JNI 调用时,把一个 Java 中的 String 对象当数组来访问了,最终导致虚拟机崩溃。基本算是一个比较严重的 Bug,没办法解决。所以如果说用 WebView 组件想在 JavaScript 和 Java 互调就没办法适配所有机型。

#本文参考:
[Android开发:最全面、最易懂的Webview使用详解](http://www.jianshu.com/p/3c94ae673e2a)
[Google Issue Tracker ](https://issuetracker.google.com/issues/36923426)
[android2.3上用WebView组件js和java相互调用报错](http://www.2cto.com/kf/201108/101375.html)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号