现在hybrid app比较火,使用起来也比较方便。
android中通过webView加载显示url,通常会遇到一些问题,比如android和网页界面的交互。比如定位的功能,需要手机提供给js一个经纬度。下面有一个简单交互的例子
public class MainActivity extends Activity {
private WebView webview;
private String URL = "http://192.168.1.224:8080/app/aaa.html";// 这是你要访问你html文件的存放地址,我这个是放在appache中的word文件夹下的login.html文件
private Handler mHandler = new Handler();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webview = (WebView) findViewById(R.id.webView1);
WebSettings webset = webview.getSettings();
webset.setJavaScriptEnabled(true);// 启用JS脚本,这个一定要加上,不然就调用不了,无法交互,因为调用的方法写在js里面
// webset.setUseWideViewPort(true); // 上下自适应屏幕
webset.setLoadWithOverviewMode(true); // 自适应屏幕
webview.setWebChromeClient(new WebChromeClient() {
});
webview.addJavascriptInterface(new JsObject(), "jsObject");
webview.loadUrl(URL);
}
public class JsObject {
@JavascriptInterface
//@JavascriptInterface必须写上,不写上也实现不了交互
//这个方法不是在ui线程中的。可以通过handler.post发送到ui线程执行。可以用Thread.currentThread.getId查看线程的id
public void getMessage(String name, String pwd) {
// TODO Auto-generated method stub
mHandler.post(new Runnable() {
public void run(){
System.out.println("===" + "name:" + name + "---pwd:" + pwd);
Toast.makeText(MainActivity.this, "user="+name+"==pw="+pwd, Toast.LENGTH_SHORT).show();
}
});
}
}
}
html文件代码
<!DOCTYPE html>
<html>
<head>
<script>
function login(){
var th = document.form;
var user = th.user.value;
if(user==""){
alert("请输入用户名!");
}else{
var name = th.user.value;
var pwd = th.pwd.value;
var name2 = jsObject.getMessage(name,pwd);
}
}
</script>
</head>
<body>
<form name='form' method='post' class='form' action=''>
<table id='login_table'>
<tr>
<td>
<span>账号:</sapn>
</td>
<td>
<input type='text' class='usr' name='user' value=''/>
</td>
<td></td>
</tr>
<tr>
<td>
<span>密码:</sapn>
</td>
<td>
<input type='password' class='psw' name='pwd' value=''/>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<input type="file" value="上传图片" />
<button class='denglu' οnclick="login()">登陆</button>
<button class='clear'>清空</button>
</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
可以把上面的html放在tomcat的webapps目录下,也可以直接放在android项目的assets文件夹中,这个时候读取的url就是webview.loadUrl(file:///android_asset/aaa.html);
点击登录的时候,会调用js的login方法,在login方法中先会判断用户名是不是为空,为空就弹出提示,不为空的话就获取输入的用户名和密码,然后再调用android的getmessage(),把用户名和参数的方法传递到android,在手机端就能弹出提示的toast,实现了webView和js的交互。这里是js调用了android中提供的方法
这里只是实现了js调用android的方法,如何实现android调用js的代码
在android需要调用js代码的地方加上一句webview.loadUrl("javascript:setLocation()");
其中的setLocation()方法就是js中的一个function
需要注意的地方:
@JavascriptInterface标致,每个方法都必须加。
webView设置需要加上webset.setJavaScriptEnabled(true);启用js脚本
Android中被js调用的方法不是在ui线程中执行的,可以通过Thread.currentThread.getId()来查看是否在同一个线程中。一些操作需要通过handler.post发送出到ui线程中来才能处理。
通过上面的方法。可以知道,要想获得经纬度的话,先点击一个按钮,通过js调用android中的方法获取经纬度,然后android获取到经纬度之后必须再通知js,告诉他这个经纬度我已经拿到了。也就是在获得经纬度后再调用js中的function方法,在这个function方法中再次调用android中的另一个有返回值的方法来返回这个经纬度给js