JavaScript与Android之间的交互

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文件夹：

JavaScript与Android之间的交互

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>

效果图：

JavaScript与Android之间的交互

转自：https://blog.****.net/cai1213/article/details/7942791?utm_source=copy

JavaScript与Android之间的交互

相关推荐