【Android 进阶】原生Android结合H5混合开发小结

混合开发概述

微信，微博以及现在市面上大量的软件使用内嵌了H5页面；有些外包公司，为了节约成本，采用Android内嵌H5模式开发，便于在iOS上直接复用页面， 从而提高开发效率。

实现的原理：

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

Android和H5互调案例:

一.java调用js

WebView的基本设置：

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

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

 //加载本地资源       
 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
23
24
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Java调用js原理就是Java代码调用了Js里面的函数。

核心Java代码段：

//登录功能里，java代码调用了js里面的JavaCallJs函数实现将name传到JS中，这样JS页面可以显示该用户名了。
   private void login(String name) {
        webView.loadUrl("javascript:javaCallJs(" + "'" + name + "'" + ")");
        setContentView(webView);
    }

 
 
1
2
3
4
5
6
 
 
1
2
3
4
5
6

核心js代码段：

//上面Java核心代码执行将调用下面JS代码

 <script type="text/javascript">
    function javaCallJs(arg){
         document.getElementById("content").innerHTML =
             ("欢迎："+arg );
    }
    </script>

 
 
1
2
3
4
5
6
7
8
9
 
 
1
2
3
4
5
6
7
8
9

二.JavaScript调java

1.在初始化webview代码中配置JavaScript接口：

        //设置支持js调用java，调用时候将执行第一个参数的接口类
        webView.addJavascriptInterface(new AndroidAndJSInterface(),"Android");
//第二个参数为执行接口类方法的标示，与js相呼应
 
 
1
2
3
 
 
1
2
3

2.在该Activity中实现Javascript接口类：

  /**
     * js可以调用该类的方法
     */
    class AndroidAndJSInterface{
        @JavascriptInterface
        public void showToast(){
            Toast.makeText(JavaAndJSActivity.this, "我被js调用了", Toast.LENGTH_SHORT).show();
        }
    }
 
 
1
2
3
4
5
6
7
8
9
 
 
1
2
3
4
5
6
7
8
9

3_JavaScript中调用java代码的核心代码段：

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

 
 
1
2
 
 
1
2

执行流程：

点击js页面的button，将执行js的onclick方法（οnclick=”window.Android.showToast()”），根据该Android标示与webview配置接口方法的第二个参数相匹配，然后执行js接口实现类的showToast()方法。从而实现js代码调用java代码。

H5页面调用Android播放视频

基本思路和上面的例子（执行流程）一样，业务逻辑层面来说播放视频主要是从H5页面点击播放跳转（把视频播放的url传递给Java层）并触发Java实现播放视频的代码即可。 
1. webview中的核心配置：

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

2.在该Activity中实现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

3.JavaScript中调用java代码的核心代码段：

  javascript:android.playVideo(itemid, videourl, itemtitle);
 
 
1
 
 
1

H5页面调用Android拨打电话

思路都是一样的，点击H5页面把电话号码传到java层并调用拨号核心代码即可。

在该Activity中实现Javascript接口类：

 @JavascriptInterface
        public void call(String phone) {
            Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));
            if (ActivityCompat.checkSelfPermission(JsCallJavaCallPhoneActivity.this, Manifest.permission.CALL_PHONE) != PackageManager.PERMISSION_GRANTED) {
                return;
            }
            startActivity(intent);

        }
 
 
1
2
3
4
5
6
7
8
9
 
 
1
2
3
4
5
6
7
8
9

重点内容 
1.如果调用如下方法时候报错，那么可以在Javascript接口类的具体实现方法上面加注解：@JavascriptInterface，或者把targetSdkVersion 改为 16（一般不适用）

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

2.该申请的权限不要忘了在AndroidManifest.xml中加上。