转:http://liaokang-java.iteye.com/blog/1168832
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>
- <!--οnlοad="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;
- }
- }
运行项目,我们可以看到两位联系人的信息显示在了屏幕上