【转】Android与H5互调

来源：互联网发布：注册表怎么修改mac地址编辑：程序博客网时间：2024/06/05 00:29

原文地址：http://blog.csdn.net/hpc19950723/article/details/70881226

前言

微信，微博，微商，QQ空间，大量的软件使用内嵌了H5，这个时候就需要了解Android如何更H5交互的了；有些外包公司，为了节约成本，采用android内嵌H5模式开发，便于在iOS上直接复用页面，最终解决成本。
为什么学android也要学h5？
Android很多软件都有内嵌H5的,有什么用处、优势？节约成本，提高开发效率。

实现的原理是什么？

本质是:Java代码和JavaScript调用
案例一：Java与js简单互调
首先，在Android代码中加载H5页面：

private void initWebView() {        webView = new WebView(this);        WebSettings webSettings = webView.getSettings();        //设置支持javaScript脚步语言        webSettings.setJavaScriptEnabled(true);        //支持双击-前提是页面要支持才显示        webSettings.setUseWideViewPort(true);        //支持缩放按钮-前提是页面要支持才显示        webSettings.setBuiltInZoomControls(true);        //设置客户端-不跳转到默认浏览器中        webView.setWebViewClient(new WebViewClient());        //加载网络资源        //webView.loadUrl("http://atguigu.com/teacher.shtml");        webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html");        //显示页面        setContentView(webView);    }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

JavaAndJavaScriptCall.html:

<html><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <script type="text/javascript">    function javaCallJs(){         document.getElementById("content").innerHTML +=                "<br\>java调用了js无参函数";    }    function javaCallJs(arg){         document.getElementById("content").innerHTML =             ("欢迎："+arg );    }   function showDialog(){      alert("谷粉们你好,我是来自javascript");   }    </script></head><body><div align="left" id="content"> 谷粉</div><input type="button" value="点击Android被调用" onclick="window.Android.showToast()" /></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Java调用javascript:

/** * Java调用javaScript * @param numebr */private void login(String numebr) {    webView.loadUrl("javascript:javaCallJs("+"'"+numebr+"'"+")");    setContentView(webView);}1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

JavaScript调用Java

    /**     * js可以调用该类的方法     */    class AndroidAndJSInterface{        @JavascriptInterface        public void showToast(){            Toast.makeText(JavaAndJSActivity.this, "我被js调用了", Toast.LENGTH_SHORT).show();        }    }   //与此同时需要在webview当中注册，后面的“Android”与html中的对应：   webView.addJavascriptInterface(new AndroidAndJSInterface(),"Android");   //html里的点击事件实现：<br>   <input type="button" value="点击Android被调用" onclick="window.Android.showToast()" />1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13

案例二：H5页面调用Android播放视频
了解了简单调用，下面讲的这个也就简单了:
1_JsCallJavaVideoActivity的布局和实例化控件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.atguigu.androidandh5.JsCallJavaVideoActivity">    <WebView        android:id="@+id/webview"        android:layout_width="match_parent"        android:layout_height="match_parent"/></RelativeLayout>1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2_实例化控件并且配置

public class JsCallJavaVideoActivity extends Activity {    private WebView webView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_js_call_java_video);        webView = (WebView) findViewById(R.id.webview);        WebSettings webSettings = webView.getSettings();        //设置支持javaScript脚步语言        webSettings.setJavaScriptEnabled(true);        //支持双击-前提是页面要支持才显示//        webSettings.setUseWideViewPort(true);        //支持缩放按钮-前提是页面要支持才显示        webSettings.setBuiltInZoomControls(true);        //设置客户端-不跳转到默认浏览器中        webView.setWebViewClient(new WebViewClient());        //加载网络资源//        webView.loadUrl("http://atguigu.com/teacher.shtml");         webView.loadUrl("file:///android_asset/RealNetJSCallJavaActivity.htm");    } }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

3_加载页面

//加载本地资源        webView.loadUrl("file:///android_asset/RealNetJSCallJavaActivity.htm");1
1

4_参照js代码写Java被调用代码

url = "/mobiles/interActive/65411";var videourl = "http://10.0.2.2:8080/yellow.mp4";var itemid = "65411";var itemdesc = "1级单杀小龙，5级单杀峡谷先锋！";    var itempic = "http://avatar.anzogame.com/pic_v1/lol/news/20160507/spic65411h572d6eaf.jpg";var itemtitle = "6.9玛尔扎哈OP套路教程";var obj_play = document.getElementById('play');var obj_download = document.getElementById('download');if(obj_play != null) {    obj_play.ontouchstart = function() {        this.className = 'inter_click';        javascript:android.playVideo(itemid, videourl, itemtitle);        ajaxrequest('/stat/item', "POST", true, {type:'play', id:itemid});    }    obj_play.ontouchend = function() {        this.className = 'inter';    }}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

5_配置Javascript接口

//设置支持js调用javawebView.addJavascriptInterface(new AndroidAndJSInterface(),"android");1
2
3
1
2
3

6_Javascript接口类

class AndroidAndJSInterface {    /**     * 该方法将被js调用     * @param id     * @param videoUrl     * @param tile     */    @JavascriptInterface    public void playVideo(int id,String videoUrl,String tile){        //调起系统所有播放器        Intent intent = new Intent();        intent.setDataAndType(Uri.parse(videoUrl),"video/*");        startActivity(intent);    }}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

案例三：H5页面调用Android拨打电话
1_JsCallJavaCallPhoneActivity布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.atguigu.androidandh5.JsCallJavaVideoActivity">    <WebView        android:id="@+id/webview"        android:layout_width="match_parent"        android:layout_height="match_parent"/></RelativeLayout>1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13

2_初始化WebView并且配置

private WebView webView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_js_call_java_video);        webView = (WebView) findViewById(R.id.webview);        WebSettings webSettings = webView.getSettings();        //设置支持javaScript脚步语言        webSettings.setJavaScriptEnabled(true);        //支持双击-前提是页面要支持才显示//        webSettings.setUseWideViewPort(true);        //支持缩放按钮-前提是页面要支持才显示        webSettings.setBuiltInZoomControls(true);        //设置客户端-不跳转到默认浏览器中        webView.setWebViewClient(new WebViewClient());        //设置支持js调用java        webView.addJavascriptInterface(new AndroidAndJSInterface(), "Android");        //加载本地资源//        webView.loadUrl("http://atguigu.com/teacher.shtml");        webView.loadUrl("file:///android_asset/JsCallJavaCallPhone.html");    }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

3_加载JsCallJavaCallPhone.html页面

//加载本地资源//    webView.loadUrl("http://atguigu.com/teacher.shtml");     webView.loadUrl("file:///android_asset/JsCallJavaCallPhone.html");1
2
3
4
5
1
2
3
4
5

4_从java代码传递json数据给javascript

class AndroidAndJSInterface {    /**     * 该方法将被js调用,用于加载数据     */    @JavascriptInterface    public void showcontacts() {        // 下面的代码建议在子线程中调用        String json = "[{\"name\":\"阿福\", \"phone\":\"18600012345\"}]";        // 调用JS中的方法        webView.loadUrl("javascript:show('" + json + "')");    } }1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13

5_拨打电话代码

class AndroidAndJSInterface {        /**         * 该方法将被js调用,用于加载数据         */        @JavascriptInterface        public void showcontacts() {            // 下面的代码建议在子线程中调用            String json = "[{\"name\":\"阿福\", \"phone\":\"18600012345\"}]";            // 调用JS中的方法            webView.loadUrl("javascript:show('" + json + "')");        }        /**         * 拨打电话         * @param phone         */        public void call(String phone) {            Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));//           startActivity(intent);        }    }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

6_h5页面：

<html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>Insert title here</title>        <script type="text/javascript">            function show(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>

阅读全文

0 0