Android开发学习之路--Java和Js互相调用

随着前端的火热，以前开发的快速，越来越多的native app在其中融合了h5，就拿淘宝就是很多的h5组成的，一旦出现什么节日，他都可以不用通过更新app来实现界面的改变，而且android和ios可以基本上共用一套代码。这不微信也出了小应用，感觉前端有慢慢吞噬客户端的趋势，所以得学下前端的一些知识了，要不然就落后了。对于本文就是学习下js和android的交互了。

Java和Js的通用实现

其实android和js的交互，其实主要就是android的webview和js的交互。android的webview有一个方法：addJavascriptInterface就是和js代码交互的接口。还是分析代码来的实际点吧。

1、java端代码

新建个工程HelloJavaJs，首先便是实现个界面了。比较简单，就一个webview控件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.jared.hellojavajs.MainActivity">
    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

接着编写MainActivity代码：

private void initWebView() {
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new JsInterface(), "control");
        webView.setWebChromeClient(new WebChromeClient());
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                testControl();
            }
        });
        webView.loadUrl("file:///android_asset/test.html");
    }
    private void testControl() {
        String control = "javascript:helloJava()";
        control = "javascript:helloJavaWithParam(\""+"param1"+"\")";
        control = "javascript:helloToJava()";
        webView.loadUrl(control);
    }
    public class JsInterface {
        @JavascriptInterface
        public void helloJs(String message) {
            Toast.makeText(getApplicationContext(), message, Toast.LENGTH_SHORT).show();
            //Log.d("MainActivity", "hellojs");
        }
    }

这里讲一下几个方法：

1、setJavaScriptEnabled，设置为true，就其名就知道是为了使能js的功能了。

2、addJavascriptInterface，设置一个js调用webview的一个接口。这里实现的接口是JsInterface类，然后名字是control。其中JsInterface类里面有一个helloJs方法，并且标注了@JavascriptInterface。这样js端代码调用过来就会被知道了。

3、setWebChromeClient：主要处理解析，渲染网页等浏览器做的事情，这里就用了系统默认的WebChromeClient，WebChromeClient是辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等，当然这个可以自定义，由于addJavascriptInterface方法是有漏洞的，很多开发者实现了jsbridge，就是自定义了WebChromeClient，然后封装了自己的一套协议，这个之后再分析分析。

4、setWebViewClient：就是帮助WebView处理各种通知、请求事件的，这里主要就实现了一个onPageFinished方法，主要是当页面加载完了之后再调用到js的代码。

2、js端代码

既然java端代码分析好了，那么就分析下js的代码了，这新建一个test.html文件，放在assets目录下，以为上面java代码load的路径就是这个html文件，这里简单的实现个：

<html>
    <script type="text/javascript"> 
        function helloJava() {
            alert("I'm come from java");
        }
        function helloJavaWithParam(message) {
            alert(message);
        }
        function helloToJava() {
            window.control.helloJs("I'm come from js!")
        }
    </script>
    JavaJs In Android
</html>

代码比较简单，主要就是实现了三个function，helloJava没有传入参数，就弹出一个对话框，helloJavaWithParam从java端传过来message，并弹出对话框。helloToJava会调用java端的helloJs方法，并把I’m come from js!传过去。其中的control我们在addJavascriptInterface的时候已经注册了。

3、效果展示

基本的代码也已经讲完了，那么就来测试下，看下效果了，这里只实现helloToJava方法，来看下会不会调用java代码弹出土司了，看下效果：

很明显，得到了我们需要的结果，如果一个h5的页面需要实现一个按钮，然后调用java代码，启动另一个activity就可以实现native和h5的混编了，这个就之后才做学习了。

也许会有疑问，为什么在load完页面后，调用一段代码”javascript:helloToJava()”，就可以了呢？其实这些都是浏览器的工作，调用完了页面是确保执行了test.html的代码的方法，要不然直接先调用”javascript:helloToJava()”的话会报错的。

学习了通用的实现，也就是调用android的原生的代码，那么接着我们来学习下通过自定义WebChromeClient来实现，也就是jsbridge的简单实现，这里可以参考文章：Android JSBridge的原理与实现。关于Jsbridge的实现原理，后续在讲解，也可以下载代码先了解一下。

源码参考github