android WebView实现java与javascript的交互

来源：互联网发布：淘宝实拍保护平台编辑：程序博客网时间：2024/05/17 13:43

转自：http://ff20081528.iteye.com/blog/1489565

最近在学习html5，网上有很多文章都在分析预测移动互联的未来，很多人的观点是html5会是移动互联的未来，但是不可能完全取代app应用。未来很多的应用将会是html5+native来架构。所以自己想写一个类似的demo，在网上找了好久也没找到一个比较好的文章。为此自己写了一个，主要就是用了WebView类，在此贴出来与大家分享。

1,demo的结构图

2,main.xml

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

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

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

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

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);  
        }  
    }  
      
}  