本篇将讲解一个简单的Android与JavaScript之间的简单调用的小程序
效果图
工程结构
HTMLActivity.java代码
package com.example.javatojs;
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.activity_main);
webView = (WebView)this.findViewById(R.id.webView);
//设置字符集编码
webView.getSettings().setDefaultTextEncodingName("UTF-8");
//开启JavaScript支持
webView.getSettings().setJavaScriptEnabled(true);
//传递一个Java对象，同时给他命名，这个对象可以在js中调用这个对象的方法
webView.addJavascriptInterface(new MyObject(this,handler), "myObject");
//加载assets目录下的文件
String url = "file:///android_asset/index.html";
webView.loadUrl(url);
}
}
MyObject.java
package com.example.javatojs;
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绑定的Activity的主线程中
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;
}
}
activity_main.java
<?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:id="@+id/webView"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>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");
//通过eval方法处理得到json对象数组
var jsonObjects = eval(data);
for (var i = 0; i < jsonObjects.length; i++) {
//获取json对象
var jsonObj = jsonObjects[i];
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>
<!--调用服务器端init方法-->
<body onload="javascript:myObject.init()">
<table id="contact">
<tr>
<td>编号</td>
<td>姓名</td>
<td>电话</td>
</tr>
</table>
</body>
</html>
源代码下载
如有疑问，可留言