Android的webview通过js调用java方法

时间: 2015-09-11 01:00 栏目: Android 浏览: 3207 赞: 2 踩: 7 字体:

以下为本篇文章全部内容:


        高清下载地址:链接: http://pan.baidu.com/s/1jGGSxLW 密码: ckd4

                                http://yunpan.cn/cmGhhDieTA6en (提取码:9719)                                    

       我本身是一位web开发者,在进行Android开发的时候为了提高开发效率经常会用html5和原生混合来写,当然除了我还其他公司也会这样用。例如淘宝、腾讯、还有大名鼎鼎的约炮软件陌陌都有使用这些混合开发方式,为什么?因为节省成本还有开发效率高啊,可更换速度快等优点,还有可以加载服务器上的html文件,也就是说我有些页面可以放到网上,然后通过webview来调用这个页面。

        今天我讲的教程是通过webview加载html的图形,众所周知在Android里面画图表的话比较浪费时间,然而通过html5和js来画的话相当的轻松,网上有很多做得相当不错的第三方js库已经实现得很好了。如:Highcharts、ECharts这些都已经做得相当不错的了。那么我们如何把这些潜入到Android当中去,又如何的获取数据来填充呢?这就是我们今天的主题。

        Untitled.gif

上图就是我们的实例图,最终的运行效果。

        下面我们来讲如何实现,首先创建一个项目,把html的静态界面放进去,然后通过webview进行加载,给予javascript执行,这样就可以了。然后通过js调用java的方法获取数据,再填充到js里面去绘画出图表。请看代码

        MainActivity.java

public class MainActivity extends AppCompatActivity {
    private WebView wv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        wv = (WebView) findViewById(R.id.wv);//获取webview
        wv.getSettings().setJavaScriptEnabled(true);//允许执行js
        wv.loadUrl("file:///android_asset/index.html");//加载html
        wv.addJavascriptInterface(new Sunny(),"sunny");//开放接口给js调用
    }

    public final class Sunny{
        //@JavascriptInterface 是注解,告诉Android这个方法是给js调用的
        @JavascriptInterface
        public String getJsonString(){
            JSONObject jsonObject = new JSONObject();
            try {
                jsonObject.put("zhijie",10);
                jsonObject.put("youxiang",40);
                jsonObject.put("luanmeng",5);
            } catch (JSONException e) {
                e.printStackTrace();
            }
            Log.i("msg",jsonObject.toString());
            return jsonObject.toString();
        }
        
        //打印Toast方法
        @JavascriptInterface
        public void alert(String msg){
            Toast.makeText(MainActivity.this,msg,Toast.LENGTH_LONG).show();
        }
        
        //打开新activity方法
        @JavascriptInterface
        public void jump(){
            Handler handler = new Handler();
            handler.post(new Runnable() {
                @Override
                public void run() {
                    startActivity(new Intent(MainActivity.this, SunnyActivity.class));
                }
            });

        }
    }
}

        js调用部分的代码我就不全部上传了,在视频教程里面会有得查看。

        index.html

<script type="text/javascript">
var result = sunny.getJsonString();
var data = eval("("+result+")");
</script>

        如果想要打印Toast的话同样需要声明一个js接口的方法,给js调用。java代码上面已经给出了,js的代码如下:

<input type="button" onclick="sunny.alert('我是消息')" value="点我出来一条消息" />

        如果是打开一个新的activity

<input type="button" onclick="sunny.jump()" value="点我打开新的activity" />

这样我们就可以轻松的通过js调用java写的代码了,这样图表的内容我们就可以联网获取了。我们也可以做成离线的方式,有网的时候联网获取数据做个本地存储,然后进来图表界面的时候判断一下有没有网络,有网络获取网上的,没有则使用本地的。

谢谢大家对本博客的支持,本站专注原创技术文章,三更半夜冒着感冒写文章不易,且看且珍惜博主的心得。请转载带上本文链接注明出处。

扫二维码快速加群:

qun.png

如果大家有什么疑问可以加我QQ327388905进行解答,也可以加入交流群ThinkPHP交流群