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

JavaScript与Android之间的交互

2016-11-30 16:53 447 查看

http://blog.csdn.net/cai1213/article/details/7951370

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

Android端：

RIAExample.class

[java] view
plain copy

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源码：

[html] view
plain copy

<!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>

效果图：

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

标签：

相关文章推荐

新的分享

章节导航