WebView 控件学习

原创 2015年11月19日 18:56:30

一、说明

在Android应用开发中,有原生开发和混合编程开发两种方式。WebView控件就是用于混合编程开发的控件,它是将html文件集成到Android应用上并成为一个界面,是可以有事件响应的。

二、把html文件集成到Android的步骤

1、设置JavaScript可用

<span style="white-space:pre">		</span>/**设置javascript可用*/   
		WebSettings settings = mWebView.getSettings();
		settings.setJavaScriptEnabled(true);
2、定义交互接口类和方法

3、设置JavaScript调用接口名,通过方法:addJavascriptInterface(arg1,arg2)

其中,参数arg1为交互接口类的实例;

    参数arg2为JavaScript调用接口名(自己任意定义),此接口会在html文件的JavaScript代码中会被调用,从而调用交互接口类中的方法:

如下面的例子中,html文件的JavaScript代码为:window.musicServiceInterfaceName.playMusic();

Java代码:

@SuppressLint("JavascriptInterface")
public class MyWebViewActivity extends Activity {
	private WebView mWebView;
	private String url = "http://192.168.1.68:8080/index.html";
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_webview_layout);
		mWebView =(WebView) findViewById(R.id.my_webview_layout_web);
		mWebView.loadUrl(url);
		
		/**设置javascript可用*/   
		WebSettings settings = mWebView.getSettings();
		settings.setJavaScriptEnabled(true);
		
		/**设置javascript调用接口名*/
		mWebView.addJavascriptInterface(new WebViewScript(), "<span style="color:#ff0000;">musicServiceInterfaceName</span>");
	}
	
	<pre name="code" class="java"><span style="white-space:pre">	</span>/**定义交互接口类和方法*/
public class WebViewScript{public void playMusic(){Toast.makeText(MyWebViewActivity.this, "html代码调用原生应用代码方法", Toast.LENGTH_SHORT).show();}}}


XML代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <WebView
        android:id="@+id/my_webview_layout_web"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    
</LinearLayout>

HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>婚庆主页</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0,user-scalable=yes">
	<!--<meta name="viewport" content="width=640, initial-scale=0.5,maximum-scale=0.5" />-->
	<meta name="apple-mobile-web-app-capable" content="YES">
	<link rel="stylesheet" href="mycss.css" type="text/css" />
	<script>
		var i = 0;
		var jh = "我们已婚!";
		
		function myOnClick(){
			//alert("你好,我是弹出对话框");
			//document.write("javascript 学习");
			//document.getElementById("sp11").innerHTML=jh+(i+=1);
			window.musicServiceInterfaceName.playMusic();
		}
		function startGridView(){
			window.musicServiceInterfaceName.startGridViewHttp();
		}
		
		
		function nativeToJs(){
			var url = window.musicServiceInterfaceName.jsToNativeGetParameter(); //返回http://it.warmtel.com 
			window.location.href=url; //跳转到指定url
		}

		
		function toHttpWeb(){
			window.location.href="http://blog.warmtel.com";
		}
		
	</script>
</head>


<body bgcolor="#680011">
 
	<div class="wrapcontain" style="width: 300px;padding: 10px;padding-top: 0px;margin: 0 auto;background-color:#680011;">
		<div class="imgTop">
			<img class="imgtop_bg" src="./img/index_top_bg.png" /> 
			<img class="imgtop_lb" src="./img/index_microphone.png" onclick="myOnClick()"/>
			<h3 class="p3">
				<p id="sp11" class="sp1">离我们婚礼</p>
				<p class="sp2">
					还有<span class="sp3">35</span>天
				</p>
			</h3>
		</div>


		<div class="imgShow">
		   
			<img src="./img/index_yaoqinghan.png" onclick="startGridView()"/> 
			<img src="./img/index_zhufuqiang.png" onclick="nativeToJs()"/> 
			<img src="./img/index_yaoyiyao.png" /> 
			<img src="./img/index_hunsha.png" />
		</div>

		<div class="footer">
		   
			<a href="###">婚礼承办方:成都幸福公社婚庆公司<img
				src="./img/redRightarrow.png" /></a>
		
		</div>
	</div>
   
	<script src="demo.js"></script>
</body>
</html>

CSS代码:

.imgTop {
	width: 320px;
	margin-left: -10px;
	margin-right: -10px;
	min-height: 200px;
	position:relative;
	border-bottom:1px solid #ffeeac;
}

.imgTop .imgtop_bg{
	width: 100%;
}

.imgTop .imgtop_lb {
	margin-top: 10px;
	margin-left: 10px;
	position: absolute;left: 10px; top:10px;
}
.p3 {
	width: 118px;
	height: 22px;
	
	/* background-color: #ff6766; */
	/* margin: 10px; */
	/* float: right;*/
	/* margin-top:110px; */
	
	padding: 30px;
	position: absolute;
	right: 10px;
	bottom : 0px; 

}

.sp1 {
	font-size: 10px;
	color: #ffeeac;
}

.sp2 {
	font-size: 10px;
	color: #ffeeac;
	text-align: right;
}

.sp3 {
	font-size: 20px;
}

.imgShow {
	width: 320px;
	height: 210px;
	overflow: hidden;
	margin-left: -10px;
	margin-top: 14px;

}

.imgShow img {
	width: 145px;
	height: 110px;
	display: inline-block;
	float: left;
	margin-left: 10px;
	margin-bottom: 10px;
}
.footer {
	margin-top: 14px;
	text-align: center;
}

.footer a {
	color: #92192d;
	font-size: 14px;
}

.footer img {
	width: 20px;
	display: inline-block;
	position: relative;
	top: 2px;
	margin-left: 8px;
}


实例运行效果:

在浏览器中运行:



Android运行效果:



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

相关文章推荐

《第一行代码-Android》学习笔记(二十一)WebView控件总结【修改】

1.加载页面1.1.web资源 webview.loadUrl("http://192.168.1.100:8080/Web/index.html") 1.2.本地资源本地文件使用:webView.l...

Android学习笔记50:使用WebView控件浏览网页

Android学习笔记50:使用WebView控件浏览网页 http://www.cnblogs.com/menlsh/p/3139498.html   在Androi...
  • gincoo
  • gincoo
  • 2016年03月15日 11:31
  • 216

Android学习 (十五) 网络技术之WebView控件基础

1.使用WebView控件可以在我们的应用里嵌入一个浏览器,从而浏览各种网页。 用法和之前的基本控件是一样的。 下面代码实现功能的整个过程如图所以:首先,在布局文件中定义这个控件: ...
  • myGFZ
  • myGFZ
  • 2016年11月20日 10:41
  • 174

控件WebView显示网页

转自:http://www.cnblogs.com/tinyphp/p/3858997.html WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互...

仿照微信6的内置WebView控件

  • 2014年11月30日 10:21
  • 408KB
  • 下载

【安卓笔记】WebView控件使用

在Android中,可以使用Webview控件来浏览网页。 下面我们就来介绍webView控件的使用方式: -----------------------------------------...

webview控件的使用

  • 2015年04月29日 19:34
  • 2.99MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WebView 控件学习
举报原因:
原因补充:

(最多只允许输入30个字)