JavaScript与Android交互

本篇博客将对HighChart 作一些简单介绍,还有就是如何在 Android 端使用,以及大多数朋友都关心的,如何与Android 端后台数据交互,数据的传输相关难点的解决。
(1)Android调用JavaScript方法
(2)JavaScript调用Android方法

一、HighCharts介绍
折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势。本文将结合Highcharts,在Android中由获取的数据生成一个气温变化折线图。

二、Android导入HighCharts 
首先,新建Android项目,在assets文件夹下新建web文件夹,在web里再放上js,目录如下(先忽略那些js文件):

主要有这5个js文件(jQuery可以不要), 点我下载 点我下载

三、Android端配置
使用webview作为容器来加载html页面:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/threeday_view"
        android:layout_height="match_parent"
        android:layout_width="match_parent" />

</RelativeLayout>
Java关键代码 Android调用JavaScript方法:
private void findView(View view){
        mWebView = (WebView) view.findViewById(R.id.threeday_view);
        WebSettings settings = mWebView.getSettings();

        settings.setJavaScriptEnabled(true);
        settings.setUseWideViewPort(true);//设置此属性,可任意比例缩放
        settings.setLoadWithOverviewMode(true);
        settings.setBuiltInZoomControls(true);
        settings.setSupportZoom(true);
        settings.setRenderPriority(WebSettings.RenderPriority.HIGH);
        settings.setDisplayZoomControls(true);
        settings.setLoadWithOverviewMode(true);
        settings.setSupportMultipleWindows(true);
        settings.setLoadsImagesAutomatically(true);

        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                getParms();
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
               super.onProgressChanged(view, newProgress);
            }
        });
        mWebView.loadUrl("file:///android_asset/threeday.html");
    }


    /调用JS,传递参数给JS
    public void getParms() {
 	String[] array = new String[]{"2016-10-10","2016-10-11","2016-10-12","2016-10-	13","2016-10-14","2016-10-15","2016-10-16"};
        List<String> weeks = new ArrayList<String>();
        List<String> states = new ArrayList<String>();
        List<Integer> lowTemps = new ArrayList<Integer>();
        List<Integer> highTemps = new ArrayList<Integer>();
        List<String> windDirects = new ArrayList<String>();
        List<String> windPowers = new ArrayList<String>();
        for(int i = 0;i < 7;i++){
            states.add("晴天");
            lowTemps.add(17+i);
            highTemps.add(22+i);
            windDirects.add("东风");
            windPowers.add("二级");
        }
        Gson mGson = new Gson();
        weeks.addAll(Arrays.asList(array));
        Parms parms = new Parms(weeks,states,lowTemps,highTemps,windDirects,windDirects);
        //这里调用JS方法并传递参数
        mWebView.loadUrl("javascript:showData('" + mGson.toJson(parms) + "')");
    }

四、Html
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>

    <style type="text/css">
        ${demo.css}
    </style>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/highcharts.js"></script>
    <script src="js/exporting.js"></script>
    <script src="js/no-data-to-display.js"></script>
    <script type="text/javascript">

     var container;

      var options1 = {
          chart: {
               type: 'line',  //默认图表类型line, spline, area, areaspline, column, bar, pie , scatter
               marginRight:5,
               renderTo:'container'
        },
          title: {
            text: '最近15天气温',
            x: -20 //center
        },
        subtitle: {
            text: '来源: 极速数据',
            x: -20
        },
        xAxis: {
            categories: []
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: '最高气温',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2]
        }, {
            name: '最低气温',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0]
        }]
      };



      function showData(value) {
          var data = JSON.parse(value);
          //alert(data.seriesdata);
          options1.xAxis.categories = data.weeks;
          options1.series[0].data = data.lowTemps;
          options1.series[1].data = data.highTemps;
          container =  new Highcharts.Chart(options1);
      };

    </script>
</head>

<body>
<div id="container" style="min-width: 280px; height: 500px; margin: 0 auto"></div>
</body>
</html>
五、效果图



下面是JavaScript调用Android方法
//.....同上
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- Calls into the javascript interface for the activity -->
<!-- 从HTML文件中调用activity中的函数 demo对应addJavascriptInterface(new DemoJavaScriptInterface(), "demo");-->
<!-- 也就是从HTML到android程序 留意window.demo.clickOnAndroid()这句话 -->
<a onClick="window.demo.clickOnAndroid()">确定</a>
</body>

private void findView(View view){
        //....同上
        mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
    }
       
    final class DemoJavaScriptInterface {
        DemoJavaScriptInterface() {
        }

        /**
         * This is not called on the UI thread. Post a runnable to invoke
         * <p/>
         * loadUrl on the UI thread.
         */
        @JavascriptInterface
        // 注意这里的名称。它为clickOnAndroid(),注意,注意,严重注意
        public void clickOnAndroid() {
            /*
            handler.post这个函数的作用是把Runnable里面的run方法里面的这段代码发送到消息队列中,等待运行。
            如果handler是以UI线程消息队列为参数构造的,那么是把run里面的代码发送到UI线程中,等待UI线程运行这段代码。
            如果handler是以子线程线程消息队列为参数构造的,那么是把run里面的代码发送到子线程中,等待子线程运行这段代码。
             */
            mHandler.post(new Runnable() {
                public void run() {
                    Toast.makeText(getContext(), "后面8天是模拟数据", Toast.LENGTH_SHORT).show();
                }
            });
        }
    }



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值