首页 > 移动平台 > 详细

Android与H5互调

时间:2017-04-28 11:16:01      阅读:302      评论:0      收藏:0      [点我收藏+]

前言

        微信,微博,微商,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);
    }

        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>

        Java调用javaScript:

/**
 * Java调用javaScript
 * @param numebr
 */
private void login(String numebr) {
    webView.loadUrl("javascript:javaCallJs("+"‘"+numebr+"‘"+")");
    setContentView(webView);
}

        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()" />

案例二: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>

        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");

    }

 }

        3_加载页面

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

        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‘;
    }
}

        5_配置Javascript接口

//设置支持js调用java
webView.addJavascriptInterface(new AndroidAndJSInterface(),"android");

        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);
    }
}

案例三: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>

        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");

    }

        3_加载JsCallJavaCallPhone.html页面

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

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

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

 }

        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);
        }
    }

        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>

Android与H5互调

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!