最近在学习html5，网上有很多文章都在分析预测移动互联的未来，很多人的观点是html5会是移动互联的未来，但是不可能完全取代app应用。未来很多的应用将会是html5+native来架构。所以自己想写一个类似的demo，在网上找了好久也没找到一个比较好的文章。为此自己写了一个，主要就是用了WebView类，在此贴出来与大家分享。
1,demo的结构图
2,main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<WebView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/webview"/>
</LinearLayout>
3,index.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>webview</title>
<script type="text/javascript">
function show(jsondata) {
alert("运行" + jsondata);
var jsonobjs = eval(jsondata);
var table = document.getElementById("personTable");
for(var y=0; y<jsonobjs.length; y++){
var tr = table.insertRow(table.rows.length);
var td1 = tr.insertCell(0);
var td2 = tr.insertCell(1);
td2.align = "center";
var td3 = tr.insertCell(2);
td3.align = "center";
alert(jsonobjs[y].id);
td1.innerHTML = jsonobjs[y].id;
td2.innerHTML = jsonobjs[y].name;
//td3.innerHTML = jsonobjs[y].mobile;
td3.innerHTML = "<a href='javascript:contact.call(\""+jsonobjs[y].mobile+"\")'>" + jsonobjs[y].mobile;
}
}
</script>
</head>
<body onload="javascript:contact.getContacts()">
<table border="0" width="100%" id="personTable" cellpadding="0">
<tr>
<td width="15%">编号</td>
<td width="20%" align="center">姓名</td>
<td aligh="center">电话</td>
</tr>
</table>
[url=javascript:window.location.reload()]刷新[/url]
</body>
</html>
4,Contact.java
package org.sunday.demain;
/**
* 实体类
* @author sunday
*
*/
public class Contact {
private Integer id;
private String name;
private String mobile;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getMobile() {
return mobile;
}
public void setMobile(String mobile) {
this.mobile = mobile;
}
public Contact(Integer id, String name, String mobile) {
super();
this.id = id;
this.name = name;
this.mobile = mobile;
}
}
5,ContactService.java
package org.sunday.service;
import java.util.ArrayList;
import java.util.List;
import org.sunday.demain.Contact;
/**
* 业务逻辑 模拟从服务端获取数据
* @author sunday
*
*/
public class ContactService {
public List<Contact> getContacts() {
List<Contact> contacts = new ArrayList<Contact>();
contacts.add(new Contact(34, "张三", "15170013856"));
contacts.add(new Contact(39, "李四", "15170013856"));
contacts.add(new Contact(67, "王五", "15170013856"));
return contacts;
}
}
6,MyWebViewActivity.java
package org.sunday.main;
import java.util.List;
import org.json.JSONArray;
import org.json.JSONObject;
import org.sunday.demain.Contact;
import org.sunday.service.ContactService;
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebView;
/**
*
* @author sunday
*
*/
public class MyWebViewActivity extends Activity {
/** Called when the activity is first created. */
private static final String TAG = "MyWebViewActivity";
private ContactService contactService;
private WebView webView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
contactService = new ContactService();
webView = (WebView) findViewById(R.id.webview);
//设置webView可以使用Javascript
webView.getSettings().setJavaScriptEnabled(true);
//将插件类实例绑定到javascript中
webView.addJavascriptInterface(new ContactPlugin(), "contact");
//加载html，如果有必要此页面可以放在服务器端
webView.loadUrl("file:///android_asset/index.html");
}
//插件类
private final class ContactPlugin {
//获取联系人
public void getContacts() {
List<Contact> contacts = contactService.getContacts();
try {
JSONArray array = new JSONArray();
for(Contact contact : contacts) {
JSONObject item = new JSONObject();
item.put("id", contact.getId());
item.put("name", contact.getName());
item.put("mobile", contact.getMobile());
array.put(item);
}
String json = array.toString();
Log.e(TAG, "json = " + json);
webView.loadUrl("javascript:show('"+json+"')");
} catch (Exception e) {
e.printStackTrace();
}
}
//调用拨号器
public void call(String phoneNum) {
Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phoneNum));
startActivity(intent);
}
}
}
需要源码的留邮箱！
- 大小: 30.5 KB
- 大小: 30.5 KB
分享到：
相关推荐
同时，WebView还提供了Java代码与JavaScript交互的能力，使得我们可以利用JavaScript的灵活性和Android原生功能的强大结合，创建出丰富的混合应用。本文将详细介绍如何在Android中使用WebView实现Java程序与JS脚本的...
在这个主题中，我们将深入探讨如何在Android中加载assets目录下的HTML文件，并通过WebView实现与JavaScript的交互。 首先，我们要了解`WebView`的基本用法。在Android布局文件中，我们添加一个WebView组件： ```...
总之，Android中的WebView与JavaScript的交互是通过暴露Java对象和调用JavaScript函数实现的，这种方式极大地丰富了Android应用的功能。在实际开发中，我们需要合理利用这一特性，同时注意安全性和性能优化。
因为开发中经常用到android和WebView混合交互开发来降低开发时间。 所以加了一点类java反射机制工具小框架来方便交互 反射这个类lxz.utils.android.webview.plugins.ToastScript 地址：...
总结一下，Android中的WebView提供了Java与JavaScript交互的能力，主要通过以下步骤实现： 1. 初始化WebView，设置JavaScript支持。 2. 使用`addJavascriptInterface`暴露Java对象给JavaScript。 3. 在Java端监听...
// 创建一个Java对象，用于与JavaScript交互 MyJavaScriptInterface jsInterface = new MyJavaScriptInterface(); webView.addJavascriptInterface(jsInterface, "android"); ``` 这里，`MyJavaScriptInterface`是...
在Android开发中，WebView是一个非常重要的组件，它允许我们在应用程序中内嵌网页内容，并且能够实现JavaScript与Java代码之间的交互，极大地丰富了应用的功能。本文将深入探讨如何在Android的WebView中利用...
总之，"Android中Webview与原生界面交互及二维码扫描功能实现"项目涵盖了Android开发中的关键技术点，包括WebView的使用、JavaScript与原生代码的交互，以及二维码扫描功能的集成。通过学习和实践这个项目，开发者...
在Android开发中，WebView是一个非常...通过以上这些方法，Android开发者可以实现WebView与JavaScript的深度交互，从而构建功能丰富的混合式应用。在实际项目中，根据需求可以选择不同的交互方式，灵活运用这些技术。
在Android开发中，WebView是一个非常重要的组件，它允许我们在应用程序中内嵌网页内容，并实现Java与JavaScript之间的交互。这种交互能力使得我们可以利用Web技术来增强原生应用的功能，同时保持了良好的用户体验。...
综上所述，Android的WebView为Java与JavaScript的交互提供了丰富的功能，使得我们可以构建更加动态和功能丰富的混合应用。正确理解和使用这些交互方式，可以极大地提升用户体验和应用的灵活性。在实际项目中，务必...
总之，Android WebView与JavaScript的交互为开发者提供了丰富的可能性，既可利用Web技术快速构建界面，又能通过Java接口实现原生功能，提高应用的可扩展性和灵活性。正确理解和运用这一特性，可以使我们的Android...
当Android的WebView与JavaScript交互时，开发者可以实现更丰富的功能，如调用Android原生方法、获取网页数据等。下面我们将深入探讨这个“android webview与js交互简单demo”所涉及的知识点。 1. Android WebView...
**三、Android与JavaScript交互** 1. **注入JavaScript接口** Android可以向JavaScript注入对象，使得JavaScript能调用Android的方法。首先定义一个JavaScriptInterface类： ```java @JavascriptInterface ...
总结，Android中的WebView结合JavaScript交互能实现丰富的用户体验，包括图文混排和查看大图等功能。开发者需要熟练掌握WebView的使用，注意安全性和性能优化，以构建高质量的Android应用。通过上述知识点，你可以在...
总结，Android中的WebView与JavaScript交互是一个强大且常用的功能，通过它我们可以实现原生应用与网页内容的深度融合。理解并熟练运用这些知识点，将有助于提升应用的用户体验和功能多样性。但同时，也必须关注安全...
更重要的是，Webview提供了与JavaScript交互的能力，使得Android应用能够与网页中的JavaScript代码进行通信，实现两者之间的深度集成。这种交互机制使得开发者可以充分利用HTML5的特性，同时结合Android原生功能，...
本节我们将深入探讨Android WebView与JavaScript之间的交互机制，以及如何实现两者之间的通信。 一、WebView基本使用 在Android中，首先需要在布局文件中添加WebView组件，并在Java代码中初始化和加载网页： ```...
本篇文章将深入探讨如何在Android环境下使用Webview，特别是如何实现Java与JavaScript的交互，以及如何利用Webview与Android系统组件如Activity进行通信。 一、Webview的基本使用 Webview是Android SDK中的一个类，...