Android与JS代码交互
来源:互联网 发布:董承非 知乎 编辑:程序博客网 时间:2024/04/29 06:24
Android与JS代码交互
现如今,很多Android APP都要与JS进行交互,而WebView就是Android与JS交互的桥梁,日常中最常见Android和JS交互有:APP注册协议,APP里的文章,APP里的活动页,这都是嵌套的H5页面。
Android与JS交互有以下逻辑步骤:
- 创建WebView
- 创建Html文件
- 创建JS文件
- WebView调用JS代码
- JS代码中调用Android代码
1. 创建WebView
创建一个布局文件,布局文件中包含着一个WebView控件:在activity中获得这个这个WebView控件的实例
mWebView = findViewById(getResources().getIdentifier("web_view", "id", getPackageName()));
2. 创建Html文件
在main文件夹下创建assets文件夹,在其中再创建一个js文件夹, js文件夹就是放js代码,html文件可以直接放在assets文件夹下
创建一个test.html的文件,添加如下代码:
<html> <script src="js/jquery-2.2.4.min.js"></script> <script type="text/javascript"> var userAgent = navigator.userAgent || navigator.vendor || window.opera; console.log(userAgent) if(userAgent.match(/Android/i)) { $.getScript("js/android.js") } </script> Java-Javascript Interaction In Android</html>
上面的html中做了两件事情:
第一件事情就是:添加了一个jquery的插件,下载好:jquery-2.2.4.min.js放在assets/js目录下
第二件事情就是:判断当前用户所处的运行环境是不是Android下,如果是Android下,去加载js目录下的android.js文件
3. 创建JS文件
接下来我们就是创建android.js文件,代码如下
$(function(){ document.body.style.webkitTouchCallout='none'; document_loaded();});function document_loaded() { console.log("document loaded"); window.JsObject.documentLoaded();}function sayHello() { alert("Hello") }function sumToJava(number1, number2){ window.JsObject.onSumResult(number1 + number2) }
在android.js文件中,我们定义了两个方法:
一个是sayHello方法,这个方法中,是在h5页面中弹出一个对话框,并且系那是syaHello
一个是sumToJava方法,在这里进行number1+number2运算,并且通过:
window.JsObject.onSumResult(number1 + number2)调用Java代码,这里很关键,后面会着重描述,
4. WebView调用JS代码
在activity中调用loadwebView函数,在函数里面,首先是让webView支持js, 再通过字符流的方式将html文件读出来,利用loadDataWithBaseURL将其加载出来。
最后调用了testMethod函数中的webView.loadUrl()函数
@SuppressLint("JavascriptInterface") private void loadWebView(){ mWebView.getSettings().setJavaScriptEnabled(true); if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN){ mWebView.getSettings().setAllowUniversalAccessFromFileURLs(true); } StringBuilder content = new StringBuilder(); InputStream stream; try { stream = this.getAssets().open("test.html"); BufferedReader reader = new BufferedReader(new InputStreamReader(stream)); String line; while((line = reader.readLine()) != null) { content.append(line); content.append('\n'); } reader.close(); } catch (IOException e) { e.printStackTrace(); } String html = content.toString(); mWebView.addJavascriptInterface(new JsObject(), "JsObject"); mWebView.loadDataWithBaseURL("file:///android_asset/",html,"text/html","utf-8",null); mWebView.setWebChromeClient(new WebChromeClient()); mWebView.setWebViewClient(new WebViewClient(){ @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); testMethod(mWebView); } }); } private void testMethod(WebView webView){ String call = "javascript:sayHello()"; //call = "javascript:sumToJava(1,2)"; webView.loadUrl(call); }
Android调用JS的关键就是通过这两行代码实现的,就是调用了js代码中的sayHello函数
String call = "javascript:sayHello()";webView.loadUrl(call);
这样子就是实现了Java代码与Js代码交互的逻辑,运行就会出现一个弹框,上面写着:Hello
如果是调用js代码中的sumToJava()函数,就直接把下面这行注释给干掉:
call = "javascript:sumToJava(1,2)";
5. JS代码调用Android代码
创建一个Java类
public class JsObject { private final static String TAG = "TAG_JsObject"; @JavascriptInterface public void onSumResult(int result){ Log.d(TAG, "result = " + result); }}
上面在类中添加了一个onSumResult的函数,添加了JavascriptInterface注解, 这个onSumResult()函数就是为js代码提供调用Java代码的接口,那它是怎么使用呢?
就是上面js文件中的sumToJava()函数:
function sumToJava(number1, number2){ window.JsObject.onSumResult(number1 + number2) }
这里的window后面的JsObject,是怎么来的呢,查看webView的配置,看到:
mWebView.addJavascriptInterface(new JsObject(), "JsObject");
对,就是后面的第二个字符串参数,这里是:JsObject,则调用就是:
window.JsObject.onSumResult(number1 + number2)
如果是:JsObject2, 调用就是:
window.JsObject2.onSumResult(number1 + number2)
好了,本文就到这里。
- Android与JS代码交互
- Android java代码与js交互问题
- js与android代码的交互
- android 与 js 交互
- Android与JS交互
- Android 与JS交互
- android与js交互
- android与JS交互
- android与js交互
- Android与js交互
- Android与JS交互
- Android与Js交互
- ANDROID 与JS交互
- Android与JS交互
- Android与js交互
- Android 与 js 交互
- Android与JS交互
- Android与js交互
- 带模板的左偏树
- 关于Xilinx下Micro_Blaze中UartLite232外设的使用
- Transientdataaccessresourceexception
- Struts2中的OGNL详解
- 事件分发机制
- Android与JS代码交互
- 二叉搜索树的节点插入,查找。
- 第十一周项目一:图基本算法库
- 跟着姜少学Java基础编程之十三:面向对象-成员方法
- 【Scikit-Learn 中文文档】特征提取
- ipfs/ipns/搭建安装测试
- nodejs安装总结
- 【Scikit-Learn 中文文档】无监督降维
- 读取.tfrecords格式数据集,进行geture的cnn构建、训练、模型保存