您的位置：首页 > 移动开发 > Android开发

JavaScript与Android之间的交互

2012-09-04 17:20 351 查看

javascript直接调用Android中的方法，例子：webview直接加载html，html中的javascript调用android端的方法。此例子可以有助于android开发者开发图表类的项目，图表不需要原生代码，只需用脚本实现。图表的脚本生成可以参考：http://www.ichartjs.cn

Android端：

RIAExample.class

package com.example;

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

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebView;

public class RIAExample extends Activity{

private WebView web;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

web = (WebView)this.findViewById(R.id.web);

web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setBuiltInZoomControls(true);

web.addJavascriptInterface(this,"phone");  //通过“phone”与javascript交互；

web.loadUrl("file:///android_asset/form.html");
}

public String getData(){
return "[{name : 'IE',value : 35.75,color:'#9d4a4a'},{name : 'Chrome',value : 29.84,color:'#5d7f97'},{name : 'Firefox',value : 24.88,color:'#97b3bc'},{name : 'Safari',value : 6.77,color:'#a5aaaa'},{name : 'Opera',value : 2.02,color:'#778088'},{name : 'Other',value : 0.73,color:'#6f83a5'}]";
}

public JSONArray getJsonArray(){
try {
JSONArray data = new JSONArray();
JSONObject temp = new JSONObject();
temp.put("name", "other");
temp.put("value", 0.73);
temp.put("color", "#6f83a5");
data.put(temp);
JSONObject temp1 = new JSONObject();
temp1.put("name", "IE");
temp1.put("value", 35.75);
temp1.put("color", "#a5c2d5");
data.put(temp1);
JSONObject temp2 = new JSONObject();
temp2.put("name", "Chrome");
temp2.put("value", 29.84);
temp2.put("color", "#cbab4f");
data.put(temp2);
JSONObject temp3 = new JSONObject();
temp3.put("name", "Firefox");
temp3.put("value", 24.88);
temp3.put("color", "#76a871");
data.put(temp3);
JSONObject temp4 = new JSONObject();
temp4.put("name", "Safari");
temp4.put("value", 6.77);
temp4.put("color", "#9f7961");
data.put(temp4);
JSONObject temp5 = new JSONObject();
temp5.put("name", "Opera");
temp5.put("value", 2.02);
temp5.put("color", "#a55f8f");
data.put(temp5);
System.out.println(data.toString());
return data;
} catch (JSONException e) {
// TODO: handle exception
Log.e("TAG", "JSONException!!!");
return null;
}

}

public String getParams(){
return "{render : 'canvasDiv',data: data,title : '2012',legend : {enable : true},animation:true,showpercent:true,decimalsnum:2,width : 640,height : 480,radius:140}";
}

public String getType(){
return "new iChart.Pie2D(params)";
}

public void debugout(String info){
Log.i("ss",info);
System.out.println(info);
}

}

assets文件夹：

html源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ichartjs例子</title>
<script type="text/javascript" src="js/ichart-1.0.min.js"></script>

<script type="text/javascript">
window.onload = function(){
window.phone.debugout("inside js onload");

$(function(){
window.phone.debugout("----------in iChart.Pie2D function-------");
var data_string = window.phone.getData();
eval("var data =" + data_string);

var params_string = window.phone.getParams();
eval("var params =" + params_string);

var type_string = window.phone.getType();
eval("var chart =" + type_string);

chart.draw();
window.phone.debugout("----------in iChart.Pie2D function, after draw()-------");
});

};
</script>

</head>
<body>
<div id='canvasDiv'></div>
</body>
</html>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航