您的位置：首页 > 移动开发

WebView 控件学习

2015-11-19 18:56 323 查看

一、说明

在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运行效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航