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控件:

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_

android:layout_

tools:cOntext="com.jared.hellojavajs.MainActivity">

android:id="@+id/webview"

android:layout_

android:layout_/>

  接着编写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文件，这里简单的实现个：

JavaJs In Android

  代码比较简单，主要就是实现了三个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