基本思路,
使用WebView加载一个包含js的本地html,html中包含一个输入框,一个按钮,还有一个Label.
点击html中的按钮,将输入框中的值传给Android 通过toast显示出来,随后,Android调用
html中的Label,将其文本设置为输入值.
以下是html内容:
<html>
<head>
<script type="text/javascript">
function toClient() {
var theinput = document.getElementById("theinput");
javascript:test.dealOrderFromJs(theinput.value);
}
function ClientCallMe(str) {
var label = document.getElementById("fromClient");
label.innerText=str;
}
</script>
</head>
<body>
order:
<input id="theinput" /><br>
<input type="button" value="click me" onclick="toClient();" /> <br>
result from client:
<label id="fromClient"></label>
</body>
</html>将这个html 命名为test.html 并保存在assets文件夹下.
在MainActivity中,定义Android对JS的接口类:
@ViewInject(R.id.tv) //使用xUtils习惯了,其实就是findViewByID ....
public WebView tv;
private Handler mHandler = new Handler();
final class ClientInterface
{
@JavascriptInterface // Android4.2以上版本,需要在接口函数加上这个注解,据说是为了安全
public void dealOrderFromJs(final String order)
{
Toast.makeText(getApplicationContext(), "javascript:ClientCallMe "+order+" "client reviewed")", Toast.LENGTH_SHORT).show(); //显示html中传来的值
mHandler.post(new Runnable() {
@Override
public void run() {
// TODO Auto-generated method stub
tv.loadUrl("javascript:ClientCallMe(""+order+" client reviewed")");//调用JS中的函数给Label设置文本
}
});
}
}在MainActivity的onCreate函数中加入下面初始化语句:
ViewUtils.inject(this);//如果用xUtils,加上这句,或者tv = (WebView)findViewById(R.id.tv);
tv.getSettings().setJavaScriptEnabled(true); //允许webview加载JavaScript
tv.addJavascriptInterface(new ClientInterface(), "test");//添加自定义的接口类
tv.loadUrl("file:///android_asset/test.html"); // 加载本地html, 注意,有三个斜杠至此,一个最简单的交互就展现出来了.
学习Android和JS交互中遇到的问题:
1.由于对JS语言不熟悉, 网上有人先导入了JQuery,然后直接引用控件的id,
例如: var btn = $("#id"), 我由于没有导入JQuery但是却采用了这种形式,
导致出现JS语法问题,虽然apk运行不报错,但是Button点击后,就是没有响应.
2.Android与JS交互练习,点击Button没有响应时,应该仔细检查Js脚本.
3.程序需要访问网络的权限