Android开发学习之路--Java和Js互相调用
2016-11-27 15:20
411 查看
随着前端的火热,以前开发的快速,越来越多的native app在其中融合了h5,就拿淘宝就是很多的h5组成的,一旦出现什么节日,他都可以不用通过更新app来实现界面的改变,而且android和ios可以基本上共用一套代码。这不微信也出了小应用,感觉前端有慢慢吞噬客户端的趋势,所以得学下前端的一些知识了,要不然就落后了。对于本文就是学习下js和android的交互了。
接着编写MainActivity代码:
这里讲一下几个方法:
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的代码。
代码比较简单,主要就是实现了三个function,helloJava没有传入参数,就弹出一个对话框,helloJavaWithParam从java端传过来message,并弹出对话框。helloToJava会调用java端的helloJs方法,并把I’m come from js!传过去。其中的control我们在addJavascriptInterface的时候已经注册了。
很明显,得到了我们需要的结果,如果一个h5的页面需要实现一个按钮,然后调用java代码,启动另一个activity就可以实现native和h5的混编了,这个就之后才做学习了。
也许会有疑问,为什么在load完页面后,调用一段代码”javascript:helloToJava()”,就可以了呢?其实这些都是浏览器的工作,调用完了页面是确保执行了test.html的代码的方法,要不然直接先调用”javascript:helloToJava()”的话会报错的。
学习了通用的实现,也就是调用android的原生的代码,那么接着我们来学习下通过自定义WebChromeClient来实现,也就是jsbridge的简单实现,这里可以参考文章:Android JSBridge的原理与实现。关于Jsbridge的实现原理,后续在讲解,也可以下载代码先了解一下。
源码参考github
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
相关文章推荐
- Android开发学习之路--Java和Js互相调用
- Android开发,Kotlin的了解与学习(八)-----kotlin与java的互相调用
- Android开发,WebView下Java和JavaScript互相调用(2)
- Android WebView js和Java互相调用注意事项
- android 原生与web交互,java与js的互相调用
- Android(java)学习笔记221:开发一个多界面的应用程序之不同界面间互相传递数据(短信助手案例)
- android 开发是 页面JS调用后台java方法
- 【学习Android NDK开发】Java通过JNI调用native方法
- Android学习开发4--Android在C++中调用java
- android js 和java互相调用
- android webView开发之js调用java代码示例
- Android应用开发学习之路I-Java技术篇
- Android(java)学习笔记222:开发一个多界面的应用程序之不同界面间互相传递数据(短信助手案例的优化:请求码和结果码)
- android中java和JS互相调用,Web Console: Uncaught TypeError: Object [object Object] has no method
- 菜鸟学习React Native for Android 之通讯原理分析(JAVA调用JS)
- JS & JAVA(Android) 的互相调用(简介)
- Android开发中WebView与js互相调用
- Android WebView java和js互相调用
- android webview中js与java互相调用
- android之js与java互相调用