JavaScript与Android之间的交互

最新推荐文章于 2024-11-09 15:05:08 发布

原创最新推荐文章于 2024-11-09 15:05:08 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #android #string #safari #function #animation

android 同时被 3 个专栏收录

4 篇文章

订阅专栏

javascript

3 篇文章

订阅专栏

html

3 篇文章

订阅专栏

本文介绍如何利用JavaScript在webview中调用Android端的方法，实现动态图表生成，适用于开发图表类项目，无需原生代码。通过示例展示如何在Android端配置WebView并传递数据给JavaScript脚本来生成图表。

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>

效果图：