前言:

最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App、Web App、Hybrid App三种方式,个人觉得目前以Hybrid App居多,单纯的数据展示我们直接采用WebView来渲染就可以了,但是有时候可能会用到两者之间传递参数的情况,今天就来总结一下两者之间如何互相调用。本篇主要介绍WebView与Javascript交互数据,关于如何将H5网页呈现在WebView上可以参考这篇博客:Android总结之WebView使用总结

混合开发相关博客:

WebView与Javascript交互:

WebView与Javascript交互是双向的数据传递,1.H5网页的JS函数调用Native函数 2.Native函数调用JS函数,具体实现以下面例子为主:

1.)mainfest.xml中加入网络权限

<uses-permission android:name="android.permission.INTERNET"/>

2.)WebView开启支持JavaScript

  mWebView.getSettings().setJavaScriptEnabled(true);  

3.)简单的H5网页实现,主要实现actionFromNative()、actionFromNativeWithParam(String str),放在assets文件下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript">
function actionFromNative(){
document.getElementById("log_msg").innerHTML +=
"<br\>Native调用了js函数";
} function actionFromNativeWithParam(arg){
document.getElementById("log_msg").innerHTML +=
("<br\>Native调用了js函数并传递参数:"+arg);
} </script>
</head>
<body>
<p>WebView与Javascript交互</p>
<div>
<button onClick="window.wx.actionFromJs()">点击调用Native代码</button>
</div>
<br/>
<div>
<button onClick="window.wx.actionFromJsWithParam('come from Js')">点击调用Native代码并传递参数</button>
</div>
<br/>
<div id="log_msg">调用打印信息</div>
</body>
</html>

4.)Native实现与JS交互函数:actionFromJs()、actionFromJsWithParam()

public class MainActivity extends Activity {
private WebView mWebView;
private TextView logTextView; @Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mWebView = (WebView) findViewById(R.id.webview);
// 启用javascript
mWebView.getSettings().setJavaScriptEnabled(true);
// 从assets目录下面的加载html
mWebView.loadUrl("file:///android_asset/wx.html");
mWebView.addJavascriptInterface(this, "wx");
logTextView = (TextView) findViewById(R.id.text);
Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new Button.OnClickListener() {
public void onClick(View v) {
// 无参数调用
mWebView.loadUrl("javascript:actionFromNative()");
// 传递参数调用
mWebView.loadUrl("javascript:actionFromNativeWithParam(" + "'come from Native'" + ")");
}
}); } @android.webkit.JavascriptInterface
public void actionFromJs() {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(MainActivity.this, "js调用了Native函数", Toast.LENGTH_SHORT).show();
String text = logTextView.getText() + "\njs调用了Native函数";
logTextView.setText(text);
}
});
} @android.webkit.JavascriptInterface
public void actionFromJsWithParam(final String str) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(MainActivity.this, "js调用了Native函数传递参数:" + str, Toast.LENGTH_SHORT).show();
String text = logTextView.getText() + "\njs调用了Native函数传递参数:" + str;
logTextView.setText(text);
}
}); }
}

mWebView.addJavascriptInterface(this, "wx");相当于添加一个js回调接口,然后给这个起一个别名,我这里起的名字wx(微信哈哈)。@android.webkit.JavascriptInterface为了解决addJavascriptInterface漏洞的,在4.2以后才有的。

5.)布局文件实现

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/> <TextView android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""/> <Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Native调用js函数"/> </LinearLayout>

6.)代码简单解说

(1.)js(HTML)访问Android(Java)端代码是通过jsObj对象实现的,调用jsObj对象中的函数,如: window.jsObj.actionFromJs(),这里的jsObj就是Native中添加接口的别名

(2.)Android(Java)访问js(HTML)端代码是通过loadUrl函数实现的,访问格式如:mWebView.loadUrl("javascript:actionFromNative()");

demo运行截图:

总结:

这里简单的实现了Js与Native的交互,后期会抽空看下WebViewJavascriptBridge这个开源框架。

 

Android混合开发之WebView与Javascript交互的更多相关文章

  1. Android混合开发之WebView使用总结

    前言: 今天修改项目中一个有关WebView使用的bug,激起了我总结WebView的动机,今天抽空做个总结. 混合开发相关博客: Android混合开发之WebView使用总结 Android混合开 ...

  2. Android混合开发之WebViewJavascriptBridge实现JS与java安全交互

    前言: 为了加快开发效率,目前公司一些功能使用H5开发,这里难免会用到Js与Java函数互相调用的问题,这个Android是提供了原生支持的,不过存在安全隐患,今天我们来学习一种安全方式来满足Js与j ...

  3. Android安全开发之WebView中的地雷

    Android安全开发之WebView中的地雷 0X01 About WebView 在Android开发中,经常会使用WebView来实现WEB页面的展示,在Activiry中启动自己的浏览器,或者 ...

  4. android软件开发之webView.addJavascriptInterface循环渐进【二】

    本篇文章由:http://www.sollyu.com/android-software-development-webview-addjavascriptinterface-cycle-of-gra ...

  5. android软件开发之webView.addJavascriptInterface循环渐进【一】

    本篇文章由:http://www.sollyu.com/android-software-development-webview-addjavascriptinterface-cycle-of-gra ...

  6. android基础开发之WebView

    WebView 是android平台沟通 http & H5 页面的桥梁. 但是google对这块的表述不是很清晰,而且SDK里面基本看不到源码,只有一个接口而已. 传送:http://dev ...

  7. Android安全开发之WebView中的大坑

    0X01 About WebView 在Android开发中,经常会使用WebView来实现WEB页面的展示,在Activiry中启动自己的浏览器,或者简单的展示一些在线内容等.WebView功能强大 ...

  8. Android总结之WebView与Javascript交互[转]

    Android总结之WebView与Javascript交互   前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.We ...

  9. Android安全开发之ZIP文件目录遍历

    1.ZIP文件目录遍历简介 因为ZIP压缩包文件中允许存在“../”的字符串,攻击者可以利用多个“../”在解压时改变ZIP包中某个文件的存放位置,覆盖掉应用原有的文件.如果被覆盖掉的文件是动态链接s ...

随机推荐

  1. 再谈C#采集,一个绕过高强度安全验证的采集方案?方案很Low,慎入

    说起采集,其实我是个外行,以前拔过阿里巴巴的客户数据,在我博客的文章:C#+HtmlAgilityPack+XPath带你采集数据(以采集天气数据为例子) 中,介绍过采集用的工具,其实很Low的,分析 ...

  2. TypeScript Vs2013 下提示Can not compile modules unless '--module' flag is provided

    VS在开发TypeScript程序时候,如果import了模块有的时候会有如下提示: 这种情况下,只需要对当前TypeScript项目生成设置为AMD规范即可!

  3. [.NET] C# 知识回顾 - Event 事件

    C# 知识回顾 - Event 事件 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6060297.html 序 昨天,通过<C# 知识回顾 - ...

  4. CRL快速开发框架系列教程十二(MongoDB支持)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  5. Spring Enable annotation – writing a custom Enable annotation

    原文地址:https://www.javacodegeeks.com/2015/04/spring-enable-annotation-writing-a-custom-enable-annotati ...

  6. 如何定位Oracle数据库被锁阻塞会话的根源

    首先再次明确下,数据库因为要同时保证数据的并发性和一致性,所以操作有锁等待是正常的. 只有那些长时间没有提交或回滚的事物,阻塞了其他业务正常操作,才是需要去定位处理的. 1.单实例环境 2.RAC环境 ...

  7. 免费开源的DotNet任务调度组件Quartz.NET(.NET组件介绍之五)

    很多的软件项目中都会使用到定时任务.定时轮询数据库同步,定时邮件通知等功能..NET Framework具有“内置”定时器功能,通过System.Timers.Timer类.在使用Timer类需要面对 ...

  8. js学习之类型识别

    用来判别类型的方法有好多,整理了一下4种方法,平时用的时候,在不同情景下,还是要结合着使用的. 方法一 typeof:可以识别标准类型,除了Null:不能识别具体的对象类型,除了Function &l ...

  9. interpreter(解释器模式)

    一.引子 其实没有什么好的例子引入解释器模式,因为它描述了如何构成一个简单的语言解释器,主要应用在使用面向对象语言开发编译器中:在实际应用中,我们可能很少碰到去构造一个语言的文法的情况. 虽然你几乎用 ...

  10. VS2015 Git 源码管理工具简单入门

    1.VS Git插件 1.1 环境 VS2015+GitLab 1.2 Git操作过程图解 1.3 常见名词解释 拉取(Pull):将远程版本库合并到本地版本库,相当于(Fetch+Meger) 获取 ...