WebView详细介绍

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" onclick="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:

看看最后的效果:

OK, 这篇文章就介绍到这里!期待我的下一篇文章,绝对会让你大吃一惊。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-11 05:28:42

WebView详细介绍的相关文章

微铺子点单系统详细介绍 - 争做国内最专业的微信商店平台,微信外卖订餐系统!

什么是微铺子? 微铺子是国内专业的微信点单系统,集成了外卖.点餐.订座等众多功能.通过微铺子,店家可以在微信上建立店铺,消费者只需关注店家的帐号,即可浏览商品与店家的信息,消费者关注到商家后,根据提示,进行点击点单,简单三步,15秒内,即可完成订餐.店家可以通过电脑后台.电子邮件.短信或无线打印机多种方式即时查看订单,并提供相应的服务. 微铺子系统适用于:餐饮.酒店.水果店.蛋糕店.花店.零售.超市等. 微铺子从创立到与合作商家的长期测试,再到正式投入商用,期间不断根据客户的需求完善产品,不断开

自动化运维工具ansible详细介绍

在学习批量管理软件时,首先要明确的知道自己需要什么,网上大神很多,他们都研究到源码上了,写了很多介绍绚丽功能的文档,但其实那些功能基本上我们都用不到,经常被各种文档弄得头脑发晕,此文就是为了简单直白的告诉大家ansible的功能,满足大家的基本需求. 首先确认批量管理我们需要什么:无外乎主机分组管理.实时批量执行命令或脚本.实时批量分发文件或目录.定时同步文件等. 目录 1.      ansible与saltstack对比... 2.      ansible安装... 3.      ans

详细介绍spring框架(下篇)

上篇简单介绍了spring,下面详细介绍为什么需要spring框架? Spring带给我们什么 方便解耦,简化开发,通过Spring提供的IoC容器,我们可以将对象之间的依赖关系交由Spring进行控制,避免硬编码所造成的过度程序耦合.有了Spring,用户不必再为单实例模式类.属性文件解析等这些很底层的需求编写代码,可以更专注于上层的应用. AOP编程的支持 通过Spring提供的AOP功能,方便进行面向切面的编程,许多不容易用传统OOP实现的功能可以通过AOP轻松应付. 声明式事务的支持 在

TTL,COMS,USB,232,422,485电平之详细介绍及使用

如有错误敬请指导! 今天来详细介绍一下TTL,COMS,USB,232,422,485电平,以及之间的转换问题. 有些地方的引脚图可能不是规范的,具体引脚以自己的模块资料为主,这篇文章着重介绍使用... 先介绍各个电平 TTL电平------我们使用的51单片机,5V供电的那种,+5V等价于逻辑“1”,0V等价于逻辑“0”,“TTL电平”最常用于有关电专业,如:电路.数字电路.微机原理与接口技术.单片机等课程中都有所涉及.在数字电路中只有两种电平(高和低)高电平+5V.低电平0V. COMS电平

RAID详细介绍

RAID详细介绍 RAID 0 又称为Stripe或Striping,它代表了所有RAID级别中最高的存储性能.RAID 0提高存储性能的原理是把连续的数据分散到多个磁盘上存取,这样,系统有数据请求就可以被多个磁盘并行的执行,每个磁盘执行属于它自己的那部分数据请求.这种数据上的并行操作可以充分利用总线的带宽,显著提高磁盘整体存取性能 RAID 1又称为Mirror或Mirroring,它的宗旨是最大限度的保证用户数据的可用性和可修复性.RAID 1的操作方式是把用户写入硬盘的数据百分之百地自动复

Inf2Cat应用的参数使用详细介绍

http://msdn.microsoft.com/zh-cn/subscriptions/ff547089 ? Inf2Cat Inf2Cat (Inf2Cat.exe) 是一个命令行工具,该工具确定驱动程序包的?INF 文件是否可以针对指定的 Windows 版本列表进行数字签名.如果可以,那么 Inf2Cat 会生成适用于指定 Windows 版本的未签名的目录文件. Inf2Cat /driver: PackagePath /os: WindowsVersionList [/nocat]

DICOM:DICOM Print 服务详细介绍

背景: 昨天专栏中发表了一篇关于DICOM Print的博文DICOM:DICOM Print服务中PresentationContext协商之 MetaSOPClass与SOPClass对比分析,文章从部署中遇到的实际情况出发,对DICOM Print中的连接协商(Association Negotiation)进行了剖析,本文可看做是上一篇博文的补充,重新浏览和整理了DICOM3.0标准中对DICOM Print 服务的介绍,加深对DICOM打印的理解. DICOM Print服务数据流:

Linux shell脚本基础学习详细介绍(完整版)一

Linux shell脚本基础学习这里我们先来第一讲,介绍shell的语法基础,开头.注释.变量和 环境变量,向大家做一个基础的介绍,虽然不涉及具体东西,但是打好基础是以后学习轻松地前提.1. Linux 脚本编写基础◆1.1 语法基本介绍 1.1.1 开头 程序必须以下面的行开始(必须方在文件的第一行): #!/bin/sh 符号#!用来告诉系统它后面的参数是用来执行该文件的程序.在这个例子中我们使用/bin/sh来执行程序. 当编辑好脚本时,如果要执行该脚本,还必须使其可执行. 要使脚本可执

Linux shell脚本基础学习详细介绍(完整版)二

详细介绍Linux shell脚本基础学习(五) Linux shell脚本基础前面我们在介绍Linux shell脚本的控制流程时,还有一部分内容没讲就是有关here document的内容这里继续. Linux shell脚本基础已经被分成好几个部分了,这里对控制流程的内容也就马上讲完了,这是最后一部分关于here document,这里举例稍微有点复杂,我们慢慢来分析这个复杂Linux shell脚本. 6. Here documents 当要将几行文字传递给一个命令时,here docu