WebView详细介绍

最新推荐文章于 2022-02-02 13:57:51 发布

zhoudailiang

最新推荐文章于 2022-02-02 13:57:51 发布

阅读量4k

点赞数 7

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

本文链接：https://blog.csdn.net/zhoudailiang/article/details/46730281

版权

android 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

PART_0 侃在前面的话

WebView是Android提供给我们用来加载网页的控件，功能很强大。我们常用的手机淘宝，手机京东的Android客户端里面大量使用到了WebView，但是使用WebView比使用其他是更加耗电的，那为什么淘宝和京东还是要使用WebView作为APP里的部分，首先大家知道，淘宝，京东等在移动技术还不热的时候就有了一套完善的网页系统，所以使用WebView可以直接使用之前的逻辑，省时省力省钱，而且作为电商，每天的内容都是不同的，所以大家要及时更新，放在我们客户端来做肯定是不行的，你不能让用户一天下一个版本吧？而且也不能拿我们程序当狗使啊，一天一个版本，谁受得了？

PART_1 WebView基本使用

使用WebView很简单，接下来我们就细细道来。

1. 得到WebView可以通过findViewById()的方法得到，也可以使用new WebView()的方式得到，所以得到WebView是第一步（废话，不得到WebView，你上哪去显示？）

2. 得到了WebView后，那就简单了，随便找个可以加载的链比如“http://www.baidu.com”，使用webView.loadUrl("http://www.baidu.com");就得到我们想要加载的界面。如果想加载我们存放在本地的html文件，比如assets里面，可以使用这个路径：file:///android_asset/xxx.html。

3. 得到了我们想要的界面后，发现如果我们点击其中的按钮并没任何效果，因为默认情况下WebView是不支持javascript的，所以我们要在代码里设置：getSettings().setJavaScriptEnabled(true);

设置了这个以后，页面是不能缩放的，添加这个可以是页面缩放：getSettings().setBuiltInZoomControls(true);

4. 上面点击有效果了，但是发现点击之后，并不是在我们当前的WebView视图中进行转跳，其实这个也好理解，你让人家转跳，但是你又拿着当前的WebView，那它能怎么转跳？所以人家就跟系统请求浏览器去跳转了，如果你的功能刚好是这个，那一切OK，功能实现了，但是如果你的功能不是这，所以得想办法解决啊，怎么解决？看下面：

wv.setWebViewClient(new WebViewClient() {
	@Override
	public boolean shouldOverrideUrlLoading(WebView view, String url) {
		// TODO Auto-generated method stub
		view.loadUrl(url);
		return true;
	}
});

代码很容易懂，view.loadUrl(url)就是让WebView加载新的url，下面呢？下面返回true的意思是我就在当前的webView中转跳。

PART_2 WebView返回和获取网页标题

经过上面的那些，其实我们发现了一个问题，怎样回退到我们上个页面？因为我们发现，只要转跳后，按返回键是回不到我们上个url的，只会结束掉当前的Activity，所以这里我们就要复写按键事件了，如下：

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
	if (keyCode == KeyEvent.KEYCODE_BACK) {
		if (wv.canGoBack()) {
			wv.goBack();
			return true;
		}
	}
	return super.onKeyDown(keyCode, event);
}

（注解：wv就是WebView的实例）

好，上面的返回也写好了，但是有个问题，怎么样获取到当前页面的标题？这里其实谷歌早就提供了方法，如下：

wv.setWebChromeClient(new WebChromeClient() {
	@Override
	public void onReceivedTitle(WebView view, String title) {
		MainActivity.this.setTitle(title);
		super.onReceivedTitle(view, title);
	}
});

获取到标题以后，我这里是将标题设置到ActionBar上面去了，很简单，但是很实用

次奥，看完你一定会说，MD，回退的时候标题根本没有换回来啊？是的，如何解决呢？看下面：

wv.setWebViewClient(new WebViewClient() {
	@Override
	public boolean shouldOverrideUrlLoading(WebView view, String url) {
		// TODO Auto-generated method stub
		view.loadUrl(url);
		return false;
	}
	
	@Override
	public void onPageFinished(WebView view, String url) {
		setTitle(view.getTitle());
		super.onPageFinished(view, url);
	}
});

看到onPageFinished这个方法了么，看完以后，你一定会跳起来说一句，原来获取title，可以这样，那我其实完全可以不用上面的方法setWebChromeClient()的方法。

推荐篇文章看了你就大致知道为什么了：http://www.eoeandroid.com/forum.php?mod=viewthread&tid=542884

PART 3 js与android交互

首先写一个简单的html页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <title>互调JS</title> 
  <script type="text/javascript">
  	function test() {
		try {
			window.external.callApp("afterChosen", 1059);
		} catch(e) {
			document.getElementById("content").innerHTML = "call fail!"
		}
	}

	function afterChosen(){
		document.getElementById("content").innerHTML = "callback success!";
	}
	</script> 
 </head> 
 <body> 
  <p id="content">最开始的数据</p> 
  <input type="button" value="点击调用app" οnclick="test()" />  
 </body>
</html>

很简单，就是点击了按钮以后调用test()方法，然后在test()方法中在调用android中的callApp函数。但是为了使得js里面的代码能够正确调用到我们的方法，我们需要加一段这样的代码：

wv.addJavascriptInterface(this, "external");

这里的this代表的是MainActivity.this，然后后面的参数跟我们js代码里写的window.external.callApp()要一致。然后我们在实现callApp方法：

@JavascriptInterface
public void callApp(final String funcName, final int n) {
	wv.post(new Runnable() {
		public void run() {
			wv.loadUrl("javascript:" + funcName + "()");
		}
	});
}

这块要注意，我们的webview是一个单独的线程中运行的，如果你直接在UI线程中调用wv.loadUrl("javascript:" + funcName + "()")是会抛异常的，不信你可以试试。。。，wv.post就是将下面执行的代码post到webview所在的线程中，这样就可以顺利的执行了。

回调js函数是要遵循一定的格式的，否则是调不动的，格式很简单就是在我们要调用的函数前面加上： javascript:

看看最后的效果：