Android与H5实现页面交互

一、Android想要与H5页面实现交互，其实就是java与h5的web页面中的JS通讯，从而实现交互效果。博客的主要内容为：androd加载Html页面、android客户端怎样调用H5中的方法、H5如何调用android中的方法。

 

二、功能实现

1、android中通过webview加载显示H5页面，webview既可以加载本地的Html页面，也可以加载一个网址。

//设置页面支持JavaScript
wvPrinter.getSettings().setJavaScriptEnabled(true);
//        wvPrinter.loadUrl("https://www.baidu.com/");
//本地Html文件保存在asset文件夹中
wvPrinter.loadUrl("file:///android_asset/Printer.html");

2、H5页面调用Java中的方法，必须设置webview支持JavaScript。再打开JS接口。这个方法需要传入两个参数，一个是与H5页面交互的类对象，另一个是该类的别名，H5页面的JS需要通过别名找到交互类中的方法。所以这个别名也是十分重要的。

//打开js接口給H5调用，参数1为本地类名，参数2为别名；h5用window.别名.类名里的方法名才能调用方法里面的内容，
// 例如：window.android.XXX();
wvPrinter.addJavascriptInterface(new PrinterJsInteration(), "android");

        写一个传入JS接口的类，在该类中定义需要被JS调用的方法,每个与H5交互的方法都需要添加 @JavascriptInterface注解，否则JS无法找到该方法。自定义的方法可以带参，也可以有返回值，这样就可以与H5页面传递数据了。

/**
 * JS交互类
 */
private class PrinterJsInteration {

    @JavascriptInterface
    public boolean PrinterSample(String username) {
        Toast.makeText(MainActivity.this, "JS页面传递给android的用户名为：" + username,
                Toast.LENGTH_SHORT).show();
        Log.e(TAG, "JS页面传递给android的用户名为：" + username + "开始打印示列页面");
        return true;
    }
}

android部分的代码完成了，现在开始修改H5页面的方法。H5页面中需要在JS的方法中通过windows.(android中定义的与H5交互的类别名).(交互类中的方法)。完成这些操作，在H5页面调用Java类中的方法就大功告成了。

<script>
        <!--调用Java中的方法 window.android定义类别名.类方法-->
        function printSample(){
            var printComplete=window.android.PrinterSample("Greetty")

            //判断是否打印完成
            if(printComplete){
              document.getElementById("printer").innerHTML = "示列页面打印完成"
            }else{
              document.getElementById("printer").innerHTML = "示列页面打印失败，请检查打印机状态"
            }
        }
</script>

3、H5中调用Java类中的方法完成后，我们还需考虑如何在Java类中调用H5页面中的方法，也就是调用JS定义的方法，实现也是非常简单。也只需三步就可以实现了。

在H5页面中的JavaScript中定义一个方法，该方法供Java类调用。android调用H5页面的给方法后，H5做出相应的响应操作，如果我们需要回调一个方法到Java类中，通过是上面介绍的在JS中调用Java类的方法即可，这样也就可以理解为H5页面方法的回调函数。

<script>
        <!--JS中的方法，该方法供java调用-->
        function myJsFunction(){
             document.getElementById("printer").innerHTML="我是JS中的方法，我被JAVA类调用了..."
             window.android.getJsMethod("hello,我的名字叫JS AND HTML")
        }
</script>

完成了JS中的方法后，我们就可以在Java类中调用JS中的方法了。通过loadUrl方法，参数的固定为：如果JS中的方法是无参方法，参数为："javascript:myJsFunction()",如果JS中的方法为带参方法,传入参数为："javascript:myJsFunction('参数1','参数2')"，myJsFunction是JS中定义的方法名字，带参方法传入参数个数及参数类型都应与JS方法中的一致。

@OnClick(R.id.btn_get_js_method)
public void onClick(View v){
    wvPrinter.loadUrl("javascript:myJsFunction()");
    Toast.makeText(this, "Android 调用JS方法", Toast.LENGTH_SHORT).show();
}

JS的回调方法如下：

@JavascriptInterface
public void getJsMethod(String Message) {
    Toast.makeText(MainActivity.this, "我是java类，我从JS中获取到的数据为：" + Message,
            Toast.LENGTH_SHORT).show();
    Log.e(TAG, "我是java类，我从JS中获取到的数据为：" + Message);
}

android与H5交互听上去很复杂，但简单的功能实现起来还是比较简单的，但是这仅仅是入门知识，更强大的交互效果还需继续深入学习研究。

三、如果需要实现H5页面与android页面的跳转及参数传递，我们可以通过Arouter或其他跳转路由实现跳转功能。详情请参考博客：http://blog.csdn.net/cgt_cgt/article/details/78668150