我要评论前言：
最近公司的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这个开源框架。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论