Android的webview通过js调用java方法

        高清下载地址：链接: 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当中去，又如何的获取数据来填充呢？这就是我们今天的主题。

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

        下面我们来讲如何实现，首先创建一个项目，把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写的代码了，这样图表的内容我们就可以联网获取了。我们也可以做成离线的方式，有网的时候联网获取数据做个本地存储，然后进来图表界面的时候判断一下有没有网络，有网络获取网上的，没有则使用本地的。

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

扫二维码快速加群：

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