随着前端的火热，以前开发的快速，越来越多的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的实现原理，后续在讲解，也可以下载代码先了解一下。