[Android开发] Android和Html5 JavaScript交互了解入门

来源：互联网发布：外培计划知乎编辑：程序博客网时间：2024/06/11 13:59

一、一些疑问?

1. Android和H5 交互是什么意思?

Android利用WebView加载网页，然后网页中的JavaScript 和 Android原生的Java 互相调用。为什么要说成和H5交互呢，这只是一种噱头。

2. 为什么学Android也要学H5

Android很软件都有内嵌H5，QQ 微信微博淘宝and so on

3. 有什么用处优势

能同时应用在 android、ios、前端，节约成本，提高开发效率。

4. 实现的原理是什么?

本质是: Java代码和Javascript的调用
H5页面是: Html的扩展，Javascript处理页面的逻辑

二、Java调用js

Android4.4以上使用evaluateJavascript方法调用，4.4以下直接load即可。

    /**     * 调用网页的javaScript 方法代码     * @param name 用户名     * @param pass 密码     */    private void login(String name,String pass){        //android4.4以及以上可以evaluateJavascript方法，        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){            wvContent.evaluateJavascript("javascript:javaCallJsLogin("+"'"+name+"'"+","+"'"+pass+"')",null);        }else{            // 4.4 以下            //调用当前网页里面的javaCallJsLogin的js方法，并且传递name和pass这两个参数过去            webView.loadUrl("javascript:javaCallJsLogin("+"'"+name+"'"+","+"'"+pass+"')");        }    }

三、JavaScript调用Java

1. 编写接口类

    class JsInterface{        /**         * 将可以被js调用。方法一定要public，不然调用不了         * JavascriptInterface 兼容高的api         */        @JavascriptInterface         public void showToast(){            Toast.makeText(LoginActivity.this, "Android代码弹出的Taost", Toast.LENGTH_SHORT).show();        }    }

2. WebView添加接口类

在webview loadurl之前添加这个方法

//添加js调用接口类，通过Android这个字段 调用这个类的方法，记得在JsInterface里面的方法上加 @JavascriptInterface         webView.addJavascriptInterface(new JsInterface(),"Android");

3. js执行接口类对应的方法

<input type="button" value="点击这里调用Android代码" onclick="window.Android.showToast()"/>

四、例子

1. H5页面调用Android播放视频

Android端代码,loadUrl前先添加js调用接口:

//js通过android这个字段调用JsInterface 里面的代码        wvVideo.addJavascriptInterface(new JsInterface(), "android");

Android端代码，添加js调用方法

    class JsInterface {        /**         * 将会被js调用         * JavascriptInterface 兼容高api         *         * @param id    视频id         * @param path  视频路径         * @param title 视频标题         */        @JavascriptInterface        public void playVideo(int id, String path, String title) {            if (!path.isEmpty()) {                Toast.makeText(VideoActivity.this, path, Toast.LENGTH_SHORT).show();                //调用播放器,注意这里调用系统自带播放器将会播放失败                Intent intent = new Intent();                intent.setDataAndType(Uri.parse(path), "video/*");                startActivity(intent);            } else {                Toast.makeText(VideoActivity.this, "视频链接为空!", Toast.LENGTH_SHORT).show();            }        }    }

2. H5页面调用Anrdoid拨打电话

    /**     * JavaScript调用Android的方法类     */    class JsInterface{        /**         * 被js调用，用于加载联系人数据源         */        @JavascriptInterface        public void showcontacts(){            Log.e("线程",Thread.currentThread()+"");            //注意，这里要在主线程执行哦            wvVideo.post(new Runnable() {                @Override                public void run() {                    String json = "[{\"name\":\"天平\", \"phone\":\"18600012345\"}]";                    // 调用JS中的方法                    wvVideo.loadUrl("javascript:showInfo('" + json + "')");                }            });        }        /**         * js调用，拨打电话         * @param phone 手机号码         */        @JavascriptInterface        public void call(String phone) {            Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));            if (ActivityCompat.checkSelfPermission(PhoneActivity.this, Manifest.permission.CALL_PHONE) != PackageManager.PERMISSION_GRANTED) {                return;            }            startActivity(intent);        }    }

Html端代码

<html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title>电话演示</title>    <script type="text/javascript">            function showInfo(jsondata){                    var jsonobjs = eval(jsondata);                    var table = document.getElementById("personTable");                    for(var y=0; y<jsonobjs.length; y++){                        var tr = table.insertRow(table.rows.length);                        var td1 = tr.insertCell(0);                        var td2 = tr.insertCell(1);                        td2.align = "center";                        td1.innerHTML = jsonobjs[y].name;                        td2.innerHTML = "<a href='javascript:Android.call(\""+ jsonobjs[y].phone+ "\")'>"+ jsonobjs[y].phone+ "</a>";                    }            }    </script></head><body onload="javascript:Android.showcontacts()"><table border="0" width="100%" id="personTable" cellspacing="0">    <tr>        <td width="30%">姓名</td>        <td align="center">电话</td>    </tr></table></body></html>

Demo下载：
http://download.csdn.net/detail/niubitianping/9621568

1 0