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

时间:2022-07-02 07:36:33

  随着前端的火热,以前开发的快速,越来越多的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代码弹出土司了,看下效果:

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

  

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

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

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

  

源码参考github