Android JS双向调用

Android手机中内置了一款高性能webkit内核，该内核完美封装到了WebView组件中，而从js中直接调用java方法和在java中直接调用js方法更是让我们看到了WebView的强大，下面这个小例子介绍了怎样在js和java中双向调用方法

1.首先是布局文件main.xml

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

2.在assets目录下新建一个index.html文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title></title>
    <script type="text/javascript">
    	//data数据类型为字符串，字符串里面是数组，每一个数组元素为一个json对象，例如"[{id:1,name:'张三',phone:'135656461'},{id:2,name:'李四',phone:'1896561'}]"
        function setContactInfo(data)
        {
            var tableObj = document.getElementById("contact");
            var jsonObjects = eval(data);	//通过eval方法处理得到json对象数组
            for(var i=0; i<jsonObjects.length; i++)
            {
                   var jsonObj = jsonObjects[i];	//获取json对象
                   var tr = tableObj.insertRow(tableObj.rows.length);	//添加一行
                   //添加三列
                   var td1 = tr.insertCell(0);
                   var td2 = tr.insertCell(1);
                   var td3 = tr.insertCell(2);

                   td1.innerHTML = jsonObj.id;
                   td2.innerHTML = jsonObj.name;
                   td3.innerHTML = jsonObj.phone;
            }
        }

    </script>
</head>
<!--onload="javascript:myObject.init()调用服务器端init方法-->
<body onload="javascript:myObject.init()">
      <table id="contact">
          <tr>
              <td>编号</td>
              <td>姓名</td>
              <td>电话</td>
          </tr>
      </table>
</body>
</html>

3.接着是Activity

package com.lamp.activity;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.WebView;

public class HTMLActivity extends Activity {
	private WebView webView = null;
	public Handler handler = new Handler();
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        webView = (WebView)this.findViewById(R.id.webView);
        //设置字符集编码
        webView.getSettings().setDefaultTextEncodingName("UTF-8");
        //开启JavaScript支持
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new MyObject(this,handler), "myObject");
        //加载assets目录下的文件
        String url = "file:///android_asset/index.html";
        webView.loadUrl(url);
    }
}

4.然后是绑定js的类MyObject

package com.lamp.activity;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.os.Handler;
import android.webkit.WebView;

public class MyObject {
	private Handler handler = null;
	private WebView webView = null;

	public MyObject(HTMLActivity htmlActivity, Handler handler) {
		this.webView = (WebView)htmlActivity.findViewById(R.id.webView);
		this.handler = handler;
	}

	public void init(){
		//通过handler来确保init方法的执行在主线程中
		handler.post(new Runnable() {

			public void run() {
				//调用客户端setContactInfo方法
				webView.loadUrl("javascript:setContactInfo('" + getJsonStr() + "')");
			}
		});
	}

	public static String getJsonStr(){
		try {
			JSONObject object1 = new JSONObject();
			object1.put("id", 1);
			object1.put("name", "张三");
			object1.put("phone", "123456");

			JSONObject object2 = new JSONObject();
			object2.put("id", 2);
			object2.put("name", "李四");
			object2.put("phone", "456789");

			JSONArray jsonArray = new JSONArray();
			jsonArray.put(object1);
			jsonArray.put(object2);
			return jsonArray.toString();
		} catch (JSONException e) {
			e.printStackTrace();
		}
		return null;
	}
}

运行项目，我们可以看到两位联系人的信息显示在了屏幕上